From ff237f2dbccc8426a091f8b9f8df1b853f04c7d3 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 13 Feb 2025 15:59:42 +0800
Subject: [PATCH] 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    | 18 ++++++++++++------
 web/src/pages/chat/markdown-content/index.tsx |  7 +++++--
 web/src/utils/chat.ts                         |  8 ++++++++
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/web/src/components/message-item/index.less b/web/src/components/message-item/index.less
index a2d037cea..6ecb903aa 100644
--- a/web/src/components/message-item/index.less
+++ b/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 {
diff --git a/web/src/pages/chat/markdown-content/index.tsx b/web/src/pages/chat/markdown-content/index.tsx
index cd0ce3586..1069b41ad 100644
--- a/web/src/pages/chat/markdown-content/index.tsx
+++ b/web/src/pages/chat/markdown-content/index.tsx
@@ -20,9 +20,10 @@ import { useTranslation } from 'react-i18next';
 
 import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you
 
-import { preprocessLaTeX } from '@/utils/chat';
+import { preprocessLaTeX, replaceThinkToSection } from '@/utils/chat';
 import { replaceTextByOldReg } from '../utils';
 
+import { pipe } from 'lodash/fp';
 import styles from './index.less';
 
 const reg = /(~{2}\d+={2})/g;
@@ -50,7 +51,9 @@ const MarkdownContent = ({
       text = t('chat.searching');
     }
     const nextText = replaceTextByOldReg(text);
-    return loading ? nextText?.concat('~~2$$') : preprocessLaTeX(nextText);
+    return loading
+      ? nextText?.concat('~~2$$')
+      : pipe(replaceThinkToSection, preprocessLaTeX)(nextText);
   }, [content, loading, t]);
 
   useEffect(() => {
diff --git a/web/src/utils/chat.ts b/web/src/utils/chat.ts
index d8f956d2f..b4cfd86ea 100644
--- a/web/src/utils/chat.ts
+++ b/web/src/utils/chat.ts
@@ -49,3 +49,11 @@ export const preprocessLaTeX = (content: string) => {
   );
   return inlineProcessedContent;
 };
+
+export function replaceThinkToSection(text: string) {
+  const pattern = /<think>([\s\S]*?)<\/think>/g;
+
+  const result = text.replace(pattern, '<section class="think">$1</section>');
+
+  return result;
+}