File size: 2,978 Bytes
ed5e325 | 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 | import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
interface Message {
id: number;
role: "user" | "bot";
text: string;
timestamp: Date;
}
export function BotChat() {
const [input, setInput] = useState("");
const [messages, setMessages] = useState<Message[]>([
{ id: 1, role: "bot", text: "Hello! I am your trading assistant. How can I help you today?", timestamp: new Date() }
]);
const handleSend = () => {
if (!input.trim()) return;
const userMsg: Message = {
id: messages.length + 1,
role: "user",
text: input,
timestamp: new Date()
};
setMessages(prev => [...prev, userMsg]);
setInput("");
// Simulate response
setTimeout(() => {
const botMsg: Message = {
id: messages.length + 2,
role: "bot",
text: "I'm currently in demo mode. I can't execute commands yet, but I'm listening!",
timestamp: new Date()
};
setMessages(prev => [...prev, botMsg]);
}, 1000);
};
return (
<Card className="h-[400px] flex flex-col">
<CardHeader className="py-3">
<CardTitle className="text-md">Bot Interface</CardTitle>
</CardHeader>
<CardContent className="flex-1 p-0 overflow-hidden">
<ScrollArea className="h-full p-4">
<div className="space-y-4">
{messages.map((msg) => (
<div key={msg.id} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
<div className={`max-w-[80%] rounded-lg px-3 py-2 text-sm ${msg.role === "user" ? "bg-primary text-primary-foreground" : "bg-muted"
}`}>
{msg.text}
</div>
</div>
))}
</div>
</ScrollArea>
</CardContent>
<CardFooter className="p-3 pt-0">
<form
className="flex w-full gap-2"
onSubmit={(e) => { e.preventDefault(); handleSend(); }}
>
<Input
placeholder="Type a command..."
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<Button type="submit" size="sm">Send</Button>
</form>
</CardFooter>
</Card>
);
}
|