refactor: playground chat

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

@@ -1,6 +1,6 @@
 .chat-footer {
-  display: flex;
-  align-items: center;
+  // display: flex;
+  // align-items: center;
   padding-block: 10px;
   padding-right: 32px;
 }

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

@@ -3,11 +3,11 @@
   justify-content: space-between;
   flex-direction: column;
   position: relative;
-  height: calc(100vh - 136px);
+  height: calc(100vh - 72px);
 
   .message-list-wrap {
     max-height: calc(100vh - 152px);
     overflow-y: auto;
-    padding-right: 32px;
+    padding-inline: var(--layout-content-inlinepadding);
   }
 }

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

@@ -33,25 +33,10 @@
     .actions {
       display: flex;
       align-items: center;
-      gap: 5px;
+      gap: 10px;
     }
   }
 
-  &: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-inline: 6px 0;
     padding-block: 0;

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

@@ -14,6 +14,42 @@
     border-bottom: 1px solid var(--ant-color-border);
   }
 
+  .sys-message {
+    position: relative;
+  }
+
+  .sys-content-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--ant-color-fill-tertiary);
+    padding-right: 20px;
+    cursor: pointer;
+
+    &:hover {
+      .clear-btn {
+        display: block;
+      }
+    }
+  }
+
+  .clear-btn {
+    display: none;
+    position: absolute;
+    right: 6px;
+    top: 6px;
+  }
+
+  .sys-content {
+    height: 36px;
+    line-height: 20px;
+    padding: 8px 14px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
   .content {
     flex: 1;
     padding: 16px;

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

@@ -36,7 +36,7 @@
 
   .params {
     overflow: hidden;
-    height: calc(100vh - 136px);
+    height: calc(100vh - 72px);
 
     .collapse {
       width: 0;
@@ -50,6 +50,7 @@
     width: 390px;
     overflow-y: auto;
     overflow-x: hidden;
+    border-left: 1px solid var(--ant-color-split);
 
     &.collapse {
       padding-inline: 0;
@@ -73,7 +74,8 @@
 
 .playground-container {
   .ant-pro-page-container-children-container {
-    padding-right: 0;
+    padding-inline: 0;
+    padding-block: 0;
   }
 
   &.compare {

src/pages/playground/style/prompt-modal.less

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+  padding: var(--ant-modal-content-padding);
 
   .title {
     display: flex;
@@ -10,6 +11,7 @@
 
     .text {
       font-weight: var(--font-weight-bold);
+      font-size: var(--font-size-base);
     }
   }