{[0, 1, 2].map((i) => ( ))}

) } interface ChatMessageProps { content: string | ReactNode isUser?: boolean timestamp?: string } function ChatMessage({ content, isUser = false, timestamp }: ChatMessageProps) { return ( {/* Avatar */}

{isUser ? ( ) : ( )}

{/* Message Content */}

{content}

{timestamp && ( {timestamp} )}

) } interface ChatInputProps { onSend: (message: string) => void } function ChatInput({ onSend }: ChatInputProps) { const [message, setMessage] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (message.trim()) { onSend(message) setMessage("") } } return ( ) } interface Message { id: string content: string isUser: boolean timestamp: string } export function ChatBox() { const [messages, setMessages] = useState([ { id: "1", content: "Hello! How can I help you today?", isUser: false, timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", }), }, ]) const [isTyping, setIsTyping] = useState(false) const handleSend = (content: string) => { const newMessage: Message = { id: Date.now().toString(), content, isUser: true, timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", }), } setMessages((prev) => [...prev, newMessage]) setIsTyping(true) // Simulate response setTimeout(() => { setIsTyping(false) const response: Message = { id: (Date.now() + 1).toString(), content: "Thank you for your message. I'm processing your request...", isUser: false, timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", }), } setMessages((prev) => [...prev, response]) }, 2000) } return (

{/* Chat Header */}

[ CHAT SESSION ] [ ACTIVE ]

{/* Messages Container */} {messages.map((message) => ( ))} {isTyping && } {/* Input Area */}

) }`,__src__:"registry/default/example/sections/chatbox.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { useState, "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ReactNode } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { motion } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"framer-motion"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Send, Terminal, User } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"lucide-react"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"Typing"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"SVGProps"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"SVGSVGElement"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">) "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{..."}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"0 0 24 24"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"2"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"strokeLinecap"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"round"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"strokeLinejoin"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"round"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"polyline"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"points"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"22 12 18 12 15 21 9 3 6 12 2 12"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"TypingIndicator"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex gap-3"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-8 h-8 border border-terminal-gray flex items-center justify-center"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Typing"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-4 h-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"px-4 py-4 rounded-md border bg-white dark:bg-zinc-800 border-terminal-gray font-mono"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex gap-1"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"]."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-1 h-1 bg-black rounded-full dark:bg-white"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" opacity: ["}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.4"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.4"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"],"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" y: ["}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"],"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"transition"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" duration: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" repeat: Number.POSITIVE_INFINITY,"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" delay: i "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.2"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"ChatMessageProps"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"ReactNode"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"isUser"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"boolean"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"timestamp"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"ChatMessage"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"({ "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"isUser"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"timestamp"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"ChatMessageProps"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"10"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`flex gap-3 ${"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"isUser"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex-row-reverse"'}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'""}`'}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Avatar */"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex-shrink-0 w-8 h-8 border border-terminal-gray flex items-center justify-center"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"isUser "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"User"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-4 h-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ) "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Terminal"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-4 h-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Message Content */"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`flex flex-col ${"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"isUser"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"items-end"'}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"items-start"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"} max-w-[80%]`"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`px-4 py-2 rounded-md font-mono text-sm"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" ${"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"isUser"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"bg-terminal-gray text-black dark:text-white ml-auto"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"border border-terminal-gray"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"timestamp "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-xs text-terminal-gray mt-1 font-mono"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"timestamp"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"ChatInputProps"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"onSend"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"message"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"void"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"ChatInput"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"({ "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"onSend"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"ChatInputProps"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"message"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"setMessage"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"handleSubmit"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"FormEvent"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" e."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"preventDefault"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" (message."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"trim"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"onSend"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(message)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setMessage"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"form"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"onSubmit"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"handleSubmit"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex gap-2"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"message"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"onChange"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setMessage"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(e.target.value)"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"placeholder"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Type a message..."'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex-1 px-4 py-2 bg-transparent border border-terminal-gray font-mono text-sm focus:outline-none"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"whileHover"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ scale: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1.05"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"whileTap"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ scale: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.95"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"submit"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"px-4 py-2 border border-terminal-gray hover:bg-terminal-gray transition-colors"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Send"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-4 h-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"Message"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"isUser"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"boolean"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"timestamp"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"ChatBox"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"messages"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"setMessages"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"Message"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"[]>(["})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" id: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"1"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" content: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Hello! How can I help you today?"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" isUser: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" timestamp: "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"new"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"Date"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"toLocaleTimeString"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"([], {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" hour: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"2-digit"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" minute: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"2-digit"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }),"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ])"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"isTyping"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"setIsTyping"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"handleSend"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"newMessage"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"Message"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" id: Date."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"now"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"toString"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(),"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" content,"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" isUser: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" timestamp: "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"new"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"Date"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"toLocaleTimeString"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"([], {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" hour: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"2-digit"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" minute: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"2-digit"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }),"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setMessages"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"prev"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"prev, newMessage])"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setIsTyping"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"// Simulate response"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setTimeout"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setIsTyping"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"response"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"Message"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" id: (Date."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"now"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"toString"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(),"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" content: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:`"Thank you for your message. I'm processing your request..."`}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" isUser: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" timestamp: "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"new"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"Date"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"toLocaleTimeString"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"([], {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" hour: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"2-digit"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" minute: "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"2-digit"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }),"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setMessages"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"prev"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"prev, response])"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"2000"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-full max-w-4xl mx-auto border border-terminal-gray bg-white dark:bg-black"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Chat Header */"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex items-center justify-between border-b border-terminal-gray h-12 px-4 font-mono"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-sm text-terminal-gray"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">[ CHAT SESSION ]"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-sm text-terminal-gray"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">[ ACTIVE ]"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Messages Container */"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"layout"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"h-[500px] overflow-y-auto p-4 space-y-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"messages."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"message"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"ChatMessage"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"message.id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"message.content"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"isUser"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"message.isUser"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"timestamp"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"message.timestamp"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"isTyping "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"TypingIndicator"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Input Area */"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"border-t border-terminal-gray p-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"ChatInput"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"onSend"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"handleSend"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsx)(c,{defaultValue:"manual",children:(0,n.jsx)(r,{value:"manual",children:(0,n.jsxs)(t,{children:[(0,n.jsx)(i,{children:"Install the following dependencies:"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install framer-motion lucide-react `,__npmCommand__:`npm install framer-motion lucide-react `,__yarnCommand__:`yarn add framer-motion lucide-react `,__pnpmCommand__:`pnpm add framer-motion lucide-react `,__bunCommand__:`bun add framer-motion lucide-react `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"npm install framer-motion lucide-react"})})})})}),(0,n.jsx)(i,{children:"Copy and paste the code into your project."})]})})})]})}function E(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(y,e)})):y(e)}var b=E;function o(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return A(x);})(); ;return Component;

AI Chatbox

Installation

Install the following dependencies:

Copy and paste the code into your project.