@autobe/ui 0.22.1 → 0.23.1

package/lib/components/AutoBeChatMain.d.ts

@@ -1,12 +1,14 @@
-import { AutoBeUserMessageContent } from "@autobe/interface";
-import { IAutoBeUploadConfig } from "..";
+import { IConfigField } from "./AutoBeConfigModal";
 export interface IAutoBeChatMainProps {
+    isUnusedConfig?: boolean;
+    isReplay?: boolean;
     isMobile: boolean;
-    conversate: (messages: AutoBeUserMessageContent[]) => Promise<void>;
     setError: (error: Error) => void;
-    uploadConfig?: IAutoBeUploadConfig;
     className?: string;
     style?: React.CSSProperties;
+    configFields?: IConfigField[];
+    /** Additional required config fields beyond openApiKey */
+    requiredFields?: string[];
 }
 export declare const AutoBeChatMain: (props: IAutoBeChatMainProps) => import("react/jsx-runtime").JSX.Element;
 export default AutoBeChatMain;

package/lib/components/AutoBeChatMain.js

@@ -1,87 +1,235 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoBeChatMain = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const overlay_kit_1 = require("overlay-kit");
 const react_1 = require("react");
 const __1 = require("..");
 const AutoBeAgentContext_1 = require("../context/AutoBeAgentContext");
 const hooks_1 = require("../hooks");
-const AutoBeStatusModal_1 = __importDefault(require("./AutoBeStatusModal"));
+const config_1 = require("../types/config");
+const storage_1 = require("../utils/storage");
+const AutoBeConfigButton_1 = __importDefault(require("./AutoBeConfigButton"));
+const AutoBeConfigModal_1 = __importDefault(require("./AutoBeConfigModal"));
+const AutoBeStatusButton_1 = __importDefault(require("./AutoBeStatusButton"));
+const AutoBeEventGroupMovie_1 = __importDefault(require("./events/AutoBeEventGroupMovie"));
 const AutoBeChatMain = (props) => {
     var _a;
     const bodyContainerRef = (0, react_1.useRef)(null);
     const scrollAnchorRef = (0, react_1.useRef)(null);
-    const { eventGroups } = (0, AutoBeAgentContext_1.useAutoBeAgent)();
-    const [isTokenModalOpen, setIsTokenModalOpen] = (0, react_1.useState)(false);
+    const { eventGroups, getAutoBeService, connectionStatus } = (0, AutoBeAgentContext_1.useAutoBeAgent)();
+    const { refreshSessionList } = (0, __1.useAutoBeAgentSessionList)();
     const listener = (0, react_1.useRef)({
         handleDragEnter: () => { },
         handleDragLeave: () => { },
         handleDrop: () => { },
         handleDragOver: () => { },
     });
+    // Simplified config reader
+    const getCurrentConfig = () => {
+        var _a;
+        const config = {};
+        (_a = props.configFields) === null || _a === void 0 ? void 0 : _a.forEach((field) => {
+            const value = field.encrypted
+                ? (0, storage_1.getEncryptedSessionStorage)(field.storageKey)
+                : localStorage.getItem(field.storageKey) || "";
+            if (field.type === "checkbox") {
+                config[field.key] = String(value) === "true";
+            }
+            else if (field.type === "number") {
+                config[field.key] = parseInt(String(value)) || 0;
+            }
+            else {
+                config[field.key] = String(value);
+            }
+        });
+        return Object.assign(Object.assign({}, config_1.DEFAULT_CONFIG), config);
+    };
+    // Check if required config is available
+    const hasRequiredConfig = () => {
+        const config = getCurrentConfig();
+        // Check additional required fields from props
+        if (props.requiredFields) {
+            for (const field of props.requiredFields) {
+                if (!config[field]) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    };
+    // Unified service connection handler
+    const conversate = (messages) => __awaiter(void 0, void 0, void 0, function* () {
+        // Check if we have required config
+        if (props.isUnusedConfig === false && !hasRequiredConfig()) {
+            overlay_kit_1.overlay.open(({ isOpen, close }) => ((0, jsx_runtime_1.jsx)(AutoBeConfigModal_1.default, { isOpen: isOpen, onClose: close, title: "Server Connection Required", fields: props.configFields || [], onSave: () => {
+                    conversate(messages);
+                } })));
+        }
+        // Connect to service
+        try {
+            const config = getCurrentConfig();
+            const serviceData = yield getAutoBeService(config);
+            if (messages.length !== 0) {
+                yield new Promise((resolve) => {
+                    if (serviceData.listener.getEnable() === true) {
+                        resolve(void 0);
+                    }
+                    serviceData.listener.onEnable((value) => __awaiter(void 0, void 0, void 0, function* () {
+                        if (value === true) {
+                            resolve(void 0);
+                        }
+                    }));
+                });
+                yield serviceData.service.conversate(messages);
+            }
+            if (eventGroups.length === 0) {
+                refreshSessionList();
+            }
+        }
+        catch (error) {
+            console.error("Failed to connect:", error);
+            props.setError(error);
+        }
+    });
+    // Auto-scroll when new events arrive
     (0, react_1.useEffect)(() => {
         var _a;
-        if (eventGroups.length === 0)
+        if (eventGroups.length > 0) {
+            (_a = scrollAnchorRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+        }
+    }, [eventGroups.length]);
+    // Auto-connect if there are existing conversations and config is ready
+    (0, react_1.useEffect)(() => {
+        if (props.isReplay === true) {
+            conversate([]);
             return;
-        (_a = scrollAnchorRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-            behavior: "smooth",
-        });
-    }, [(_a = bodyContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight]);
-    return ((0, jsx_runtime_1.jsxs)("div", { onDragEnter: (e) => listener.current.handleDragEnter(e), onDragLeave: (e) => listener.current.handleDragLeave(e), onDragOver: (e) => listener.current.handleDragOver(e), onDrop: (e) => listener.current.handleDrop(e), style: Object.assign({ position: "relative", overflowY: "auto", margin: 0, flexGrow: 1, display: "flex", flexDirection: "column" }, props.style), className: props.className, ref: bodyContainerRef, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                    position: "sticky",
-                    top: "1rem",
-                    zIndex: 1001,
-                    display: "flex",
-                    justifyContent: "flex-end",
-                    marginBottom: "-3rem",
-                    paddingRight: "1.5rem",
-                }, children: (0, jsx_runtime_1.jsx)("button", { onClick: () => setIsTokenModalOpen(!isTokenModalOpen), style: {
-                        background: "#f8f9fa",
-                        color: "#495057",
-                        border: "1px solid #dee2e6",
-                        borderRadius: "50%",
-                        padding: "0.5rem",
-                        width: "2rem",
-                        height: "2rem",
-                        cursor: "pointer",
-                        fontSize: "0.85rem",
-                        fontWeight: "400",
-                        boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
-                        transition: "all 0.2s ease",
+        }
+        if (eventGroups.length > 0 &&
+            hasRequiredConfig() &&
+            connectionStatus === "disconnected") {
+            conversate([]);
+            return;
+        }
+    }, [connectionStatus, eventGroups.length]);
+    return ((0, jsx_runtime_1.jsx)(overlay_kit_1.OverlayProvider, { children: (0, jsx_runtime_1.jsxs)("div", { onDragEnter: (e) => listener.current.handleDragEnter(e), onDragLeave: (e) => listener.current.handleDragLeave(e), onDragOver: (e) => listener.current.handleDragOver(e), onDrop: (e) => listener.current.handleDrop(e), style: Object.assign({ position: "relative", overflowY: "auto", margin: 0, flexGrow: 1, display: "flex", flexDirection: "column" }, props.style), className: props.className, ref: bodyContainerRef, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                        position: "sticky",
+                        top: "1rem",
+                        zIndex: 1001,
                         display: "flex",
+                        justifyContent: "flex-end",
                         alignItems: "center",
-                        justifyContent: "center",
-                    }, onMouseOver: (e) => {
-                        e.currentTarget.style.transform = "translateY(-1px)";
-                        e.currentTarget.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.15)";
-                        e.currentTarget.style.background = "#e9ecef";
-                        e.currentTarget.style.borderColor = "#adb5bd";
-                    }, onMouseOut: (e) => {
-                        e.currentTarget.style.transform = "translateY(0)";
-                        e.currentTarget.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)";
-                        e.currentTarget.style.background = "#f8f9fa";
-                        e.currentTarget.style.borderColor = "#dee2e6";
-                    }, title: "View System Status", children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 16v-4" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 8h.01" })] }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    maxWidth: hooks_1.useMediaQuery.WIDTH_MD,
-                    width: "100%",
-                    margin: "0 auto",
-                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                        padding: "2rem",
-                        gap: 16,
+                        gap: "0.5rem",
+                        marginBottom: "-3rem",
+                        paddingRight: "1.5rem",
+                    }, children: [connectionStatus === "disconnected" && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                background: "#f8d7da",
+                                color: "#721c24",
+                                border: "1px solid #f5c6cb",
+                                borderRadius: "50px",
+                                padding: "0.4rem 0.8rem",
+                                fontSize: "0.8rem",
+                                fontWeight: "500",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "0.4rem",
+                                boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                        width: "6px",
+                                        height: "6px",
+                                        backgroundColor: "#dc3545",
+                                        borderRadius: "50%",
+                                        animation: "pulse 2s infinite",
+                                    } }), "Disconnected"] })), connectionStatus === "connecting" && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                background: "#fff3cd",
+                                color: "#856404",
+                                border: "1px solid #ffeaa7",
+                                borderRadius: "50px",
+                                padding: "0.4rem 0.8rem",
+                                fontSize: "0.8rem",
+                                fontWeight: "500",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "0.4rem",
+                                boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                        width: "6px",
+                                        height: "6px",
+                                        backgroundColor: "#f39c12",
+                                        borderRadius: "50%",
+                                        animation: "pulse 1.5s infinite",
+                                    } }), "Connecting..."] })), connectionStatus === "connected" && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                background: "#d4edda",
+                                color: "#155724",
+                                border: "1px solid #c3e6cb",
+                                borderRadius: "50px",
+                                padding: "0.4rem 0.8rem",
+                                fontSize: "0.8rem",
+                                fontWeight: "500",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "0.4rem",
+                                boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                        width: "6px",
+                                        height: "6px",
+                                        backgroundColor: "#28a745",
+                                        borderRadius: "50%",
+                                        animation: "pulse 1.5s infinite",
+                                    } }), "Connected"] })), (0, jsx_runtime_1.jsx)("style", { children: `
+              @keyframes pulse {
+                0%, 100% { opacity: 1; }
+                50% { opacity: 0.5; }
+              }
+            ` }), props.isUnusedConfig === false &&
+                            ((_a = props.configFields) === null || _a === void 0 ? void 0 : _a.length) != null &&
+                            props.configFields.length > 0 && ((0, jsx_runtime_1.jsx)(AutoBeConfigButton_1.default, { fields: props.configFields || [] })), (0, jsx_runtime_1.jsx)(AutoBeStatusButton_1.default, {})] }), (0, jsx_runtime_1.jsx)("div", { style: {
                         display: "flex",
                         flexDirection: "column",
-                    }, children: eventGroups.map((e, index) => ((0, jsx_runtime_1.jsx)(__1.AutoBeEventMovie, { events: e.events, last: index === eventGroups.length - 1 }, index))) }) }), (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1, minHeight: "1rem" }, ref: scrollAnchorRef }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    position: "sticky",
-                    bottom: 16,
-                    left: 0,
-                    right: 0,
-                    zIndex: 1000,
-                }, children: (0, jsx_runtime_1.jsx)(__1.AutoBeChatUploadBox, { listener: listener, uploadConfig: props.uploadConfig, conversate: props.conversate, setError: props.setError }) }), (0, jsx_runtime_1.jsx)(AutoBeStatusModal_1.default, { isOpen: isTokenModalOpen, onClose: () => setIsTokenModalOpen(false) })] }));
+                        maxWidth: hooks_1.useMediaQuery.WIDTH_MD,
+                        width: "100%",
+                        margin: "0 auto",
+                    }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                            padding: "2rem",
+                            gap: 16,
+                            display: "flex",
+                            flexDirection: "column",
+                        }, children: [connectionStatus === "disconnected" && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                    padding: "3rem",
+                                    color: "#666",
+                                    textAlign: "center",
+                                    gap: "1rem",
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "3rem" }, children: "\u2699\uFE0F" }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "1.25rem", fontWeight: "600" }, children: "Configuration Required" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                            fontSize: "1rem",
+                                            maxWidth: "400px",
+                                            lineHeight: "1.5",
+                                        }, children: "Please click the settings button \u2699\uFE0F to configure your server connection and API credentials, or start typing to begin setup." })] })), connectionStatus === "connected" && ((0, jsx_runtime_1.jsx)(AutoBeEventGroupMovie_1.default, { eventGroups: eventGroups }))] }) }), (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1, minHeight: "1rem" }, ref: scrollAnchorRef }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        position: "sticky",
+                        bottom: 16,
+                        left: 0,
+                        right: 0,
+                        zIndex: 1000,
+                    }, children: (0, jsx_runtime_1.jsx)(__1.AutoBeChatUploadBox, { listener: listener, uploadConfig: getCurrentConfig().supportAudioEnable
+                            ? {
+                                supportAudio: true,
+                            }
+                            : undefined, conversate: conversate, setError: props.setError }) })] }) }));
 };
 exports.AutoBeChatMain = AutoBeChatMain;
 exports.default = exports.AutoBeChatMain;

package/lib/components/AutoBeChatMain.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoBeChatMain.js","sourceRoot":"","sources":["../../src/components/AutoBeChatMain.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AutoBeChatMain.js","sourceRoot":"","sources":["../../src/components/AutoBeChatMain.tsx"],"names":[],"mappings":"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"}

package/lib/components/AutoBeChatSidebar.d.ts

@@ -0,0 +1,36 @@
+import { IAutoBeAgentSession, IAutoBeAgentSessionStorageStrategy } from "../structure";
+/** Props interface for AutoBeChatSidebar component */
+export interface IAutoBeChatSidebarProps {
+    storageStrategy: IAutoBeAgentSessionStorageStrategy;
+    /** Whether the sidebar is collapsed (true) or expanded (false) */
+    isCollapsed: boolean;
+    /** Function to toggle sidebar collapsed/expanded */
+    onToggle: () => void;
+    /** Custom className */
+    className?: string;
+    /** Function to select a session */
+    onSessionSelect?: (id: string) => Promise<void> | void;
+    /** Function to delete a session */
+    onDeleteSession?: (id: string) => Promise<void> | void;
+}
+/** Beautiful and modern chat sidebar component as part of layout */
+export declare const AutoBeChatSidebar: (props: IAutoBeChatSidebarProps) => import("react/jsx-runtime").JSX.Element;
+export default AutoBeChatSidebar;
+/** Props for ConversationListItem component */
+export interface IConversationListItemProps {
+    /** Conversation session data */
+    session: IAutoBeAgentSession;
+    /** Whether this conversation is currently active */
+    isActive: boolean;
+    /** Callback when conversation is selected */
+    onSelect: (sessionId: string) => void;
+    /** Callback when conversation should be deleted */
+    onDelete: (sessionId: string) => void;
+    /** Callback when conversation should be edited */
+    onEditTitle: (sessionId: string, title: string) => void;
+}
+/**
+ * Individual conversation list item component Displays conversation title,
+ * metadata, and actions
+ */
+export declare const SessionListItem: (props: IConversationListItemProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/AutoBeChatSidebar.js

@@ -0,0 +1,227 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SessionListItem = exports.AutoBeChatSidebar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AutoBeAgentSessionList_1 = require("../context/AutoBeAgentSessionList");
+const SearchParamsContext_1 = require("../context/SearchParamsContext");
+const ActionButtonGroup_1 = require("./common/ActionButtonGroup");
+const CompactSessionList_1 = require("./common/CompactSessionList");
+const collapsedWidth = "60px";
+const expandedWidth = "320px";
+/** Beautiful and modern chat sidebar component as part of layout */
+const AutoBeChatSidebar = (props) => {
+    var _a;
+    const { sessionList, refreshSessionList } = (0, AutoBeAgentSessionList_1.useAutoBeAgentSessionList)();
+    const { searchParams, setSearchParams } = (0, SearchParamsContext_1.useSearchParams)();
+    const activeSessionId = (_a = searchParams.get("session-id")) !== null && _a !== void 0 ? _a : null;
+    const [currentSessionId, setCurrentSessionId] = (0, react_1.useState)(Array.isArray(activeSessionId) ? activeSessionId.at(0) : activeSessionId);
+    const handleOnSessionSelect = (0, react_1.useCallback)((sessionId) => {
+        var _a;
+        (_a = props.onSessionSelect) === null || _a === void 0 ? void 0 : _a.call(props, sessionId);
+        setCurrentSessionId(sessionId);
+    }, [props.onSessionSelect, setSearchParams]);
+    (0, react_1.useEffect)(() => {
+        setCurrentSessionId(activeSessionId);
+    }, [searchParams]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: props.className, style: {
+            position: "relative",
+            height: "100%",
+            width: props.isCollapsed ? collapsedWidth : expandedWidth,
+            backgroundColor: "#ffffff",
+            borderRight: "1px solid #e5e7eb",
+            boxShadow: "2px 0 4px rgba(0, 0, 0, 0.05)",
+            transition: "width 0.3s ease",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+            flexShrink: 0,
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    padding: props.isCollapsed ? "1rem 0.75rem" : "1.5rem 1.25rem 1rem",
+                    borderBottom: "1px solid #f3f4f6",
+                    backgroundColor: "#fafafa",
+                    transition: "padding 0.3s ease",
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: "flex",
+                        justifyContent: props.isCollapsed ? "center" : "space-between",
+                        alignItems: "center",
+                        marginBottom: props.isCollapsed ? "0" : "1rem",
+                        transition: "all 0.3s ease",
+                    }, children: [!props.isCollapsed && ((0, jsx_runtime_1.jsx)("h2", { style: {
+                                fontSize: "1.25rem",
+                                fontWeight: "600",
+                                color: "#1f2937",
+                                margin: 0,
+                                opacity: props.isCollapsed ? 0 : 1,
+                                transition: "opacity 0.3s ease",
+                            }, children: "Chat History" })), (0, jsx_runtime_1.jsx)("button", { onClick: props.onToggle, style: {
+                                background: "none",
+                                border: "none",
+                                cursor: "pointer",
+                                padding: "0.5rem",
+                                borderRadius: "0.5rem",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                transition: "background-color 0.2s ease",
+                            }, onMouseEnter: (e) => {
+                                e.currentTarget.style.backgroundColor = "#f3f4f6";
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.backgroundColor = "transparent";
+                            }, title: props.isCollapsed ? "Expand sidebar" : "Collapse sidebar", children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: {
+                                    transform: props.isCollapsed
+                                        ? "rotate(0deg)"
+                                        : "rotate(180deg)",
+                                    transition: "transform 0.3s ease",
+                                }, children: (0, jsx_runtime_1.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    flex: 1,
+                    overflowY: props.isCollapsed ? "visible" : "auto",
+                    padding: props.isCollapsed ? "0.25rem" : "0.5rem",
+                    transition: "padding 0.3s ease",
+                }, children: props.isCollapsed ? (
+                // Collapsed state - show compact conversation indicators
+                (0, jsx_runtime_1.jsx)(CompactSessionList_1.CompactSessionList, { sessions: sessionList, activeSessionId: currentSessionId, maxItems: 8, onSessionSelect: handleOnSessionSelect })) : (
+                // Expanded state - show full conversation list
+                (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sessionList.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            padding: "2rem 1rem",
+                            textAlign: "center",
+                            color: "#6b7280",
+                            fontSize: "0.875rem",
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { marginBottom: "0.5rem" }, children: (0, jsx_runtime_1.jsx)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", style: { margin: "0 auto", opacity: 0.5 }, children: (0, jsx_runtime_1.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }) }), (0, jsx_runtime_1.jsx)("p", { style: { margin: 0 }, children: "No conversations yet" }), (0, jsx_runtime_1.jsx)("p", { style: { margin: "0.25rem 0 0 0", fontSize: "0.75rem" }, children: "Start a new chat to see your history here" })] })) : (sessionList.map((session) => ((0, jsx_runtime_1.jsx)(exports.SessionListItem, { session: session, isActive: currentSessionId === session.id, onSelect: handleOnSessionSelect, onDelete: () => __awaiter(void 0, void 0, void 0, function* () {
+                            var _a;
+                            yield ((_a = props.onDeleteSession) === null || _a === void 0 ? void 0 : _a.call(props, session.id));
+                            refreshSessionList();
+                            if (session.id === currentSessionId) {
+                                setSearchParams((sp) => {
+                                    const newSp = new URLSearchParams(sp);
+                                    newSp.delete("session-id");
+                                    return newSp;
+                                });
+                            }
+                        }), onEditTitle: (_, newTitle) => __awaiter(void 0, void 0, void 0, function* () {
+                            // Update the session title through storage strategy
+                            yield props.storageStrategy.editSessionTitle({
+                                id: session.id,
+                                title: newTitle,
+                            });
+                            refreshSessionList();
+                        }) }, session.id)))) })) })] }));
+};
+exports.AutoBeChatSidebar = AutoBeChatSidebar;
+exports.default = exports.AutoBeChatSidebar;
+/**
+ * Individual conversation list item component Displays conversation title,
+ * metadata, and actions
+ */
+const SessionListItem = (props) => {
+    var _a, _b;
+    const { session, isActive, onSelect, onDelete, onEditTitle } = props;
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
+    const [editingTitle, setEditingTitle] = (0, react_1.useState)((_a = session.title) !== null && _a !== void 0 ? _a : "");
+    const lastMessage = session.history.at(-1);
+    //----
+    // EVENT HANDLERS
+    //----
+    const handleStartEditing = () => {
+        var _a;
+        setIsEditing(true);
+        setEditingTitle((_a = session.title) !== null && _a !== void 0 ? _a : "Untitled");
+    };
+    const handleSaveTitle = () => {
+        const trimmedTitle = editingTitle.trim();
+        if (trimmedTitle && trimmedTitle !== session.title) {
+            onEditTitle === null || onEditTitle === void 0 ? void 0 : onEditTitle(session.id, trimmedTitle);
+        }
+        setIsEditing(false);
+    };
+    const handleCancelEditing = () => {
+        var _a;
+        setIsEditing(false);
+        setEditingTitle((_a = session.title) !== null && _a !== void 0 ? _a : "Untitled");
+    };
+    const handleKeyPress = (e) => {
+        if (e.key === "Enter") {
+            handleSaveTitle();
+        }
+        else if (e.key === "Escape") {
+            handleCancelEditing();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            marginBottom: "0.5rem",
+            borderRadius: "0.75rem",
+            padding: "0.75rem",
+            cursor: "pointer",
+            backgroundColor: isActive
+                ? "#eff6ff"
+                : isHovered
+                    ? "#f9fafb"
+                    : "transparent",
+            border: isActive ? "1px solid #dbeafe" : "1px solid transparent",
+            transition: "all 0.2s ease",
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.25rem",
+            position: "relative",
+        }, onClick: () => onSelect(session.id), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: "0.5rem",
+                    fontSize: "0.875rem",
+                    fontWeight: "500",
+                    color: isActive ? "#1d4ed8" : "#1f2937",
+                    lineHeight: "1.25",
+                    paddingRight: "0.5rem", // Space for buttons
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            flex: 1,
+                            display: "flex",
+                            alignItems: "center",
+                            minWidth: 0, // Allow shrinking
+                        }, children: isEditing ? ((0, jsx_runtime_1.jsx)("input", { type: "text", value: editingTitle, onChange: (e) => setEditingTitle(e.target.value), onKeyDown: handleKeyPress, onBlur: handleSaveTitle, style: {
+                                flex: 1,
+                                border: "1px solid #d1d5db",
+                                borderRadius: "0.25rem",
+                                padding: "0.25rem 0.5rem",
+                                fontSize: "0.875rem",
+                                fontWeight: "500",
+                                color: isActive ? "#1d4ed8" : "#1f2937",
+                                backgroundColor: "#ffffff",
+                                outline: "none",
+                                boxShadow: "0 0 0 2px rgba(59, 130, 246, 0.25)",
+                            }, autoFocus: true, onClick: (e) => e.stopPropagation() })) : ((0, jsx_runtime_1.jsx)("span", { style: {
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                                flex: 1,
+                            }, children: (_b = session.title) !== null && _b !== void 0 ? _b : "Untitled" })) }), !isEditing ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                            visibility: isHovered ? "visible" : "hidden",
+                            opacity: isHovered ? 1 : 0,
+                            transition: "opacity 0.2s ease",
+                        }, children: (0, jsx_runtime_1.jsx)(ActionButtonGroup_1.ActionButtonGroup, { onEdit: handleStartEditing, onDelete: onDelete ? () => onDelete(session.id) : undefined }) })) : ((0, jsx_runtime_1.jsx)(ActionButtonGroup_1.ActionButtonGroup, { onSave: handleSaveTitle, onCancel: handleCancelEditing }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    fontSize: "0.75rem",
+                    color: "#6b7280",
+                }, children: [(0, jsx_runtime_1.jsx)("span", { children: session.history.length > 0 && lastMessage !== undefined
+                            ? new Date(lastMessage.created_at).toLocaleDateString("en-US", {
+                                month: "short",
+                                day: "numeric",
+                                hour: "2-digit",
+                                minute: "2-digit",
+                            })
+                            : "No messages" }), session.history.length > 0 && ((0, jsx_runtime_1.jsxs)("span", { children: [session.history.length, " messages"] }))] })] }));
+};
+exports.SessionListItem = SessionListItem;
+//# sourceMappingURL=AutoBeChatSidebar.js.map