style: chat message render markdown by default

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

@@ -1,5 +1,6 @@
 .content-item {
-  margin-bottom: 12px;
+  margin-bottom: 24px;
+  position: relative;
 
   .markdown-viewer {
     h4 {
@@ -12,10 +13,19 @@
   &-role {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-end;
     font-weight: var(--font-weight-bold);
     margin-bottom: 8px;
     height: 24px;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+
+  .content-item-title {
+    position: absolute;
+    top: 0;
+    left: 0;
   }
 
   .role {
@@ -26,6 +36,15 @@
 
   .actions {
     display: none;
+    border: 1px solid var(--ant-color-border);
+    border-radius: var(--border-radius-base);
+    background-color: var(--color-white-1);
+  }
+
+  .actions-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
   }
 
   .actions .mrkd-switch {
@@ -43,9 +62,6 @@
   &:hover {
     .actions {
       display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      gap: 5px;
     }
   }
 

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

@@ -1,5 +1,4 @@
 .think-wrapper {
-  margin-bottom: 16px;
   color: var(--ant-color-text-tertiary);
 
   .btn-collapse {
@@ -10,10 +9,11 @@
   }
 
   .think-content {
-    white-space: pre-wrap;
+    margin-bottom: 8px;
     padding: 12px;
     border-left: 2px solid var(--ant-color-fill-secondary);
     background-color: var(--ant-color-fill-tertiary);
     color: var(--ant-color-text-tertiary);
+    border-radius: var(--border-radius-base);
   }
 }