function MainComponent() { const [messages, setMessages] = React.useState([]); const [newMessage, setNewMessage] = React.useState(""); const [activeCategory, setActiveCategory] = React.useState("開発"); const categories = [ "開発", "プロジェクト管理", "ビジネス・一般" ]; const templates = { "開発": [ "リファクタリングする", "コードを書き出す", "コメントをつける" ], "プロジェクト管理": [], "ビジネス・一般": [] }; const handleSendMessage = ()=>{ if (newMessage.trim() !== "") { setMessages([ ...messages, { id: Date.now(), text: newMessage } ]); setNewMessage(""); } }; const handleChange = (e)=>{ setNewMessage(e.target.value); }; const handleTemplateClick = (template)=>{ setNewMessage(template); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-none p-4 bg-[#5865F2] text-white font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "ChatGPTのようなUI"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around p-4 bg-gray-100", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, categories.map((category, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: `px-4 py-2 rounded-lg font-roboto ${activeCategory === category ? "bg-[#5865F2] text-white" : "bg-white text-gray-800"}`, onClick: ()=>setActiveCategory(category), __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, category))), /*#__PURE__*/ React.createElement("div", { className: "flex-none p-4 bg-gray-200 overflow-auto", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, templates[activeCategory]?.map((template, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "block text-left w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", onClick: ()=>handleTemplateClick(template), __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, template))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: "flex justify-end", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[60%] rounded-lg bg-[#30b9d6] p-2 text-white", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, message.text)))), /*#__PURE__*/ React.createElement("div", { className: "flex-none p-4 bg-gray-200", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: newMessage, onChange: handleChange, className: "flex-1 p-2 rounded-lg border-2 border-gray-300", placeholder: "Type a message...", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, className: "px-4 py-2 bg-[#5865F2] text-white rounded-lg", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Send")))); }