function MainComponent() { const [messages, setMessages] = React.useState([ { id: 1, text: 'Hello! How can I assist you today?', sender: 'bot' }, { id: 2, text: 'I need help with my project.', sender: 'user' } ]); const [inputValue, setInputValue] = React.useState(''); const [isExpanded, setIsExpanded] = React.useState(false); const handleInputChange = (e)=>{ setInputValue(e.target.value); }; const handleSubmit = (e)=>{ e.preventDefault(); if (inputValue.trim()) { setMessages([ ...messages, { id: messages.length + 1, text: inputValue, sender: 'user' } ]); setInputValue(''); } }; const toggleExpand = ()=>{ setIsExpanded(!isExpanded); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#282c34] text-white p-4 flex items-center justify-between", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "ChatGPTチャットサービス"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-white", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: `mb-4 ${message.sender === 'user' ? 'text-right' : ''}`, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-3 rounded-md w-[70%] ${message.sender === 'user' ? 'bg-[#4c9aff] text-white ml-auto' : 'bg-[#f5f5f5] text-[#000]'}`, __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, message.text))))), /*#__PURE__*/ React.createElement("div", { className: `p-4 bg-[#282c34] ${isExpanded ? 'fixed top-0 left-0 w-full h-full flex flex-col' : ''}`, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center gap-2 w-full h-full", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "chatInput", className: `bg-[#f5f5f5] text-[#000] rounded-md p-2 w-full ${isExpanded ? 'h-full' : 'h-[100px]'}`, placeholder: "Type your message...", value: inputValue, onChange: handleInputChange, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", className: "absolute top-2 right-2 text-black", onClick: toggleExpand, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${isExpanded ? 'compress' : 'expand'}`, __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#4c9aff] text-white p-2 rounded-md w-full", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Submit")))); }