fix: adds handling for <think> tags (#7109)

* Adds handling for <think> tags

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx

@@ -13,12 +13,23 @@ type MarkdownFieldProps = {
   editedFlag: React.ReactNode;
 };
 
+// Function to replace <think> tags with a placeholder before markdown processing
+const preprocessChatMessage = (text: string): string => {
+  // Replace <think> tags with `<span class="think-tag">think:</span>`
+  return text
+    .replace(/<think>/g, "`<think>`")
+    .replace(/<\/think>/g, "`</think>`");
+};
+
 export const MarkdownField = ({
   chat,
   isEmpty,
   chatMessage,
   editedFlag,
 }: MarkdownFieldProps) => {
+  // Process the chat message to handle <think> tags
+  const processedChatMessage = preprocessChatMessage(chatMessage);
+
   return (
     <div className="w-full items-baseline gap-2">
       <Markdown
@@ -56,6 +67,11 @@ export const MarkdownField = ({
                 if (content[0] === "▍") {
                   return <span className="form-modal-markdown-span"></span>;
                 }
+
+                // Specifically handle <think> tags that were wrapped in backticks
+                if (content === "<think>" || content === "</think>") {
+                  return <span>{content}</span>;
+                }
               }
 
               const match = /language-(\w+)/.exec(className || "");
@@ -74,7 +90,9 @@ export const MarkdownField = ({
           },
         }}
       >
-        {isEmpty && !chat.stream_url ? EMPTY_OUTPUT_SEND_MESSAGE : chatMessage}
+        {isEmpty && !chat.stream_url
+          ? EMPTY_OUTPUT_SEND_MESSAGE
+          : processedChatMessage}
       </Markdown>
       {editedFlag}
     </div>