fix:(Fixed on Supabase integration for chatbot AI)

Author: Kazooki123

components/ui/chats.tsx

@@ -7,7 +7,7 @@
  */
 import { createClient } from '@supabase/supabase-js';
 import { Button } from "@/components/ui/button";
-import React, { useState, JSX, SVGProps, useRef } from "react";
+import React, { useState, useEffect, JSX, SVGProps, useRef } from "react";
 import { Textarea } from "@/components/ui/textarea";
 
 type BotReply = string | undefined;
@@ -33,6 +33,27 @@ export default function Chats({ author }: ChatProp) {
   const [cooldown, setCooldown] = useState(false);
   const lastMessageTime = useRef(Date.now());
 
+  async function saveMessageToSupabase(message: {
+      role: string;
+      content: string;
+  }) {
+    try {
+      const { data, error } = await supabase.from("bot_chat_messages").insert([
+        {
+          role: message.role,
+          content: message.content,
+          author,
+          timestamp: new Date().toISOString(),
+        },
+      ]);
+
+      if (error) throw error;
+      console.log("Message saved to Supabase:", data);
+    } catch (error) {
+      console.error("Error saving message to Supabase:", error);
+    }
+  }
+
   const sendMessage = async () => {
     if (!inputMessage.trim()) return;
 
@@ -52,27 +73,6 @@ export default function Chats({ author }: ChatProp) {
     setMessages((prevMessages) => [...prevMessages, userMessage]);
     setInputMessage("");
 
-    async function saveMessageToSupabase(message: {
-      role: string;
-      content: string;
-    }) {
-      try {
-        const { data, error } = await supabase.from("bot_chat_messages").insert([
-          {
-            role: message.role,
-            content: message.content,
-            author,
-            timestamp: new Date().toISOString(),
-          },
-        ]);
-
-        if (error) throw error;
-        console.log("Message saved to Supabase:", data);
-      } catch (error) {
-        console.error("Error saving message to Supabase:", error);
-      }
-    }
-
     await saveMessageToSupabase(userMessage);
 
     try {
@@ -139,6 +139,28 @@ export default function Chats({ author }: ChatProp) {
     }
   };
 
+  useEffect(() => {
+    async function loadMessagesFromSupabase() {
+      try {
+        const { data, error } = await supabase
+          .from("bot_user_messages")
+          .select("*")
+          .eq("author", author)
+          .order("timestamp", { ascending: true });
+
+        if (error) throw error;
+
+        if (data) {
+          setMessages(data.map(({ role, content }) => ({ role, content })));
+        }
+      } catch (error) {
+        console.error("Error loading messages from Supabase:", error);
+      }
+    }
+
+    loadMessagesFromSupabase();
+  }, [author]);
+
   return (
     <div className="flex min-h-[100dvh] bg-[#1a1a1a] text-white">
       <div className="hidden md:flex flex-col items-center justify-center w-1/3 bg-[#6b3fa0] p-8">