function MainComponent({ initialMessages = [] }) { const [messages, setMessages] = React.useState(initialMessages); const [inputText, setInputText] = React.useState(''); const inputRef = React.useRef(null); const [loading, setLoading] = React.useState(false); const sendMessage = async ()=>{ if (inputText.trim() === "") return; const userMessage = { role: 'user', content: [ { type: 'text', text: inputText } ] }; setMessages([ ...messages, userMessage ]); setInputText(''); setLoading(true); const response = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, userMessage ] }) }); const data = await response.json(); const assistantMessage = { role: 'assistant', content: [ { type: 'text', text: data.choices[0].message.content } ] }; setMessages((prevMessages)=>[ ...prevMessages, assistantMessage ]); setLoading(false); }; React.useEffect(()=>{ if (inputRef.current) { inputRef.current.focus(); } }, []); const handleKeyPress = (e)=>{ if (e.key === 'Enter') { sendMessage(); } }; const renderMessage = (message, index)=>{ const isUser = message.role === 'user'; return /*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded-lg max-w-[60%] ${isUser ? 'bg-[#1a73e8] self-end' : 'bg-[#303030] self-start'} text-white mb-2`, __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, message.content.map((content, i)=>/*#__PURE__*/ React.createElement("p", { key: i, className: "font-sans", __source: { fileName: "", lineNumber: 47, columnNumber: 46 }, __self: this }, content.text))); }; return /*#__PURE__*/ React.createElement("div", { className: "h-screen flex flex-col bg-[#121212]", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 flex flex-col space-y-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, messages.map(renderMessage), loading && /*#__PURE__*/ React.createElement("div", { className: "p-2 rounded-lg max-w-[60%] bg-[#303030] self-start text-white mb-2 animate-pulse", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-sans", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "AIの回答を生成しています..."))), /*#__PURE__*/ React.createElement("div", { className: "px-4 pb-4 flex items-center bg-[#252525]", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { ref: inputRef, type: "text", className: "flex-1 p-2 bg-[#303030] text-white rounded-lg font-sans", value: inputText, onChange: (e)=>setInputText(e.target.value), onKeyPress: handleKeyPress, name: "userMessage", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, className: "ml-4 p-2 bg-[#1a73e8] rounded-lg text-white font-sans", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "送信"))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] h-screen flex justify-center items-center", __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { initialMessages: [ { role: 'user', content: [ { type: 'text', text: 'こんにちは' } ] }, { role: 'assistant', content: [ { type: 'text', text: 'こんにちは! 何か質問がありますか?' } ] } ], __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this })); }