function ChatSidebarManager({ isSidebarOpen, sessions, currentSession, handleNewSession, handleSessionClick }) { const sidebarClasses = `lg:block ${isSidebarOpen ? 'block' : 'hidden'} w-[300px] bg-[#f0f0f0] p-4 overflow-y-auto`; return /*#__PURE__*/ React.createElement("div", { className: sidebarClasses, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "チャット履歴"), /*#__PURE__*/ React.createElement("button", { onClick: handleNewSession, className: "p-2 bg-blue-500 text-white rounded-lg font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "New")), sessions.map((_, index)=>{ const sessionClasses = `my-2 p-2 rounded cursor-pointer ${index === currentSession ? 'bg-[#3c3c3c] text-white' : 'bg-gray-300'}`; return /*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>handleSessionClick(index), className: sessionClasses, __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, "セッション ", index + 1)); })); } function ChatSidebarManagerStory() { const [isSidebarOpen, setIsSidebarOpen] = React.useState(true); const [sessions, setSessions] = React.useState([ {}, {}, {} ]); const [currentSession, setCurrentSession] = React.useState(0); const handleNewSession = ()=>{ setSessions([ ...sessions, {} ]); }; const handleSessionClick = (index)=>{ setCurrentSession(index); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatSidebarManager, { isSidebarOpen: isSidebarOpen, sessions: sessions, currentSession: currentSession, handleNewSession: handleNewSession, handleSessionClick: handleSessionClick, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this })); } function ChatSidebarManager2({ isSidebarOpen, handleNewSession, sessions, currentSession, handleSessionClick }) { return /*#__PURE__*/ React.createElement("div", { className: `lg:block ${isSidebarOpen ? 'block' : 'hidden'} w-[300px] bg-[#f0f0f0] p-4 overflow-y-auto`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "チャット履歴"), /*#__PURE__*/ React.createElement("button", { onClick: handleNewSession, className: "p-2 bg-blue-500 text-white rounded-lg font-roboto", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "New")), sessions.map((_, index)=>{ const isActive = index === currentSession; return /*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>handleSessionClick(index), className: `my-2 p-2 rounded cursor-pointer ${isActive ? 'bg-[#3c3c3c] text-white' : 'bg-gray-300'}`, __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "セッション ", index + 1)); })); } function ChatSidebarManager2Story() { const [isSidebarOpen, setIsSidebarOpen] = React.useState(true); const [sessions, setSessions] = React.useState([ {}, {}, {} ]); const [currentSession, setCurrentSession] = React.useState(0); const handleNewSession = ()=>{ setSessions([ ...sessions, {} ]); }; const handleSessionClick = (index)=>{ setCurrentSession(index); }; return /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatSidebarManager2, { isSidebarOpen: isSidebarOpen, handleNewSession: handleNewSession, sessions: sessions, currentSession: currentSession, handleSessionClick: handleSessionClick, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsSidebarOpen(!isSidebarOpen), className: "lg:hidden p-2 bg-blue-500 text-white rounded-lg", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Toggle Sidebar"))); } function MainComponent() { const [messages, setMessages] = React.useState([ { text: 'こんにちは！何かお手伝いできますか？', sender: 'bot' }, { text: 'はい、天気予報を教えてください。', sender: 'user' } ]); const [inputMessage, setInputMessage] = React.useState(''); const [sessions, setSessions] = React.useState([ [] ]); const [currentSession, setCurrentSession] = React.useState(0); const [isSidebarOpen, setIsSidebarOpen] = React.useState(false); const handleInputChange = (e)=>setInputMessage(e.target.value); const handleSendMessage = (e)=>{ e.preventDefault(); if (inputMessage.trim()) { const newMessages = [ ...messages, { text: inputMessage, sender: 'user' } ]; setMessages(newMessages); updateSessions(currentSession, newMessages); setInputMessage(''); setTimeout(()=>{ const botReply = { text: 'これはサンプルの回答です。', sender: 'bot' }; const updatedMessages = [ ...newMessages, botReply ]; setMessages(updatedMessages); updateSessions(currentSession, updatedMessages); }, 1000); } }; const handleSessionClick = (index)=>{ setCurrentSession(index); setMessages(sessions[index]); setIsSidebarOpen(false); }; const updateSessions = (sessionIndex, newMessages)=>{ const updatedSessions = sessions.map((session, index)=>index === sessionIndex ? newMessages : session); setSessions(updatedSessions); }; const handleNewSession = ()=>{ setSessions([ ...sessions, [] ]); setCurrentSession(sessions.length); setMessages([]); }; const toggleSidebar = ()=>setIsSidebarOpen(!isSidebarOpen); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between bg-[#3c3c3c] h-[60px] px-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-white", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "ChatGPT"), /*#__PURE__*/ React.createElement("button", { onClick: toggleSidebar, className: "block lg:hidden text-white text-xl fas fa-bars", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex h-full", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ChatSidebarManager, { isSidebarOpen: isSidebarOpen, sessions: sessions, currentSession: currentSession, handleNewSession: handleNewSession, handleSessionClick: handleSessionClick, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, messages.map((message, index)=>{ const alignment = message.sender === 'user' ? 'justify-end' : 'justify-start'; const bgColor = message.sender === 'user' ? 'bg-blue-500 text-white' : 'bg-white'; const font = message.sender === 'user' ? 'font-roboto' : 'font-crimson-text'; return /*#__PURE__*/ React.createElement("div", { className: `flex ${alignment}`, key: index, __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${bgColor} p-4 rounded-lg max-w-[80%] shadow-md`, __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: font, __source: { fileName: "", lineNumber: 77, columnNumber: 21 }, __self: this }, message.text))); })))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputMessage, onChange: handleInputChange, placeholder: "メッセージを入力...", className: "w-full p-2 border border-gray-300 rounded-lg font-crimson-text", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement(ChatSidebarManager2, { isSidebarOpen: true, handleNewSession: handleNewSession, sessions: sessions, currentSession: currentSession, handleSessionClick: handleSessionClick, __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this })); }