function MainComponent() { const [messages, setMessages] = useState([]); const [inputText, setInputText] = useState(""); const [isSidebarOpen, setIsSidebarOpen] = useState(true); const [isTyping, setIsTyping] = useState(false); const [selectedSession, setSelectedSession] = useState(null); const [theme, setTheme] = useState("light"); const [showEmojiPicker, setShowEmojiPicker] = useState(false); const [chatSessions, setChatSessions] = useState([ { id: 1, name: "Product Development Strategy", timestamp: "2024-01-20", category: "Work", unread: 2, pinned: true }, { id: 2, name: "Creative Writing Assistant", timestamp: "2024-01-19", category: "Personal", unread: 0, pinned: false }, { id: 3, name: "Code Review Helper", timestamp: "2024-01-18", category: "Development", unread: 1, pinned: false } ]); const messagesEndRef = useRef(null); const [upload, { loading: uploading }] = useUpload(); const [attachments, setAttachments] = useState([]); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(()=>{ scrollToBottom(); }, [ messages ]); const handleSubmit = async (e)=>{ e.preventDefault(); if (!inputText.trim() && attachments.length === 0) return; const newMessage = { text: inputText, sender: "user", id: Date.now(), attachments: [ ...attachments ] }; setMessages((prev)=>[ ...prev, newMessage ]); setInputText(""); setAttachments([]); setIsTyping(true); setTimeout(()=>{ setIsTyping(false); setMessages((prev)=>[ ...prev, { text: "This is an enhanced AI response with much more sophisticated content that demonstrates deep understanding.", sender: "ai", id: Date.now() + 1 } ]); }, 1500); }; const handleFileUpload = async (e)=>{ const file = e.target.files[0]; if (!file) return; const { url, error } = await upload({ file }); if (error) return; setAttachments((prev)=>[ ...prev, { url, name: file.name, type: file.type } ]); }; const removeAttachment = (index)=>{ setAttachments((prev)=>prev.filter((_, i)=>i !== index)); }; const toggleSidebar = ()=>setIsSidebarOpen(!isSidebarOpen); const toggleTheme = ()=>setTheme(theme === "light" ? "dark" : "light"); return /*#__PURE__*/ React.createElement("div", { className: `flex h-screen ${theme === "dark" ? "bg-gray-900" : "bg-gray-50"} transition-colors duration-300`, __source: { fileName: "", lineNumber: 102, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${isSidebarOpen ? "w-80" : "w-20"} transition-all duration-300 ${theme === "dark" ? "bg-gray-800" : "bg-white"} relative shadow-xl flex flex-col`, __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `transition-opacity duration-300 flex-1 flex flex-col ${!isSidebarOpen ? "items-center" : ""}`, __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 border-b border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-6", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, isSidebarOpen ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 114, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center", __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-white text-xl", __source: { fileName: "", lineNumber: 116, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: `text-xl font-roboto font-bold ${theme === "dark" ? "text-white" : "text-gray-800"}`, __source: { fileName: "", lineNumber: 118, columnNumber: 19 }, __self: this }, "AI Assistant")) : /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center", __source: { fileName: "", lineNumber: 125, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-white text-xl", __source: { fileName: "", lineNumber: 126, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: toggleTheme, className: "p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${theme === "dark" ? "fa-sun" : "fa-moon"} text-xl ${theme === "dark" ? "text-yellow-400" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }))), isSidebarOpen && /*#__PURE__*/ React.createElement("button", { className: "w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white rounded-xl font-roboto transition-all duration-200 shadow-lg hover:shadow-xl flex items-center justify-center space-x-2", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 140, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, "New Chat"))), isSidebarOpen && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-3 top-3 text-gray-400", __source: { fileName: "", lineNumber: 150, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search conversations...", className: `w-full pl-10 pr-4 py-2 rounded-lg ${theme === "dark" ? "bg-gray-700 text-white" : "bg-gray-100 text-gray-800"} border-0 focus:ring-2 focus:ring-blue-500`, __source: { fileName: "", lineNumber: 151, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 161, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }, "Pinned Conversations"), chatSessions.filter((s)=>s.pinned).map((session)=>/*#__PURE__*/ React.createElement("div", { key: session.id, className: `p-4 mt-2 rounded-xl cursor-pointer transition-all duration-200 hover:scale-[1.02] ${theme === "dark" ? "hover:bg-gray-700 text-white" : "hover:bg-gray-100 text-gray-800"} ${selectedSession === session.id ? "bg-blue-500 text-white shadow-lg" : ""}`, onClick: ()=>setSelectedSession(session.id), __source: { fileName: "", lineNumber: 168, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 177, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 178, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center ${session.category === "Work" ? "bg-blue-500" : session.category === "Personal" ? "bg-green-500" : "bg-purple-500"}`, __source: { fileName: "", lineNumber: 179, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${session.category === "Work" ? "briefcase" : session.category === "Personal" ? "user" : "code"} text-white`, __source: { fileName: "", lineNumber: 188, columnNumber: 31 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 198, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto font-medium line-clamp-1", __source: { fileName: "", lineNumber: 199, columnNumber: 31 }, __self: this }, session.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-75 flex items-center space-x-2", __source: { fileName: "", lineNumber: 202, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-xs", __source: { fileName: "", lineNumber: 203, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 204, columnNumber: 33 }, __self: this }, session.timestamp)))), session.unread > 0 && /*#__PURE__*/ React.createElement("span", { className: "bg-blue-600 text-white text-xs px-2 py-1 rounded-full animate-pulse", __source: { fileName: "", lineNumber: 209, columnNumber: 29 }, __self: this }, session.unread))))), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 218, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 219, columnNumber: 19 }, __self: this }, "Recent Conversations"), chatSessions.filter((s)=>!s.pinned).map((session)=>/*#__PURE__*/ React.createElement("div", { key: session.id, className: `p-4 mt-2 rounded-xl cursor-pointer transition-all duration-200 hover:scale-[1.02] ${theme === "dark" ? "hover:bg-gray-700 text-white" : "hover:bg-gray-100 text-gray-800"} ${selectedSession === session.id ? "bg-blue-500 text-white shadow-lg" : ""}`, onClick: ()=>setSelectedSession(session.id), __source: { fileName: "", lineNumber: 225, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 234, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 235, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center ${session.category === "Work" ? "bg-blue-500" : session.category === "Personal" ? "bg-green-500" : "bg-purple-500"}`, __source: { fileName: "", lineNumber: 236, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${session.category === "Work" ? "briefcase" : session.category === "Personal" ? "user" : "code"} text-white`, __source: { fileName: "", lineNumber: 245, columnNumber: 31 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 255, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto font-medium line-clamp-1", __source: { fileName: "", lineNumber: 256, columnNumber: 31 }, __self: this }, session.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-75 flex items-center space-x-2", __source: { fileName: "", lineNumber: 259, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-xs", __source: { fileName: "", lineNumber: 260, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 261, columnNumber: 33 }, __self: this }, session.timestamp)))), session.unread > 0 && /*#__PURE__*/ React.createElement("span", { className: "bg-blue-600 text-white text-xs px-2 py-1 rounded-full animate-pulse", __source: { fileName: "", lineNumber: 266, columnNumber: 29 }, __self: this }, session.unread))))))), /*#__PURE__*/ React.createElement("div", { className: `p-4 border-t border-gray-200 dark:border-gray-700 ${!isSidebarOpen ? "flex justify-center" : ""}`, __source: { fileName: "", lineNumber: 278, columnNumber: 11 }, __self: this }, isSidebarOpen ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 282, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 flex items-center justify-center", __source: { fileName: "", lineNumber: 283, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-white", __source: { fileName: "", lineNumber: 284, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 286, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto font-medium text-gray-800 dark:text-white", __source: { fileName: "", lineNumber: 287, columnNumber: 19 }, __self: this }, "John Doe"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 290, columnNumber: 19 }, __self: this }, "Premium Member"))) : /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 flex items-center justify-center", __source: { fileName: "", lineNumber: 296, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-white", __source: { fileName: "", lineNumber: 297, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: toggleSidebar, className: `absolute -right-3 top-6 ${theme === "dark" ? "bg-gray-800" : "bg-white"} p-2 rounded-full shadow-lg transition-all duration-200 hover:bg-blue-500 hover:text-white transform hover:scale-110`, __source: { fileName: "", lineNumber: 303, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-${isSidebarOpen ? "left" : "right"}`, __source: { fileName: "", lineNumber: 307, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col flex-1", __source: { fileName: "", lineNumber: 313, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex items-center justify-between px-6 py-4 ${theme === "dark" ? "bg-gray-800" : "bg-white"} shadow-md`, __source: { fileName: "", lineNumber: 314, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 317, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: `text-2xl font-roboto font-bold ${theme === "dark" ? "text-white" : "text-gray-800"}`, __source: { fileName: "", lineNumber: 318, columnNumber: 13 }, __self: this }, "Chat Assistant"), /*#__PURE__*/ React.createElement("span", { className: `px-3 py-1 rounded-full text-sm ${theme === "dark" ? "bg-gray-700 text-green-400" : "bg-green-100 text-green-600"}`, __source: { fileName: "", lineNumber: 323, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle text-xs mr-2 animate-pulse", __source: { fileName: "", lineNumber: 326, columnNumber: 15 }, __self: this }), "Online")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 329, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `p-2 rounded-lg hover:bg-gray-100 transition-colors transform hover:scale-110 ${theme === "dark" ? "text-gray-300 hover:bg-gray-700" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 330, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video text-xl", __source: { fileName: "", lineNumber: 333, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: `p-2 rounded-lg hover:bg-gray-100 transition-colors transform hover:scale-110 ${theme === "dark" ? "text-gray-300 hover:bg-gray-700" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 335, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone text-xl", __source: { fileName: "", lineNumber: 338, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: `p-2 rounded-lg hover:bg-gray-100 transition-colors transform hover:scale-110 ${theme === "dark" ? "text-gray-300 hover:bg-gray-700" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 340, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-xl", __source: { fileName: "", lineNumber: 343, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: `flex-1 overflow-y-auto p-6 space-y-6 ${theme === "dark" ? "bg-gray-900" : "bg-gray-50"}`, __source: { fileName: "", lineNumber: 348, columnNumber: 9 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: `flex ${message.sender === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 352, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex items-start max-w-[70%] ${message.sender === "user" ? "flex-row-reverse" : ""}`, __source: { fileName: "", lineNumber: 356, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-10 h-10 rounded-full flex items-center justify-center ${message.sender === "user" ? "bg-gradient-to-r from-blue-500 to-purple-600" : "bg-gradient-to-r from-pink-500 to-purple-500"} ${message.sender === "user" ? "ml-3" : "mr-3"}`, __source: { fileName: "", lineNumber: 359, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${message.sender === "user" ? "fa-user" : "fa-robot"} text-white`, __source: { fileName: "", lineNumber: 366, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `${message.sender === "user" ? "bg-gradient-to-r from-blue-500 to-purple-600 text-white" : theme === "dark" ? "bg-gray-800 text-white" : "bg-white text-gray-800"} p-4 rounded-2xl shadow-lg transform transition-all duration-200 hover:scale-[1.02]`, __source: { fileName: "", lineNumber: 370, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto leading-relaxed", __source: { fileName: "", lineNumber: 379, columnNumber: 19 }, __self: this }, message.text), message.attachments && message.attachments.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-3 flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 381, columnNumber: 21 }, __self: this }, message.attachments.map((attachment, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative group", __source: { fileName: "", lineNumber: 383, columnNumber: 25 }, __self: this }, attachment.type.startsWith("image/") ? /*#__PURE__*/ React.createElement("img", { src: attachment.url, alt: "Attachment", className: "max-w-[200px] rounded-lg transition-transform duration-200 hover:scale-105", __source: { fileName: "", lineNumber: 385, columnNumber: 29 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 bg-gray-100 dark:bg-gray-700 p-2 rounded-lg", __source: { fileName: "", lineNumber: 391, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file", __source: { fileName: "", lineNumber: 392, columnNumber: 31 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 393, columnNumber: 31 }, __self: this }, attachment.name))))))))), isTyping && /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 405, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 flex items-center justify-center", __source: { fileName: "", lineNumber: 406, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-white", __source: { fileName: "", lineNumber: 407, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `p-4 rounded-2xl ${theme === "dark" ? "bg-gray-800" : "bg-white"} shadow-lg`, __source: { fileName: "", lineNumber: 409, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 412, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 rounded-full bg-gray-400 animate-bounce", __source: { fileName: "", lineNumber: 413, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 rounded-full bg-gray-400 animate-bounce", style: { animationDelay: "0.2s" }, __source: { fileName: "", lineNumber: 414, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 rounded-full bg-gray-400 animate-bounce", style: { animationDelay: "0.4s" }, __source: { fileName: "", lineNumber: 418, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 426, columnNumber: 11 }, __self: this })), attachments.length > 0 && /*#__PURE__*/ React.createElement("div", { className: `px-6 py-3 ${theme === "dark" ? "bg-gray-800" : "bg-white"} border-t border-gray-200 dark:border-gray-700`, __source: { fileName: "", lineNumber: 430, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 433, columnNumber: 13 }, __self: this }, attachments.map((attachment, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative group", __source: { fileName: "", lineNumber: 435, columnNumber: 17 }, __self: this }, attachment.type.startsWith("image/") ? /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 437, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: attachment.url, alt: "Attachment preview", className: "h-16 w-16 object-cover rounded-lg transition-transform duration-200 hover:scale-110", __source: { fileName: "", lineNumber: 438, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeAttachment(index), className: "absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center transform transition-transform duration-200 hover:scale-110", __source: { fileName: "", lineNumber: 443, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xs", __source: { fileName: "", lineNumber: 447, columnNumber: 25 }, __self: this }))) : /*#__PURE__*/ React.createElement("div", { className: "relative bg-gray-100 dark:bg-gray-700 p-2 rounded-lg", __source: { fileName: "", lineNumber: 451, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file mr-2", __source: { fileName: "", lineNumber: 452, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 453, columnNumber: 23 }, __self: this }, attachment.name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeAttachment(index), className: "absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center transform transition-transform duration-200 hover:scale-110", __source: { fileName: "", lineNumber: 454, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xs", __source: { fileName: "", lineNumber: 458, columnNumber: 25 }, __self: this }))))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: `p-6 ${theme === "dark" ? "bg-gray-800" : "bg-white"} border-t ${theme === "dark" ? "border-gray-700" : "border-gray-200"}`, __source: { fileName: "", lineNumber: 468, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 472, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 473, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", id: "file-upload", className: "hidden", onChange: handleFileUpload, multiple: true, __source: { fileName: "", lineNumber: 474, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "file-upload", className: `p-3 rounded-xl ${theme === "dark" ? "hover:bg-gray-700" : "hover:bg-gray-100"} transition-all duration-200 cursor-pointer transform hover:scale-110`, __source: { fileName: "", lineNumber: 481, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paperclip text-gray-500", __source: { fileName: "", lineNumber: 485, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowEmojiPicker(!showEmojiPicker), className: `p-3 rounded-xl ${theme === "dark" ? "hover:bg-gray-700" : "hover:bg-gray-100"} transition-all duration-200 transform hover:scale-110`, __source: { fileName: "", lineNumber: 487, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-smile text-gray-500", __source: { fileName: "", lineNumber: 492, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 relative", __source: { fileName: "", lineNumber: 496, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputText, onChange: (e)=>setInputText(e.target.value), placeholder: "Type your message...", className: `w-full px-4 py-3 rounded-xl ${theme === "dark" ? "bg-gray-700 text-white placeholder-gray-400" : "bg-gray-100 text-gray-800"} border-0 focus:ring-2 focus:ring-blue-500 font-roboto transition-all duration-200`, __source: { fileName: "", lineNumber: 497, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", className: "absolute right-4 top-1/2 transform -translate-y-1/2 hover:scale-110 transition-transform duration-200", __source: { fileName: "", lineNumber: 509, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-microphone text-gray-500", __source: { fileName: "", lineNumber: 513, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: !inputText.trim() && attachments.length === 0, className: `px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white rounded-xl font-roboto transition-all duration-200 shadow-lg hover:shadow-xl flex items-center space-x-2 transform hover:scale-105 ${!inputText.trim() && attachments.length === 0 ? "opacity-50 cursor-not-allowed" : ""}`, __source: { fileName: "", lineNumber: 517, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 526, columnNumber: 15 }, __self: this }, "Send"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 527, columnNumber: 15 }, __self: this })))))); }