fix: Beautify CSS

Frontend/Pages/Index.razor

@@ -26,7 +26,11 @@
                         }
                     </ListItem>
                 </AntList>
+                <div style="height: 200px; width: 100%; flex: none">
+                    
                 </div>
+            </div>
+            
             <div class="control-zone">
                 <div style="padding: 10px 82px 20px">
                     <div class="input-zone">
@@ -83,5 +87,12 @@
         });
 
         MessageSending = string.Empty;
+
+        _messages.Add(new ChatMessage
+        {
+            Left = true,
+            Sender = "凯瑟琳",
+            Text = "对不起，做不到。"
+        });
     }
 }

Frontend/Pages/Index.razor.css

@@ -8,6 +8,8 @@
     flex-direction: column;
     width: 100%;
     min-height: calc(100vh - 64px);
+    max-height: calc(100vh - 64px);
+    padding: 10px;
     position: relative;
     background: linear-gradient(180deg,
     #f5f4f6,
@@ -17,8 +19,10 @@
 
 .chat-zone {
     min-width: 100%;
-    padding: 20px;
+    display: flex;
+    flex-direction: column;
     position: relative;
+    height: 100%;
     overflow-y: auto;
 }
 
@@ -28,19 +32,7 @@
     position: absolute;
     background-color: #b5bddf;
     display: block;
-}
+    box-shadow: 3px 0 0 #b5bddf;
-
-.control-zone::before {
-    content: "";
-    pointer-events: none;
-    height: 14px;
-    min-width: inherit;
-    top: -14px;
-    display: block;
-    position: absolute;
-    background: linear-gradient(180deg,
-    rgb(187, 193, 223),
-    #b5bddf);
 }
 
 .input-zone {

Frontend/Shared/MainLayout.razor

@@ -6,7 +6,7 @@
             <Space >
                 <SpaceItem>
                     <p class="title-text">
-                        自律型可重编程对话机器人
+                        自律型可重编程客服机器人
                     </p>
                 </SpaceItem>
                 

Frontend/Shared/MessageBubble.razor

@@ -9,13 +9,13 @@
             </SpaceItem>
 
             <SpaceItem>
-                <div class="bubble">
-                    <p style="font-size: 1.1rem">
-                        @Message.Text
-                    </p>
                 <p style="font-size: 0.8rem; color: rgb(128,128,128)">
                     @Message.Sender
                 </p>
+                <div class="bubble-left">
+                    <p class="message-text">
+                        @Message.Text
+                    </p>
                 </div>
             </SpaceItem>
         </Space>
@@ -24,13 +24,15 @@
     {
         <Space Align="start">
             <SpaceItem>
-                <div class="bubble">
+                <div>
-                    <p style="font-size: 1.1rem; align-self: flex-end">
+                    <p style="font-size: 0.8rem; color: rgb(128, 128, 128); text-align: right;">
-                        @Message.Text
-                    </p>
-                    <p style="font-size: 0.8rem; align-self: flex-end; color: rgb(128, 128, 128)">
                         @Message.Sender
                     </p>
+                    <div class="bubble-right">
+                        <p class="message-text">
+                            @Message.Text
+                        </p>
+                    </div>
                 </div>
             </SpaceItem>
 
@@ -50,4 +52,5 @@
         Sender = "default",
         Text = "default"
     };
+
 }

Frontend/Shared/MessageBubble.razor.css

@@ -1,8 +1,24 @@
-.bubble {
+.bubble-left {
     background-color: white;
-    border-radius: 10px;
+    border-radius: 1px 10px 10px 10px;
     padding: 5px;
-    display: flex;
-    flex-direction: column;
     min-width: 80px;
+    max-width: 300px;
+    width: fit-content;
+    justify-content: center;
+}
+
+.bubble-right {
+    background-color: white;
+    border-radius: 10px 1px 10px 10px;
+    padding: 5px;
+    max-width: 300px;
+    width: fit-content;
+    justify-content: center;
+}
+
+.message-text {
+    font-size: 1.1rem;
+    margin: 3px;
+    word-break: break-word;
 }

Frontend/wwwroot/css/site.css

@@ -26,3 +26,7 @@
 .blazor-error-boundary::after {
     content: "An error has occurred."
 }
+
+body {
+    overflow: hidden;
+}