function BasicInfoForm({ text }) { return /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, text); } function BasicInfoFormStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BasicInfoForm, { text: "基本情報を入力してください。", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function MainComponent() { const [conversation, setConversation] = React.useState([ { speaker: '顧客', message: 'ここに顧客のメッセージが表示されます。' }, { speaker: 'AI', message: 'ここにAIの応答が表示されます。' } ]); const [correction, setCorrection] = React.useState(""); const conversationQueue = React.useRef([]); const correctionQueue = React.useRef([]); const basicInfoFormText = "基本情報を入力してください。"; React.useEffect(()=>{ const recognition = new window.webkitSpeechRecognition(); recognition.lang = 'ja-JP'; recognition.continuous = false; recognition.onresult = (event)=>{ const customerInput = event.results[0][0].transcript; conversationQueue.current.push({ speaker: '顧客', message: customerInput }); let aiResponse = `あなたの運勢は良好です。${customerInput}に関しては特に幸運が訪れるでしょう。`; conversationQueue.current.push({ speaker: 'AI', message: aiResponse }); if (correctionQueue.current.length > 0) { aiResponse = correctionQueue.current.pop(); conversationQueue.current[conversationQueue.current.length - 1].message = aiResponse; } setConversation([ ...conversationQueue.current ]); const synth = window.speechSynthesis; const utterance = new window.SpeechSynthesisUtterance(aiResponse); synth.speak(utterance); }; const listenButton = document.getElementById("listenButton"); listenButton.addEventListener("click", ()=>recognition.start()); return ()=>{ listenButton.removeEventListener("click", ()=>recognition.start()); }; }, []); const handleCorrectionSubmit = ()=>{ if (correction) { correctionQueue.current.push(correction); setCorrection(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gray-100", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "AI占い師"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 w-[300px]", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { id: "listenButton", className: "bg-blue-500 text-white py-2 px-4 rounded w-full hover:bg-blue-700", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "顧客の声を聞く")), /*#__PURE__*/ React.createElement("div", { className: "w-[600px] bg-white p-4 shadow-md rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(BasicInfoForm, { text: basicInfoFormText, __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "会話履歴"), /*#__PURE__*/ React.createElement("div", { className: "h-[300px] overflow-y-auto border border-gray-200 p-2", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, conversation.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, entry.speaker, ":"), " ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 58, columnNumber: 49 }, __self: this }, entry.message))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-[600px]", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "correction", type: "text", className: "border border-gray-300 p-2 w-full rounded", placeholder: "修正（空白の場合はスキップ）", value: correction, onChange: (e)=>setCorrection(e.target.value), __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleCorrectionSubmit, className: "bg-green-500 text-white py-2 px-4 mt-2 rounded w-full hover:bg-green-700", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "修正を送信"))); }