function ChatbotTextInput({ value, onChange, placeholder, className }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: `flex-1 p-2 border rounded-l-lg ${className}`, value: value, onChange: onChange, placeholder: placeholder, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ChatbotTextInputStory() { const [inputMessage, setInputMessage] = React.useState(""); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatbotTextInput, { value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), placeholder: "Type your message...", className: "", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const handleSendMessage = async ()=>{ const newMessage = { role: "user", content: inputMessage }; const updatedMessages = [ ...messages, newMessage ]; setMessages(updatedMessages); setIsLoading(true); setInputMessage(""); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: updatedMessages }) }); const data = await response.json(); const assistantMessage = { role: "assistant", content: data.choices[0].message.content }; setMessages([ ...updatedMessages, assistantMessage ]); setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white text-black font-crimson-text min-h-screen flex flex-col items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl my-8", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, "Programming ChatBot"), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[600px] p-4 bg-gray-100 border rounded-lg flex flex-col", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex mb-4 ${message.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${message.role === "user" ? "bg-blue-500 text-white" : "bg-gray-300 text-black"} p-4 rounded-lg`, __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, message.content)))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-300 p-4 rounded-lg text-black", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "Loading...")))), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ChatbotTextInput, { value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), placeholder: "Type your message...", className: "", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white rounded-r-lg", onClick: handleSendMessage, disabled: isLoading || inputMessage.trim() === "", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Send")))); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 65, columnNumber: 1 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap'); .font-crimson-text { font-family: 'Crimson Text', serif; } `);