thinking UI

components/chat-sidebar.tsx

@@ -243,7 +243,7 @@ export function ChatSidebar() {
                     </div>
                 </div>
                 
-                <SidebarGroup className="flex-shrink-0">
+                <SidebarGroup className="flex-shrink-0 ">
                     <SidebarGroupLabel className={cn(
                         "px-4 pt-0 text-xs font-medium text-muted-foreground/80 uppercase tracking-wider",
                         isCollapsed ? "sr-only" : ""

components/message.tsx

@@ -21,6 +21,109 @@ interface ReasoningMessagePartProps {
   isReasoning: boolean;
 }
 
+interface ThinkingPart {
+  type: "thinking";
+  thinking: string;
+  details: Array<{ type: "text"; text: string }>;
+}
+
+interface ThinkingMessagePartProps {
+  part: ThinkingPart;
+  isThinking: boolean;
+}
+
+export function ThinkingMessagePart({
+  part,
+  isThinking,
+}: ThinkingMessagePartProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const memoizedSetIsExpanded = useCallback((value: boolean) => {
+    setIsExpanded(value);
+  }, []);
+
+  useEffect(() => {
+    memoizedSetIsExpanded(isThinking);
+  }, [isThinking, memoizedSetIsExpanded]);
+
+  return (
+    <div className="flex flex-col mb-2 group">
+      {isThinking ? (
+        <div className={cn(
+          "flex items-center gap-2.5 rounded-full py-1.5 px-3",
+          "bg-primary/10 text-primary",
+          "border border-primary/20 w-fit"
+        )}>
+          <div className="animate-spin h-3.5 w-3.5">
+            <SpinnerIcon />
+          </div>
+          <div className="text-xs font-medium tracking-tight">Thinking...</div>
+        </div>
+      ) : (
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className={cn(
+            "flex items-center justify-between w-full",
+            "rounded-md py-2 px-3 mb-0.5",
+            "bg-muted/50 border border-border/60 hover:border-border/80",
+            "transition-all duration-150 cursor-pointer",
+            isExpanded ? "bg-muted border-primary/20" : ""
+          )}
+        >
+          <div className="flex items-center gap-2.5">
+            <div className={cn(
+              "flex items-center justify-center w-6 h-6 rounded-full",
+              "bg-primary/10",
+              "text-primary ring-1 ring-primary/20",
+            )}>
+              <BrainIcon className="h-3.5 w-3.5" />
+            </div>
+            <div className="text-sm font-medium text-foreground flex items-center gap-1.5">
+              Thinking
+              <span className="text-xs text-muted-foreground font-normal">
+                (click to {isExpanded ? "hide" : "view"})
+              </span>
+            </div>
+          </div>
+          <div className={cn(
+            "flex items-center justify-center",
+            "rounded-full p-0.5 w-5 h-5",
+            "text-muted-foreground hover:text-foreground",
+            "bg-background/80 border border-border/50",
+            "transition-colors",
+          )}>
+            {isExpanded ? (
+              <ChevronDownIcon className="h-3 w-3" />
+            ) : (
+              <ChevronUpIcon className="h-3 w-3" />
+            )}
+          </div>
+        </button>
+      )}
+
+      {isExpanded && (
+        <div
+          className={cn(
+            "text-sm text-muted-foreground flex flex-col gap-2",
+            "pl-3.5 ml-0.5 mt-1",
+            "border-l border-primary/30"
+          )}
+        >
+          {part.details.map((detail, detailIndex) =>
+            detail.type === "text" ? (
+              <div key={detailIndex} className="px-2 py-1.5 bg-muted/10 rounded-md border border-border/30">
+                <Markdown>{detail.text}</Markdown>
+              </div>
+            ) : (
+              "<redacted>"
+            ),
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function ReasoningMessagePart({
   part,
   isReasoning,
@@ -130,8 +233,8 @@ const PurePreviewMessage = ({
   const getMessageText = () => {
     if (!message.parts) return "";
     return message.parts
-      .filter(part => part.type === "text")
-      .map(part => (part.type === "text" ? part.text : ""))
+      .filter((part: { type: string; }) => part.type === "text")
+      .map((part: { type: string; text: any; }) => (part.type === "text" ? part.text : ""))
       .join("\n\n");
   };
 
@@ -153,57 +256,46 @@ const PurePreviewMessage = ({
         )}
       >
         <div className="flex flex-col w-full space-y-3">
-          {message.parts?.map((part, i) => {
-            switch (part.type) {
-              case "text":
-                return (
-                  <div
-                    key={`message-${message.id}-part-${i}`}
-                    className="flex flex-row gap-2 items-start w-full"
-                  >
+          {message.content &&
+            message.content
+              .split(/(<think>[\s\S]*?(?:<\/think>|$))/g)
+              .map((part: string, i: number) => {
+                if (part.startsWith("<think>")) {
+                  const isClosed = part.endsWith("</think>");
+                  const thinkingContent = part.slice(
+                    7,
+                    isClosed ? -8 : undefined,
+                  );
+                  return (
+                    <ThinkingMessagePart
+                      key={`message-${message.id}-part-${i}`}
+                      part={{
+                        type: "thinking",
+                        thinking: thinkingContent,
+                        details: [{ type: "text", text: thinkingContent }],
+                      }}
+                      isThinking={status === "streaming" && !isClosed}
+                    />
+                  );
+                } else if (part.trim()) {
+                  return (
                     <div
-                      className={cn("flex flex-col gap-3 w-full", {
-                        "bg-secondary text-secondary-foreground px-4 py-1.5 rounded-2xl":
-                          message.role === "user",
-                      })}
+                      key={`message-${message.id}-part-${i}`}
+                      className="flex flex-row gap-2 items-start w-full"
                     >
-                      <Markdown>{part.text}</Markdown>
+                      <div
+                        className={cn("flex flex-col gap-3 w-full", {
+                          "bg-secondary text-secondary-foreground px-4 py-1.5 rounded-2xl":
+                            message.role === "user",
+                        })}
+                      >
+                        <Markdown>{part}</Markdown>
+                      </div>
                     </div>
-                  </div>
-                );
-              case "tool-invocation":
-                const { toolName, state, args } = part.toolInvocation;
-                const result = 'result' in part.toolInvocation ? part.toolInvocation.result : null;
-                
-                return (
-                  <ToolInvocation
-                    key={`message-${message.id}-part-${i}`}
-                    toolName={toolName}
-                    state={state}
-                    args={args}
-                    result={result}
-                    isLatestMessage={isLatestMessage}
-                    status={status}
-                  />
-                );
-              case "reasoning":
-                return (
-                  <ReasoningMessagePart
-                    key={`message-${message.id}-${i}`}
-                    // @ts-expect-error part
-                    part={part}
-                    isReasoning={
-                      (message.parts &&
-                        status === "streaming" &&
-                        i === message.parts.length - 1) ??
-                      false
-                    }
-                  />
-                );
-              default:
+                  );
+                }
                 return null;
-            }
-          })}
+              })}
           {shouldShowCopyButton && (
             <div className="flex justify-start mt-2">
               <CopyButton text={getMessageText()} />

lib/chat-store.ts

@@ -1,5 +1,13 @@
 import { db } from "./db";
-import { chats, messages, type Chat, type Message, MessageRole, type MessagePart, type DBMessage } from "./db/schema";
+import {
+  chats,
+  messages,
+  type Chat,
+  type Message,
+  MessageRole,
+  type MessagePart,
+  type DBMessage,
+} from "./db/schema";
 import { eq, desc, and } from "drizzle-orm";
 import { nanoid } from "nanoid";
 import { generateTitle } from "@/app/actions";
@@ -38,28 +46,29 @@ export async function saveMessages({
   try {
     if (dbMessages.length > 0) {
       const chatId = dbMessages[0].chatId;
-      
+
       // First delete any existing messages for this chat
-      await db
-        .delete(messages)
-        .where(eq(messages.chatId, chatId));
-      
+      await db.delete(messages).where(eq(messages.chatId, chatId));
+
       // Then insert the new messages
       return await db.insert(messages).values(dbMessages);
     }
     return null;
   } catch (error) {
-    console.error('Failed to save messages in database', error);
+    console.error("Failed to save messages in database", error);
     throw error;
   }
 }
 
 // Function to convert AI messages to DB format
-export function convertToDBMessages(aiMessages: AIMessage[], chatId: string): DBMessage[] {
-  return aiMessages.map(msg => {
+export function convertToDBMessages(
+  aiMessages: AIMessage[],
+  chatId: string
+): DBMessage[] {
+  return aiMessages.map((msg) => {
     // Use existing id or generate a new one
     const messageId = msg.id || nanoid();
-    
+
     // If msg has parts, use them directly
     if (msg.parts) {
       return {
@@ -67,40 +76,77 @@ export function convertToDBMessages(aiMessages: AIMessage[], chatId: string): DB
         chatId,
         role: msg.role,
         parts: msg.parts,
-        createdAt: new Date()
+        createdAt: new Date(),
       };
     }
-    
+
     // Otherwise, convert content to parts
     let parts: MessagePart[];
-    
-    if (typeof msg.content === 'string') {
-      parts = [{ type: 'text', text: msg.content }];
+
+    if (typeof msg.content === "string") {
+      const thinkRegex = /<think>([\s\S]*?)<\/think>/g;
+      const content = msg.content;
+      parts = [];
+      let lastIndex = 0;
+      let match;
+
+      while ((match = thinkRegex.exec(content)) !== null) {
+        // Add text part before the think tag
+        if (match.index > lastIndex) {
+          parts.push({
+            type: "text",
+            text: content.substring(lastIndex, match.index),
+          });
+        }
+
+        // Add the thinking part
+        parts.push({
+          type: "thinking",
+          thinking: match[1],
+          details: [{ type: "text", text: match[1] }],
+        });
+
+        lastIndex = thinkRegex.lastIndex;
+      }
+
+      // Add any remaining text part
+      if (lastIndex < content.length) {
+        parts.push({ type: "text", text: content.substring(lastIndex) });
+      }
+
+      // If no thinking tags were found, treat the whole content as a single text part
+      if (parts.length === 0) {
+        parts.push({ type: "text", text: content });
+      }
     } else if (Array.isArray(msg.content)) {
-      if (msg.content.every(item => typeof item === 'object' && item !== null)) {
+      if (
+        msg.content.every((item) => typeof item === "object" && item !== null)
+      ) {
         // Content is already in parts-like format
         parts = msg.content as MessagePart[];
       } else {
         // Content is an array but not in parts format
-        parts = [{ type: 'text', text: JSON.stringify(msg.content) }];
+        parts = [{ type: "text", text: JSON.stringify(msg.content) }];
       }
     } else {
       // Default case
-      parts = [{ type: 'text', text: String(msg.content) }];
+      parts = [{ type: "text", text: String(msg.content) }];
     }
-    
+
     return {
       id: messageId,
       chatId,
       role: msg.role,
       parts,
-      createdAt: new Date()
+      createdAt: new Date(),
     };
   });
 }
 
 // Convert DB messages to UI format
-export function convertToUIMessages(dbMessages: Array<Message>): Array<UIMessage> {
+export function convertToUIMessages(
+  dbMessages: Array<Message>
+): Array<UIMessage> {
   return dbMessages.map((message) => ({
     id: message.id,
     parts: message.parts as MessagePart[],
@@ -110,108 +156,115 @@ export function convertToUIMessages(dbMessages: Array<Message>): Array<UIMessage
   }));
 }
 
-export async function saveChat({ id, userId, messages: aiMessages, title }: SaveChatParams) {
+export async function saveChat({
+  id,
+  userId,
+  messages: aiMessages,
+  title,
+}: SaveChatParams) {
   // Generate a new ID if one wasn't provided
   const chatId = id || nanoid();
-  
+
   // Check if title is provided, if not generate one
   let chatTitle = title;
-  
+
   // Generate title if messages are provided and no title is specified
   if (aiMessages && aiMessages.length > 0) {
-    const hasEnoughMessages = aiMessages.length >= 2 && 
-      aiMessages.some(m => m.role === 'user') && 
-      aiMessages.some(m => m.role === 'assistant');
-    
-    if (!chatTitle || chatTitle === 'New Chat' || chatTitle === undefined) {
+    const hasEnoughMessages =
+      aiMessages.length >= 2 &&
+      aiMessages.some((m) => m.role === "user") &&
+      aiMessages.some((m) => m.role === "assistant");
+
+    if (!chatTitle || chatTitle === "New Chat" || chatTitle === undefined) {
       if (hasEnoughMessages) {
         try {
           // Use AI to generate a meaningful title based on conversation
           chatTitle = await generateTitle(aiMessages);
         } catch (error) {
-          console.error('Error generating title:', error);
+          console.error("Error generating title:", error);
           // Fallback to basic title extraction if AI title generation fails
-          const firstUserMessage = aiMessages.find(m => m.role === 'user');
+          const firstUserMessage = aiMessages.find((m) => m.role === "user");
           if (firstUserMessage) {
             // Check for parts first (new format)
-            if (firstUserMessage.parts && Array.isArray(firstUserMessage.parts)) {
-              const textParts = firstUserMessage.parts.filter((p: MessagePart) => p.type === 'text' && p.text);
+            if (
+              firstUserMessage.parts &&
+              Array.isArray(firstUserMessage.parts)
+            ) {
+              const textParts = firstUserMessage.parts.filter(
+                (p: MessagePart) => p.type === "text" && p.text
+              );
               if (textParts.length > 0) {
-                chatTitle = textParts[0].text?.slice(0, 50) || 'New Chat';
+                chatTitle = textParts[0].text?.slice(0, 50) || "New Chat";
                 if ((textParts[0].text?.length || 0) > 50) {
-                  chatTitle += '...';
+                  chatTitle += "...";
                 }
               } else {
-                chatTitle = 'New Chat';
+                chatTitle = "New Chat";
               }
-            } 
+            }
             // Fallback to content (old format)
-            else if (typeof firstUserMessage.content === 'string') {
+            else if (typeof firstUserMessage.content === "string") {
               chatTitle = firstUserMessage.content.slice(0, 50);
               if (firstUserMessage.content.length > 50) {
-                chatTitle += '...';
+                chatTitle += "...";
               }
             } else {
-              chatTitle = 'New Chat';
+              chatTitle = "New Chat";
             }
           } else {
-            chatTitle = 'New Chat';
+            chatTitle = "New Chat";
           }
         }
       } else {
         // Not enough messages for AI title, use first message
-        const firstUserMessage = aiMessages.find(m => m.role === 'user');
+        const firstUserMessage = aiMessages.find((m) => m.role === "user");
         if (firstUserMessage) {
           // Check for parts first (new format)
           if (firstUserMessage.parts && Array.isArray(firstUserMessage.parts)) {
-            const textParts = firstUserMessage.parts.filter((p: MessagePart) => p.type === 'text' && p.text);
+            const textParts = firstUserMessage.parts.filter(
+              (p: MessagePart) => p.type === "text" && p.text
+            );
             if (textParts.length > 0) {
-              chatTitle = textParts[0].text?.slice(0, 50) || 'New Chat';
+              chatTitle = textParts[0].text?.slice(0, 50) || "New Chat";
               if ((textParts[0].text?.length || 0) > 50) {
-                chatTitle += '...';
+                chatTitle += "...";
               }
             } else {
-              chatTitle = 'New Chat';
+              chatTitle = "New Chat";
             }
           }
           // Fallback to content (old format)
-          else if (typeof firstUserMessage.content === 'string') {
+          else if (typeof firstUserMessage.content === "string") {
             chatTitle = firstUserMessage.content.slice(0, 50);
             if (firstUserMessage.content.length > 50) {
-              chatTitle += '...';
+              chatTitle += "...";
             }
           } else {
-            chatTitle = 'New Chat';
+            chatTitle = "New Chat";
           }
         } else {
-          chatTitle = 'New Chat';
+          chatTitle = "New Chat";
         }
       }
     }
   } else {
-    chatTitle = chatTitle || 'New Chat';
+    chatTitle = chatTitle || "New Chat";
   }
 
   // Check if chat already exists
   const existingChat = await db.query.chats.findFirst({
-    where: and(
-      eq(chats.id, chatId),
-      eq(chats.userId, userId)
-    ),
+    where: and(eq(chats.id, chatId), eq(chats.userId, userId)),
   });
 
   if (existingChat) {
     // Update existing chat
     await db
       .update(chats)
-      .set({ 
+      .set({
         title: chatTitle,
-        updatedAt: new Date() 
+        updatedAt: new Date(),
       })
-      .where(and(
-        eq(chats.id, chatId),
-        eq(chats.userId, userId)
-      ));
+      .where(and(eq(chats.id, chatId), eq(chats.userId, userId)));
   } else {
     // Create new chat
     await db.insert(chats).values({
@@ -219,7 +272,7 @@ export async function saveChat({ id, userId, messages: aiMessages, title }: Save
       userId,
       title: chatTitle,
       createdAt: new Date(),
-      updatedAt: new Date()
+      updatedAt: new Date(),
     });
   }
 
@@ -231,48 +284,43 @@ export function getTextContent(message: Message): string {
   try {
     const parts = message.parts as MessagePart[];
     return parts
-      .filter(part => part.type === 'text' && part.text)
-      .map(part => part.text)
-      .join('\n');
+      .filter((part) => part.type === "text" && part.text)
+      .map((part) => part.text)
+      .join("\n");
   } catch (e) {
     // If parsing fails, return empty string
-    return '';
+    return "";
   }
 }
 
 export async function getChats(userId: string) {
   return await db.query.chats.findMany({
     where: eq(chats.userId, userId),
-    orderBy: [desc(chats.updatedAt)]
+    orderBy: [desc(chats.updatedAt)],
   });
 }
 
-export async function getChatById(id: string, userId: string): Promise<ChatWithMessages | null> {
+export async function getChatById(
+  id: string,
+  userId: string
+): Promise<ChatWithMessages | null> {
   const chat = await db.query.chats.findFirst({
-    where: and(
-      eq(chats.id, id),
-      eq(chats.userId, userId)
-    ),
+    where: and(eq(chats.id, id), eq(chats.userId, userId)),
   });
 
   if (!chat) return null;
 
   const chatMessages = await db.query.messages.findMany({
     where: eq(messages.chatId, id),
-    orderBy: [messages.createdAt]
+    orderBy: [messages.createdAt],
   });
 
   return {
     ...chat,
-    messages: chatMessages
+    messages: chatMessages,
   };
 }
 
 export async function deleteChat(id: string, userId: string) {
-  await db.delete(chats).where(
-    and(
-      eq(chats.id, id),
-      eq(chats.userId, userId)
-    )
-  );
-} 
+  await db.delete(chats).where(and(eq(chats.id, id), eq(chats.userId, userId)));
+}

lib/openai-stream.ts

@@ -1,8 +1,3 @@
-import {
-  createParser,
-  type ParsedEvent,
-  type ReconnectInterval,
-} from "eventsource-parser";
 import type { ChatCompletionChunk } from "openai/resources";
 
 export function createOpenAIStream(