From 5c6ebecdb5ac74427fb2ea2322b9e7760c51cff8 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Mon, 17 Mar 2025 19:50:42 -0300
Subject: [PATCH] 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>
---
 .../chatMessage/components/edit-message.tsx   | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx
index ef0e31158..b5826d4a0 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx
+++ b/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>