function MainComponent() { const [messages, setMessages] = React.useState([ { role: "system", content: "Welcome! Ask me anything." } ]); const [userInput, setUserInput] = React.useState(""); const handleInputChange = (e)=>{ setUserInput(e.target.value); }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!userInput.trim()) return; const newMessage = { role: "user", content: userInput }; setMessages([ ...messages, newMessage ]); const response = await fetch('/integrations/anthropic-claude-haiku/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ newMessage ] }) }); const responseData = await response.json(); const replyMessage = { role: "assistant", content: responseData.choices[0].message.content }; setMessages((messages)=>[ ...messages, replyMessage ]); setUserInput(""); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-none p-4 bg-[#F0F0F0]", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Claude Chatbot")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `rounded-lg p-4 ${msg.role === "user" ? "self-end bg-[#007BFF] text-white" : "self-start bg-[#dddddd] text-[#121212]"}`, __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, msg.content))))), /*#__PURE__*/ React.createElement("div", { className: "flex-none p-4 bg-[#F0F0F0]", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex gap-2", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Type your message here...", className: "flex-1 p-2 rounded-lg border border-[#cccccc] focus:outline-none focus:border-[#888888]", value: userInput, onChange: handleInputChange, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 rounded-lg bg-[#007BFF] text-white font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Send")))); }