function ChatInterface({ messages, inputValue, onInputChange, onSendMessage }) { return /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-1/2 transform -translate-x-1/2 w-full max-w-md mx-auto p-4 bg-purple-800 bg-opacity-90 rounded-t-lg", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Chat"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2 h-[200px] overflow-auto mb-2", id: "chatContainer", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, messages.map((msg, index)=>{ const msgClass = msg.role === 'user' ? 'bg-[#4a00e0] self-end' : 'bg-[#8e2de2] self-start'; return /*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded-lg max-w-xs ${msgClass} text-white font-roboto`, __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, msg.content); })), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "flex-1 bg-white text-black p-2 rounded-l-lg font-roboto", type: "text", name: "message", placeholder: "Type a message...", value: inputValue, onChange: onInputChange, __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#8e2de2] hover:bg-[#4a00e0] text-white p-2 rounded-r-lg font-roboto", onClick: onSendMessage, __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Send"))); } function ChatInterfaceStory() { const [messages, setMessages] = React.useState([ { role: 'system', content: 'Welcome to the chat!' }, { role: 'user', content: 'Hello!' }, { role: 'system', content: 'Hi there!' } ]); const [inputValue, setInputValue] = React.useState(''); const handleInputChange = (e)=>setInputValue(e.target.value); const handleSendMessage = ()=>{ if (inputValue.trim() !== '') { setMessages([ ...messages, { role: 'user', content: inputValue } ]); setInputValue(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen bg-gray-200", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatInterface, { messages: messages, inputValue: inputValue, onInputChange: handleInputChange, onSendMessage: handleSendMessage, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this })); } function MainComponent() { const [messages, setMessages] = React.useState([ { role: "assistant", content: "Hi there!" }, { role: "assistant", content: "Hello! How can I help you?" } ]); const [inputValue, setInputValue] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleInputChange = (e)=>setInputValue(e.target.value); const handleSendMessage = async ()=>{ if (!inputValue.trim()) return; const newMessage = { role: "user", content: inputValue }; const updatedMessages = [ ...messages, newMessage ]; setMessages(updatedMessages); setInputValue(""); setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: updatedMessages }) }); const result = await response.json(); const gptMessage = result.choices[0].message; setMessages((prev)=>[ ...prev, gptMessage ]); } catch (error) { console.error("Error:", error); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "relative min-h-screen bg-gradient-to-r from-purple-500 via-pink-500 to-blue-500 text-white", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-5", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "AiNext"), /*#__PURE__*/ React.createElement("nav", { className: "space-x-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Pages"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Portfolio"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Blog"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("button", { className: "bg-[#8e2de2] hover:bg-[#4a00e0] text-white font-bold py-2 px-4 rounded-full", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Get Started ", /*#__PURE__*/ React.createElement("i", { className: "fa fa-arrow-right", __source: { fileName: "", lineNumber: 49, columnNumber: 23 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center justify-center text-center h-[70vh]", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl font-bold mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Ai", /*#__PURE__*/ React.createElement("span", { className: "text-purple-400", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "AI"), " Image Creating Solutions."), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-8", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, '"Enhance your content through guided clarifications."')), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-[30vh]", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ChatInterface, { messages: messages, inputValue: inputValue, onInputChange: handleInputChange, onSendMessage: handleSendMessage, __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }))); }

AiAI Image Creating Solutions.

Chat