function YouTubeCommentAnalyzer({ onSubmit }) { const [comment, setComment] = React.useState(""); const handleSubmit = (e)=>{ e.preventDefault(); onSubmit(comment); setComment(""); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 border rounded-lg w-[400px]", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "comment", className: "border p-2 rounded-lg", rows: "4", value: comment, onChange: (e)=>setComment(e.target.value), placeholder: "YouTubeのコメントを入力してください...", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "self-end bg-blue-500 text-white p-2 rounded-lg", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this })))); } function YouTubeCommentAnalyzerStory() { const handleCommentSubmit = (comment)=>{ console.log("Received comment:", comment); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 items-center", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(YouTubeCommentAnalyzer, { onSubmit: handleCommentSubmit, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this })); } function MainComponent() { const [comments, setComments] = React.useState([]); const [inputText, setInputText] = React.useState(""); const [analyzing, setAnalyzing] = React.useState(false); const [results, setResults] = React.useState(null); const handleInputChange = (e)=>{ setInputText(e.target.value); }; const handleSend = ()=>{ if (inputText.trim() !== "") { setAnalyzing(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": inputText } ] }) }).then((response)=>response.json()).then((data)=>{ const newComment = { text: inputText, time: "たった今", user: 1 }; setComments([ ...comments, newComment ]); setResults(data.choices[0].message.content); setInputText(""); setAnalyzing(false); }); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-gray-100 h-screen flex flex-col", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FF0000] text-white p-4 flex-none flex items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-youtube text-2xl mr-2", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "YouTube視聴者心理ツール")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, comments.map((comment, index)=>{ const userImageSrc = "/user1.png"; return /*#__PURE__*/ React.createElement("div", { className: `flex items-start mb-4 justify-start`, key: index, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: userImageSrc, alt: `視聴者${comment.user}のプロフィール画像`, className: `w-10 h-10 rounded-full mr-4`, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `p-4 rounded-lg shadow-md w-full bg-white text-black`, __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, comment.text), /*#__PURE__*/ React.createElement("p", { className: "text-xs opacity-75", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, comment.time))); }), analyzing && /*#__PURE__*/ React.createElement("p", { className: "text-center mt-4 text-gray-500", __source: { fileName: "", lineNumber: 53, columnNumber: 23 }, __self: this }, "分析中..."), results && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 rounded-lg shadow-md bg-white text-black", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "分析結果"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, results))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-4 flex-none flex items-center", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "comment", placeholder: "コメントを入力...", value: inputText, onChange: handleInputChange, className: "flex-1 p-2 rounded-lg border border-gray-300", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSend, className: "ml-4 bg-[#FF0000] text-white p-2 rounded-lg", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this })))); }