Merge pull request #116 from OpenAgentPlatform/think

feat: add style for <think>

Author: johnfunmula

Diff for: src/styles/pages/_Chat.scss

@@ -535,12 +535,12 @@
           }
         }
       }
-      
+
       pre {
         margin: 0;
         padding: 12px;
         overflow-x: auto;
-        
+
         code {
           font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
           font-size: 14px;
@@ -957,4 +957,10 @@
   margin: 0.5em 0;
   background: rgba(255, 77, 79, 0.1);
   border-radius: 6px;
-} 
+}
+
+.think {
+  padding: 1em;
+  margin: 0.5em 0;
+  color: var(--text-weak);
+}

Diff for: src/views/Chat/Message.tsx

@@ -24,6 +24,9 @@ declare global {
         children: any
         name: string
       };
+      "think": {
+        children: any
+      };
     }
   }
 }
@@ -138,7 +141,13 @@ const Message = ({ messageId, text, isSent, files, isError, isLoading, onRetry,
           inlineMathDouble: false
         }], remarkGfm]}
         rehypePlugins={[rehypeKatex, rehypeRaw]}
+        remarkRehypeOptions={{
+          allowDangerousHtml: true
+        }}
         components={{
+          "think"({ children }) {
+            return <div className="think">{children}</div>
+          },
           "tool-call"({children, name}) {
             let content = children
             if (typeof children !== "string") {
@@ -243,7 +252,7 @@ const Message = ({ messageId, text, isSent, files, isError, isLoading, onRetry,
           }
         }}
       >
-        {_text.replaceAll("file://", "https://localfile")}
+        {_text.replaceAll("file://", "https://localfile").replaceAll("</think>\n\n", "\n\n</think>\n\n")}
       </ReactMarkdown>
     )
   }, [content, text, isSent, isLoading])