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
I'll set up a React project with the ChatbotUI component you've provided. Let's run this UI using Next.js and the App Router.
This setup creates a Next.js project with the ChatbotUI component you provided. The UI includes a chat interface with animated message bubbles, an input field for typing messages, and a send button.
To run this UI:
npm install or yarn to install the necessary dependencies.npm run dev or yarn dev to start the development server.http://localhost:3000 to see the Chatbot UI in action.You should now see the Chatbot UI running in your browser. You can type messages in the input field and press Enter or click the Send button to add them to the chat. The bot will respond with a default message after a short delay.
Remember that this is a frontend-only implementation. To make it fully functional, you'd need to integrate it with a backend service or API that can process the user's input and generate appropriate responses.
I'll integrate the Gemini API into the ChatbotUI component. We'll use the Gemini API to generate responses based on the user's input. First, we need to set up the environment variable for the API key, and then we'll modify the ChatbotUI component to use the Gemini API. <ReactProject id="chatbot-ui"> First, let's set up the environment variable: </ReactProject> <AddEnvironmentVariables names=["NEXT_PUBLIC_GEMINI_API_KEY"] />