From f8557c78d55eef0e7f0221fa92d1d5e709af8f16 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 4 Feb 2025 14:54:21 +0700
Subject: [PATCH] fix: think content render as markdown (#4564)

* fix: think content render as markdown

* chore: fix linter issue failed on CI
---
 .../ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx   | 2 +-
 .../Thread/ThreadCenterPanel/TextMessage/ThinkingBlock.tsx  | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
index f0a23e416..a112d7614 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
@@ -19,7 +19,7 @@ import { useClipboard } from '@/hooks/useClipboard'
 import { getLanguageFromExtension } from '@/utils/codeLanguageExtension'
 
 export const MarkdownTextMessage = memo(
-  ({ text, isUser }: { id: string; text: string; isUser: boolean }) => {
+  ({ text, isUser }: { id?: string; text: string; isUser?: boolean }) => {
     const clipboard = useClipboard({ timeout: 1000 })
 
     // Escapes headings
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/ThinkingBlock.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/ThinkingBlock.tsx
index 59ff720c8..bda541b68 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/ThinkingBlock.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/ThinkingBlock.tsx
@@ -3,6 +3,8 @@ import React from 'react'
 import { atom, useAtom } from 'jotai'
 import { ChevronDown, ChevronUp, Loader } from 'lucide-react'
 
+import { MarkdownTextMessage } from './MarkdownTextMessage'
+
 interface Props {
   text: string
   status: string
@@ -48,7 +50,9 @@ const ThinkingBlock = ({ id, text, status }: Props) => {
 
         {isExpanded && (
           <div className="mt-2 pl-6 text-[hsla(var(--text-secondary))]">
-            {text.replace(/<\/?think>/g, '').trim()}
+            <MarkdownTextMessage
+              text={text.replace(/<\/?think>/g, '').trim()}
+            />
           </div>
         )}
       </div>