function MainComponent() { const [userMessage, setUserMessage] = React.useState(""); const [systemPrompt, setSystemPrompt] = React.useState(""); const [temperature, setTemperature] = React.useState(0.5); const [maxTokens, setMaxTokens] = React.useState(50); const [responseContent, setResponseContent] = React.useState(""); const [chatHistory, setChatHistory] = React.useState([]); const [settingsVisible, setSettingsVisible] = React.useState(false); const toggleSettings = ()=>{ setSettingsVisible(!settingsVisible); }; const resetConversation = ()=>{ setChatHistory([]); setUserMessage(""); }; const handleSubmit = async (event)=>{ event.preventDefault(); const bodyData = { messages: [ { role: "user", content: userMessage }, { role: "system", content: systemPrompt } ], temperature: temperature, max_tokens: maxTokens }; const response = await fetch('/integrations/anthropic-claude/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(bodyData) }); const result = await response.json(); if (result && result.choices && result.choices[0] && result.choices[0].message) { setResponseContent(result.choices[0].message.content); setChatHistory([ ...chatHistory, { role: "user", content: userMessage }, { role: "assistant", content: result.choices[0].message.content } ]); setUserMessage(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 mt-4 ml-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: resetConversation, className: "text-xl text-[#808080] fa fa-refresh", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl p-6 bg-white rounded-lg shadow-lg space-y-6", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-center font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Anthropic Opus Chat Room"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6 relative", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "userMessage", className: "block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500", placeholder: "Type your message here", value: userMessage, onChange: (e)=>setUserMessage(e.target.value), __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Send Message"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: toggleSettings, className: "text-[#808080] fa fa-bars absolute top-3 right-3", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-[300px] bg-gray-100 p-2 rounded-lg", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, chatHistory.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `${entry.role === "user" ? "text-blue-800" : "text-green-600"} font-roboto p-2`, __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, entry.content))), settingsVisible && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-gray-700 bg-opacity-50 backdrop-blur-sm flex justify-center items-center", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg space-y-4 w-full max-w-md", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleSettings, className: "text-2xl text-[#808080] fa fa-times absolute top-3 right-3", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "systemPrompt", className: "block mb-2 text-sm font-roboto text-gray-900", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "System Prompt"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "systemPrompt", className: "block w-full p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500", placeholder: "Enter system prompt", value: systemPrompt, onChange: (e)=>setSystemPrompt(e.target.value), __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "temperature", className: "block mb-2 text-sm font-roboto text-gray-900", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, "Temperature"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "temperature", className: "block w-full p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500", value: temperature, onChange: (e)=>setTemperature(parseFloat(e.target.value)), __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "maxTokens", className: "block mb-2 text-sm font-roboto text-gray-900", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "Max Tokens to Sample"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "maxTokens", className: "block w-full p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500", placeholder: "Enter token limit", value: maxTokens, onChange: (e)=>setMaxTokens(parseInt(e.target.value, 10)), __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }))))); }