File size: 3,246 Bytes
6e1a53e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
"use client";
import * as React from "react";
import { Send } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import axios from "axios";
import { ScrollArea } from "@/components/ui/scroll-area";
interface ChatCardProps {
sessionId: string;
}
export function ChatCard({ sessionId }: ChatCardProps) {
const [loading, setLoading] = React.useState(false);
const [placeholder, setPlaceholder] = React.useState("Ask a question...");
const [messages, setMessages] = React.useState([
{
role: "agent",
content: `Hi, I am an AI Assistant. Start by adding data or asking questions.`,
},
]);
const sendQuery = async (query: string, sessionId: string) => {
try {
const response = await axios.get(
"/api/v1/chat?query=" + query + "&session_id=" + sessionId,
);
setMessages((prevMessages) => [
...prevMessages, // Spread the previous messages
{
role: "agent",
content: response?.data?.response,
},
]);
} catch (error) {
console.log("Error getting response from bot. Please try again.");
}
};
const sendChatMessage = async (query: string, sessionId: string) => {
await sendQuery(query, sessionId);
};
return (
<>
<Card>
<ScrollArea className="mt-6 h-[60vh] max-h-[calc(100vh - 200px)]">
<CardContent>
<div className="space-y-4">
{messages.map((message, index) => (
<div
key={index}
className={cn(
"flex w-fit max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
message.role === "user"
? "ml-auto bg-primary text-primary-foreground"
: "bg-muted",
)}
>
{message.content}
</div>
))}
</div>
</CardContent>
</ScrollArea>
<CardFooter className="bottom-0 my-4">
<form
onSubmit={async (event: any) => {
event.preventDefault();
const currentMessage = event.currentTarget.message.value;
event.target.message.value = "";
if (currentMessage === "") {
return;
}
setMessages([
...messages,
{
role: "user",
content: currentMessage,
},
]);
await sendChatMessage(currentMessage, sessionId);
}}
className="flex w-full items-center space-x-2"
>
<Input
id="message"
placeholder={placeholder}
className="flex-1"
autoComplete="off"
disabled={loading}
/>
<Button type="submit" size="icon">
<Send className="h-4 w-4" />
<span className="sr-only">Send</span>
</Button>
</form>
</CardFooter>
</Card>
</>
);
}
|