function ChatComponent({ chatHistory }) { return /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, chatHistory.map((chat, index)=>{ const containerClass = chat.from === "LLM" ? "justify-start" : "justify-end"; const messageAlignClass = chat.from === "LLM" ? "ml-2" : "mr-2"; const messageBgClass = chat.from === "LLM" ? "bg-gray-300" : "bg-blue-300"; return /*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${containerClass} mb-4`, __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, chat.from === "LLM" && /*#__PURE__*/ React.createElement("div", { className: "w-[40px] h-[40px] bg-[#333] text-white rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }, "L"), /*#__PURE__*/ React.createElement("div", { className: `flex ${messageAlignClass} flex-col`, __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, chat.from), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, chat.time), /*#__PURE__*/ React.createElement("span", { className: `p-2 rounded ${messageBgClass}`, __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, chat.message), /*#__PURE__*/ React.createElement("div", { className: "flex mt-2 space-x-2", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-green-600", __source: { fileName: "", lineNumber: 18, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-thumbs-up", __source: { fileName: "", lineNumber: 18, columnNumber: 52 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-red-600", __source: { fileName: "", lineNumber: 19, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-thumbs-down", __source: { fileName: "", lineNumber: 19, columnNumber: 50 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-blue-600", __source: { fileName: "", lineNumber: 20, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-copy", __source: { fileName: "", lineNumber: 20, columnNumber: 51 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-yellow-600", __source: { fileName: "", lineNumber: 21, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-file-export", __source: { fileName: "", lineNumber: 21, columnNumber: 53 }, __self: this })))), chat.from === "You" && /*#__PURE__*/ React.createElement("div", { className: "w-[40px] h-[40px] bg-[#007bff] text-white rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, "U")); })); } function ChatComponentStory() { const chatHistory = [ { from: "LLM", time: "10:30 AM", message: "Hello! How can I assist you today?" }, { from: "You", time: "10:31 AM", message: "I need help with my account." }, { from: "LLM", time: "10:32 AM", message: "Sure! I'll need a bit more information." } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatComponent, { chatHistory: chatHistory, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function UserInputBox({ placeholder, onImageClick, onFileClick, onMicrophoneClick }) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center bg-white p-4 rounded shadow w-full max-w-md mx-auto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: placeholder, className: "flex-1 border border-gray-300 p-2 rounded mr-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mr-2", onClick: onImageClick, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-image", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "mr-2", onClick: onFileClick, __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paperclip", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: onMicrophoneClick, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-microphone", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }))); } function UserInputBoxStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UserInputBox, { placeholder: "Type your message...", onImageClick: ()=>console.log('Image Clicked'), onFileClick: ()=>console.log('File Clicked'), onMicrophoneClick: ()=>console.log('Microphone Clicked'), __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this })); } function MainComponent() { const sessions = [ "Session 1", "Session 2", "Session 3" ]; const [currentSession, setCurrentSession] = React.useState(sessions[0]); const handleSessionClick = (session)=>{ setCurrentSession(session); }; const handleImageClick = ()=>{}; const handleFileClick = ()=>{}; const handleMicrophoneClick = ()=>{}; const chatHistory = [ { from: "LLM", time: "10:30 AM", message: "Hello! How can I assist you today?" }, { from: "You", time: "10:31 AM", message: "I need help with my account." }, { from: "LLM", time: "10:32 AM", message: "Sure! I'll need a bit more information." } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] bg-gray-200 p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Past Sessions"), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white p-2 rounded mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "New Session"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, sessions.map((session, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2 cursor-pointer bg-white p-2 rounded flex justify-between items-center hover:bg-gray-300", onClick: ()=>handleSessionClick(session), __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, session), /*#__PURE__*/ React.createElement("div", { className: "space-x-2", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-yellow-500", __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-pencil", __source: { fileName: "", lineNumber: 29, columnNumber: 53 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-red-500", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-trash", __source: { fileName: "", lineNumber: 30, columnNumber: 50 }, __self: this }))))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ChatComponent, { chatHistory: chatHistory, __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(UserInputBox, { placeholder: "Type your message...", onImageClick: handleImageClick, onFileClick: handleFileClick, onMicrophoneClick: handleMicrophoneClick, __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }))); }