Merge pull request #73 from r0x07k/new-chat-error-when-collapsed-fix

Author: jakobhoeg

src/components/chat/chat-layout.tsx

@@ -122,6 +122,7 @@ export function ChatLayout({
           formRef={formRef}
           isMobile={isMobile}
           setInput={setInput}
+          setMessages={setMessages}
         />
       </ResizablePanel>
     </ResizablePanelGroup>

src/components/chat/chat-topbar.tsx

@@ -26,16 +26,19 @@ interface ChatTopbarProps {
   isLoading: boolean;
   chatId?: string;
   messages: Message[];
+  setMessages: (messages: Message[]) => void;
 }
 
 export default function ChatTopbar({
   setSelectedModel,
   isLoading,
   chatId,
   messages,
+  setMessages
 }: ChatTopbarProps) {
   const [models, setModels] = React.useState<string[]>([]);
   const [open, setOpen] = React.useState(false);
+  const [sheetOpen, setSheetOpen] = React.useState(false);
   const [currentModel, setCurrentModel] = React.useState<string | null>(null);
 
   useEffect(() => {
@@ -69,9 +72,13 @@ export default function ChatTopbar({
     setOpen(false);
   };
 
+  const handleCloseSidebar = () => {
+    setSheetOpen(false);  // Close the sidebar
+  };
+
   return (
     <div className="w-full flex px-4 py-6  items-center justify-between lg:justify-center ">
-      <Sheet>
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
         <SheetTrigger>
           <HamburgerMenuIcon className="lg:hidden w-5 h-5" />
         </SheetTrigger>
@@ -81,6 +88,8 @@ export default function ChatTopbar({
             isCollapsed={false}
             isMobile={false}
             messages={messages}
+            setMessages={setMessages}
+            closeSidebar={handleCloseSidebar} 
           />
         </SheetContent>
       </Sheet>

src/components/chat/chat.tsx

@@ -23,6 +23,7 @@ export interface ChatProps {
   formRef: React.RefObject<HTMLFormElement>;
   isMobile?: boolean;
   setInput?: React.Dispatch<React.SetStateAction<string>>;
+  setMessages: (messages: Message[]) => void;
 }
 
 export default function Chat({
@@ -39,6 +40,7 @@ export default function Chat({
   formRef,
   isMobile,
   setInput,
+  setMessages
 }: ChatProps) {
   return (
     <div className="flex flex-col justify-between w-full max-w-3xl h-full ">
@@ -47,6 +49,7 @@ export default function Chat({
         isLoading={isLoading}
         chatId={chatId}
         messages={messages}
+        setMessages={setMessages}
       />
 
       <ChatList
@@ -61,6 +64,7 @@ export default function Chat({
         stop={stop}
         formRef={formRef}
         isMobile={isMobile}
+        setMessages={setMessages}
       />
 
       <ChatBottombar
@@ -74,6 +78,7 @@ export default function Chat({
         stop={stop}
         formRef={formRef}
         setInput={setInput}
+        setMessages={setMessages}
       />
     </div>
   );

src/components/sidebar.tsx

@@ -36,6 +36,7 @@ interface SidebarProps {
   isMobile: boolean;
   chatId: string;
   setMessages: (messages: Message[]) => void;
+  closeSidebar?: () => void;
 }
 
 export function Sidebar({
@@ -44,6 +45,7 @@ export function Sidebar({
   isMobile,
   chatId,
   setMessages,
+  closeSidebar
 }: SidebarProps) {
   const [localChats, setLocalChats] = useState<
     { chatId: string; messages: Message[] }[]
@@ -115,6 +117,9 @@ export function Sidebar({
             router.push("/");
             // Clear messages
             setMessages([]);
+            if (closeSidebar) {
+              closeSidebar();
+            }
           }}
           variant="ghost"
           className="flex justify-between w-full h-14 text-sm xl:text-lg font-normal items-center "