import { useState, useRef, useEffect } from "react"; export default function App() { const [messages, setMessages] = useState([ { sender: "bot", text: "Hello! How can I assist you today?" }, ]); const [input, setInput] = useState(""); const [isTyping, setIsTyping] = useState(false); const messagesEndRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(() => { scrollToBottom(); }, [messages]); const handleSend = () => { if (!input.trim()) return; const userMessage = { sender: "user", text: input }; setMessages((prev) => [...prev, userMessage]); setInput(""); setIsTyping(true); // Simulate bot response after delay setTimeout(() => { const responses = [ "That's an interesting question!", "Let me think about that...", "I'm still learning, but here's my take:", "Here’s something I found helpful:", "Let me break this down for you.", ]; const reply = { sender: "bot", text: responses[Math.floor(Math.random() * responses.length)] }; setMessages((prev) => [...prev, reply]); setIsTyping(false); }, 1000); }; const handleKeyPress = (e) => { if (e.key === "Enter") { handleSend(); } }; return (

{/* Header */}

🤖 Qwen Chat Clone

{/* Messages Area */}

{messages.map((msg, index) => (

{msg.text}

))} {isTyping && (

)}

{/* Input Area */}

setInput(e.target.value)} onKeyDown={handleKeyPress} placeholder="Type a message..." className="flex-1 p-3 rounded-lg bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-gray-400" />

); } // Typing indicator component function TypingIndicator() { return (

); }