function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(''); const [loading, setLoading] = React.useState(false); const fetchMessages = async (newMessage)=>{ setLoading(true); const updatedMessages = [ ...messages, { role: 'user', content: newMessage } ]; setMessages(updatedMessages); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: updatedMessages, system_prompt: 'Continue the conversation' }) }); const data = await response.json(); const responseMessage = data.choices[0].message.content; setMessages([ ...updatedMessages, { role: 'assistant', content: responseMessage } ]); saveMessageToDB('user', newMessage); saveMessageToDB('assistant', responseMessage); setLoading(false); }; const saveMessageToDB = async (role, content)=>{ await fetch('/api/db/chat-1-database', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: 'INSERT INTO `chats` (`role`, `content`) VALUES (?, ?)', values: [ role, content ] }) }); }; const handleSubmit = (e)=>{ e.preventDefault(); if (input.trim()) { fetchMessages(input); setInput(''); } }; const handleVoiceInput = ()=>{ // Implementation for voice input }; const handleFileUpload = ()=>{ // Implementation for file upload }; React.useEffect(()=>{ // Adding initial message from John if (messages.length === 0) { const initialMessage = "Hey there, I'm John - the world's first AI consultant. What's on your mind?"; setMessages([ { role: 'assistant', content: initialMessage } ]); saveMessageToDB('assistant', initialMessage); } }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-[#121212] text-white font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 flex items-center justify-center", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/avatar/john_avatar.png", alt: "3D Avatar of John, the world's first AI consultant", className: "h-[70%]", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 flex flex-col p-6", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-4 ${message.role === 'assistant' ? 'text-left' : 'text-right'}`, __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, message.content))), loading && /*#__PURE__*/ React.createElement("p", { className: "text-left", __source: { fileName: "", lineNumber: 78, columnNumber: 23 }, __self: this }, "John is typing...")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex items-center", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "message", type: "text", value: input, onChange: (e)=>setInput(e.target.value), className: "flex-1 p-2 bg-[#2c2c2c] text-white border border-[#3a3a3a] rounded-md", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "ml-2 p-2 bg-blue-600 rounded-md", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "Send"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleVoiceInput, className: "ml-2 p-2 bg-gray-600 rounded-md", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-microphone", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleFileUpload, className: "ml-2 p-2 bg-gray-600 rounded-md", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }))))); }