function ClickableSubmitButton({ loading }) { const buttonText = loading ? 'Loading...' : 'Submit'; return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 4, columnNumber: 5 }, __self: this }, buttonText); } function ClickableSubmitButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ClickableSubmitButton, { loading: false, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ClickableSubmitButton, { loading: true, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function InteractiveSubmitButton({ loading, onClick }) { return /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, loading ? "Loading..." : "Submit"); } function InteractiveSubmitButtonStory() { const [loading, setLoading] = React.useState(false); const handleClick = ()=>{ setLoading(true); setTimeout(()=>setLoading(false), 2000); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(InteractiveSubmitButton, { loading: loading, onClick: handleClick, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(InteractiveSubmitButton, { loading: false, onClick: ()=>{}, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this })); } function TextInputWithSubmitButton({ inputText, setInputText, loading, handleSubmit }) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "inputText", className: "border p-2 mb-4 w-full max-w-lg h-[150px]", placeholder: "Enter your text here...", rows: "5", value: inputText, onChange: (e)=>setInputText(e.target.value), __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(ClickableSubmitButton, { loading: loading, __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }))); } function TextInputWithSubmitButtonStory() { const [inputText, setInputText] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); const messages = [ { role: "user", content: inputText } ]; const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages, system_prompt: "Add spaces between each character" }) }); const result = await response.json(); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TextInputWithSubmitButton, { inputText: inputText, setInputText: setInputText, loading: loading, handleSubmit: handleSubmit, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this })); } function MainComponent() { const [inputText, setInputText] = React.useState(""); const [loading, setLoading] = React.useState(false); const [responseText, setResponseText] = React.useState(""); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); const messages = [ { role: "user", content: inputText } ]; const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages, system_prompt: "Add spaces between each character" }) }); const result = await response.json(); const messageContent = result.choices[0].message.content; setResponseText(messageContent); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "Enter text to add spaces"), /*#__PURE__*/ React.createElement(TextInputWithSubmitButton, { inputText: inputText, setInputText: setInputText, loading: loading, handleSubmit: handleSubmit, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }), responseText && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border w-full max-w-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Response:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, responseText))); }