Merge pull request #45 from jakobhoeg/develop

fix: clear messages without directly mutating the state

Author: jakobhoeg

src/app/page.tsx

@@ -170,6 +170,7 @@ export default function Home() {
           navCollapsedSize={10}
           defaultLayout={[30, 160]}
           formRef={formRef}
+          setMessages={setMessages}
         />
         <DialogContent className="flex flex-col space-y-4">
           <DialogHeader className="space-y-2">

src/components/chat/chat-layout.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/resizable";
 import { cn } from "@/lib/utils";
 import { Sidebar } from "../sidebar";
-import { useChat } from "ai/react";
+import { Message, useChat } from "ai/react";
 import Chat, { ChatProps } from "./chat";
 import ChatList from "./chat-list";
 import { HamburgerMenuIcon } from "@radix-ui/react-icons";
@@ -18,6 +18,7 @@ interface ChatLayoutProps {
   defaultCollapsed?: boolean;
   navCollapsedSize: number;
   chatId: string;
+  setMessages: (messages: Message[]) => void;
 }
 
 type MergedProps = ChatLayoutProps & ChatProps;
@@ -37,6 +38,7 @@ export function ChatLayout({
   setSelectedModel,
   loadingSubmit,
   formRef,
+  setMessages,
 }: MergedProps) {
   const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
   const [isMobile, setIsMobile] = useState(false);
@@ -97,6 +99,7 @@ export function ChatLayout({
           messages={messages}
           isMobile={isMobile}
           chatId={chatId}
+          setMessages={setMessages}
         />
       </ResizablePanel>
       <ResizableHandle className={cn("hidden md:flex")} withHandle />

src/components/sidebar.tsx

@@ -35,13 +35,15 @@ interface SidebarProps {
   onClick?: () => void;
   isMobile: boolean;
   chatId: string;
+  setMessages: (messages: Message[]) => void;
 }
 
 export function Sidebar({
   messages,
   isCollapsed,
   isMobile,
   chatId,
+  setMessages,
 }: SidebarProps) {
   const [localChats, setLocalChats] = useState<
     { chatId: string; messages: Message[] }[]
@@ -112,7 +114,7 @@ export function Sidebar({
           onClick={() => {
             router.push("/");
             // Clear messages
-            messages.splice(0, messages.length);
+            setMessages([]);
           }}
           variant="ghost"
           className="flex justify-between w-full h-14 text-sm xl:text-lg font-normal items-center "