Feat: Display Think for Deepseek R1 model #4903 (#4930)

### What problem does this PR solve?

Feat: Display Think for Deepseek R1 model #4903

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/components/message-item/index.less

@@ -13,18 +13,20 @@
   .messageItemContentReverse {
     flex-direction: row-reverse;
   }
-  .messageText {
-    .chunkText();
-    padding: 0 14px;
-    background-color: rgba(249, 250, 251, 1);
-    word-break: break-word;
-  }
+
   .messageTextBase() {
     padding: 6px 10px;
     border-radius: 8px;
     & > p {
       margin: 0;
     }
+    :global(section.think) {
+      padding-left: 10px;
+      color: #8b8b8b;
+      border-left: 2px solid #d5d3d3;
+      margin-bottom: 10px;
+      font-size: 12px;
+    }
   }
   .messageText {
     .chunkText();
@@ -37,6 +39,10 @@
     .messageTextBase();
     background-color: #1668dc;
     word-break: break-word;
+    :global(section.think) {
+      color: rgb(166, 166, 166);
+      border-left-color: rgb(78, 78, 86);
+    }
   }
 
   .messageUserText {