function MainComponent() { const [chatInput, setChatInput] = React.useState(''); const [conversations, setConversations] = React.useState([ { role: 'system', content: 'どんな物語を作成しますか？' } ]); const [loading, setLoading] = React.useState(false); const [storyTitles, setStoryTitles] = React.useState([]); const [requested, setRequested] = React.useState(false); const handleChatInputChange = (event)=>{ setChatInput(event.target.value); }; const handleChatSubmit = async (event)=>{ event.preventDefault(); setLoading(true); const userConversation = { role: 'user', content: chatInput }; setConversations((oldConversations)=>[ ...oldConversations, userConversation ]); const ApiResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ userConversation ], system_prompt: chatInput }) }); const data = await ApiResponse.json(); const aiResponse = { role: 'assistant', content: data.choices[0].message.content }; setConversations((oldConversations)=>[ ...oldConversations, aiResponse ]); if (!requested) { setRequested(true); const titleResponse = await fetch('/integrations/anthropic-claude/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: `Generate 20 story titles and summaries based on: ${chatInput}` } ] }) }); const titlesData = await titleResponse.json(); setStoryTitles(titlesData.choices.map((choice, index)=>({ id: index + 1, title: `Title ${index + 1}`, summary: choice.message.content }))); } setChatInput(''); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0] flex flex-col", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "py-4 bg-[#1a1a1a] text-white font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-xl flex justify-center items-center", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full overflow-hidden mr-2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "line_style_icon.png", alt: "Line style chat icon representing the story creation tool", __source: { fileName: "", lineNumber: 54, columnNumber: 70 }, __self: this })), "物語り作成ツール")), /*#__PURE__*/ React.createElement("main", { className: "flex-grow p-4 flex flex-col overflow-hidden", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col bg-white shadow rounded-lg overflow-y-scroll", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, conversations.map((conversation, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-center p-4 rounded-full mb-4 ${conversation.role === 'user' ? 'bg-green-200' : conversation.role === 'system' ? 'bg-red-100' : 'bg-green-100'}`, __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full bg-gray-300 flex justify-center items-center mr-2", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${conversation.role === 'user' ? 'fa-user-circle' : 'fa-robot'} text-lg`, __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, conversation.content))), requested && /*#__PURE__*/ React.createElement("table", { className: "w-full text-sm text-left text-gray-500", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "text-xs text-gray-700 uppercase bg-gray-50", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 72, columnNumber: 21 }, __self: this }, "通し番号"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 73, columnNumber: 21 }, __self: this }, "題名"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 74, columnNumber: 21 }, __self: this }, "概要"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, storyTitles.map((title)=>/*#__PURE__*/ React.createElement("tr", { key: title.id, className: "bg-white border-b", __source: { fileName: "", lineNumber: 79, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 80, columnNumber: 23 }, __self: this }, title.id), /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 81, columnNumber: 23 }, __self: this }, title.title), /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 82, columnNumber: 23 }, __self: this }, title.summary)))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleChatSubmit, className: "p-4 border-t", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatInput", value: chatInput, onChange: handleChatInputChange, className: "flex-grow p-2 border rounded-l-full focus:outline-none focus:ring-2 focus:ring-blue-500 font-roboto", placeholder: "メッセージを入力...", disabled: loading, __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }), loading ? /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 bg-blue-500 text-white rounded-full font-roboto", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-spinner fa-spin", __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this })) : /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white rounded-full font-roboto", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane", __source: { fileName: "", lineNumber: 106, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("footer", { className: "py-4 bg-[#1a1a1a] text-white font-roboto text-center", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, "物語り作成ツール ©2023")); }