Improve chat navigation, model selection, and streaming

components/chat/ChatSidebar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { PlusIcon, MoreHorizontalIcon, TrashIcon } from 'lucide-react';
+import { RiAddLine, RiMoreLine, RiDeleteBinLine } from '@remixicon/react';
 import {
   Sidebar,
   SidebarContent,
@@ -12,6 +12,7 @@ import {
   SidebarMenuItem,
   SidebarMenuButton,
   SidebarMenuAction,
+  useSidebar,
 } from '@/components/ui/sidebar';
 import {
   DropdownMenu,
@@ -20,12 +21,10 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
+import { ChatSearch } from './ChatSearch';
+import type { StoredChat } from '@/services/indexed-db/chat-store';
 
-export interface Chat {
-  id: string;
-  title: string;
-  created_at: string;
-}
+export type Chat = StoredChat;
 
 interface ChatSidebarProps {
   chats: Chat[];
@@ -42,15 +41,29 @@ export function ChatSidebar({
   onNewChat,
   onDeleteChat,
 }: ChatSidebarProps) {
+  const { setOpenMobile } = useSidebar();
+
+  const selectChat = (chatId: string) => {
+    onSelectChat(chatId);
+    setOpenMobile(false);
+  };
+
   return (
     <Sidebar>
       <SidebarHeader>
+        <div className="flex h-7 items-center justify-between gap-2 pl-2">
+          <span className="text-xl font-semibold tracking-tight">ChatGPT</span>
+          <ChatSearch chats={chats} activeChatId={activeChatId} onSelectChat={selectChat} />
+        </div>
         <Button
-          onClick={onNewChat}
+          onClick={() => {
+            onNewChat();
+            setOpenMobile(false);
+          }}
           variant="outline"
-          className="w-full justify-start gap-2"
+          className="mt-2 w-full justify-start gap-2"
         >
-          <PlusIcon className="size-4" />
+          <RiAddLine className="size-4" />
           New Chat
         </Button>
       </SidebarHeader>
@@ -63,23 +76,22 @@ export function ChatSidebar({
                 <SidebarMenuItem key={chat.id}>
                   <SidebarMenuButton
                     isActive={chat.id === activeChatId}
-                    onClick={() => onSelectChat(chat.id)}
+                    onClick={() => selectChat(chat.id)}
                     tooltip={chat.title}
                   >
                     <span>{chat.title}</span>
                   </SidebarMenuButton>
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                      <SidebarMenuAction showOnHover>
-                        <MoreHorizontalIcon className="size-4" />
+                      <SidebarMenuAction showOnHover aria-label={`Options for ${chat.title}`}>
+                        <RiMoreLine className="size-4" />
                       </SidebarMenuAction>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent side="right" align="start">
                       <DropdownMenuItem
                         onClick={() => onDeleteChat(chat.id)}
-                        className=""
                       >
-                        <TrashIcon className="size-4" />
+                        <RiDeleteBinLine className="size-4" />
                         Delete
                       </DropdownMenuItem>
                     </DropdownMenuContent>