function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputText, setInputText] = React.useState(''); const [uploadedImage, setUploadedImage] = React.useState(null); const handleImageUpload = (event)=>{ const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = ()=>{ setUploadedImage(reader.result); }; reader.readAsDataURL(file); }; const handleSend = async ()=>{ if (!inputText && !uploadedImage) return; const newMessage = { role: 'user', content: [] }; if (inputText) { newMessage.content.push({ type: 'text', text: inputText }); } if (uploadedImage) { newMessage.content.push({ type: 'image_url', image_url: { url: uploadedImage } }); } const response = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ newMessage ] }) }); const result = await response.json(); const assistantMessageContent = result.choices[0].message.content; setMessages([ ...messages, newMessage, { role: 'assistant', content: [ { type: 'text', text: assistantMessageContent } ] } ]); setInputText(''); setUploadedImage(null); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#181818] text-white min-h-screen p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-[#282828] p-4 rounded shadow-lg flex flex-col items-center", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold font-roboto my-4", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "VisChat"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4 w-full", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/png, image/jpeg, image/webp, image/gif", onChange: handleImageUpload, className: "text-white bg-[#404040] file:bg-[#606060] file:border-0 p-2 rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "message", value: inputText, onChange: (e)=>setInputText(e.target.value), className: "w-full p-2 bg-[#404040] rounded resize-none", rows: "3", placeholder: "Type your message...", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSend, className: "w-full bg-[#606060] py-2 rounded text-white hover:bg-[#505050] transition-colors", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane mr-2", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }), " Send")), /*#__PURE__*/ React.createElement("div", { className: "w-full mt-4 flex flex-col gap-2", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded ${msg.role === 'user' ? 'bg-[#505050]' : 'bg-[#404040]'}`, __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, msg.content.map((content, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, content.type === 'text' && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 78, columnNumber: 47 }, __self: this }, content.text), content.type === 'image_url' && /*#__PURE__*/ React.createElement("img", { src: content.image_url.url, alt: "Uploaded content related to the chat", className: "max-w-full h-auto mt-2", __source: { fileName: "", lineNumber: 80, columnNumber: 21 }, __self: this }))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 0.5s ease-in-out; } `)); }