refactor: playground add comparsion

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

@@ -4,14 +4,62 @@
   &-role {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     font-weight: var(--font-weight-bold);
     margin-bottom: 8px;
+    height: 24px;
+  }
+
+  .role {
+    position: relative;
+    cursor: pointer;
+    padding: 2px 4px;
+    border-radius: var(--border-radius-mini);
+
+    &:hover {
+      background-color: var(--ant-color-fill-secondary);
+    }
+  }
+
+  .actions {
+    display: none;
+  }
+
+  &:hover {
+    .actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 5px;
+    }
   }
 
   &-content {
     word-break: break-word;
     padding: 8px;
+    min-height: 38px;
     border-radius: var(--border-radius-mini);
     background-color: var(--ant-color-fill-tertiary);
   }
+
+  .message-content-input {
+    flex: 1;
+    cursor: pointer;
+
+    &.has-img {
+      border: 1px solid var(--ant-color-fill-secondary);
+      border-radius: var(--border-radius-base);
+      overflow: hidden;
+
+      .ant-input {
+        border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
+        border-color: transparent;
+        background-color: transparent;
+      }
+
+      &:focus-within {
+        border-color: var(--ant-color-primary);
+      }
+    }
+  }
 }

src/pages/playground/style/custom-label.less

@@ -7,9 +7,9 @@
   :global(.label-val) {
     position: absolute;
     top: -14px;
-    right: 2px;
+    right: -14px;
     width: 80px;
-    border-radius: 8px;
+    border-radius: var(--border-radius-base);
     text-align: center;
     border: 1px solid var(--ant-color-border) !important;
 

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

@@ -1,13 +1,51 @@
-.ground-left {
+.ground-left-wrapper {
   display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  position: relative;
-  height: calc(100vh - 72px);
 
-  .message-list-wrap {
-    max-height: calc(100vh - 152px);
+  .params-wrapper {
+    overflow-x: hidden;
+    width: 390px;
+    border-left: 1px solid var(--ant-color-split);
+    transition: width 0.3s ease;
+    height: calc(100vh - 72px);
     overflow-y: auto;
-    padding-inline: var(--layout-content-inlinepadding);
+
+    .box {
+      width: 390px;
+      padding-inline: var(--layout-content-inlinepadding);
+    }
+
+    &.collapsed {
+      width: 0;
+      overflow: hidden;
+      transition: width 0.3s ease;
+      border-left: none;
+
+      .box {
+        width: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .ground-left {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    position: relative;
+    height: calc(100vh - 72px);
+
+    .message-list-wrap {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      padding-inline: var(--layout-content-inlinepadding);
+      overflow-y: auto;
+
+      .content {
+        flex: 1;
+      }
+    }
   }
 }

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

@@ -14,7 +14,7 @@
 .messageInput {
   position: relative;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   flex-direction: column;
   justify-content: space-between;
   width: 100%;

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

@@ -20,7 +20,7 @@
       text-align: left;
       width: 100px;
       background-color: var(--ant-button-text-hover-bg);
-      height: 54px;
+      height: 46px;
     }
   }
 

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

@@ -14,42 +14,6 @@
     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/sys-message.less

@@ -0,0 +1,35 @@
+.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: 38px;
+    line-height: 18px;
+    padding: 10px 14px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}