feat: enhance ChatSidebar with user ID editing functionality

- Added a dialog for editing the user ID, allowing users to update their ID for chat synchronization.
- Implemented validation to ensure the user ID is not empty before updating.
- Introduced a new Pencil icon in the dropdown menu for accessing the edit user ID feature.
- Updated the Messages component layout for improved responsiveness.
- Refactored ToolInvocation component for better icon usage and layout adjustments.

components/chat-sidebar.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef } from "react";
 import { useRouter, usePathname } from "next/navigation";
-import { MessageSquare, PlusCircle, Trash2, ServerIcon, Settings, Loader2, Sparkles, ChevronsUpDown, UserIcon, Copy } from "lucide-react";
+import { MessageSquare, PlusCircle, Trash2, ServerIcon, Settings, Loader2, Sparkles, ChevronsUpDown, UserIcon, Copy, Pencil } from "lucide-react";
 import {
     Sidebar,
     SidebarContent,
@@ -24,7 +24,7 @@ import { toast } from "sonner";
 import Image from "next/image";
 import { MCPServerManager, type MCPServer } from "./mcp-server-manager";
 import { ThemeToggle } from "./theme-toggle";
-import { getUserId } from "@/lib/user-id";
+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";
@@ -40,6 +40,16 @@ import {
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 
 export function ChatSidebar() {
     const router = useRouter();
@@ -50,6 +60,8 @@ export function ChatSidebar() {
     const [mcpSettingsOpen, setMcpSettingsOpen] = useState(false);
     const { state } = useSidebar();
     const isCollapsed = state === "collapsed";
+    const [editUserIdOpen, setEditUserIdOpen] = useState(false);
+    const [newUserId, setNewUserId] = useState('');
 
     // Initialize userId
     useEffect(() => {
@@ -80,6 +92,22 @@ export function ChatSidebar() {
     // Get active MCP servers status
     const activeServersCount = selectedMcpServers.length;
 
+    // Handle user ID update
+    const handleUpdateUserId = () => {
+        if (!newUserId.trim()) {
+            toast.error("User ID cannot be empty");
+            return;
+        }
+
+        updateUserId(newUserId.trim());
+        setUserId(newUserId.trim());
+        setEditUserIdOpen(false);
+        toast.success("User ID updated successfully");
+        
+        // Refresh the page to reload chats with new user ID
+        window.location.reload();
+    };
+
     // Show loading state if user ID is not yet initialized
     if (!userId) {
         return null; // Or a loading spinner
@@ -307,6 +335,13 @@ export function ChatSidebar() {
                                     <Copy className="mr-2 h-4 w-4 hover:text-sidebar-accent" />
                                     Copy User ID
                                 </DropdownMenuItem>
+                                <DropdownMenuItem onSelect={(e) => {
+                                    e.preventDefault();
+                                    setEditUserIdOpen(true);
+                                }}>
+                                    <Pencil className="mr-2 h-4 w-4 hover:text-sidebar-accent" />
+                                    Edit User ID
+                                </DropdownMenuItem>
                             </DropdownMenuGroup>
                             <DropdownMenuSeparator />
                             <DropdownMenuGroup>
@@ -340,6 +375,44 @@ export function ChatSidebar() {
                     onOpenChange={setMcpSettingsOpen}
                 />
             </SidebarFooter>
+
+            <Dialog open={editUserIdOpen} onOpenChange={(open) => {
+                setEditUserIdOpen(open);
+                if (open) {
+                    setNewUserId(userId);
+                }
+            }}>
+                <DialogContent className="sm:max-w-[400px]">
+                    <DialogHeader>
+                        <DialogTitle>Edit User ID</DialogTitle>
+                        <DialogDescription>
+                            Update your user ID for chat synchronization. This will affect which chats are visible to you.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="grid gap-4 py-4">
+                        <div className="grid gap-2">
+                            <Label htmlFor="userId">User ID</Label>
+                            <Input
+                                id="userId"
+                                value={newUserId}
+                                onChange={(e) => setNewUserId(e.target.value)}
+                                placeholder="Enter your user ID"
+                            />
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={() => setEditUserIdOpen(false)}
+                        >
+                            Cancel
+                        </Button>
+                        <Button onClick={handleUpdateUserId}>
+                            Save Changes
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
         </Sidebar>
     );
 } 

components/messages.tsx

@@ -11,13 +11,13 @@ 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-xl mx-auto py-4">
+      <div className="max-w-lg sm:max-w-3xl mx-auto py-4">
         {messages.map((m, i) => (
           <Message
             key={i}
@@ -27,7 +27,7 @@ export const Messages = ({
             status={status}
           />
         ))}
-        <div className="h-1" ref={endRef} />
+        {/* <div className="h-1" ref={endRef} /> */}
       </div>
     </div>
   );

components/model-picker.tsx

@@ -109,20 +109,20 @@ export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProp
   };
 
   return (
-    <div className="absolute bottom-2 left-2">
+    <div className="absolute bottom-2 left-2 z-10">
       <Select 
         value={validModelId} 
         onValueChange={handleModelChange} 
         defaultValue={validModelId}
       >
         <SelectTrigger 
-          className="w-48 px-3 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-[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"
         >
           <SelectValue 
             placeholder="Select model" 
-            className="text-xs font-medium flex items-center gap-2"
+            className="text-xs font-medium flex items-center gap-1 sm:gap-2"
           >
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1 sm:gap-2">
               {getProviderIcon(modelDetails[validModelId].provider)}
               <TextMorph>{modelDetails[validModelId].name}</TextMorph>
             </div>
@@ -130,12 +130,11 @@ export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProp
         </SelectTrigger>
         <SelectContent
           align="start"
-          className="bg-background/95 dark:bg-muted/95 backdrop-blur-sm border-border/80 rounded-lg overflow-hidden p-0"
-          style={{ width: "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-[485px]"
         >
-          <div className="grid grid-cols-[170px_1fr] items-start gap-x-4">
+          <div className="grid grid-cols-1 sm:grid-cols-[120px_1fr] md:grid-cols-[170px_1fr] items-start">
             {/* Model selector column */}
-            <div className="border-r border-border/40 bg-muted/20 p-2">
+            <div className="sm:border-r border-border/40 bg-muted/20 p-2">
               <SelectGroup className="space-y-1">
                 {MODELS.map((id) => {
                   const modelId = id as modelID;
@@ -146,7 +145,7 @@ export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProp
                       onMouseEnter={() => setHoveredModel(modelId)}
                       onMouseLeave={() => setHoveredModel(null)}
                       className={cn(
-                        "!px-3 py-2 cursor-pointer rounded-md text-xs transition-colors duration-150",
+                        "!px-2 sm:!px-3 py-1.5 sm:py-2 cursor-pointer rounded-md text-xs transition-colors duration-150",
                         "hover:bg-primary/5 hover:text-primary-foreground",
                         "focus:bg-primary/10 focus:text-primary focus:outline-none",
                         "data-[highlighted]:bg-primary/10 data-[highlighted]:text-primary",
@@ -154,11 +153,11 @@ export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProp
                       )}
                     >
                       <div className="flex flex-col gap-0.5">
-                        <div className="flex items-center gap-2">
+                        <div className="flex items-center gap-1.5">
                           {getProviderIcon(modelDetails[modelId].provider)}
                           <span className="font-medium truncate">{modelDetails[modelId].name}</span>
                         </div>
-                        <span className="text-xs text-muted-foreground">
+                        <span className="text-[10px] sm:text-xs text-muted-foreground">
                           {modelDetails[modelId].provider}
                         </span>
                       </div>
@@ -168,8 +167,8 @@ export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProp
               </SelectGroup>
             </div>
             
-            {/* Model details column */}
-            <div className="p-4 flex flex-col">
+            {/* Model details column - hidden on smallest screens, visible on sm+ */}
+            <div className="p-2 sm:p-3 md:p-4 flex flex-col sm:block hidden">
               <div>
                 <div className="flex items-center gap-2 mb-1">
                   {getProviderIcon(currentModelDetails.provider)}
@@ -195,12 +194,12 @@ export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProp
                   ))}
                 </div>
                 
-                <div className="text-xs text-foreground/90 leading-relaxed mb-3">
+                <div className="text-xs text-foreground/90 leading-relaxed mb-3 hidden md:block">
                   {currentModelDetails.description}
                 </div>
               </div>
               
-              <div className="bg-muted/40 rounded-md p-2">
+              <div className="bg-muted/40 rounded-md p-2 hidden md:block">
                 <div className="text-[10px] text-muted-foreground flex justify-between items-center">
                   <span>API Version:</span>
                   <code className="bg-background/80 px-2 py-0.5 rounded text-[10px] font-mono">
@@ -209,6 +208,27 @@ export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProp
                 </div>
               </div>
             </div>
+            
+            {/* Condensed model details for mobile only */}
+            <div className="p-3 sm:hidden border-t border-border/30">
+              <div className="flex flex-wrap gap-1 mb-2">
+                {currentModelDetails.capabilities.slice(0, 4).map((capability) => (
+                  <span 
+                    key={capability}
+                    className={cn(
+                      "inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded-full font-medium",
+                      getCapabilityColor(capability)
+                    )}
+                  >
+                    {getCapabilityIcon(capability)}
+                    <span>{capability}</span>
+                  </span>
+                ))}
+                {currentModelDetails.capabilities.length > 4 && (
+                  <span className="text-[10px] text-muted-foreground">+{currentModelDetails.capabilities.length - 4} more</span>
+                )}
+              </div>
+            </div>
           </div>
         </SelectContent>
       </Select>

components/tool-invocation.tsx

@@ -6,11 +6,11 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
   Loader2,
-  PocketKnife,
-  CheckCircle,
-  StopCircle,
-  Code2,
-  Terminal,
+  CheckCircle2,
+  TerminalSquare,
+  Code,
+  ArrowRight,
+  Circle,
 } from "lucide-react";
 
 interface ToolInvocationProps {
@@ -46,11 +46,11 @@ export function ToolInvocation({
   const getStatusIcon = () => {
     if (state === "call") {
       if (isLatestMessage && status !== "ready") {
-        return <Loader2 className="animate-spin h-4 w-4 text-muted-foreground" />;
+        return <Loader2 className="animate-spin h-3.5 w-3.5 text-muted-foreground/70" />;
       }
-      return <StopCircle className="h-4 w-4 text-destructive" />;
+      return <Circle className="h-3.5 w-3.5 fill-destructive/20 text-destructive/70" />;
     }
-    return <CheckCircle size={14} className="text-success" />;
+    return <CheckCircle2 size={14} className="text-success/90" />;
   };
 
   const formatContent = (content: any): string => {
@@ -70,31 +70,26 @@ export function ToolInvocation({
   };
 
   return (
-    <div className="flex flex-col gap-2 p-4 mb-4 bg-muted/50 rounded-xl border border-border backdrop-blur-sm">
-      <div className="flex items-center gap-3">
-        <div className="flex items-center justify-center w-8 h-8 bg-muted rounded-lg">
-          <PocketKnife className="h-4 w-4" />
+    <div className="flex flex-col mb-3 bg-muted/30 rounded-lg border border-border/40 overflow-hidden">
+      <div 
+        className="flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors"
+        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>
-        <div className="flex-1 flex items-center gap-2">
-          <span className="text-sm font-medium">
-            {state === "call" ? "Calling" : "Called"}
-          </span>
-          <code className="px-2 py-1 text-xs font-mono rounded-md bg-muted text-muted-foreground">
-            {toolName}
-          </code>
+        <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground flex-1">
+          <span className="text-foreground/80">{toolName}</span>
+          <ArrowRight className="h-3 w-3 text-muted-foreground/50" />
+          <span className="text-foreground/60">{state === "call" ? "Running" : "Completed"}</span>
         </div>
         <div className="flex items-center gap-2">
           {getStatusIcon()}
-          <button
-            onClick={() => setIsExpanded(!isExpanded)}
-            className="p-1 hover:bg-muted rounded-md transition-colors"
-          >
-            {isExpanded ? (
-              <ChevronUpIcon className="h-4 w-4" />
-            ) : (
-              <ChevronDownIcon className="h-4 w-4" />
-            )}
-          </button>
+          {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>
       </div>
 
@@ -106,27 +101,27 @@ export function ToolInvocation({
             exit="collapsed"
             variants={variants}
             transition={{ duration: 0.2 }}
-            className="space-y-3 pt-2"
+            className="space-y-2 p-3 pt-1 border-t border-border/30"
           >
             {!!args && (
-              <div className="space-y-1.5">
-                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                  <Terminal className="h-3.5 w-3.5" />
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-xs text-muted-foreground/70">
+                  <Code className="h-3 w-3" />
                   <span>Arguments</span>
                 </div>
-                <pre className="text-xs font-mono bg-muted p-3 rounded-lg overflow-x-auto">
+                <pre className="text-xs font-mono bg-background/50 p-3 rounded-md overflow-x-auto">
                   {formatContent(args)}
                 </pre>
               </div>
             )}
             
             {!!result && (
-              <div className="space-y-1.5">
-                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                  <Code2 className="h-3.5 w-3.5" />
+              <div className="space-y-1">
+                <div className="flex items-center gap-1.5 text-xs text-muted-foreground/70">
+                  <ArrowRight className="h-3 w-3" />
                   <span>Result</span>
                 </div>
-                <pre className="text-xs font-mono bg-muted p-3 rounded-lg overflow-x-auto max-h-[300px] overflow-y-auto">
+                <pre className="text-xs font-mono bg-background/50 p-3 rounded-md overflow-x-auto max-h-[300px] overflow-y-auto">
                   {formatContent(result)}
                 </pre>
               </div>

lib/user-id.ts

@@ -15,4 +15,9 @@ export function getUserId(): string {
   }
   
   return userId;
+}
+
+export function updateUserId(newUserId: string): void {
+  if (typeof window === 'undefined') return;
+  localStorage.setItem(USER_ID_KEY, newUserId);
 }