import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { motion } from "framer-motion";
import { Send } from "lucide-react";

const ChatbotUI = () => {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState("");

const handleSend = () => {
if (input.trim()) {
setMessages([...messages, { text: input, sender: "user" }]);
setInput("");
setTimeout(() => {
setMessages((prev) => [
...prev,
{ text: "Hello! How can I assist you?", sender: "bot" },
]);
}, 1000);
}
};

return (
<div className="flex flex-col h-screen p-4 bg-gray-100">
<motion.h1
className="text-2xl font-bold text-center text-gray-800 mb-4"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
Chatbot
</motion.h1>
<Card className="flex-1 overflow-auto rounded-xl shadow-md">
<CardContent className="p-4 space-y-4">
{messages.map((msg, index) => (
<motion.div
key={index}
className={flex ${ msg.sender === "user" ? "justify-end" : "justify-start" }}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>
<div
className={max-w-xs p-3 rounded-lg text-white text-sm shadow-md ${ msg.sender === "user" ? "bg-blue-500" : "bg-gray-500" }}
>
{msg.text}
</div>
</motion.div>
))}
</CardContent>
</Card>
<div className="flex items-center gap-2 mt-4">
<Input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Type your message..."
className="flex-1"
onKeyDown={(e) => e.key === "Enter" && handleSend()}
/>
<Button onClick={handleSend} className="p-3" variant="primary">
<Send size={18} />
</Button>
</div>
</div>
);
};

export default ChatbotUI;......run this ui