Feat refactor chat layout

backend/package.json

@@ -5,7 +5,7 @@
   "author": "",
   "private": true,
   "license": "UNLICENSED",
-  "packageManager": "pnpm@9.1.2",
+  "packageManager": "pnpm@9.1.0",
   "scripts": {
     "build": "nest build",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",

frontend/package.json

@@ -27,8 +27,9 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
-    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@types/dom-speech-recognition": "^0.0.4",

frontend/src/app/RootLayout.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/components/ui/resizable';
+import { cn } from '@/lib/utils';
+import { usePathname } from 'next/navigation';
+import { useChatList } from './hooks/useChatList';
+import Sidebar from '@/components/sidebar';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const defaultLayout = [30, 160];
+  const navCollapsedSize = 10;
+
+  const pathname = usePathname();
+  const currentChatId = pathname.split('/')[1] || '';
+
+  const {
+    chats,
+    loading,
+    error,
+    chatListUpdated,
+    setChatListUpdated,
+    refetchChats,
+  } = useChatList();
+
+  useEffect(() => {
+    const checkScreenWidth = () => {
+      setIsMobile(window.innerWidth <= 1023);
+    };
+    checkScreenWidth();
+    window.addEventListener('resize', checkScreenWidth);
+    return () => {
+      window.removeEventListener('resize', checkScreenWidth);
+    };
+  }, []);
+
+  return (
+    <main className="flex h-[calc(100dvh)] flex-col items-center">
+      <ResizablePanelGroup
+        direction="horizontal"
+        onLayout={(sizes: number[]) => {
+          document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;
+        }}
+        className="h-screen items-stretch"
+      >
+        <ResizablePanel
+          defaultSize={defaultLayout[0]}
+          collapsedSize={navCollapsedSize}
+          collapsible={true}
+          minSize={isMobile ? 0 : 12}
+          maxSize={isMobile ? 0 : 16}
+          onCollapse={() => {
+            setIsCollapsed(true);
+            document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(true)}`;
+          }}
+          onExpand={() => {
+            setIsCollapsed(false);
+            document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(false)}`;
+          }}
+          className={cn(
+            isCollapsed
+              ? 'min-w-[50px] md:min-w-[70px] transition-all duration-300 ease-in-out'
+              : 'hidden md:block'
+          )}
+        >
+          <Sidebar
+            isCollapsed={isCollapsed}
+            isMobile={isMobile}
+            currentChatId={currentChatId}
+            chatListUpdated={chatListUpdated}
+            setChatListUpdated={setChatListUpdated}
+            chats={chats}
+            loading={loading}
+            error={error}
+            onRefetch={refetchChats}
+          />
+        </ResizablePanel>
+        <ResizableHandle className={cn('hidden md:flex')} withHandle />
+        <ResizablePanel
+          className="h-full w-full flex justify-center"
+          defaultSize={defaultLayout[1]}
+        >
+          {children}
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </main>
+  );
+}

frontend/src/app/[id]/page.tsx

@@ -1,178 +1,63 @@
 'use client';
 
-import { ChatLayout } from '@/components/chat/chat-layout';
+import { useEffect, useRef, useState } from 'react';
+import { useParams } from 'next/navigation';
 import { Message } from '@/components/types';
-import { CHAT_STREAM_SUBSCRIPTION, GET_CHAT_HISTORY } from '@/graphql/request';
-import { useQuery, useSubscription } from '@apollo/client';
-import React, { useRef, useState } from 'react';
+import { useModels } from '@/app/hooks/useModels';
+import ChatContent from '@/components/chat/chat';
+import { useChatStream } from '../hooks/useChatStream';
+import { useQuery } from '@apollo/client';
+import { GET_CHAT_HISTORY } from '@/graphql/request';
 import { toast } from 'sonner';
-import useChatStore from '../hooks/useChatStore';
-import { useModels } from '../hooks/useModels';
 
-// Define stream states for chat flow
-enum StreamStatus {
-  IDLE = 'IDLE',
-  STREAMING = 'STREAMING',
-  DONE = 'DONE',
-}
-
-interface PageProps {
-  params: {
-    id: string;
-  };
-}
+export default function ChatPage() {
+  const params = useParams();
+  const chatId = params.id as string;
 
-export default function Page({ params }: PageProps) {
   // Core message states
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState('');
   const formRef = useRef<HTMLFormElement>(null);
 
-  // Loading and stream control states
-  const [loadingSubmit, setLoadingSubmit] = useState(false);
-  const [streamStatus, setStreamStatus] = useState<StreamStatus>(
-    StreamStatus.IDLE
-  );
-
-  // Model selection state
   const { models } = useModels();
   const [selectedModel, setSelectedModel] = useState<string>(
     models[0] || 'Loading models'
   );
 
-  // Image handling from global store
-  const setBase64Images = useChatStore((state) => state.setBase64Images);
-
-  // Load chat history
-  const { data: historyData } = useQuery(GET_CHAT_HISTORY, {
+  useQuery(GET_CHAT_HISTORY, {
     variables: { chatId: params.id },
     onCompleted: (data) => {
       if (data?.getChatHistory) {
         setMessages(data.getChatHistory);
-        setStreamStatus(StreamStatus.IDLE);
       }
     },
     onError: (error) => {
-      console.error('Error loading chat history:', error);
       toast.error('Failed to load chat history');
-      setStreamStatus(StreamStatus.IDLE);
-    },
-  });
-
-  // Subscribe to chat stream
-  const { data: streamData } = useSubscription(CHAT_STREAM_SUBSCRIPTION, {
-    variables: {
-      input: {
-        message: input,
-        chatId: params.id,
-        model: selectedModel,
-      },
-    },
-    skip: !input.trim(),
-    onSubscriptionData: ({ subscriptionData }) => {
-      if (!subscriptionData.data) return;
-
-      const chunk = subscriptionData.data.chatStream;
-      const content = chunk.choices[0]?.delta?.content;
-
-      // Handle first data arrival
-      if (streamStatus !== StreamStatus.STREAMING) {
-        setStreamStatus(StreamStatus.STREAMING);
-        setLoadingSubmit(false);
-      }
-
-      // Update message content
-      if (content) {
-        setMessages((prev) => {
-          const lastMsg = prev[prev.length - 1];
-          if (lastMsg?.role === 'assistant') {
-            // Append to existing assistant message
-            return [
-              ...prev.slice(0, -1),
-              {
-                ...lastMsg,
-                content: lastMsg.content + content,
-              },
-            ];
-          } else {
-            // Create new assistant message
-            return [
-              ...prev,
-              {
-                id: chunk.id,
-                role: 'assistant',
-                content,
-                createdAt: new Date(chunk.created * 1000).toISOString(),
-              },
-            ];
-          }
-        });
-      }
-
-      // Handle stream completion
-      if (chunk.choices[0]?.finish_reason === 'stop') {
-        setStreamStatus(StreamStatus.DONE);
-        setLoadingSubmit(false);
-        setBase64Images(null);
-      }
-    },
-    onError: (error) => {
-      console.error('Subscription error:', error);
-      toast.error('Connection error. Please try again.');
-      setStreamStatus(StreamStatus.IDLE);
-      setLoadingSubmit(false);
     },
   });
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setInput(e.target.value);
-  };
-
-  // Stop message generation
-  const stop = () => {
-    if (streamStatus === StreamStatus.STREAMING) {
-      setStreamStatus(StreamStatus.IDLE);
-      setLoadingSubmit(false);
-      toast.info('Stopping message generation...');
-    }
-  };
-
-  // Handle message submission
-  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (!input.trim() || loadingSubmit) return;
-
-    setLoadingSubmit(true);
-
-    // Add user message immediately
-    const newMessage: Message = {
-      id: params.id,
-      role: 'user',
-      content: input,
-      createdAt: new Date().toISOString(),
-    };
-
-    setMessages((prev) => [...prev, newMessage]);
-    setInput('');
-  };
+  const { loadingSubmit, handleSubmit, handleInputChange, stop } =
+    useChatStream({
+      chatId,
+      input,
+      setInput,
+      setMessages,
+      selectedModel,
+    });
 
   return (
-    <main className="flex h-[calc(100dvh)] flex-col items-center">
-      <ChatLayout
-        chatId={params.id}
-        setSelectedModel={setSelectedModel}
-        messages={messages}
-        input={input}
-        handleInputChange={handleInputChange}
-        handleSubmit={onSubmit}
-        loadingSubmit={loadingSubmit}
-        stop={stop}
-        navCollapsedSize={10}
-        defaultLayout={[30, 160]}
-        formRef={formRef}
-        setMessages={setMessages}
-        setInput={setInput}
-      />
-    </main>
+    <ChatContent
+      chatId={chatId}
+      setSelectedModel={setSelectedModel}
+      messages={messages}
+      input={input}
+      handleInputChange={handleInputChange}
+      handleSubmit={handleSubmit}
+      loadingSubmit={loadingSubmit}
+      stop={stop}
+      formRef={formRef}
+      setInput={setInput}
+      setMessages={setMessages}
+    />
   );
 }

frontend/src/app/hooks/useChatList.ts

@@ -0,0 +1,42 @@
+import { useQuery } from '@apollo/client';
+import { GET_USER_CHATS } from '@/graphql/request';
+import { Chat } from '@/graphql/type';
+import { useState, useCallback, useMemo } from 'react';
+
+export function useChatList() {
+  const [chatListUpdated, setChatListUpdated] = useState(false);
+
+  const {
+    data: chatData,
+    loading,
+    error,
+    refetch,
+  } = useQuery<{ getUserChats: Chat[] }>(GET_USER_CHATS, {
+    fetchPolicy: chatListUpdated ? 'network-only' : 'cache-first',
+  });
+
+  const handleRefetch = useCallback(() => {
+    refetch();
+  }, [refetch]);
+
+  const handleChatListUpdate = useCallback((value: boolean) => {
+    setChatListUpdated(value);
+  }, []);
+
+  const sortedChats = useMemo(() => {
+    const chats = chatData?.getUserChats || [];
+    return [...chats].sort(
+      (a: Chat, b: Chat) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    );
+  }, [chatData?.getUserChats]);
+
+  return {
+    chats: sortedChats,
+    loading,
+    error,
+    chatListUpdated,
+    setChatListUpdated: handleChatListUpdate,
+    refetchChats: handleRefetch,
+  };
+}