function FullWidthSubmitButton({ buttonText, onSubmit }) { return /*#__PURE__*/ React.createElement("button", { name: "submit", type: "submit", className: "mt-2 w-full py-2 bg-blue-500 text-white rounded-md", onClick: onSubmit, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, buttonText); } function FullWidthSubmitButtonStory() { const handleClick = ()=>alert("Verification code sent!"); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FullWidthSubmitButton, { buttonText: "認証コードを送信", onSubmit: handleClick, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [email, setEmail] = React.useState(''); const [isValidEmail, setIsValidEmail] = React.useState(false); const [messages, setMessages] = React.useState([]); const [isProcessing, setIsProcessing] = React.useState(false); const [inputValue, setInputValue] = React.useState(''); React.useEffect(()=>{ const handleResize = ()=>{ document.documentElement.style.setProperty('--chat-input-height', `${Math.max(100, window.innerHeight - 650)}px`); }; window.addEventListener('resize', handleResize); handleResize(); return ()=>window.removeEventListener('resize', handleResize); }, []); const toast = (message, status)=>{ const toast = document.createElement("div"); toast.textContent = message; toast.className = `absolute right-4 top-4 rounded px-4 py-2 shadow ${status === 'error' ? 'bg-red-500' : 'bg-green-500'} text-white`; document.body.appendChild(toast); setTimeout(()=>{ document.body.removeChild(toast); }, 3000); }; const handleEmailChange = (event)=>{ setEmail(event.target.value); }; const handleEmailSubmit = async (event)=>{ event.preventDefault(); if (email.includes('@recochoku.co.jp')) { setIsProcessing(true); const response = await fetch(`/integrations/email-check-2/v1/email/verify?email=${encodeURIComponent(email)}`); const data = await response.json(); setIsProcessing(false); if (data.status === "deliverable" && data.email.endsWith('@recochoku.co.jp')) { setIsValidEmail(true); toast('ログイン成功！最高！', 'success'); addMessage("システム", "ログイン成功！どのようにお手伝いしましょうか？"); } else { toast('正しいメールアドレスを入力してください', 'error'); } } else { toast('正しいメールアドレスを入力してください', 'error'); } }; const handleInputChange = (event)=>{ setInputValue(event.target.value); }; const handleFormSubmit = async (event)=>{ event.preventDefault(); if (!inputValue.trim()) return; addMessage("ユーザー", inputValue); setInputValue(''); setIsProcessing(true); let response, data, prompt; if (inputValue.includes("{integration:STABLE_DIFFUSION}")) { prompt = inputValue.replace("{integration:STABLE_DIFFUSION}", "").trim(); response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`); data = await response.json(); addMessage("システム", /*#__PURE__*/ React.createElement("img", { src: data.data[0], alt: "画像生成結果", className: "max-w-md", __source: { fileName: "", lineNumber: 67, columnNumber: 26 }, __self: this })); } else if (inputValue.includes("{integration:CHAT_GPT}")) { prompt = inputValue.replace("{integration:CHAT_GPT}", "").trim(); response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: prompt } ], system_prompt: 'Please provide information' }) }); data = await response.json(); addMessage("システム", data.choices[0].message.content); } else if (inputValue.includes("{integration:GOOGLE_SEARCH}")) { prompt = inputValue.replace("{integration:GOOGLE_SEARCH}", "").trim(); response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(prompt)}`, { method: 'GET' }); data = await response.json(); addMessage("システム", data.items.map((item)=>item.title + "\n" + item.link).join("\n\n")); } setIsProcessing(false); }; const addMessage = (sender, content)=>{ setMessages((prevMessages)=>[ ...prevMessages, { sender, content } ]); }; const handleKeyPress = (event)=>{ if (event.key === 'Enter' && !event.shiftKey && (event.ctrlKey || event.metaKey)) { event.preventDefault(); handleFormSubmit(event); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f3f4f6] p-4", __source: { fileName: "", lineNumber: 103, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-xl text-[#333]", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, "社内AIチャットボット")), /*#__PURE__*/ React.createElement("div", { className: "p-4 overflow-y-scroll", style: { height: '500px' }, __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, isValidEmail ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mx-2 my-4 p-2 rounded-md ${message.sender === "システム" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`, __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 113, columnNumber: 19 }, __self: this }, message.content))), isProcessing && /*#__PURE__*/ React.createElement("p", { className: "mx-2 my-4 p-2 rounded-md bg-indigo-100 text-indigo-800", style: { animation: 'pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite' }, __source: { fileName: "", lineNumber: 116, columnNumber: 32 }, __self: this }, "●"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, className: "mt-4", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { placeholder: "質問をどうぞ", className: "p-3 border border-gray-300 rounded-md w-full resize-none", value: inputValue, onChange: handleInputChange, onKeyPress: handleKeyPress, rows: 4, style: { height: 'var(--chat-input-height)' }, __source: { fileName: "", lineNumber: 118, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(FullWidthSubmitButton, { buttonText: "送信", onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }))) : /*#__PURE__*/ React.createElement("form", { onSubmit: handleEmailSubmit, className: "p-4", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "メールアドレス", className: "px-3 py-2 border border-gray-300 rounded-md w-full", value: email, onChange: handleEmailChange, __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(FullWidthSubmitButton, { buttonText: "認証コードを送信", onSubmit: handleEmailSubmit, __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .animate-pulse { animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; } `)); }