function PromptInputField({ placeholder, borderColor, focusBorderColor, className }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: "messageInput", placeholder: placeholder, className: `flex-1 p-2 border rounded-md focus:outline-none ${className} border-[${borderColor}] focus:border-[${focusBorderColor}]`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function PromptInputFieldStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PromptInputField, { placeholder: "What's on your mind?", borderColor: "#E5E7EB", focusBorderColor: "#FF6D00", className: "w-full", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const [message, setMessage] = React.useState(""); const [chatMessages, setChatMessages] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const sendMessage = async ()=>{ const messagesToSend = [ { role: "user", content: message } ]; setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: messagesToSend, system_prompt: 'Provide assistance', max_tokens: 2000 }) }); const data = await response.json(); if (data.status) { setChatMessages([ ...chatMessages, { role: "assistant", content: data.result } ]); } } catch (error) { console.error('Error:', error); } setIsLoading(false); }; const handleInputChange = (e)=>{ setMessage(e.target.value); }; const handleSendMessage = (e)=>{ e.preventDefault(); sendMessage(); setMessage(""); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F9FAFB] p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-lg p-4 space-y-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-xl text-[#374151]", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Chat with our Therapy AI 🤖"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 overflow-auto h-64", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, chatMessages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded-lg ${msg.role === 'user' ? 'bg-[#FFEDD5] text-right' : 'bg-[#E5E7EB] text-left'}`, __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#374151]", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, msg.content)))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, className: "flex space-x-2", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(PromptInputField, { placeholder: "Your message here...", borderColor: "#D1D5DB", focusBorderColor: "#FF6D00", className: "flex-grow", onChange: handleInputChange, value: message, __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#FF6D00] text-white rounded-md font-roboto hover:bg-[#F97316]", disabled: isLoading, __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, isLoading ? 'Sending...' : 'Send')))); }