function MainComponent() { const [response, setResponse] = React.useState(""); const [question, setQuestion] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [rating, setRating] = React.useState(null); const [history, setHistory] = React.useState([]); const handleQuestionSubmit = async ()=>{ setIsLoading(true); setResponse(""); try { const haikuResponse = await fetch('/integrations/anthropic-claude-haiku/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: `${question}\n- 120字程度で回答\n- 少しユーモアを交える\n- 絵文字を適度に入れる\n- 適度にスペースや改行されて読みやすく` } ] }) }); const haikuResult = await haikuResponse.json(); const haikuContent = haikuResult.choices[0].message.content; setResponse(haikuContent); setRating(null); setHistory([ ...history, { question, response: haikuContent, rating: 0 } ]); } catch (error) { setResponse("エラーが発生しました。もう一度お試しください。"); } setIsLoading(false); }; const handleRating = (value)=>{ const updatedHistory = history.map((item, index)=>index === history.length - 1 ? { ...item, rating: value } : item); setRating(value); setHistory(updatedHistory); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex justify-center items-center bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg w-full max-w-[600px] flex flex-col", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 text-center font-sans", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "AIカウンセラー"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-center font-sans", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "質問を入力してください。"), /*#__PURE__*/ React.createElement("textarea", { name: "question", value: question, onChange: (e)=>setQuestion(e.target.value), className: "w-full h-[100px] border border-gray-300 rounded-md p-2 mb-4 font-sans", placeholder: "ここに質問を入力...", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleQuestionSubmit, className: "w-full bg-blue-500 text-white py-2 rounded-md font-sans hover:bg-blue-700", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, isLoading ? "送信中..." : "質問を送信"), response && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border-t border-gray-300 text-left whitespace-pre-line leading-relaxed font-sans", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, response), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-sans", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "この回答に満足しましたか？"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-2 mt-2", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, [ 1, 2, 3, 4, 5 ].map((star)=>/*#__PURE__*/ React.createElement("span", { key: star, className: `fa fa-star ${rating >= star ? "text-yellow-400" : "text-gray-300"} cursor-pointer`, onClick: ()=>handleRating(star), __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("p", { className: "font-sans mt-4", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "他に質問があれば入力してください。")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-sans font-bold", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "これまでの質問"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, history.length > 0 ? history.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-2 border border-gray-300 rounded-md cursor-pointer hover:bg-gray-100", onClick: ()=>{ setQuestion(item.question); setResponse(item.response); setRating(item.rating); }, __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-sans text-sm", __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }, item.question))) : /*#__PURE__*/ React.createElement("p", { className: "font-sans text-sm text-center", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "まだ質問はありません。"))))); }