feat : Chat Session Page

src/app/chat/page.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/hooks/useAuth';
+import { useChatSessions } from '@/hooks/useChatSessions';
+import { Spinner } from '@/components/atoms/Spinner';
+import { Button } from '@/components/atoms/Button';
+
+export default function ChatPage() {
+  const { user, isAuthenticated } = useAuth();
+  const {
+    data: chatSessions = [],
+    isLoading: sessionsLoading,
+    isError: sessionsError,
+  } = useChatSessions(user?.userId || '');
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      router.push('/auth');
+    }
+  }, [isAuthenticated, router]);
+
+  if (sessionsLoading) {
+    return <Spinner />;
+  }
+
+  if (sessionsError) {
+    return <p className="text-red-500">Failed to load chat sessions.</p>;
+  }
+
+  if (chatSessions.length === 0) {
+    return <p className="text-gray-500">You have no active now.</p>;
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto p-6">
+      <h1 className="text-2xl font-bold mb-4">Your Chats</h1>
+      <ul>
+        {chatSessions.map((session) => (
+          <li key={session.id} className="border-b p-2">
+            <Button
+              className="text-blue-500 underline"
+              onClick={() => router.push(`/chat/${session.id}`)}
+            >
+              {session.sessionName || `Session ${session.id}`}
+            </Button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

src/components/containers/ChatContainer.tsx

@@ -1 +1,37 @@
 'use client';
+
+import React from 'react';
+import { useChatMessages } from '@/hooks/useChatMessages';
+import { useSendMessage } from '@/hooks/useSendMessage';
+import { ChatLayout } from '@/components/organisms/ChatLayout';
+import { Spinner } from '@/components/atoms/Spinner';
+
+interface ChatContainerProps {
+  sessionId: string;
+}
+
+export const ChatContainer: React.FC<ChatContainerProps> = ({ sessionId }) => {
+  const {
+    data: messages = [],
+    isLoading: messagesLoading,
+    isError: messagesError,
+  } = useChatMessages(sessionId);
+
+  const { mutate: sendMessage, isPending: isSending } = useSendMessage();
+
+  const handleSendMessage = (message: string) => {
+    sendMessage({ message, sender: 'user', sessionId, type: 'text' });
+  };
+
+  if (messagesLoading) return <Spinner />;
+  if (messagesError)
+    return <p className="text-red-500">Failed to load message.</p>;
+
+  return (
+    <ChatLayout
+      messages={messages}
+      onSendMessage={handleSendMessage}
+      isSending={isSending}
+    />
+  );
+};

src/hooks/useChatSessions.ts

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+import { collection, getDocs, query, where } from 'firebase/firestore';
+import { db } from '../../firebaseConfig';
+import type { ChatSession } from '@/types';
+
+export const useChatSessions = (userId: string) => {
+  return useQuery<ChatSession[], Error>({
+    queryKey: ['chatSessions', userId],
+    queryFn: async () => {
+      if (!userId) throw new Error('User ID is required');
+
+      const sessionRef = collection(db, 'chats');
+      const q = query(sessionRef, where('userIds', 'array-contains', userId));
+      const snapshot = await getDocs(q);
+
+      return snapshot.docs.map((doc) => ({
+        ...doc.data(),
+        id: doc.id,
+      })) as unknown as ChatSession[];
+    },
+    enabled: !!userId,
+  });
+};

src/types/index.ts

@@ -1,4 +1,5 @@
 import { Timestamp } from 'firebase/firestore';
+import { Key } from 'react';
 
 // 1. Users
 export type UserRole = 'user' | 'admin' | 'premium';
@@ -31,6 +32,7 @@ export interface ChatMessage {
 }
 
 export interface ChatSession {
+  id?: Key | null | undefined;
   sessionName: string;
   createdAt: Timestamp;
   lastActivity: Timestamp;