function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); if (!inputMessage.trim()) return; const newMessage = { role: 'user', content: inputMessage }; setMessages([ ...messages, newMessage ]); setInputMessage(''); setIsLoading(true); try { const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, newMessage ] }) }); if (!response.ok) { throw new Error('Failed to get response from Claude'); } const data = await response.json(); const assistantMessage = data.choices[0].message; setMessages((prevMessages)=>[ ...prevMessages, assistantMessage ]); } catch (error) { console.error('Error:', error); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 text-white p-4", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Claude 3.5 Sonnet Chat")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-auto p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4 mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Welcome! Start chatting with Claude 3.5 Sonnet.")), messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `bg-white rounded-lg shadow-md p-4 mb-4 ${message.role === 'user' ? 'ml-auto' : 'mr-auto'} max-w-[70%]`, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `${message.role === 'user' ? 'text-blue-600' : 'text-green-600'} font-roboto`, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, message.role === 'user' ? 'You' : 'Claude', ":"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, message.content))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-blue-600", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "p-4 bg-white border-t border-gray-200", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), placeholder: "Type your message here...", className: "flex-grow p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isLoading, className: "bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-300 ease-in-out font-roboto disabled:opacity-50", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane mr-2", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }), "Send")))); }