function DynamicTextInput({ value, onChange }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatInput", value: value, onChange: onChange, className: "flex-grow border p-2", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function DynamicTextInputStory() { const [input, setInput] = React.useState(""); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Message Input"), /*#__PURE__*/ React.createElement(DynamicTextInput, { value: input, onChange: (e)=>setInput(e.target.value), __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [messages, setMessages] = React.useState([ { role: 'system', content: 'You are now chatting with Paafect Customer Service.' } ]); const [input, setInput] = React.useState(''); const [loading, setLoading] = React.useState(false); const [response, setResponse] = React.useState(''); const handleSendMessage = async ()=>{ setLoading(true); const newMessages = [ ...messages, { role: 'user', content: input } ]; setMessages(newMessages); const res = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages }) }); const data = await res.json(); const gptResponse = data.choices[0].message.content; setMessages([ ...newMessages, { role: 'assistant', content: gptResponse } ]); setResponse(gptResponse); setLoading(false); setInput(''); }; const textContent = /*#__PURE__*/ React.createElement("div", { className: "text-center my-8", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-serif mt-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Paa Chan’s Paafect Customer service", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 31, columnNumber: 44 }, __self: this }), "I will advice you to have happy life.")); const chatWindow = /*#__PURE__*/ React.createElement("div", { className: "my-8", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border p-4 h-[300px] overflow-y-scroll", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, messages.map((msg, index)=>{ const msgClass = msg.role === 'assistant' ? 'text-left' : 'text-right'; const msgStyle = msg.role === 'assistant' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'; return /*#__PURE__*/ React.createElement("div", { key: index, className: `mb-2 ${msgClass}`, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `px-4 py-2 inline-block rounded-full ${msgStyle}`, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, msg.content)); }), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-500", __source: { fileName: "", lineNumber: 51, columnNumber: 21 }, __self: this }, "Loading...")), /*#__PURE__*/ React.createElement("div", { className: "flex mt-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(DynamicTextInput, { value: input, onChange: (e)=>setInput(e.target.value), __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, className: "bg-blue-500 text-white px-4 py-2", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Send"))); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center my-8", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./path/to/paachan_paafect.png", alt: "Paafect Paachan customer service title image", className: "w-[300px] h-[150px]", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this })), textContent, chatWindow); }

Paa Chan’s Paafect Customer serviceI will advice you to have happy life.

Paa Chan’s Paafect Customer service
I will advice you to have happy life.