Merge pull request #14 from yoziru/add-thinking-block

add thinking block

Author: yoziru

src/components/chat/chat-list.tsx

@@ -7,6 +7,7 @@ import CodeDisplayBlock from "../code-display-block";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Message } from "ai";
+import ThinkBlock from "../think-block";
 
 interface ChatListProps {
   messages: Message[];
@@ -22,6 +23,47 @@ const MessageToolbar = () => (
   </div>
 );
 
+// Utility to process <think> tags
+function processThinkTags(content: string, isLoading: boolean, message: Message | undefined, prevUserMessage: Message | undefined) {
+  const thinkOpen = content.indexOf("<think>");
+  const thinkClose = content.indexOf("</think>");
+
+  // If <think> is present and </think> is not, show live thinking content
+  if (thinkOpen !== -1 && thinkClose === -1) {
+    // Show everything before <think>, then the ThinkBlock component with live mode
+    const before = content.slice(0, thinkOpen);
+    const thinkContent = content.slice(thinkOpen + 7); // everything after <think>
+    return [
+      before,
+      <ThinkBlock key="live-think" content={thinkContent.trim()} live={true} />,
+    ];
+  }
+
+  // If both <think> and </think> are present, show collapsible block
+  if (thinkOpen !== -1 && thinkClose !== -1) {
+    const before = content.slice(0, thinkOpen);
+    const thinkContent = content.slice(thinkOpen + 7, thinkClose);
+    const after = content.slice(thinkClose + 8);
+    // Calculate duration if timestamps are available
+    let duration;
+    if (message?.createdAt && prevUserMessage?.createdAt) {
+      const start = new Date(prevUserMessage.createdAt).getTime();
+      const end = new Date(message.createdAt).getTime();
+      if (!isNaN(start) && !isNaN(end) && end > start) {
+        duration = ((end - start) / 1000).toFixed(2) + " seconds";
+      }
+    }
+    return [
+      before,
+      <ThinkBlock key="collapsible-think" content={thinkContent.trim()} duration={duration} />,
+      after,
+    ];
+  }
+
+  // No <think> tag, return as is
+  return [content];
+}
+
 export default function ChatList({ messages, isLoading }: ChatListProps) {
   const bottomRef = useRef<HTMLDivElement>(null);
 
@@ -102,10 +144,17 @@ export default function ChatList({ messages, isLoading }: ChatListProps) {
                         {/* Check if the message content contains a code block */}
                         {message.content.split("```").map((part, index) => {
                           if (index % 2 === 0) {
-                            return (
-                              <Markdown key={index} remarkPlugins={[remarkGfm]}>
-                                {part}
-                              </Markdown>
+                            // Find previous user message
+                            const prevUserMessage = messages.slice(0, messages.indexOf(message)).reverse().find(m => m.role === "user");
+                            // Process <think> tags before rendering Markdown
+                            return processThinkTags(part, isLoading, message, prevUserMessage).map((segment, segIdx) =>
+                              typeof segment === "string" ? (
+                                <Markdown key={index + "-" + segIdx} remarkPlugins={[remarkGfm]}>
+                                  {segment}
+                                </Markdown>
+                              ) : (
+                                segment // This is the <Thinking /> component
+                              )
                             );
                           } else {
                             return (

src/components/think-block.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef, useState } from "react";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+interface ThinkBlockProps {
+  content: string;
+  live?: boolean;
+  duration?: string;
+}
+
+export default function ThinkBlock({ content, live = false, duration }: ThinkBlockProps) {
+  // Live timer state
+  const [seconds, setSeconds] = useState(0);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  // Collapsible state
+  const [open, setOpen] = useState(live ? true : false);
+
+  useEffect(() => {
+    if (live) {
+      intervalRef.current = setInterval(() => {
+        setSeconds((s) => +(s + 0.1).toFixed(2));
+      }, 100);
+      return () => {
+        if (intervalRef.current) clearInterval(intervalRef.current);
+      };
+    }
+  }, [live]);
+
+  // Always open in live mode, collapsible in non-live mode
+  const isOpen = live ? true : open;
+
+  return (
+    <div className={"my-4 rounded-xl border border-dashed border-blue-400 bg-background/50"}>
+      <div className="flex items-center px-4 pt-2 pb-1 select-none">
+        {/* Chevron (button for collapsible, static for live) */}
+        {live ? (
+          <span className="mr-2 inline-block transition-transform rotate-0" style={{ width: 20, height: 20 }}>
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M7 8l3 3 3-3" stroke="#60a5fa" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+          </span>
+        ) : (
+          <button
+            className="mr-2 flex items-center justify-center focus:outline-none transition-transform"
+            onClick={() => setOpen((o) => !o)}
+            aria-expanded={open}
+            style={{ height: 24, width: 24 }}
+          >
+            <span
+              className={`inline-block transition-transform duration-200 ${open ? "rotate-0" : "-rotate-90"}`}
+              style={{ display: "flex", alignItems: "center", justifyContent: "center", height: 20, width: 20 }}
+            >
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M7 8l3 3 3-3" stroke="#60a5fa" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </span>
+          </button>
+        )}
+        {/* Label */}
+        <span className="text-blue-400 font-medium text-sm mr-3">Thoughts</span>
+        {/* Header */}
+        {live ? (
+          <span className="italic text-sm text-muted-foreground flex items-center gap-2">
+            Thinking for {seconds.toFixed(2)} seconds
+            <span className="ml-1 inline-block align-middle">
+              <span className="w-4 h-4 border-2 border-blue-300 border-t-transparent rounded-full inline-block animate-spin"></span>
+            </span>
+          </span>
+        ) : (
+          <span className="italic text-sm text-muted-foreground">
+            {duration ? `Thought for ${duration}` : "Thought"}
+          </span>
+        )}
+      </div>
+      {isOpen && (
+        <div className="px-6 pb-4 pt-1 text-sm text-muted-foreground">
+          <Markdown remarkPlugins={[remarkGfm]}>{content}</Markdown>
+        </div>
+      )}
+    </div>
+  );
+}