function MainComponent() { const [messages, setMessages] = React.useState([ { role: "assistant", content: "Hello! I'm CL1, your ultimate AI chat assistant. Ask me anything - I can help with writing, coding, translations, creative content, problem-solving, and much more. What would you like to know or do today?" } ]); const [inputMessage, setInputMessage] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [error, setError] = React.useState(null); const messagesEndRef = React.useRef(null); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; React.useEffect(()=>{ scrollToBottom(); }, [ messages ]); const sendMessage = async ()=>{ if (!inputMessage.trim() || isLoading) return; const userMessage = { role: "user", content: inputMessage.trim() }; const newMessages = [ ...messages, userMessage ]; setMessages(newMessages); setInputMessage(""); setIsLoading(true); setError(null); try { const response = await fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: newMessages }) }); if (!response.ok) { throw new Error(`API request failed: ${response.status} ${response.statusText}`); } const data = await response.json(); const assistantMessage = { role: "assistant", content: data.choices[0].message.content }; setMessages([ ...newMessages, assistantMessage ]); } catch (error) { console.error("Error sending message:", error); setError("Sorry, I couldn't process your request. Please try again."); } finally{ setIsLoading(false); } }; const handleKeyPress = (e)=>{ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendMessage(); } }; const clearChat = ()=>{ setMessages([ { role: "assistant", content: "Hello! I'm CL1, your ultimate AI chat assistant. Ask me anything - I can help with writing, coding, translations, creative content, problem-solving, and much more. What would you like to know or do today?" } ]); setError(null); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 font-inter", __source: { fileName: "", lineNumber: 86, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-sm border-b border-gray-200", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto px-4 py-4 flex items-center justify-between", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-bold text-lg", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, "CL1")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, "CL1"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, "Your Ultimate AI Chat Assistant"))), /*#__PURE__*/ React.createElement("button", { onClick: clearChat, className: "px-4 py-2 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash mr-2", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }), "Clear Chat"))), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto px-4 py-6 h-[calc(100vh-140px)] flex flex-col", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto space-y-4 mb-4", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[80%] md:max-w-[70%] rounded-2xl px-4 py-3 ${message.role === "user" ? "bg-gradient-to-r from-blue-500 to-indigo-600 text-white" : "bg-white text-gray-800 shadow-sm border border-gray-200"}`, __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-wrap break-words", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, message.content)))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl px-4 py-3 shadow-sm border border-gray-200", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-1", __source: { fileName: "", lineNumber: 138, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", __source: { fileName: "", lineNumber: 139, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "0.1s" }, __source: { fileName: "", lineNumber: 140, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "0.2s" }, __source: { fileName: "", lineNumber: 144, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 149, columnNumber: 19 }, __self: this }, "CL1 is thinking...")))), error && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle mr-2", __source: { fileName: "", lineNumber: 160, columnNumber: 17 }, __self: this }), error)), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl shadow-lg border border-gray-200 p-4", __source: { fileName: "", lineNumber: 170, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-end space-x-3", __source: { fileName: "", lineNumber: 171, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), onKeyPress: handleKeyPress, placeholder: "Ask anything. Do everything. Instantly...", className: "w-full resize-none border-0 focus:ring-0 focus:outline-none text-gray-800 placeholder-gray-500", rows: "1", style: { minHeight: "24px", maxHeight: "120px", height: "auto" }, onInput: (e)=>{ e.target.style.height = "auto"; e.target.style.height = e.target.scrollHeight + "px"; }, disabled: isLoading, __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, disabled: !inputMessage.trim() || isLoading, className: `p-3 rounded-xl transition-all ${!inputMessage.trim() || isLoading ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-gradient-to-r from-blue-500 to-indigo-600 text-white hover:from-blue-600 hover:to-indigo-700 shadow-lg hover:shadow-xl"}`, __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isLoading ? "fa-spinner fa-spin" : "fa-paper-plane"}`, __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-3 flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 208, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs bg-blue-50 text-blue-600 px-2 py-1 rounded-full", __source: { fileName: "", lineNumber: 209, columnNumber: 13 }, __self: this }, "⚡ Instant Answers"), /*#__PURE__*/ React.createElement("span", { className: "text-xs bg-green-50 text-green-600 px-2 py-1 rounded-full", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, "✍️ Writing & Editing"), /*#__PURE__*/ React.createElement("span", { className: "text-xs bg-purple-50 text-purple-600 px-2 py-1 rounded-full", __source: { fileName: "", lineNumber: 215, columnNumber: 13 }, __self: this }, "🌐 Translation"), /*#__PURE__*/ React.createElement("span", { className: "text-xs bg-orange-50 text-orange-600 px-2 py-1 rounded-full", __source: { fileName: "", lineNumber: 218, columnNumber: 13 }, __self: this }, "💡 Creative Ideas"), /*#__PURE__*/ React.createElement("span", { className: "text-xs bg-red-50 text-red-600 px-2 py-1 rounded-full", __source: { fileName: "", lineNumber: 221, columnNumber: 13 }, __self: this }, "🔧 Problem Solving")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 228, columnNumber: 7 }, __self: this }, ` @keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } } .animate-bounce { animation: bounce 1s infinite; } `)); }