ui updates and added anthropic models for testing

ai/providers.ts

@@ -1,9 +1,8 @@
-import { xai } from "@ai-sdk/xai";
 import { openai } from "@ai-sdk/openai";
 import { google } from "@ai-sdk/google";
 import { groq } from "@ai-sdk/groq";
 import { customProvider, wrapLanguageModel, extractReasoningMiddleware } from "ai";
-import { cohere } from "@ai-sdk/cohere";
+import { anthropic } from "@ai-sdk/anthropic";
 export interface ModelInfo {
   provider: string;
   name: string;
@@ -14,35 +13,41 @@ export interface ModelInfo {
 
 const middleware = extractReasoningMiddleware({
   tagName: 'think',
-  separator: '\n',
 });
 
 const languageModels = {
+  "gemini-2.5-flash": google("gemini-2.5-flash-preview-04-17"),
   "gpt-4.1-mini": openai("gpt-4.1-mini"),
-  "gemini-2-flash": google("gemini-2.0-flash-001"),
+  "claude-3-7-sonnet": anthropic('claude-3-7-sonnet-20250219'),
   "qwen-qwq": wrapLanguageModel(
     {
-      model: groq("qwen-qwq-32b"), 
+      model: groq("qwen-qwq-32b"),
       middleware
     }
   ),
-  "command-a": cohere('command-a-03-2025')
 };
 
 export const modelDetails: Record<keyof typeof languageModels, ModelInfo> = {
+  "gemini-2.5-flash": {
+    provider: "Google",
+    name: "Gemini 2.5 Flash",
+    description: "Latest version of Google's Gemini 2.5 Flash with strong reasoning and coding capabilities.",
+    apiVersion: "gemini-2.5-flash-preview-04-17",
+    capabilities: ["Balance", "Efficient", "Agentic"]
+  },
   "gpt-4.1-mini": {
     provider: "OpenAI",
     name: "GPT-4.1 Mini",
     description: "Compact version of OpenAI's GPT-4.1 with good balance of capabilities, including vision.",
     apiVersion: "gpt-4.1-mini",
-    capabilities: [ "Balance", "Creative", "Vision"]
+    capabilities: ["Balance", "Creative", "Vision"]
   },
-  "gemini-2-flash": {
-    provider: "Google",
-    name: "Gemini 2 Flash",
-    description: "Latest version of Google's Gemini 2 with strong reasoning and coding capabilities.",
-    apiVersion: "gemini-2-flash",
-    capabilities: ["Balance", "Efficient", "Agentic"]
+  "claude-3-7-sonnet": {
+    provider: "Anthropic",
+    name: "Claude 3.7 Sonnet",
+    description: "Latest version of Anthropic's Claude 3.7 Sonnet with strong reasoning and coding capabilities.",
+    apiVersion: "claude-3-7-sonnet-20250219",
+    capabilities: ["Reasoning", "Efficient", "Agentic"]
   },
   "qwen-qwq": {
     provider: "Groq",
@@ -51,13 +56,6 @@ export const modelDetails: Record<keyof typeof languageModels, ModelInfo> = {
     apiVersion: "qwen-qwq",
     capabilities: ["Reasoning", "Efficient", "Agentic"]
   },
-  "command-a": {
-    provider: "Cohere",
-    name: "Command A",
-    description: "Latest version of Cohere's Command A with strong reasoning and coding capabilities.",
-    apiVersion: "command-a-03-2025",
-    capabilities: ["Smart", "Fast", "Reasoning"]
-  }
 };
 
 export const model = customProvider({

ai/tools.ts

@@ -1,11 +0,0 @@
-import { VercelAIToolSet } from "composio-core";
-
-const toolset = new VercelAIToolSet();
-
-export const composioTools = await toolset.getTools(
-  { 
-    apps: [
-      "tavily",
-    ]
-  }
-);

app/api/chat/route.ts

@@ -113,8 +113,17 @@ export async function POST(req: Request) {
           });
         }
 
+        // Check for uvx pattern and transform to python3 -m uv run
+        if (mcpServer.command === 'uvx') {
+          console.log("Detected uvx pattern, transforming to python3 -m uv run");
+          mcpServer.command = 'python3';
+          // Get the tool name (first argument)
+          const toolName = mcpServer.args[0];
+          // Replace args with the new pattern
+          mcpServer.args = ['-m', 'uv', 'run', toolName, ...mcpServer.args.slice(1)];
+        }
         // if python is passed in the command, install the python package mentioned in args after -m with subprocess or use regex to find the package name
-        if (mcpServer.command.includes('python3')) {
+        else if (mcpServer.command.includes('python3')) {
           const packageName = mcpServer.args[mcpServer.args.indexOf('-m') + 1];
           console.log("installing python package", packageName);
           const subprocess = spawn('pip3', ['install', packageName]);
@@ -195,6 +204,19 @@ export async function POST(req: Request) {
     messages,
     tools,
     maxSteps: 20,
+    providerOptions: {
+      google: {
+        thinkingConfig: {
+          thinkingBudget: 0,
+        },
+      },
+      anthropic: {
+        thinking: { 
+          type: 'enabled', 
+          budgetTokens: 12000 
+        },
+      } 
+    },
     onError: (error) => {
       console.error(JSON.stringify(error, null, 2));
     },

components/chat-sidebar.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { useRouter, usePathname } from "next/navigation";
-import { MessageSquare, PlusCircle, Trash2, ServerIcon, Settings, Loader2, Sparkles, ChevronsUpDown, UserIcon, Copy, Pencil, Github } from "lucide-react";
+import { MessageSquare, PlusCircle, Trash2, ServerIcon, Settings, Sparkles, ChevronsUpDown, Copy, Pencil, Github } from "lucide-react";
 import {
     Sidebar,
     SidebarContent,
@@ -25,8 +25,6 @@ import Image from "next/image";
 import { MCPServerManager } from "./mcp-server-manager";
 import { ThemeToggle } from "./theme-toggle";
 import { getUserId, updateUserId } from "@/lib/user-id";
-import { useLocalStorage } from "@/lib/hooks/use-local-storage";
-import { STORAGE_KEYS } from "@/lib/constants";
 import { useChats } from "@/lib/hooks/use-chats";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
@@ -51,6 +49,8 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useMCP } from "@/lib/context/mcp-context";
+import { Skeleton } from "@/components/ui/skeleton";
+import { AnimatePresence, motion } from "motion/react";
 
 export function ChatSidebar() {
     const router = useRouter();
@@ -115,6 +115,23 @@ export function ChatSidebar() {
         return null; // Or a loading spinner
     }
 
+    // Create chat loading skeletons
+    const renderChatSkeletons = () => {
+        return Array(3).fill(0).map((_, index) => (
+            <SidebarMenuItem key={`skeleton-${index}`}>
+                <div className={`flex items-center gap-2 px-3 py-2 ${isCollapsed ? "justify-center" : ""}`}>
+                    <Skeleton className="h-4 w-4 rounded-full" />
+                    {!isCollapsed && (
+                        <>
+                            <Skeleton className="h-4 w-full max-w-[180px]" />
+                            <Skeleton className="h-5 w-5 ml-auto rounded-md flex-shrink-0" />
+                        </>
+                    )}
+                </div>
+            </SidebarMenuItem>
+        ));
+    };
+
     return (
         <Sidebar className="shadow-sm bg-background/80 dark:bg-background/40 backdrop-blur-md" collapsible="icon">
             <SidebarHeader className="p-4 border-b border-border/40">
@@ -144,12 +161,7 @@ export function ChatSidebar() {
                     )}>
                         <SidebarMenu>
                             {isLoading ? (
-                                <div className={`flex items-center justify-center py-4 ${isCollapsed ? "" : "px-4"}`}>
-                                    <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-                                    {!isCollapsed && (
-                                        <span className="ml-2 text-xs text-muted-foreground">Loading...</span>
-                                    )}
-                                </div>
+                                renderChatSkeletons()
                             ) : chats.length === 0 ? (
                                 <div className={`flex items-center justify-center py-3 ${isCollapsed ? "" : "px-4"}`}>
                                     {isCollapsed ? (
@@ -164,50 +176,60 @@ export function ChatSidebar() {
                                     )}
                                 </div>
                             ) : (
-                                chats.map((chat) => (
-                                    <SidebarMenuItem key={chat.id}>
-                                        <SidebarMenuButton 
-                                            asChild
-                                            tooltip={isCollapsed ? chat.title : undefined}
-                                            data-active={pathname === `/chat/${chat.id}`}
-                                            className={cn(
-                                                "transition-all hover:bg-primary/10 active:bg-primary/15",
-                                                pathname === `/chat/${chat.id}` ? "bg-secondary/60 hover:bg-secondary/60" : ""
-                                            )}
+                                <AnimatePresence initial={false}>
+                                    {chats.map((chat) => (
+                                        <motion.div
+                                            key={chat.id}
+                                            initial={{ opacity: 0, height: 0, y: -10 }}
+                                            animate={{ opacity: 1, height: "auto", y: 0 }}
+                                            exit={{ opacity: 0, height: 0 }}
+                                            transition={{ duration: 0.2 }}
                                         >
-                                            <Link
-                                                href={`/chat/${chat.id}`}
-                                                className="flex items-center justify-between w-full gap-1"
-                                            >
-                                                <div className="flex items-center min-w-0 overflow-hidden flex-1 pr-2">
-                                                    <MessageSquare className={cn(
-                                                        "h-4 w-4 flex-shrink-0",
-                                                        pathname === `/chat/${chat.id}` ? "text-foreground" : "text-muted-foreground"
-                                                    )} />
-                                                    {!isCollapsed && (
-                                                        <span className={cn(
-                                                            "ml-2 truncate text-sm",
-                                                            pathname === `/chat/${chat.id}` ? "text-foreground font-medium" : "text-foreground/80"
-                                                        )} title={chat.title}>
-                                                            {chat.title.length > 18 ? `${chat.title.slice(0, 18)}...` : chat.title}
-                                                        </span>
+                                            <SidebarMenuItem>
+                                                <SidebarMenuButton 
+                                                    asChild
+                                                    tooltip={isCollapsed ? chat.title : undefined}
+                                                    data-active={pathname === `/chat/${chat.id}`}
+                                                    className={cn(
+                                                        "transition-all hover:bg-primary/10 active:bg-primary/15",
+                                                        pathname === `/chat/${chat.id}` ? "bg-secondary/60 hover:bg-secondary/60" : ""
                                                     )}
-                                                </div>
-                                                {!isCollapsed && (
-                                                    <Button
-                                                        variant="ghost"
-                                                        size="icon"
-                                                        className="h-6 w-6 text-muted-foreground hover:text-foreground flex-shrink-0"
-                                                        onClick={(e) => handleDeleteChat(chat.id, e)}
-                                                        title="Delete chat"
+                                                >
+                                                    <Link
+                                                        href={`/chat/${chat.id}`}
+                                                        className="flex items-center justify-between w-full gap-1"
                                                     >
-                                                        <Trash2 className="h-3.5 w-3.5" />
-                                                    </Button>
-                                                )}
-                                            </Link>
-                                        </SidebarMenuButton>
-                                    </SidebarMenuItem>
-                                ))
+                                                        <div className="flex items-center min-w-0 overflow-hidden flex-1 pr-2">
+                                                            <MessageSquare className={cn(
+                                                                "h-4 w-4 flex-shrink-0",
+                                                                pathname === `/chat/${chat.id}` ? "text-foreground" : "text-muted-foreground"
+                                                            )} />
+                                                            {!isCollapsed && (
+                                                                <span className={cn(
+                                                                    "ml-2 truncate text-sm",
+                                                                    pathname === `/chat/${chat.id}` ? "text-foreground font-medium" : "text-foreground/80"
+                                                                )} title={chat.title}>
+                                                                    {chat.title.length > 18 ? `${chat.title.slice(0, 18)}...` : chat.title}
+                                                                </span>
+                                                            )}
+                                                        </div>
+                                                        {!isCollapsed && (
+                                                            <Button
+                                                                variant="ghost"
+                                                                size="icon"
+                                                                className="h-6 w-6 text-muted-foreground hover:text-foreground flex-shrink-0"
+                                                                onClick={(e) => handleDeleteChat(chat.id, e)}
+                                                                title="Delete chat"
+                                                            >
+                                                                <Trash2 className="h-3.5 w-3.5" />
+                                                            </Button>
+                                                        )}
+                                                    </Link>
+                                                </SidebarMenuButton>
+                                            </SidebarMenuItem>
+                                        </motion.div>
+                                    ))}
+                                </AnimatePresence>
                             )}
                         </SidebarMenu>
                     </SidebarGroupContent>
@@ -265,18 +287,23 @@ export function ChatSidebar() {
             
             <SidebarFooter className="p-4 border-t border-border/40 mt-auto">
                 <div className={`flex flex-col ${isCollapsed ? "items-center" : ""} gap-3`}>
-                    <Button
-                        variant="default"
-                        className={cn(
-                            "w-full bg-primary text-primary-foreground hover:bg-primary/90",
-                            isCollapsed ? "w-8 h-8 p-0" : ""
-                        )}
-                        onClick={handleNewChat}
-                        title={isCollapsed ? "New Chat" : undefined}
+                    <motion.div
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
                     >
-                        <PlusCircle className={`${isCollapsed ? "" : "mr-2"} h-4 w-4`} />
-                        {!isCollapsed && <span>New Chat</span>}
-                    </Button>
+                        <Button
+                            variant="default"
+                            className={cn(
+                                "w-full bg-primary text-primary-foreground hover:bg-primary/90",
+                                isCollapsed ? "w-8 h-8 p-0" : ""
+                            )}
+                            onClick={handleNewChat}
+                            title={isCollapsed ? "New Chat" : undefined}
+                        >
+                            <PlusCircle className={`${isCollapsed ? "" : "mr-2"} h-4 w-4`} />
+                            {!isCollapsed && <span>New Chat</span>}
+                        </Button>
+                    </motion.div>
                     
                     <DropdownMenu modal={false}>
                         <DropdownMenuTrigger asChild>

components/markdown.tsx

@@ -7,7 +7,7 @@ import { cn } from "@/lib/utils";
 
 const components: Partial<Components> = {
   pre: ({ children, ...props }) => (
-    <pre className="overflow-x-auto rounded-lg bg-zinc-100 dark:bg-zinc-800/50 p-4 my-2 text-sm" {...props}>
+    <pre className="overflow-x-auto rounded-lg bg-zinc-100 dark:bg-zinc-800/50 black:bg-zinc-800/50 p-2.5 my-1.5 text-sm" {...props}>
       {children}
     </pre>
   ),
@@ -18,7 +18,7 @@ const components: Partial<Components> = {
     if (isInline) {
       return (
         <code
-          className="px-1.5 py-0.5 rounded-md bg-zinc-100 dark:bg-zinc-800/50 text-zinc-700 dark:text-zinc-300 text-[0.9em] font-mono"
+          className="px-1 py-0.5 rounded-md bg-zinc-100 dark:bg-zinc-800/50 black:bg-zinc-800/50 text-zinc-700 dark:text-zinc-300 black:text-zinc-300 text-[0.9em] font-mono"
           {...props}
         >
           {children}
@@ -32,22 +32,22 @@ const components: Partial<Components> = {
     );
   },
   ol: ({ node, children, ...props }) => (
-    <ol className="list-decimal list-outside ml-4 space-y-1 my-2" {...props}>
+    <ol className="list-decimal list-outside ml-4 space-y-0.5 my-1.5" {...props}>
       {children}
     </ol>
   ),
   ul: ({ node, children, ...props }) => (
-    <ul className="list-disc list-outside ml-4 space-y-1 my-2" {...props}>
+    <ul className="list-disc list-outside ml-4 space-y-0.5 my-1.5" {...props}>
       {children}
     </ul>
   ),
   li: ({ node, children, ...props }) => (
-    <li className="leading-relaxed" {...props}>
+    <li className="leading-normal" {...props}>
       {children}
     </li>
   ),
   p: ({ node, children, ...props }) => (
-    <p className="leading-7" {...props}>
+    <p className="leading-relaxed my-1" {...props}>
       {children}
     </p>
   ),
@@ -63,7 +63,7 @@ const components: Partial<Components> = {
   ),
   blockquote: ({ node, children, ...props }) => (
     <blockquote
-      className="border-l-2 border-zinc-200 dark:border-zinc-700 pl-4 my-3 italic text-zinc-600 dark:text-zinc-400"
+      className="border-l-2 border-zinc-200 dark:border-zinc-700 black:border-zinc-700 pl-3 my-1.5 italic text-zinc-600 dark:text-zinc-400 black:text-zinc-400"
       {...props}
     >
       {children}
@@ -72,7 +72,7 @@ const components: Partial<Components> = {
   a: ({ node, children, ...props }) => (
     // @ts-expect-error error
     <Link
-      className="text-blue-500 hover:underline hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
+      className="text-blue-500 hover:underline hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 black:text-blue-400 black:hover:text-blue-300 transition-colors"
       target="_blank"
       rel="noreferrer"
       {...props}
@@ -81,72 +81,72 @@ const components: Partial<Components> = {
     </Link>
   ),
   h1: ({ node, children, ...props }) => (
-    <h1 className="text-3xl font-semibold mt-6 mb-4 text-zinc-800 dark:text-zinc-200" {...props}>
+    <h1 className="text-2xl font-semibold mt-3 mb-1.5 text-zinc-800 dark:text-zinc-200 black:text-zinc-200" {...props}>
       {children}
     </h1>
   ),
   h2: ({ node, children, ...props }) => (
-    <h2 className="text-2xl font-semibold mt-6 mb-3 text-zinc-800 dark:text-zinc-200" {...props}>
+    <h2 className="text-xl font-semibold mt-2.5 mb-1.5 text-zinc-800 dark:text-zinc-200 black:text-zinc-200" {...props}>
       {children}
     </h2>
   ),
   h3: ({ node, children, ...props }) => (
-    <h3 className="text-xl font-semibold mt-6 mb-3 text-zinc-800 dark:text-zinc-200" {...props}>
+    <h3 className="text-lg font-semibold mt-2 mb-1 text-zinc-800 dark:text-zinc-200 black:text-zinc-200" {...props}>
       {children}
     </h3>
   ),
   h4: ({ node, children, ...props }) => (
-    <h4 className="text-lg font-semibold mt-6 mb-2 text-zinc-800 dark:text-zinc-200" {...props}>
+    <h4 className="text-base font-semibold mt-2 mb-1 text-zinc-800 dark:text-zinc-200 black:text-zinc-200" {...props}>
       {children}
     </h4>
   ),
   h5: ({ node, children, ...props }) => (
-    <h5 className="text-base font-semibold mt-6 mb-2 text-zinc-800 dark:text-zinc-200" {...props}>
+    <h5 className="text-sm font-semibold mt-2 mb-1 text-zinc-800 dark:text-zinc-200 black:text-zinc-200" {...props}>
       {children}
     </h5>
   ),
   h6: ({ node, children, ...props }) => (
-    <h6 className="text-sm font-semibold mt-6 mb-2 text-zinc-800 dark:text-zinc-200" {...props}>
+    <h6 className="text-xs font-semibold mt-2 mb-0.5 text-zinc-800 dark:text-zinc-200 black:text-zinc-200" {...props}>
       {children}
     </h6>
   ),
   table: ({ node, children, ...props }) => (
-    <div className="my-4 overflow-x-auto">
-      <table className="min-w-full divide-y divide-zinc-200 dark:divide-zinc-700" {...props}>
+    <div className="my-1.5 overflow-x-auto">
+      <table className="min-w-full divide-y divide-zinc-200 dark:divide-zinc-700 black:divide-zinc-700" {...props}>
         {children}
       </table>
     </div>
   ),
   thead: ({ node, children, ...props }) => (
-    <thead className="bg-zinc-50 dark:bg-zinc-800/50" {...props}>
+    <thead className="bg-zinc-50 dark:bg-zinc-800/50 black:bg-zinc-800/50" {...props}>
       {children}
     </thead>
   ),
   tbody: ({ node, children, ...props }) => (
-    <tbody className="divide-y divide-zinc-200 dark:divide-zinc-700 bg-white dark:bg-transparent" {...props}>
+    <tbody className="divide-y divide-zinc-200 dark:divide-zinc-700 black:divide-zinc-700 bg-white dark:bg-transparent black:bg-transparent" {...props}>
       {children}
     </tbody>
   ),
   tr: ({ node, children, ...props }) => (
-    <tr className="transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/30" {...props}>
+    <tr className="transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/30 black:hover:bg-zinc-800/30" {...props}>
       {children}
     </tr>
   ),
   th: ({ node, children, ...props }) => (
     <th
-      className="px-4 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider"
+      className="px-3 py-1.5 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 black:text-zinc-400 uppercase tracking-wider"
       {...props}
     >
       {children}
     </th>
   ),
   td: ({ node, children, ...props }) => (
-    <td className="px-4 py-3 text-sm" {...props}>
+    <td className="px-3 py-1.5 text-sm" {...props}>
       {children}
     </td>
   ),
   hr: ({ node, ...props }) => (
-    <hr className="my-4 border-zinc-200 dark:border-zinc-700" {...props} />
+    <hr className="my-1.5 border-zinc-200 dark:border-zinc-700 black:border-zinc-700" {...props} />
   ),
 };
 

components/message.tsx

@@ -6,7 +6,7 @@ import { memo, useCallback, useEffect, useState } from "react";
 import equal from "fast-deep-equal";
 import { Markdown } from "./markdown";
 import { cn } from "@/lib/utils";
-import { ChevronDownIcon, ChevronUpIcon, LightbulbIcon } from "lucide-react";
+import { ChevronDownIcon, ChevronUpIcon, LightbulbIcon, BrainIcon } from "lucide-react";
 import { SpinnerIcon } from "./icons";
 import { ToolInvocation } from "./tool-invocation";
 import { CopyButton } from "./copy-button";
@@ -37,51 +37,82 @@ export function ReasoningMessagePart({
   }, [isReasoning, memoizedSetIsExpanded]);
 
   return (
-    <div className="flex flex-col py-1">
+    <div className="flex flex-col mb-2 group">
       {isReasoning ? (
-        <div className="flex items-center gap-2 text-zinc-500 dark:text-zinc-400">
-          <div className="animate-spin">
+        <div className={cn(
+          "flex items-center gap-2.5 rounded-full py-1.5 px-3",
+          "bg-indigo-50/50 dark:bg-indigo-900/10 text-indigo-700 dark:text-indigo-300",
+          "border border-indigo-200/50 dark:border-indigo-700/20 w-fit"
+        )}>
+          <div className="animate-spin h-3.5 w-3.5">
             <SpinnerIcon />
           </div>
-          <div className="text-sm">Thinking...</div>
+          <div className="text-xs font-medium tracking-tight">Thinking...</div>
         </div>
       ) : (
-        <div className="flex items-center gap-2 group">
-          <div className="flex items-center gap-2">
-            <LightbulbIcon className="h-4 w-4 text-zinc-400" />
-            <div className="text-sm text-zinc-600 dark:text-zinc-300">Reasoning</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-amber-50 dark:bg-amber-900/20",
+              "text-amber-600 dark:text-amber-400 ring-1 ring-amber-200 dark:ring-amber-700/30",
+            )}>
+              <LightbulbIcon className="h-3.5 w-3.5" />
+            </div>
+            <div className="text-sm font-medium text-foreground flex items-center gap-1.5">
+              Reasoning
+              <span className="text-xs text-muted-foreground font-normal">
+                (click to {isExpanded ? "hide" : "view"})
+              </span>
+            </div>
           </div>
-          <button
-            className={cn(
-              "cursor-pointer rounded-md p-1 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors opacity-0 group-hover:opacity-100",
-              {
-                "opacity-100 bg-zinc-100 dark:bg-zinc-800": isExpanded,
-              },
-            )}
-            onClick={() => setIsExpanded(!isExpanded)}
-          >
+          <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.5 w-3.5" />
+              <ChevronDownIcon className="h-3 w-3" />
             ) : (
-              <ChevronUpIcon className="h-3.5 w-3.5" />
+              <ChevronUpIcon className="h-3 w-3" />
             )}
-          </button>
-        </div>
+          </div>
+        </button>
       )}
 
       <AnimatePresence initial={false}>
         {isExpanded && (
           <motion.div
             key="reasoning"
-            className="text-sm text-zinc-600 dark:text-zinc-400 flex flex-col gap-3 border-l-2 pl-4 mt-2 border-zinc-200 dark:border-zinc-700 overflow-hidden"
+            className={cn(
+              "text-sm text-muted-foreground flex flex-col gap-2",
+              "pl-3.5 ml-0.5 mt-1",
+              "border-l border-amber-200/50 dark:border-amber-700/30"
+            )}
             initial={{ height: 0, opacity: 0 }}
             animate={{ height: "auto", opacity: 1 }}
             exit={{ height: 0, opacity: 0 }}
             transition={{ duration: 0.2, ease: "easeInOut" }}
           >
+            <div className="text-xs text-muted-foreground/70 pl-1 font-medium">
+              The assistant&apos;s thought process:
+            </div>
             {part.details.map((detail, detailIndex) =>
               detail.type === "text" ? (
-                <Markdown key={detailIndex}>{detail.text}</Markdown>
+                <div key={detailIndex} className="px-2 py-1.5 bg-muted/10 rounded-md border border-border/30">
+                  <Markdown>{detail.text}</Markdown>
+                </div>
               ) : (
                 "<redacted>"
               ),

components/messages.tsx

@@ -11,11 +11,12 @@ export const Messages = ({
   isLoading: boolean;
   status: "error" | "submitted" | "streaming" | "ready";
 }) => {
-  // const [containerRef, endRef] = useScrollToBottom();
+  const [containerRef, endRef] = useScrollToBottom();
+  
   return (
     <div
       className="h-full overflow-y-auto no-scrollbar"
-      // ref={containerRef}
+      ref={containerRef}
     >
       <div className="max-w-lg sm:max-w-3xl mx-auto py-4">
         {messages.map((m, i) => (
@@ -27,7 +28,7 @@ export const Messages = ({
             status={status}
           />
         ))}
-        {/* <div className="h-1" ref={endRef} /> */}
+        <div className="h-1" ref={endRef} />
       </div>
     </div>
   );

components/model-picker.tsx

@@ -34,7 +34,7 @@ export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProp
   // Function to get the appropriate icon for each provider
   const getProviderIcon = (provider: string) => {
     switch (provider.toLowerCase()) {
-      case 'xai':
+      case 'anthropic':
         return <Sparkles className="h-3 w-3 text-yellow-500" />;
       case 'openai':
         return <Zap className="h-3 w-3 text-green-500" />;
@@ -122,25 +122,25 @@ export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProp
         defaultValue={validModelId}
       >
         <SelectTrigger 
-          className="max-w-[150px] sm:max-w-none sm:w-48 px-2 sm:px-3 h-8 sm:h-9 rounded-full group border-border/80 bg-background/80 backdrop-blur-sm hover:bg-muted/30 transition-all duration-200"
+          className="max-w-[200px] sm:max-w-fit sm:w-56 px-2 sm:px-3 h-8 sm:h-9 rounded-full group border-primary/20 bg-primary/5 hover:bg-primary/10 dark:bg-primary/10 dark:hover:bg-primary/20 transition-all duration-200 ring-offset-background focus:ring-2 focus:ring-primary/30 focus:ring-offset-2"
         >
           <SelectValue 
             placeholder="Select model" 
-            className="text-xs font-medium flex items-center gap-1 sm:gap-2"
+            className="text-xs font-medium flex items-center gap-1 sm:gap-2 text-primary dark:text-primary-foreground"
           >
             <div className="flex items-center gap-1 sm:gap-2">
               {getProviderIcon(modelDetails[validModelId].provider)}
-              <TextMorph>{modelDetails[validModelId].name}</TextMorph>
+              <span className="font-medium truncate">{modelDetails[validModelId].name}</span>
             </div>
           </SelectValue>
         </SelectTrigger>
         <SelectContent
           align="start"
-          className="bg-background/95 dark:bg-muted/95 backdrop-blur-sm border-border/80 rounded-lg overflow-hidden p-0 w-[280px] sm:w-[350px] md:w-[485px]"
+          className="bg-background/95 dark:bg-muted/95 backdrop-blur-sm border-border/80 rounded-lg overflow-hidden p-0 w-[280px] sm:w-[350px] md:w-[515px]"
         >
-          <div className="grid grid-cols-1 sm:grid-cols-[120px_1fr] md:grid-cols-[170px_1fr] items-start">
+          <div className="grid grid-cols-1 sm:grid-cols-[120px_1fr] md:grid-cols-[200px_1fr] items-start">
             {/* Model selector column */}
-            <div className="sm:border-r border-border/40 bg-muted/20 p-2">
+            <div className="sm:border-r border-border/40 bg-muted/20 p-0 pr-1">
               <SelectGroup className="space-y-1">
                 {MODELS.map((id) => {
                   const modelId = id as modelID;

components/theme-toggle.tsx

@@ -8,7 +8,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { cn } from "@/lib/utils"
 
 export function ThemeToggle({ className, ...props }: React.ComponentProps<typeof Button>) {
-  const { theme, setTheme } = useTheme()
+  const { setTheme } = useTheme()
 
   return (
     <DropdownMenu>
@@ -28,7 +28,7 @@ export function ThemeToggle({ className, ...props }: React.ComponentProps<typeof
       <DropdownMenuContent align="end">
         <DropdownMenuItem onSelect={() => setTheme("dark")}>
           <Flame className="mr-2 h-4 w-4" />
-          <span>Sunset</span>
+          <span>Dark</span>
         </DropdownMenuItem>
         <DropdownMenuItem onSelect={() => setTheme("light")}>
           <Sun className="mr-2 h-4 w-4" />
@@ -36,7 +36,12 @@ export function ThemeToggle({ className, ...props }: React.ComponentProps<typeof
         </DropdownMenuItem>
         <DropdownMenuItem onSelect={() => setTheme("black")}>
           <CircleDashed className="mr-2 h-4 w-4" />
-          <span>Dark</span>
+          <span>Black</span>
+        </DropdownMenuItem>
+        {/* sunset theme */}
+        <DropdownMenuItem onSelect={() => setTheme("sunset")}>
+          <Sun className="mr-2 h-4 w-4" />
+          <span>Sunset</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

components/tool-invocation.tsx

@@ -12,6 +12,7 @@ import {
   ArrowRight,
   Circle,
 } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface ToolInvocationProps {
   toolName: string;
@@ -46,11 +47,21 @@ export function ToolInvocation({
   const getStatusIcon = () => {
     if (state === "call") {
       if (isLatestMessage && status !== "ready") {
-        return <Loader2 className="animate-spin h-3.5 w-3.5 text-muted-foreground/70" />;
+        return <Loader2 className="animate-spin h-3.5 w-3.5 text-primary/70" />;
       }
-      return <Circle className="h-3.5 w-3.5 fill-destructive/20 text-destructive/70" />;
+      return <Circle className="h-3.5 w-3.5 fill-muted-foreground/10 text-muted-foreground/70" />;
     }
-    return <CheckCircle2 size={14} className="text-success/90" />;
+    return <CheckCircle2 size={14} className="text-primary/90" />;
+  };
+
+  const getStatusClass = () => {
+    if (state === "call") {
+      if (isLatestMessage && status !== "ready") {
+        return "text-primary";
+      }
+      return "text-muted-foreground";
+    }
+    return "text-primary";
   };
 
   const formatContent = (content: any): string => {
@@ -70,26 +81,37 @@ export function ToolInvocation({
   };
 
   return (
-    <div className="flex flex-col mb-3 bg-muted/30 rounded-lg border border-border/40 overflow-hidden">
+    <div className={cn(
+      "flex flex-col mb-2 rounded-md border border-border/50 overflow-hidden",
+      "bg-gradient-to-b from-background to-muted/30 backdrop-blur-sm",
+      "transition-all duration-200 hover:border-border/80 group"
+    )}>
       <div 
-        className="flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors"
+        className={cn(
+          "flex items-center gap-2.5 px-3 py-2 cursor-pointer transition-colors",
+          "hover:bg-muted/20"
+        )}
         onClick={() => setIsExpanded(!isExpanded)}
       >
-        <div className="flex items-center justify-center w-5 h-5">
-          <TerminalSquare className="h-3.5 w-3.5 text-primary/70" />
+        <div className="flex items-center justify-center rounded-full w-5 h-5 bg-primary/5 text-primary">
+          <TerminalSquare className="h-3.5 w-3.5" />
         </div>
         <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground flex-1">
-          <span className="text-foreground/80">{toolName}</span>
+          <span className="text-foreground font-semibold tracking-tight">{toolName}</span>
           <ArrowRight className="h-3 w-3 text-muted-foreground/50" />
-          <span className="text-foreground/60">{state === "call" ? "Running" : "Completed"}</span>
+          <span className={cn("font-medium", getStatusClass())}>
+            {state === "call" ? (isLatestMessage && status !== "ready" ? "Running" : "Waiting") : "Completed"}
+          </span>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 opacity-70 group-hover:opacity-100 transition-opacity">
           {getStatusIcon()}
-          {isExpanded ? (
-            <ChevronUpIcon className="h-3.5 w-3.5 text-muted-foreground/70" />
-          ) : (
-            <ChevronDownIcon className="h-3.5 w-3.5 text-muted-foreground/70" />
-          )}
+          <div className="bg-muted/30 rounded-full p-0.5 border border-border/30">
+            {isExpanded ? (
+              <ChevronUpIcon className="h-3 w-3 text-foreground/70" />
+            ) : (
+              <ChevronDownIcon className="h-3 w-3 text-foreground/70" />
+            )}
+          </div>
         </div>
       </div>
 
@@ -101,27 +123,33 @@ export function ToolInvocation({
             exit="collapsed"
             variants={variants}
             transition={{ duration: 0.2 }}
-            className="space-y-2 p-3 pt-1 border-t border-border/30"
+            className="space-y-2 px-3 pb-3"
           >
             {!!args && (
-              <div className="space-y-1">
-                <div className="flex items-center gap-1.5 text-xs text-muted-foreground/70">
+              <div className="space-y-1.5">
+                <div className="flex items-center gap-1.5 text-xs text-muted-foreground/70 pt-1.5">
                   <Code className="h-3 w-3" />
-                  <span>Arguments</span>
+                  <span className="font-medium">Arguments</span>
                 </div>
-                <pre className="text-xs font-mono bg-background/50 p-3 rounded-md overflow-x-auto">
+                <pre className={cn(
+                  "text-xs font-mono p-2.5 rounded-md overflow-x-auto",
+                  "border border-border/40 bg-muted/10"
+                )}>
                   {formatContent(args)}
                 </pre>
               </div>
             )}
             
             {!!result && (
-              <div className="space-y-1">
+              <div className="space-y-1.5">
                 <div className="flex items-center gap-1.5 text-xs text-muted-foreground/70">
                   <ArrowRight className="h-3 w-3" />
-                  <span>Result</span>
+                  <span className="font-medium">Result</span>
                 </div>
-                <pre className="text-xs font-mono bg-background/50 p-3 rounded-md overflow-x-auto max-h-[300px] overflow-y-auto">
+                <pre className={cn(
+                  "text-xs font-mono p-2.5 rounded-md overflow-x-auto max-h-[300px] overflow-y-auto",
+                  "border border-border/40 bg-muted/10"
+                )}>
                   {formatContent(result)}
                 </pre>
               </div>

instrumentation.ts

@@ -1,13 +0,0 @@
-import { registerOTel } from '@vercel/otel'
-
-export function register() {
-  registerOTel({
-    serviceName: 'next-app',
-    instrumentations: [
-      {
-        name: 'ai-instrumentation',
-        include: [/^\/api\/ai/]
-      }
-    ]
-  })
-}

lib/hooks/use-scroll-to-bottom.tsx

@@ -6,27 +6,73 @@ export function useScrollToBottom(): [
 ] {
   const containerRef = useRef<HTMLDivElement>(null);
   const endRef = useRef<HTMLDivElement>(null);
+  const isUserScrollingRef = useRef(false);
 
   useEffect(() => {
     const container = containerRef.current;
     const end = endRef.current;
 
-    if (container && end) {
-      const observer = new MutationObserver(() => {
-        end.scrollIntoView({ behavior: 'instant', block: 'end' });
-      });
+    if (!container || !end) return;
+
+    // Initial scroll to bottom
+    setTimeout(() => {
+      end.scrollIntoView({ behavior: 'instant', block: 'end' });
+    }, 100);
+
+    // Track if user has manually scrolled up
+    const handleScroll = () => {
+      if (!container) return;
+      
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+      
+      // If user is scrolled up, mark as manually scrolling
+      isUserScrollingRef.current = distanceFromBottom > 100;
+    };
+
+    // Handle mutations
+    const observer = new MutationObserver((mutations) => {
+      if (!container || !end) return;
 
-      observer.observe(container, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        characterData: true,
+      // Check if mutation is related to expand/collapse
+      const isToggleSection = mutations.some(mutation => {
+        // Check if the target or parent is a motion-div (expanded content)
+        let target = mutation.target as HTMLElement;
+        let isExpand = false;
+        
+        while (target && target !== container) {
+          if (target.classList?.contains('motion-div')) {
+            isExpand = true;
+            break;
+          }
+          target = target.parentElement as HTMLElement;
+        }
+        return isExpand;
       });
 
-      return () => observer.disconnect();
-    }
+      // Don't scroll for expand/collapse actions
+      if (isToggleSection) return;
+
+      // Only auto-scroll if user hasn't manually scrolled up
+      if (!isUserScrollingRef.current) {
+        // For new messages, use smooth scrolling
+        end.scrollIntoView({ behavior: 'smooth', block: 'end' });
+      }
+    });
+
+    observer.observe(container, {
+      childList: true,
+      subtree: true,
+    });
+
+    // Add scroll event listener
+    container.addEventListener('scroll', handleScroll);
+
+    return () => {
+      observer.disconnect();
+      container.removeEventListener('scroll', handleScroll);
+    };
   }, []);
 
-  // @ts-expect-error error
-  return [containerRef, endRef];
+  return [containerRef, endRef] as [RefObject<HTMLDivElement>, RefObject<HTMLDivElement>];
 }

package.json

@@ -13,18 +13,13 @@
     "db:studio": "drizzle-kit studio"
   },
   "dependencies": {
+    "@ai-sdk/anthropic": "^1.2.10",
     "@ai-sdk/cohere": "^1.2.9",
     "@ai-sdk/google": "^1.2.12",
     "@ai-sdk/groq": "^1.2.8",
     "@ai-sdk/openai": "^1.3.16",
     "@ai-sdk/react": "^1.2.9",
-    "@ai-sdk/xai": "^1.2.13",
-    "@auth/core": "^0.38.0",
-    "@auth/drizzle-adapter": "^1.8.0",
     "@neondatabase/serverless": "^1.0.0",
-    "@opentelemetry/api-logs": "^0.200.0",
-    "@opentelemetry/instrumentation": "^0.200.0",
-    "@opentelemetry/sdk-logs": "^0.200.0",
     "@radix-ui/react-accordion": "^1.2.7",
     "@radix-ui/react-avatar": "^1.1.6",
     "@radix-ui/react-dialog": "^1.1.10",
@@ -39,13 +34,11 @@
     "@tanstack/react-query": "^5.74.4",
     "@vercel/otel": "^1.11.0",
     "ai": "^4.3.9",
-    "autoevals": "^0.0.127",
-    "braintrust": "^0.0.198",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "composio-core": "^0.5.31",
     "drizzle-orm": "^0.42.0",
     "fast-deep-equal": "^3.1.3",
+    "framer-motion": "^12.7.4",
     "groq-sdk": "^0.19.0",
     "lucide-react": "^0.488.0",
     "motion": "^12.7.3",