function MessageInputWidget({ value, onChange, placeholder }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: value, onChange: onChange, placeholder: placeholder, className: "flex-1 px-4 py-2 border rounded-lg text-gray-700 focus:outline-none", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function MessageInputWidgetStory() { const [inputValue, setInputValue] = React.useState(""); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MessageInputWidget, { value: inputValue, onChange: (e)=>setInputValue(e.target.value), placeholder: "Type a message", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [messages, setMessages] = React.useState([ { text: "Hello! How can I assist you today?", sender: "bot", time: "10:30 AM" }, { text: "I need help with my account.", sender: "user", time: "10:31 AM" } ]); const [inputValue, setInputValue] = React.useState(""); const handleSubmit = async (event)=>{ event.preventDefault(); if (inputValue.trim() === "") return; const userMessage = { text: inputValue, sender: "user", time: new Date().toLocaleTimeString() }; setMessages([ ...messages, userMessage ]); const response = await fetch("https://api.openai.com/v1/engines/davinci-codex/completions", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer YOUR_OPENAI_API_KEY` }, body: JSON.stringify({ prompt: inputValue, max_tokens: 150 }) }); const data = await response.json(); const botMessage = { text: data.choices[0].text, sender: "bot", time: new Date().toLocaleTimeString() }; setMessages((prevMessages)=>[ ...prevMessages, userMessage, botMessage ]); setInputValue(""); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100 p-4 font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between bg-[#075E54] text-white p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "ChatApp"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-ellipsis-v", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, messages.map((msg, index)=>{ const position = msg.sender === "user" ? "self-end" : "self-start"; const bgColor = msg.sender === "user" ? "bg-white" : "bg-[#DCF8C6]"; return /*#__PURE__*/ React.createElement("div", { key: index, className: `${position} ${bgColor} max-w-[60%] p-2 rounded-lg shadow`, __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-900", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, msg.text), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, msg.time)); })), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-2 flex justify-between items-center border-t border-gray-300", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(MessageInputWidget, { value: inputValue, onChange: (e)=>setInputValue(e.target.value), placeholder: "Type a message", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "ml-2 bg-[#075E54] text-white p-2 rounded-full", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this })))); }