fix: submit message

src/pages/playground/style/message-input.less

@@ -2,6 +2,7 @@
   padding-block: 20px;
   padding-bottom: 30px;
   border: none;
+
   .ant-pro-footer-bar-right {
     width: 100%;
     display: flex;
@@ -9,36 +10,54 @@
     align-items: center;
   }
 }
+
 .messageInput {
   position: relative;
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: max(50%, 500px);
-  background-color: var(--color-fill-1);
-  border-radius: 30px;
-  padding-right: 50px;
-  border: 1px solid transparent;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  padding-inline: 16px 16px;
+  padding-bottom: 10px;
+  border-top: 1px solid var(--ant-color-split);
   transition: all 0.2s ease;
-  &:focus-within {
-    border-color: var(--ant-input-active-border-color);
-    box-shadow: var(--ant-input-active-shadow);
-    background-color: var(--color-white-1);
-    transition: all 0.2s ease;
-    &:hover {
-      background-color: var(--color-white-1);
+
+  .tool-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 40px;
+    width: 100%;
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: 5px;
     }
   }
 
-  &:hover {
-    background: var(--ant-color-fill-secondary);
-    transition: background 0.2s ease;
+  &:focus-within {
+    // border-color: var(--ant-input-active-border-color);
+    // box-shadow: var(--ant-input-active-shadow);
+    // background-color: var(--color-white-1);
+    // transition: all 0.2s ease;
+    // &:hover {
+    //   background-color: var(--color-white-1);
+    // }
   }
+
+  &:hover {
+    // background: var(--ant-color-fill-secondary);
+    // transition: background 0.2s ease;
+  }
+
   textarea {
-    padding: 16px;
-    border-radius: 30px;
+    padding-inline: 6px 0;
+    padding-block: 0;
     background-color: transparent;
   }
+
   textarea::-webkit-scrollbar {
     width: 8px;
   }
@@ -51,13 +70,17 @@
     background-color: #d9d9d9;
     border-radius: 6px;
   }
+
   .send-btn {
-    position: absolute;
-    right: 10px;
-    bottom: 11px;
     display: flex;
     justify-content: center;
     align-items: center;
     transform: rotate(-30deg);
   }
+
+  .ant-select-selector {
+    .ant-select-selection-overflow {
+      justify-content: flex-end;
+    }
+  }
 }

src/pages/playground/style/model-item.less

@@ -0,0 +1,21 @@
+.model-item {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ant-color-border);
+  border-radius: var(--border-radius-base);
+  height: 100%;
+
+  .header {
+    padding-inline: 2px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 46px;
+    border-bottom: 1px solid var(--ant-color-border);
+  }
+
+  .content {
+    flex: 1;
+    padding: 16px;
+  }
+}

src/pages/playground/style/multiple-chat.less

@@ -0,0 +1,12 @@
+.multiple-chat {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100vh - 72px);
+
+  .chat-list {
+    flex: 1;
+    padding-bottom: 16px;
+    padding-inline: var(--layout-content-inlinepadding);
+  }
+}

src/pages/playground/style/play-ground.less

@@ -2,6 +2,10 @@
   display: flex;
   align-items: flex-start;
 
+  .ant-tabs-nav {
+    display: none;
+  }
+
   .left {
     position: relative;
     display: flex;
@@ -71,4 +75,11 @@
   .ant-pro-page-container-children-container {
     padding-right: 0;
   }
+
+  &.compare {
+    .ant-pro-page-container-children-container {
+      padding-inline: 0;
+      padding-block: 0;
+    }
+  }
 }