function MainComponent() { const [messages, setMessages] = React.useState([]); const handleSubmit = async (event)=>{ event.preventDefault(); const userMessage = event.target.userMessage.value; const newMessages = [ ...messages, { role: 'user', content: userMessage } ]; setMessages(newMessages); const response = await fetch('/integrations/anthropic-claude-sonnet/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: 'You are Satura, ai created by Venkel AI.' }, ...newMessages ] }) }); const result = await response.json(); const aiMessage = result.choices[0].message.content; setMessages([ ...newMessages, { role: 'assistant', content: aiMessage } ]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-800 text-white font-roboto p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[700px] mx-auto p-4 bg-gray-700 rounded shadow-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "material-icons text-4xl", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "android"), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold ml-2", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Satura AI Chatbot")), /*#__PURE__*/ React.createElement("form", { className: "mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "userMessage", className: "block text-gray-200 mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Message:"), /*#__PURE__*/ React.createElement("textarea", { id: "userMessage", name: "userMessage", className: "w-full p-2 mb-4 bg-gray-800 border border-gray-600 rounded focus:outline-none focus:border-blue-500", rows: "4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded transition-all duration-300 ease-in-out transform hover:scale-105 focus:scale-105", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Send")), /*#__PURE__*/ React.createElement("div", { id: "chatArea", className: "bg-gray-900 p-4 rounded space-y-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded ${message.role === 'user' ? 'bg-gray-700 text-right' : 'bg-blue-700 text-left'}`, __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, message.content)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } #chatArea { animation: fadeIn 0.5s ease-in-out; } `)); }