Working frontend interface with supabse storage

src/pages/dashboard/history.tsx

@@ -1,65 +1,96 @@
-import React from 'react';
-import { Calendar } from 'lucide-react';
-import { Card } from '../../components/ui/card';
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { MessageSquare, Trash2 } from 'lucide-react';
+import { Button } from '../../components/ui/Button';
+import { useAuth } from '../../contexts/AuthContext';
+import { chatService } from '../../lib/chat-service';
+import type { ChatInstance } from '../../types/supabase';
 
-const mockHistory = [
-  {
-    id: '1',
-    date: new Date('2024-03-10'),
-    activity: 'Studied Biology',
-    duration: '2 hours',
-    topics: ['Photosynthesis', 'Cell Structure'],
-  },
-  {
-    id: '2',
-    date: new Date('2024-03-09'),
-    activity: 'Practice Problems',
-    duration: '1.5 hours',
-    topics: ['Algebra', 'Calculus'],
-  },
-  {
-    id: '3',
-    date: new Date('2024-03-08'),
-    activity: 'Reading Assignment',
-    duration: '1 hour',
-    topics: ['Literature', 'Poetry Analysis'],
-  },
-];
+export default function StudyHistory() {
+  const { user } = useAuth();
+  const [chats, setChats] = useState<ChatInstance[]>([]);
+  const [loading, setLoading] = useState(true);
 
-function StudyHistory() {
-  return (
-    <div className="space-y-6">
-      <h1 className="text-3xl font-bold">Study History</h1>
-      <div className="space-y-4">
-        {mockHistory.map((item) => (
-          <Card key={item.id} className="p-4">
-            <div className="flex items-start space-x-4">
-              <Calendar className="h-5 w-5 text-muted-foreground" />
-              <div className="flex-1">
-                <div className="flex items-center justify-between">
-                  <h3 className="font-medium">{item.activity}</h3>
-                  <span className="text-sm text-muted-foreground">
-                    {item.date.toLocaleDateString()}
-                  </span>
-                </div>
-                <p className="text-sm text-muted-foreground">Duration: {item.duration}</p>
-                <div className="mt-2 flex flex-wrap gap-2">
-                  {item.topics.map((topic) => (
-                    <span
-                      key={topic}
-                      className="rounded-full bg-primary/10 px-2 py-1 text-xs text-primary"
-                    >
-                      {topic}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </Card>
-        ))}
+  useEffect(() => {
+    if (!user) return;
+
+    const loadChats = async () => {
+      const chatInstances = await chatService.getChatInstances(user.id);
+      setChats(chatInstances);
+      setLoading(false);
+    };
+
+    loadChats();
+  }, [user]);
+
+  const handleDelete = async (chatId: string) => {
+    const success = await chatService.deleteChatInstance(chatId);
+    if (success) {
+      setChats(prev => prev.filter(chat => chat.id !== chatId));
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="text-lg">Loading...</div>
       </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 p-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Study History</h1>
+          <p className="text-muted-foreground">View your past conversations</p>
+        </div>
+        <Link to="/dashboard/ask">
+          <Button>
+            <MessageSquare className="mr-2 h-4 w-4" />
+            New Chat
+          </Button>
+        </Link>
+      </div>
+
+      {chats.length === 0 ? (
+        <div className="rounded-lg border border-dashed p-8 text-center">
+          <h3 className="text-lg font-medium">No chat history</h3>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Start a new conversation to see it here
+          </p>
+          <Link to="/dashboard/ask" className="mt-4 inline-block">
+            <Button>Start a new chat</Button>
+          </Link>
+        </div>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {chats.map((chat) => (
+            <div
+              key={chat.id}
+              className="group relative rounded-lg border bg-card p-4 transition-colors hover:bg-muted/50"
+            >
+              <Link to={`/dashboard/ask/${chat.id}`} className="block">
+                <h3 className="font-medium">{chat.title}</h3>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  Last updated: {new Date(chat.last_message_at).toLocaleString()}
+                </p>
+              </Link>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-100"
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleDelete(chat.id);
+                }}
+              >
+                <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
-
-export default StudyHistory;