"use client"; import { useState, FormEvent } from "react"; import { Paperclip, Mic, CornerDownLeft } from "lucide-react"; import { Button } from "@/components/ui/button"; import { ChatBubble, ChatBubbleAvatar, ChatBubbleMessage, } from "@/components/ui/chat-bubble"; import { ChatMessageList } from "@/components/ui/chat-message-list"; import { ChatInput } from "@/components/ui/chat-input"; export function ChatMessageListDemo() { const [messages, setMessages] = useState([ { id: 1, content: "Hello! How can I help you today?", sender: "ai", }, { id: 2, content: "I have a question about the component library.", sender: "user", }, { id: 3, content: "Sure! I'd be happy to help. What would you like to know?", sender: "ai", }, ]); const [input, setInput] = useState(""); const [isLoading, setIsLoading] = useState(false); const handleSubmit = (e: FormEvent) => { e.preventDefault(); if (!input.trim()) return; setMessages((prev) => [ ...prev, { id: prev.length + 1, content: input, sender: "user", }, ]); setInput(""); setIsLoading(true); setTimeout(() => { setMessages((prev) => [ ...prev, { id: prev.length + 1, content: "This is an AI response to your message.", sender: "ai", }, ]); setIsLoading(false); }, 1000); }; const handleAttachFile = () => { // }; const handleMicrophoneClick = () => { // }; return (

{messages.map((message) => ( {message.content} ))} {isLoading && ( )}

); }