function MainComponent() { const [messages, setMessages] = React.useState([ { role: "system", content: "あなたは不登校の生徒のためのメンタリングAIです。共感的な態度で接し、以下のように対応してください：1. 生徒の気持ちに寄り添い、否定せずに受け止める 2. 具体的な不安や悩みを丁寧に聞き出す 3. 小さな目標設定から始めて、段階的な改善を提案する 4. 生徒の興味関心や得意分野を活かした解決策を提示する 5. 必要に応じて専門家への相談を推奨する。生徒の心の安全を最優先し、焦らせることなく支援してください。" } ]); const [inputMessage, setInputMessage] = React.useState(""); const [loading, setLoading] = React.useState(false); const [streamingMessage, setStreamingMessage] = React.useState(""); const handleFinish = React.useCallback((message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); }, []); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: handleFinish }); const handleSubmit = async (e)=>{ e.preventDefault(); if (!inputMessage.trim()) return; setLoading(true); const userMessage = { role: "user", content: inputMessage }; setMessages((prev)=>[ ...prev, userMessage ]); setInputMessage(""); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ ...messages, userMessage ], stream: true }) }); handleStreamResponse(response).finally(()=>setLoading(false)); }; const chatMessages = messages.filter((msg)=>msg.role !== "system").map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-4 p-4 rounded-2xl relative shadow-md hover:shadow-lg transition-shadow ${message.role === "user" ? "bg-gradient-to-r from-green-100 to-green-200 ml-12 md:ml-24 self-start" : "bg-gradient-to-r from-yellow-100 to-yellow-200 mr-12 md:mr-24 self-end"}`, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, message.role === "user" && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 -left-2 w-4 h-4 -rotate-45 bg-gradient-to-r from-green-100 to-green-200", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }), message.role === "assistant" && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 -right-2 w-4 h-4 rotate-45 bg-gradient-to-r from-yellow-100 to-yellow-200", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-800 whitespace-pre-wrap leading-relaxed", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, message.content))); const isSubmitting = loading || streamingMessage; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-gradient-to-b from-blue-50 to-green-50 font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-md p-6", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center text-green-800 tracking-wide", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "メンタリングサポートAI")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-6 overflow-y-auto", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-2xl shadow-md mb-6 border-l-4 border-green-400", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-base leading-relaxed", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "こんにちは！あなたの気持ちや状況について、安心して話してください。一緒に考えていきましょう。")), chatMessages, isSubmitting && /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 rounded-2xl shadow-md bg-gradient-to-r from-yellow-100 to-yellow-200 mr-12 md:mr-24 self-end relative", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 -right-2 w-4 h-4 rotate-45 bg-gradient-to-r from-yellow-100 to-yellow-200", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto animate-pulse", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, streamingMessage || "考え中…")))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-6 shadow-lg border-t border-gray-100", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto flex gap-3", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), className: "flex-grow border-2 border-gray-200 rounded-xl px-6 py-3 focus:outline-none focus:ring-2 focus:ring-green-400 focus:border-transparent bg-gray-50 text-gray-800 placeholder-gray-400 transition-all", placeholder: "気軽に話しかけてください...", disabled: loading, __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-gradient-to-r from-green-500 to-green-600 text-white rounded-xl px-8 py-3 hover:from-green-600 hover:to-green-700 focus:outline-none focus:ring-2 focus:ring-green-300 disabled:opacity-50 transition-all shadow-md hover:shadow-lg", disabled: loading || !inputMessage.trim(), __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "送信"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, ` .animate-pulse { animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } `)); }