This commit is contained in:
Sir Blob
2025-01-26 07:02:05 -05:00
2 changed files with 104 additions and 98 deletions

View File

@@ -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";
@@ -14,85 +12,97 @@ import { useEffect, useState } from "react";
import axios from "axios";
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 [loading, setLoading] = useState(false);
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 [loading, setLoading] = useState(false);
useEffect(() => {
if (user) {
axios.get(`/api/user?userId=${user.id}`).then(response => {
setUserData(response.data);
});
}
}, [user]);
if (userData) {
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 }),
useEffect(() => {
if (user) {
axios
.get(`/api/user?userId=${user.id}`)
.then((response) => {
setUserData(response.data);
})
.catch((error) => {
console.error("Error fetching user data:", error);
});
}
}, [user]);
const data = await response.json();
useEffect(() => {
if (userData && userData.role !== "patient") {
router.push("/suite/doctor/dashboard");
}
}, [userData, router]);
setChatHistory([
...chatHistory,
{ type: 'user', text: userQuery },
{ type: 'bot', text: data.answer },
]);
const handleSend = async () => {
if (!userQuery.trim()) return;
setUserQuery('');
setLoading(false);
};
setLoading(true);
return (
<div className="container mx-auto">
<div className="grid gap-4">
<Card>
<CardContent className="space-y-4 p-4">
<div className="block items-center">
{chatHistory.map((msg, idx) => (
<Message
key={idx}
avatarUrl="/vercel.svg"
message={msg.text}
sender={msg.type === 'user' ? "You" : "Bot"}
/>
))}
</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>
try {
const response = await axios.post("/api/chat", { query: userQuery });
const botResponse = response.data?.answer || "No response from the bot.";
setChatHistory((prevHistory) => [
...prevHistory,
{ type: "user", text: userQuery },
{ type: "bot", text: botResponse },
]);
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 (
<div className="container mx-auto">
<div className="grid gap-4">
<Card>
<CardContent className="space-y-4 p-4">
<div className="block items-center">
{chatHistory.map((msg, idx) => (
<Message
key={idx}
avatarUrl="/vercel.svg"
message={msg.text}
sender={msg.type === "user" ? "You" : "Bot"}
/>
))}
</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>
);
}

View File

@@ -1,23 +1,19 @@
import { HuggingFaceInference } from "@langchain/community/llms/hf";
export default async function handler(req, res) {
if (req.method === 'POST') {
try {
const { query } = req.body;
export async function POST(req, res) {
try {
const { query } = req.body;
const model = new HuggingFaceInference({
model: 'm42-health/Llama3-Med42-8B',
apiKey: process.env.HUGGING_FACE_API_KEY,
});
const model = new HuggingFaceInference({
model: 'm42-health/Llama3-Med42-8B',
apiKey: process.env.HUGGING_FACE_API_KEY,
});
const response = await model.invoke(query);
const response = await model.invoke(query);
res.status(200).json({ answer: response });
} catch (error) {
console.error(error);
res.status(500).json({ error: 'Error generating response' });
}
} else {
res.status(405).json({ error: 'Method Not Allowed' });
res.status(200).json({ answer: response });
} catch (error) {
console.error(error);
res.status(500).json({ error: 'Error generating response' });
}
}