function InteractiveMessageField({ placeholder, buttonText, isSending, onInputChange, onSubmit, inputValue }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#F9FAFB] px-6 py-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "userInput", type: "text", placeholder: placeholder, className: "w-full p-3 font-roboto text-[#333] bg-white border rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-[#4F46E5]", onChange: onInputChange, value: inputValue, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: onSubmit, className: "px-6 py-3 text-white font-semibold font-roboto bg-[#4F46E5] rounded hover:bg-[#3730a3] focus:outline-none focus:ring-4 focus:ring-[#6750A4] shadow-lg", disabled: isSending, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, isSending ? '送信中...' : buttonText)); } function InteractiveMessageFieldStory() { const [userInput, setUserInput] = React.useState(""); const [isSending, setIsSending] = React.useState(false); const handleUserInputChange = (e)=>{ setUserInput(e.target.value); }; const handleMessageSubmit = ()=>{ setIsSending(true); setTimeout(()=>{ setIsSending(false); }, 2000); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(InteractiveMessageField, { placeholder: "質問やメッセージを入力", buttonText: "送信", isSending: isSending, onInputChange: handleUserInputChange, onSubmit: handleMessageSubmit, inputValue: userInput, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); } function MainComponent() { const [userInput, setUserInput] = React.useState(''); const [messages, setMessages] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const [excludedNumbers, setExcludedNumbers] = React.useState([]); const handleUserInputChange = (event)=>{ setUserInput(event.target.value); }; const handleMessageSubmit = async ()=>{ if (!userInput.trim()) return; const newMessage = { role: 'user', content: userInput }; setMessages([ ...messages, newMessage ]); setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { ...newMessage, content: `${userInput}\n除外する数字: ${excludedNumbers.join(', ')}` } ], system_prompt: `ロト6の予想をする際に過去の当選番号を元に予想してください。除外する数字は${excludedNumbers.join(', ')}です。` }) }); const responseData = await response.json(); if (responseData.choices && responseData.choices.length > 0) { const replyMessage = { role: 'assistant', content: responseData.choices[0].message.content }; setMessages((prevMessages)=>[ ...prevMessages, replyMessage ]); const matchedExcludedNumbers = responseData.choices[0].message.content.match(/\d+/g); if (matchedExcludedNumbers) { setExcludedNumbers([ ...new Set([ ...excludedNumbers, ...matchedExcludedNumbers.map(Number) ]) ]); } } } catch (error) { console.error('There was an error:', error); } setUserInput(''); setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F4F7F5] p-5", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto bg-white shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl text-[#333] mb-3", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "ロト6予想アシスタント"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#666]", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "過去の当選番号を考慮してロト6の数字を予想しましょう。")), /*#__PURE__*/ React.createElement(InteractiveMessageField, { placeholder: "質問やメッセージを入力", buttonText: isLoading ? '送信中...' : '送信', isSending: isLoading, onInputChange: handleUserInputChange, onSubmit: handleMessageSubmit, inputValue: userInput, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { className: "max-h-[400px] overflow-y-auto", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: `p-3 font-roboto text-[#333] ${message.role === 'assistant' ? 'text-right' : 'text-left'}`, __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, message.content)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } ul { animation: fadeIn 1s ease-in-out; } `)); }