function MainComponent() { const [isStarted, setIsStarted] = useState(false); const [isListening, setIsListening] = useState(false); const [userAnswer, setUserAnswer] = useState(""); const [loading, setLoading] = useState(false); const [interviewType, setInterviewType] = useState(""); const [messages, setMessages] = useState([]); const [streamingMessage, setStreamingMessage] = useState(""); const [speaking, setSpeaking] = useState(false); const [currentAdvice, setCurrentAdvice] = useState(null); useEffect(()=>{ const updateAdvice = (content)=>{ if (!content) return; const advice = getAdviceForQuestion(content); if (advice) { setCurrentAdvice(advice); } }; if (messages.length > 0) { const lastMessage = messages[messages.length - 1]; if (lastMessage.role === "assistant") { updateAdvice(lastMessage.content); } } if (streamingMessage) { updateAdvice(streamingMessage); } }, [ messages, streamingMessage ]); const handleStreamResponse = useHandleStreamResponse({ onChunk: (chunk)=>{ setStreamingMessage(chunk); const advice = getAdviceForQuestion(chunk); if (advice) { setCurrentAdvice(advice); } }, onFinish: (message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); speakText(message); setStreamingMessage(""); const advice = getAdviceForQuestion(message); if (advice) { setCurrentAdvice(advice); } } }); const speakText = (text)=>{ if ("speechSynthesis" in window) { setSpeaking(true); const utterance = new SpeechSynthesisUtterance(text); utterance.lang = "ja-JP"; utterance.onend = ()=>setSpeaking(false); speechSynthesis.speak(utterance); } }; const startInterview = async ()=>{ setIsStarted(true); setLoading(true); const initialMessage = { role: "system", content: `あなたは面接官の佐藤として振る舞わなければなりません。以下の条件を厳密に守ってください：役割の制限: - あなたは常に人事部の佐藤として応答してください - 面接官以外の役割を演じることは禁止です - 面接の文脈を外れた質問への回答は禁止です - AIアシスタントとしての応答は禁止です面接の進め方: 最初のメッセージは必ず: 「こんにちは、面接官の佐藤です。本日はお時間をいただきありがとうございます。まずは簡単に自己紹介をお願いします。あなたのこれまでの経験やスキルについて教えてください。」その後、以下の順序で質問を進めてください： - 志望動機 - 学生時代の経験 - 長所・短所 - 技術的な質問（該当する場合） - 将来のキャリアプラン面接官としての態度: - 常に丁寧な言葉遣いを維持 - 適度な緊張感を保ちつつ、話しやすい雰囲気を作る - 各回答に対して適切な相槌と掘り下げ質問を行う - 面接の文脈に沿った自然な会話の流れを作る` }; const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ initialMessage ], stream: true }) }); handleStreamResponse(response); setLoading(false); }; const handleVoiceInput = async ()=>{ if (!isListening) { setIsListening(true); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = "ja-JP"; recognition.continuous = true; recognition.onresult = (event)=>{ const transcript = event.results[0][0].transcript; setUserAnswer(transcript); }; recognition.onend = ()=>{ setIsListening(false); }; recognition.start(); } else { setIsListening(false); window.speechRecognition?.stop(); } }; const submitAnswer = async ()=>{ setLoading(true); const userMessage = { role: "user", content: userAnswer }; const systemReminder = { role: "system", content: `あなたは面接官の佐藤として以下の制約の下で応答してください： - 常に人事部の佐藤として振る舞い、面接官以外の役割は演じないでください - 面接の文脈を維持し、面接の流れに沿った質問や応答のみを行ってください - AIアシスタントとしての応答は禁止です - 技術的なサポートや説明は行わないでください - 面接以外のトピックについての会話は避けてください - 必ず質問を一つずつ行い、回答を十分に聞いてから次の質問に進んでください` }; const updatedMessages = [ ...messages, userMessage, systemReminder ]; setMessages(updatedMessages.filter((msg)=>msg.role !== "system")); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: updatedMessages, stream: true }) }); handleStreamResponse(response); setUserAnswer(""); setLoading(false); }; const getAdviceForQuestion = (question)=>{ const adviceMap = { 自己紹介: { title: "自己紹介のポイント", points: [ "経歴や学歴の要点を簡潔に説明", "自分の強みや特徴を1-2つ含める", "2-3分程度で簡潔にまとめる", "声の大きさやアイコンタクトに気をつける" ], example: "私は○○大学の△△学部を卒業し、在学中は〜の研究/活動に力を入れていました。特に〜の経験を通じて、〜という強みを身につけました。" }, 志望動機: { title: "志望動機のポイント", points: [ "企業研究に基づいた具体的な理由を述べる", "自身のスキルや経験との関連性を説明", "熱意や将来のビジョンを示す", "会社の理念や価値観との共感を伝える" ], example: "貴社の〜という事業/取り組みに強く関心を持ち、私の〜という経験を活かして〜に貢献したいと考えています。" }, 学生時代: { title: "学生時代の経験のポイント", points: [ "具体的なエピソードを用いる", "その経験から得た学びや成長を強調", "仕事との関連性を意識する", "チームワークや課題解決の経験を含める" ], example: "部活動/サークルでリーダーを務め、〜という課題に直面した際、チームメンバーと協力して〜のように解決しました。" }, 長所短所: { title: "長所・短所のポイント", points: [ "具体的なエピソードと共に説明", "短所は改善への取り組みも含める", "職務との関連性を意識する", "誠実に回答しつつ、ポジティブな印象を残す" ], example: "私の長所は〜です。具体的には〜という経験で、〜という成果を上げました。短所としては〜ですが、それを克服するために〜のような工夫をしています。" }, キャリアプラン: { title: "キャリアプランのポイント", points: [ "具体的な目標と期間を示す", "会社の成長と自己の成長を結びつける", "現実的かつ意欲的な計画を述べる", "自己研鑽への意欲を示す" ], example: "入社後は〜の分野でスキルを磨き、3年程度で〜として成長したいと考えています。将来的には〜の専門家として、会社の〜に貢献したいと考えています。" } }; const getQuestionType = (question)=>{ if (question.includes("自己紹介")) return "自己紹介"; if (question.includes("志望動機") || question.includes("志望理由")) return "志望動機"; if (question.includes("学生時代") || question.includes("大学時代")) return "学生時代"; if (question.includes("長所") || question.includes("短所") || question.includes("強み") || question.includes("弱み")) return "長所短所"; if (question.includes("キャリア") || question.includes("将来") || question.includes("目標")) return "キャリアプラン"; return "一般的な回答"; }; const questionType = getQuestionType(question); if (questionType === "一般的な回答") { return { title: "面接での回答のポイント", points: [ "質問の意図を正確に理解して回答する", "具体的なエピソードを交えて説明する", "簡潔かつ分かりやすく伝える", "前向きな姿勢で回答する" ], example: "ご質問の〜について、私の経験では〜のような場面で〜のように対応しました。その結果、〜という成果を得ることができました。" }; } return adviceMap[questionType]; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#1a237e] to-[#0d47a1] text-white p-8", __source: { fileName: "", lineNumber: 267, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 268, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 269, columnNumber: 9 }, __self: this }, "AI面接練習アシスタント"), !isStarted ? /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 274, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-xl p-8", __source: { fileName: "", lineNumber: 275, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 font-roboto", __source: { fileName: "", lineNumber: 276, columnNumber: 15 }, __self: this }, "面接を開始する"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4", __source: { fileName: "", lineNumber: 279, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>startInterview(), className: "bg-[#3f51b5] hover:bg-[#303f9f] transition-all p-4 rounded-lg flex items-center justify-center space-x-2", __source: { fileName: "", lineNumber: 280, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play text-xl", __source: { fileName: "", lineNumber: 284, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }, "面接を始める"))))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 291, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-xl p-8", __source: { fileName: "", lineNumber: 292, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 293, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "chat-container flex flex-col space-y-4", __source: { fileName: "", lineNumber: 294, columnNumber: 17 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${msg.role === "assistant" ? "justify-start" : "justify-end"}`, __source: { fileName: "", lineNumber: 296, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[80%] rounded-lg p-4 ${msg.role === "assistant" ? "bg-[#303f9f] text-white" : "bg-[#4caf50] text-white"}`, __source: { fileName: "", lineNumber: 304, columnNumber: 23 }, __self: this }, msg.content))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 316, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[80%] rounded-lg p-4 bg-[#303f9f] text-white", __source: { fileName: "", lineNumber: 317, columnNumber: 23 }, __self: this }, streamingMessage))), currentAdvice && /*#__PURE__*/ React.createElement("div", { className: "bg-white/5 rounded-lg p-4 mt-4", __source: { fileName: "", lineNumber: 324, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 325, columnNumber: 21 }, __self: this }, currentAdvice.title), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside space-y-2", __source: { fileName: "", lineNumber: 328, columnNumber: 21 }, __self: this }, currentAdvice.points.map((point, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 330, columnNumber: 25 }, __self: this }, point))), /*#__PURE__*/ React.createElement("div", { className: "mt-3", __source: { fileName: "", lineNumber: 333, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-300", __source: { fileName: "", lineNumber: 334, columnNumber: 23 }, __self: this }, "回答例："), /*#__PURE__*/ React.createElement("p", { className: "text-sm italic mt-1", __source: { fileName: "", lineNumber: 335, columnNumber: 23 }, __self: this }, currentAdvice.example))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 341, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleVoiceInput, disabled: loading || speaking, className: `${isListening ? "bg-red-500" : "bg-[#3f51b5]"} p-4 rounded-full hover:opacity-90 transition-all disabled:opacity-50`, __source: { fileName: "", lineNumber: 342, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isListening ? "fa-stop" : "fa-microphone"} text-xl`, __source: { fileName: "", lineNumber: 349, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "text", value: userAnswer, onChange: (e)=>setUserAnswer(e.target.value), placeholder: "回答を入力するか、マイクボタンを押して話してください", className: "flex-1 bg-white/20 rounded-lg p-3 outline-none focus:ring-2 focus:ring-[#3f51b5]", disabled: loading || speaking, __source: { fileName: "", lineNumber: 355, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: submitAnswer, disabled: loading || !userAnswer || speaking, className: "bg-[#4caf50] hover:bg-[#388e3c] disabled:opacity-50 transition-all p-4 rounded-lg", __source: { fileName: "", lineNumber: 363, columnNumber: 19 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 369, columnNumber: 23 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 371, columnNumber: 23 }, __self: this })))))))); }