added compact mode

packages/app/src/components/LiveChat/index.jsx

@@ -336,23 +336,34 @@ export default class LiveChat extends React.Component {
         return <div
             className={classnames(
                 "liveChat",
-                { ["empty"]: this.state.timeline.length === 0 }
+                {
+                    ["empty"]: this.state.timeline.length === 0,
+                    ["compact"]: this.props.compact
+                }
             )}
         >
             {
-                this.state.timeline.length === 0 ?
+                !this.props.compact && this.state.timeline.length === 0 && <antd.Empty description="Welcome to the room" />
-                    <antd.Empty description="Welcome to the room" /> :
+            }
-                    <div
+
-                        className="liveChat_timeline"
+            {
-                        ref={this.timelineRef}
+                this.props.compact && this.state.timeline.length === 0 && <p>
-                        id="liveChat_timeline"
+                    Welcome to the room
-                    >
+                </p>
-                        {
+            }
-                            this.state.timeline.map((line, index) => {
+
-                                return <Line key={index} {...line} />
+            {
-                            })
+                this.state.timeline.length !== 0 && <div
-                        }
+                    className="liveChat_timeline"
-                    </div>
+                    ref={this.timelineRef}
+                    id="liveChat_timeline"
+                >
+                    {
+                        this.state.timeline.map((line, index) => {
+                            return <Line key={index} {...line} />
+                        })
+                    }
+                </div>
             }
 
             <div className="liveChat_textInput">

packages/app/src/components/LiveChat/index.less

@@ -9,9 +9,53 @@
 
     overflow: hidden;
 
+    transition: all 250ms ease-in-out;
+
     &.empty {
         justify-content: center;
         align-items: center;
+
+        &.compact {
+            height: 5vh!important;
+        }
+    }
+    
+    &.compact {
+        height: 15vh;
+
+        justify-content: flex-end;
+
+        .liveChat_timeline {
+            position: relative;
+
+            display: flex;
+            flex-direction: column;
+
+            padding: 0;
+            margin: 0;
+
+            margin-bottom: 10px;
+
+            gap: 5px;
+
+            .textRoom_line {
+                padding: 0;
+                margin: 0;
+
+                h4 {
+                    font-size: 0.8rem;
+                }
+            }
+        }
+
+        .liveChat_textInput {
+            position: relative;
+
+            bottom: 0;
+            left: 0;
+
+            margin-bottom: 0;
+        }
     }
 
     &.floating {