function OutlineButton({ text, onClick, bgColor = 'bg-white' }) { const textColor = bgColor === 'bg-white' ? 'text-black' : 'text-white'; return /*#__PURE__*/ React.createElement("button", { className: `px-8 py-2 rounded-full border border-current ${textColor} font-inter bg-transparent hover:bg-opacity-10 transition-colors duration-300 w-[240px] h-[60px]`, onClick: onClick, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, text); } function OutlineButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col space-y-4 justify-center items-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(OutlineButton, { text: "Click me", onClick: ()=>alert('Button clicked!'), __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(OutlineButton, { text: "Dark version", onClick: ()=>alert('Dark button clicked!'), bgColor: "bg-black", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function MainComponent() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const messagesEndRef = useRef(null); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(()=>{ scrollToBottom(); }, [ messages ]); const handleSubmit = async (e)=>{ e.preventDefault(); if (!input.trim()) return; const userMessage = input.trim(); setInput(''); setLoading(true); setError(null); setMessages((prev)=>[ ...prev, { role: 'user', content: userMessage } ]); try { const response = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: [ { type: 'text', text: userMessage } ] } ] }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); const aiResponse = data.choices[0].message.content; setMessages((prev)=>[ ...prev, { role: 'assistant', content: aiResponse } ]); } catch (err) { console.error(err); setError('Failed to get response. Please try again.'); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white p-[0.8cm]", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto px-[0.8cm] py-8", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl text-black font-inter mb-12 text-center", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "Malthan"), /*#__PURE__*/ React.createElement("div", { className: "border border-black mb-8 h-[70vh] overflow-y-auto p-6", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-6 ${message.role === 'assistant' ? 'ml-12' : 'mr-12'}`, __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex ${message.role === 'assistant' ? 'justify-start' : 'justify-end'}`, __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `px-6 py-4 ${message.role === 'assistant' ? 'bg-black text-white' : 'bg-white border border-black text-black'}`, __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, message.content)))), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start ml-12 mb-6", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black text-white px-6 py-4", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-center py-4", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-[3cm]", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex gap-4", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: input, onChange: (e)=>setInput(e.target.value), placeholder: "Message Malthan...", className: "flex-1 border-b border-black px-4 py-3 text-black focus:outline-none", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(OutlineButton, { text: "Send", onClick: handleSubmit, bgColor: "bg-white", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "h-[3cm]", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this })); }