use axios instead of fetch

src/app/(panels)/suite/patient/chat/page.jsx

@@ -1,12 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
-
-import { Button } from "@/components/ui/button"
-import { Message } from "@/components/panel-ui/patient/app-chat"
-import { Input } from "@/components/ui/input"
-
-import { Card, CardContent } from "@/components/ui/card"
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { Message } from "@/components/panel-ui/patient/app-chat";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
 
 import { useRouter } from "next/navigation";
 import { useUser } from "@clerk/nextjs";
@@ -17,46 +15,58 @@ export default function Chat() {
   const router = useRouter();
   const { user } = useUser();
   const [userData, setUserData] = useState(null);
-    const [userQuery, setUserQuery] = useState('');
-    const [chatHistory, setChatHistory] = useState<{ type: 'user' | 'bot', text: string }>([]);
+  const [userQuery, setUserQuery] = useState("");
+  const [chatHistory, setChatHistory] = useState<
+    { type: "user" | "bot", text: string }
+  >([]);
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     if (user) {
-            axios.get(`/api/user?userId=${user.id}`).then(response => {
+      axios
+        .get(`/api/user?userId=${user.id}`)
+        .then((response) => {
           setUserData(response.data);
+        })
+        .catch((error) => {
+          console.error("Error fetching user data:", error);
         });
     }
   }, [user]);
 
-    if (userData) {
-        if (userData.role !== "patient") {
+  useEffect(() => {
+    if (userData && userData.role !== "patient") {
       router.push("/suite/doctor/dashboard");
     }
-    }
+  }, [userData, router]);
 
   const handleSend = async () => {
     if (!userQuery.trim()) return;
 
     setLoading(true);
-        const response = await fetch('/api/chat', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ query: userQuery }),
-        });
 
-        const data = await response.json();
+    try {
+      const response = await axios.post("/api/chat", { query: userQuery });
 
-        setChatHistory([
-            ...chatHistory,
-            { type: 'user', text: userQuery },
-            { type: 'bot', text: data.answer },
+      const botResponse = response.data?.answer || "No response from the bot.";
+
+      setChatHistory((prevHistory) => [
+        ...prevHistory,
+        { type: "user", text: userQuery },
+        { type: "bot", text: botResponse },
       ]);
 
-        setUserQuery('');
+      setUserQuery("");
+    } catch (error) {
+      console.error("Error sending message:", error);
+      setChatHistory((prevHistory) => [
+        ...prevHistory,
+        { type: "user", text: userQuery },
+        { type: "bot", text: "An error occurred while processing your request." },
+      ]);
+    } finally {
       setLoading(false);
+    }
   };
 
   return (
@@ -70,7 +80,7 @@ export default function Chat() {
                   key={idx}
                   avatarUrl="/vercel.svg"
                   message={msg.text}
-                                    sender={msg.type === 'user' ? "You" : "Bot"} 
+                  sender={msg.type === "user" ? "You" : "Bot"}
                 />
               ))}
             </div>
@@ -87,12 +97,12 @@ export default function Chat() {
                 onClick={handleSend}
                 disabled={loading}
               >
-                                {loading ? 'Loading...' : 'Send'}
+                {loading ? "Loading..." : "Send"}
               </Button>
             </div>
           </CardContent>
         </Card>
       </div>
     </div>
-    )
+  );
 }