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 (
); }

Comments

Post a Comment

Popular posts from this blog

Image
YakshaScans Clone - Manga Reader YakshaManga Home Manga Genres Login Read Your Favorite Manga Explore thousands of manga titles updated daily. Popular Manga Updates {Array.from({ length: 10 }).map((_, i) => ( Manga Title {i + 1} Chapter {Math.floor(Math.random() * 100)} Updated 2 hours ago ))} Latest Manga Updates {Array.from({ length: 10 }).map((_, i) => ( New Title {i + 1} Chapter {Math.floor(Math.random() * 50)} Updated just now ))} Lost your password? Please enter your username or email address. You will r...
Read more
  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...
Read more