project switch, fix ui

frontend/src/app/[locale]/(protect)/chat/components/chat-arena/chat-arena-index.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 
-import { useParams, useSearchParams } from 'next/navigation';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
 
 import useCreate from '@/hooks/use-create';
 import useQuery from '@/hooks/use-query';
@@ -22,6 +22,7 @@ interface ChatSubmitOptions {
 
 type ChatSubmitHandler = (event?: ChatSubmitEvent, options?: ChatSubmitOptions) => void;
 export default function ChatIndex() {
+    const router = useRouter();
     const [messages, setMessages] = useState<Message[]>([]);
     const [input, setInput] = useState('');
     const [isGenerating, setIsGenerating] = useState(false);
@@ -54,6 +55,7 @@ export default function ChatIndex() {
                 'chat',
                 query
             );
+            // router.push(`/chat/${param.id}?projectId=${projectId}`);
         }
 
         const newMessages = [...messages, userMessage];

frontend/src/app/[locale]/(protect)/chat/components/chat-arena/header-chat.tsx

@@ -3,13 +3,12 @@
 import { useParams } from 'next/navigation';
 
 import useGet from '@/hooks/use-get';
+import { useListChatStore } from '@/store/chat-list.store';
 
 export default function HeaderChat() {
+    const { selectedChat, setSelectedChat } = useListChatStore();
     const param: { id: string[] } = useParams();
-    let chat: any = null;
-    if (param.id) {
-        chat = useGet('chat-sessions', param.id);
-    }
+    useGet('chat-sessions', param.id, setSelectedChat);
 
-    return <div className='flex-1 text-center'>{chat?.title}</div>;
+    return <div className='flex-1 text-center'>{selectedChat?.title}</div>;
 }

frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/file-list-item.jsx

@@ -11,19 +11,31 @@ export function FileItem({ file }) {
         setOpen(!open);
     }
 
+    function handleClickMoveOut() {
+        console.log(window);
+    }
+
     return (
-        <div className={`relative flex max-h-full w-full items-center justify-between rounded-lg`}>
+        <div className={`shadow-primary relative ml-2 flex max-h-full w-full items-center justify-between rounded-lg`}>
             <div
-                className={`ml-2 flex h-full w-full flex-1/2 items-center rounded-l-lg ${file.type === 'pdf' ? 'bg-orange-400' : 'bg-blue-500'} p-3`}>
-                <div className={`translate-x-[-50%] -rotate-90 font-semibold text-white uppercase`}>{file.type}</div>
+                className={`flex h-full w-full flex-1/2 items-center rounded-l-lg ${file.type === 'pdf' ? 'bg-orange-400' : 'bg-blue-500'} p-3`}>
+                <div className={`translate-x-[-50%] -rotate-90 pt-2 font-semibold text-white uppercase`}>
+                    {file.type}
+                </div>
             </div>
-            <div className='a flex flex-1/2 flex-col items-end gap-2 rounded-r-lg bg-gray-500 px-2 py-2 text-white'>
-                <BookOpen className='h-4 w-4' />
-                <FilePen className='h-4 w-4' />
-                <Trash2 className='h-4 w-4' />
+            <div className='flex flex-1/2 flex-col items-end gap-0.5 rounded-r-lg bg-gray-500 px-1 py-2 text-white'>
+                <div className='p-1 hover:rounded-full hover:bg-white hover:text-black'>
+                    <BookOpen className='h-4 w-4' />
+                </div>
+                <div className='p-1 hover:rounded-full hover:bg-white hover:text-black'>
+                    <FilePen className='h-4 w-4 hover:rounded-full hover:bg-white hover:text-black' />
+                </div>
+                <div className='p-1 hover:rounded-full hover:bg-white hover:text-black'>
+                    <Trash2 className='h-4 w-4 hover:rounded-full hover:bg-white hover:text-black' />
+                </div>
             </div>
             <div
-                className={`absolute right-0 z-50 flex h-full w-[86%] justify-between gap-1 rounded-lg bg-white px-2 ${open ? '-translate-x-6.5' : 'translate-x-0'} transition-all`}>
+                className={`absolute left-0 z-50 flex h-full w-[88%] justify-between gap-1 rounded-lg bg-white px-2 ${open ? '-translate-x-0.5' : 'translate-x-7.5'} transition-all`}>
                 <div className='flex flex-col justify-center'>
                     <p className='text-sm font-medium text-stone-700'>{file.name}</p>
                     <p className='text-xs text-gray-500'>{file.size}</p>

frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-document-right/file-list.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { Checkbox } from '@/registry/new-york-v4/ui/checkbox';
 
 import { FileItem } from './file-list-item';
+import { Trash2 } from 'lucide-react';
 
 // Mock data cho danh sách file
 const mockFiles = [
@@ -21,13 +22,21 @@ const mockFiles = [
 ];
 
 export function FileList() {
+    const [selectAll, setSelectAll] = useState(false);
+
     return (
         <div className='h-full flex-1 overflow-hidden rounded-lg p-4'>
             <div className='flex w-full items-center justify-between p-2 text-sm font-medium'>
                 Library
-                <div className='flex gap-2'>
-                    <Checkbox className='h-5 w-5 border-stone-500 ring-stone-500 data-[state=checked]:border-stone-500' />
-                    <Checkbox className='h-5 w-5 rounded-full border-stone-500 ring-stone-500 data-[state=checked]:border-stone-500' />
+                <div className='flex items-center gap-2'>
+                    <div
+                        className={`rounded-full p-1 transition-all hover:bg-red-500 ${selectAll ? 'visible' : 'invisible'}`}>
+                        <Trash2 className='h-5 w-5 text-red-600 hover:text-white' />
+                    </div>
+                    <Checkbox
+                        onCheckedChange={() => setSelectAll(!selectAll)}
+                        className='h-5 w-5 border-stone-500 ring-stone-500 data-[state=checked]:border-stone-500'
+                    />
                 </div>
             </div>
             <div className='flex h-full flex-col gap-2 overflow-y-scroll p-2'>

frontend/src/app/[locale]/(protect)/chat/components/sidebar/sidebar-function-left/chat-list.tsx

@@ -178,6 +178,9 @@ export function ChatList() {
                     </CollapsibleContent>
                 </Collapsible>
             ))}
+            <div className='rounded-lg border border-dashed text-gray-500'>
+                <div className={`w-full cursor-pointer rounded-lg border-gray-500 p-2 text-center`}>New Chat</div>
+            </div>
         </div>
     );
 }