function ChatInputField({ placeholder, onEnter }) { const handleKeyDown = (e)=>{ if (e.key === 'Enter' && e.target.value.trim()) { onEnter(e.target.value.trim()); e.target.value = ''; } }; return /*#__PURE__*/ React.createElement("input", { type: "text", className: "p-2 border border-gray-300 rounded w-full my-2", placeholder: placeholder, onKeyDown: handleKeyDown, name: "message", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }); } function ChatInputFieldStory() { const fetchChatGPTResponse = (message)=>{ console.log('Message:', message); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatInputField, { placeholder: "Type your message here...", onEnter: fetchChatGPTResponse, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this })); } function MainComponent({ messages, isLoading, result, onEnter }) { const chatMessages = messages.map((msg, index)=>{ const isUser = msg.role === 'user'; const messageStyle = isUser ? 'bg-blue-200 text-right' : 'bg-green-200 text-left'; return /*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 my-2 rounded ${messageStyle}`, __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-sans", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, msg.content)); }); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] mx-auto p-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-white p-4 rounded shadow-sm", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, chatMessages, isLoading && /*#__PURE__*/ React.createElement("div", { className: "font-sans text-center text-gray-500", __source: { fileName: "", lineNumber: 17, columnNumber: 23 }, __self: this }, "Loading..."), !isLoading && result && /*#__PURE__*/ React.createElement("div", { className: "p-2 my-2 rounded bg-green-200 text-left", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-sans", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, result)), /*#__PURE__*/ React.createElement(ChatInputField, { placeholder: "Type your message here...", onEnter: onEnter, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }))); } function StoryComponent() { const exampleMessages = [ { role: 'user', content: 'Hello GPT-4!' }, { role: 'assistant', content: 'Hello! How can I assist you today?' } ]; const [messages, setMessages] = React.useState(exampleMessages); const [isLoading, setIsLoading] = React.useState(false); const [result, setResult] = React.useState(''); const fetchChatGPTResponse = async (userInput)=>{ setIsLoading(true); const updatedMessages = [ ...messages, { role: 'user', content: userInput } ]; setMessages(updatedMessages); 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 = data.choices[0].message.content; setMessages([ ...updatedMessages, { role: 'assistant', content: assistantMessage } ]); setResult(assistantMessage); setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-sans text-2xl mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, "Example Chat Interface"), /*#__PURE__*/ React.createElement(MainComponent, { messages: messages, isLoading: isLoading, result: result, onEnter: fetchChatGPTResponse, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this })); }