Hackathons/HoyaHax2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use axios instead of fetch

Browse Source
This commit is contained in:
Joseph J Helfenbein
2025-01-26 06:57:43 -05:00
parent 6eb4429523
commit 78537adbc1
1 changed files with 92 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,10 @@
"use client" "use client";
import * as React from "react" import * as React from "react";
import { Button } from "@/components/ui/button";
import { Button } from "@/components/ui/button" import { Message } from "@/components/panel-ui/patient/app-chat";
import { Message } from "@/components/panel-ui/patient/app-chat" import { Input } from "@/components/ui/input";
import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card";
import { Card, CardContent } from "@/components/ui/card"
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useUser } from "@clerk/nextjs"; import { useUser } from "@clerk/nextjs";
@@ -14,85 +12,97 @@ import { useEffect, useState } from "react";
import axios from "axios"; import axios from "axios";
export default function Chat() { export default function Chat() {
const router = useRouter(); const router = useRouter();
const { user } = useUser(); const { user } = useUser();
const [userData, setUserData] = useState(null); const [userData, setUserData] = useState(null);
const [userQuery, setUserQuery] = useState(''); const [userQuery, setUserQuery] = useState("");
const [chatHistory, setChatHistory] = useState<{ type: 'user' | 'bot', text: string }>([]); const [chatHistory, setChatHistory] = useState<
const [loading, setLoading] = useState(false); { type: "user" | "bot", text: string }
>([]);
const [loading, setLoading] = useState(false);
useEffect(() => { useEffect(() => {
if (user) { if (user) {
axios.get(`/api/user?userId=${user.id}`).then(response => { axios
setUserData(response.data); .get(`/api/user?userId=${user.id}`)
}); .then((response) => {
} setUserData(response.data);
}, [user]); })
.catch((error) => {
if (userData) { console.error("Error fetching user data:", error);
if (userData.role !== "patient") {
router.push("/suite/doctor/dashboard");
}
}
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 }),
}); });
}
}, [user]);
const data = await response.json(); useEffect(() => {
if (userData && userData.role !== "patient") {
router.push("/suite/doctor/dashboard");
}
}, [userData, router]);
setChatHistory([ const handleSend = async () => {
...chatHistory, if (!userQuery.trim()) return;
{ type: 'user', text: userQuery },
{ type: 'bot', text: data.answer },
]);
setUserQuery(''); setLoading(true);
setLoading(false);
};
return ( try {
<div className="container mx-auto"> const response = await axios.post("/api/chat", { query: userQuery });
<div className="grid gap-4">
<Card> const botResponse = response.data?.answer || "No response from the bot.";
<CardContent className="space-y-4 p-4">
<div className="block items-center"> setChatHistory((prevHistory) => [
{chatHistory.map((msg, idx) => ( ...prevHistory,
<Message { type: "user", text: userQuery },
key={idx} { type: "bot", text: botResponse },
avatarUrl="/vercel.svg" ]);
message={msg.text}
sender={msg.type === 'user' ? "You" : "Bot"} setUserQuery("");
/> } catch (error) {
))} console.error("Error sending message:", error);
</div> setChatHistory((prevHistory) => [
<div className="flex items-center"> ...prevHistory,
<Input { type: "user", text: userQuery },
id="message" { type: "bot", text: "An error occurred while processing your request." },
placeholder="Ask a medical question" ]);
value={userQuery} } finally {
onChange={(e) => setUserQuery(e.target.value)} setLoading(false);
className="flex-grow mx-0 rounded-none" }
/> };
<Button
className="mx-0 rounded-none" return (
onClick={handleSend} <div className="container mx-auto">
disabled={loading} <div className="grid gap-4">
> <Card>
{loading ? 'Loading...' : 'Send'} <CardContent className="space-y-4 p-4">
</Button> <div className="block items-center">
</div> {chatHistory.map((msg, idx) => (
</CardContent> <Message
</Card> key={idx}
avatarUrl="/vercel.svg"
message={msg.text}
sender={msg.type === "user" ? "You" : "Bot"}
/>
))}
</div> </div>
</div> <div className="flex items-center">
) <Input
id="message"
placeholder="Ask a medical question"
value={userQuery}
onChange={(e) => setUserQuery(e.target.value)}
className="flex-grow mx-0 rounded-none"
/>
<Button
className="mx-0 rounded-none"
onClick={handleSend}
disabled={loading}
>
{loading ? "Loading..." : "Send"}
</Button>
</div>
</CardContent>
</Card>
</div>
</div>
);
} }