function MainComponent() { const [loading, setLoading] = React.useState(false); const [chatInput, setChatInput] = React.useState(""); const [chatResponses, setChatResponses] = React.useState([]); const handleChatGPT = async (messages)=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); const newMessage = "VALORANTに関する返答\n" + data.choices[0].message.content; setChatResponses((prev)=>[ ...prev, { role: "assistant", content: newMessage } ]); setLoading(false); }; const handleSubmit = async ()=>{ const userMessage = { role: "user", content: chatInput }; setChatResponses((prev)=>[ ...prev, userMessage ]); await handleChatGPT([ userMessage ]); setChatInput(""); }; const renderContent = (content)=>{ const formattedLines = content.split('\n').map((line, key)=>{ let formattedLine = line.includes('VALORANT') ? /*#__PURE__*/ React.createElement("strong", { className: "text-red-500", __source: { fileName: "", lineNumber: 28, columnNumber: 55 }, __self: this }, line) : line; formattedLine = formattedLine.replace(/\*\*(.*?)\*\*/g, '$1'); return /*#__PURE__*/ React.createElement("div", { key: key, className: "whitespace-pre-wrap", dangerouslySetInnerHTML: { __html: formattedLine }, __source: { fileName: "", lineNumber: 30, columnNumber: 14 }, __self: this }); }); return formattedLines; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full max-w-[600px] text-center mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "VALO特化AIチャットくん")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-gray-200 p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatInput", value: chatInput, onChange: (e)=>setChatInput(e.target.value), placeholder: "ここにVALORANTに関する質問を入力してください", className: "w-full p-2 border border-gray-300 rounded focus:outline-none mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, disabled: loading, className: "w-full p-2 bg-blue-500 text-white rounded disabled:bg-gray-300", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "送信"), loading && /*#__PURE__*/ React.createElement("div", { className: "my-2 text-center", __source: { fileName: "", lineNumber: 56, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 56, columnNumber: 55 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, chatResponses.map((response, index)=>{ const isUser = response.role === "user"; const content = isUser ? response.content : renderContent(response.content); return /*#__PURE__*/ React.createElement("div", { key: index, className: `p-4 rounded ${isUser ? "bg-lightblue-200 self-end text-right" : "bg-gray-50 text-left"}`, __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, isUser ? "あなた" : "ボット", ":"), " ", content); }))), /*#__PURE__*/ React.createElement("footer", { className: "w-full max-w-[600px] text-center mt-6", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://x.com/TK_Canta_Ct", className: "text-blue-500", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "作成者：https://x.com/TK_Canta_Ct"))); }