Feat: Write the thinking style in the MarkdownContent layer #4930 (#5091)

### What problem does this PR solve?

Feat: Write the thinking style in the MarkdownContent layer #4930

### Type of change


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

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

@@ -20,13 +20,6 @@
     & > p {
       margin: 0;
     }
-    :global(section.think) {
-      padding-left: 10px;
-      color: #8b8b8b;
-      border-left: 2px solid #d5d3d3;
-      margin-bottom: 10px;
-      font-size: 12px;
-    }
   }
   .messageText {
     .chunkText();

web/src/pages/chat/markdown-content/index.less

@@ -1,3 +1,13 @@
+.markdownContentWrapper {
+  :global(section.think) {
+    padding-left: 10px;
+    color: #8b8b8b;
+    border-left: 2px solid #d5d3d3;
+    margin-bottom: 10px;
+    font-size: 12px;
+  }
+}
+
 .referencePopoverWrapper {
   max-width: 50vw;
 }

web/src/pages/chat/markdown-content/index.tsx

@@ -52,7 +52,7 @@ const MarkdownContent = ({
     }
     const nextText = replaceTextByOldReg(text);
     return loading
-      ? nextText?.concat('~~2$$')
+      ? nextText?.concat('~~2$$') // TODO: The style of thinking also needs to be displayed when outputting
       : pipe(replaceThinkToSection, preprocessLaTeX)(nextText);
   }, [content, loading, t]);
 
@@ -186,6 +186,7 @@ const MarkdownContent = ({
     <Markdown
       rehypePlugins={[rehypeWrapReference, rehypeKatex, rehypeRaw]}
       remarkPlugins={[remarkGfm, remarkMath]}
+      className={styles.markdownContentWrapper}
       components={
         {
           'custom-typography': ({ children }: { children: string }) =>

web/src/utils/chat.ts

@@ -50,7 +50,7 @@ export const preprocessLaTeX = (content: string) => {
   return inlineProcessedContent;
 };
 
-export function replaceThinkToSection(text: string) {
+export function replaceThinkToSection(text: string = '') {
   const pattern = /<think>([\s\S]*?)<\/think>/g;
 
   const result = text.replace(pattern, '<section class="think">$1</section>');