fix sync problem

frontend/src/app/HomeContent.tsx

@@ -55,6 +55,7 @@ export default function HomeContent() {
   const [selectedModel, setSelectedModel] = useState<string>(
     models[0] || 'Loading models'
   );
+  const [chatListUpdated, setChatListUpdated] = useState(false);
 
   // Welcome dialog state
   const [open, setOpen] = useState(false);
@@ -165,6 +166,7 @@ export default function HomeContent() {
     onCompleted: async (data) => {
       const newChatId = data.createChat.id;
       setChatId(newChatId);
+      setChatListUpdated(true);
       await startChatStream(newChatId, input);
     },
     onError: () => {
@@ -274,6 +276,8 @@ export default function HomeContent() {
           formRef={formRef}
           setMessages={setMessages}
           setInput={setInput}
+          chatListUpdated={chatListUpdated} // Pass to ChatLayout
+          setChatListUpdated={setChatListUpdated} // Pass to ChatLayout
         />
         <DialogContent className="flex flex-col space-y-4">
           <DialogHeader className="space-y-2">

frontend/src/components/chat/chat-layout.tsx

@@ -25,6 +25,8 @@ interface ChatLayoutProps {
   formRef: React.RefObject<HTMLFormElement>;
   setMessages: Dispatch<SetStateAction<Message[]>>;
   setInput: Dispatch<SetStateAction<string>>;
+  chatListUpdated: boolean;
+  setChatListUpdated: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export function ChatLayout({
@@ -42,6 +44,8 @@ export function ChatLayout({
   formRef,
   setMessages,
   setInput,
+  chatListUpdated,
+  setChatListUpdated,
 }: ChatLayoutProps) {
   const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
   const [isMobile, setIsMobile] = useState(false);
@@ -91,7 +95,12 @@ export function ChatLayout({
             : 'hidden md:block'
         )}
       >
-        <Sidebar isCollapsed={isCollapsed || isMobile} isMobile={isMobile} />
+        <Sidebar
+          isCollapsed={isCollapsed || isMobile}
+          isMobile={isMobile}
+          chatListUpdated={chatListUpdated}
+          setChatListUpdated={setChatListUpdated}
+        />
       </ResizablePanel>
       <ResizableHandle className={cn('hidden md:flex')} withHandle />
       <ResizablePanel

frontend/src/components/sidebar.tsx

@@ -5,7 +5,7 @@ import { MoreHorizontal, SquarePen, Trash2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button, buttonVariants } from '@/components/ui/button';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import SidebarSkeleton from './sidebar-skeleton';
 import UserSettings from './user-settings';
 import { useQuery, useMutation } from '@apollo/client';
@@ -30,6 +30,8 @@ interface SidebarProps {
   isCollapsed: boolean;
   isMobile: boolean;
   currentChatId?: string;
+  chatListUpdated: boolean;
+  setChatListUpdated: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 // Define chat type based on the actual GraphQL response
@@ -44,17 +46,30 @@ export function Sidebar({
   isCollapsed,
   isMobile,
   currentChatId,
+  chatListUpdated,
+  setChatListUpdated,
 }: SidebarProps) {
   const router = useRouter();
   const [selectedChatId, setSelectedChatId] = useState<string | null>(
     currentChatId || null
   );
 
   // Query user chats
+  // const { data, loading, error } = useQuery(GET_USER_CHATS, {
+  //   fetchPolicy: 'network-only',
+  // });
   const { data, loading, error } = useQuery(GET_USER_CHATS, {
-    fetchPolicy: 'network-only',
+    fetchPolicy: chatListUpdated ? 'network-only' : 'cache-first',
   });
 
+  const chats: Chat[] = data?.getUserChats || [];
+
+  useEffect(() => {
+    if (chatListUpdated) {
+      setChatListUpdated(false);
+    }
+  }, [chatListUpdated, setChatListUpdated]);
+
   // Delete chat mutation
   const [deleteChat] = useMutation(DELETE_CHAT, {
     refetchQueries: [{ query: GET_USER_CHATS }],
@@ -70,8 +85,6 @@ export function Sidebar({
     return null;
   }
 
-  const chats: Chat[] = data?.getUserChats || [];
-
   // Sort chats by creation date
   const sortedChats = [...chats].sort((a, b) => {
     return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();