function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(''); const chatRef = React.useRef(null); React.useEffect(()=>{ if (chatRef.current) { chatRef.current.scrollTop = chatRef.current.scrollHeight; } }, [ messages ]); const handleSubmit = async (e)=>{ e.preventDefault(); if (!inputMessage.trim()) return; const userMessage = { role: 'user', content: inputMessage }; setMessages((prevMessages)=>[ ...prevMessages, userMessage ]); setInputMessage(''); try { const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: "You are Steve Jobs, co-founder of Apple. Respond to messages as Steve would, based on his known communication style, experiences, and public statements. Keep responses concise and impactful." }, ...messages, userMessage ] }) }); if (!response.ok) throw new Error('Failed to get response'); const data = await response.json(); const aiMessage = { role: 'assistant', content: data.choices[0].message.content }; setMessages((prevMessages)=>[ ...prevMessages, aiMessage ]); } catch (error) { console.error('Error:', error); setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: "I'm sorry, there was an error processing your request." } ]); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-black text-white p-4 text-center", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "Chat with Steve Jobs")), /*#__PURE__*/ React.createElement("main", { className: "flex-grow flex flex-col p-4 md:p-6 max-w-3xl mx-auto w-full", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { ref: chatRef, className: "flex-grow overflow-auto mb-4 bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-3 ${message.role === 'user' ? 'bg-gray-200' : 'bg-white'}`, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `text-sm ${message.role === 'user' ? 'text-gray-800' : 'text-black font-medium'}`, __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, message.role === 'user' ? 'You: ' : 'Steve Jobs: ', message.content)))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), placeholder: "Ask Steve anything...", className: "flex-grow p-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500", name: "userInput", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-black text-white px-4 py-2 rounded-r-lg hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Send")))); }