@cmnd-ai/chatbot-react 1.7.1 → 1.9.0

package/dist/components/Conversation.d.ts

@@ -14,9 +14,9 @@ export interface ConversationProps {
     setIsChatLoading: Dispatch<SetStateAction<boolean>>;
     setCanSendMessage: Dispatch<SetStateAction<boolean>>;
     canSendMessage: boolean;
-    scrollToBottom: () => void;
     enabledTools: any[];
-    postSessionMessage: (message: string, onData: any) => void;
+    postSessionMessage: (newMessages: any, onData: any) => Promise<any>;
+    theme?: "light" | "dark";
     Components?: {
         InputField?: (params: InputFieldProps) => JSX.Element;
         SendButton?: (params: SendButtonProps) => JSX.Element;
@@ -25,6 +25,11 @@ export interface ConversationProps {
     UITools?: CMNDChatbotUITool[];
     customStyles?: CustomStyles;
     setCurrentConversationMemory: (memory: CMNDChatMemory) => Promise<any>;
+    chatbotId: number;
+    organizationId: number;
+    isMessagesScrolledToBottom?: boolean;
+    resetMessagesScroll?: () => void;
+    inputRef?: React.RefObject<HTMLInputElement>;
 }
-declare const Conversation: ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, scrollToBottom, canSendMessage, setInput, input, Components, UITools, customStyles, }: ConversationProps) => JSX.Element;
+declare const Conversation: ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, canSendMessage, setInput, input, theme, Components, UITools, customStyles, chatbotId, organizationId, isMessagesScrolledToBottom, resetMessagesScroll, inputRef, }: ConversationProps) => JSX.Element;
 export default Conversation;

package/dist/components/Conversation.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Chatbubble from "./Chatbubble.js";
 import LoadingBubble from "./LoadingBubble.js";
+import ScrollToBottomButton from "./ScrollToBottomButton.js";
 import ChatInputBox from "./ChatInputBox.js";
-const Conversation = ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, scrollToBottom, canSendMessage, setInput, input, Components, UITools, customStyles, }) => {
-    return (_jsxs("div", { className: "cmnd-conversations", children: [_jsxs("div", { ref: messagesRef, id: "messages", className: "cmnd-conversations-messages", children: [error, messages.map((m, i) => (_jsx(Chatbubble, { customStyles: customStyles, hide: m.hiddenFromUser, message: m.message, role: m.role, toolCallDetails: m.tool, tools: enabledTools, postSessionMessage: postSessionMessage, messages: messages, setMessages: setMessages, id: m.id, setChatbotConversationId: setChatbotConversationId, setIsChatLoading: setIsChatLoading, setCanSendMessage: setCanSendMessage, scrollToBottom: scrollToBottom, UITools: UITools }, i))), isChatLoading ? _jsx(LoadingBubble, { customStyles: customStyles }) : null] }), _jsxs("div", { id: "cmnd-input-div", className: "cmnd-input-div", children: [Components?.InputField ? (_jsx(Components.InputField, { ...{ input, setInput, canSendMessage, handleSendClick } })) : (_jsx(ChatInputBox, { input: input, setInput: setInput, handleSendClick: handleSendClick })), Components?.SendButton ? (_jsx(Components.SendButton, { ...{
+const Conversation = ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, canSendMessage, setInput, input, theme, Components, UITools, customStyles, chatbotId, organizationId, isMessagesScrolledToBottom = true, resetMessagesScroll, inputRef, }) => {
+    return (_jsxs("div", { className: "cmnd-conversations", children: [_jsxs("div", { ref: messagesRef, id: "messages", className: "cmnd-conversations-messages", children: [error, messages.map((m, i) => (_jsx(Chatbubble, { chatbotId: chatbotId, organizationId: organizationId, customStyles: customStyles, hide: m.hiddenFromUser, message: m.message, role: m.role, toolCallDetails: m.tool, tools: enabledTools, postSessionMessage: postSessionMessage, messages: messages, setMessages: setMessages, id: m.id, setChatbotConversationId: setChatbotConversationId, setIsChatLoading: setIsChatLoading, setCanSendMessage: setCanSendMessage, UITools: UITools, theme: theme, Components: Components }, i))), isChatLoading ? (_jsx(LoadingBubble, { customStyles: customStyles, chatbotId: chatbotId, organizationId: organizationId, theme: theme, Components: Components })) : null] }), _jsx(ScrollToBottomButton, { onClick: resetMessagesScroll || (() => { }), isVisible: !isMessagesScrolledToBottom && messages.length > 0, theme: theme, customStyles: customStyles }), _jsxs("div", { id: "cmnd-input-div", className: "cmnd-input-div", children: [Components?.InputField ? (_jsx(Components.InputField, { ...{ input, setInput, canSendMessage, handleSendClick, inputRef } })) : (_jsx(ChatInputBox, { input: input, setInput: setInput, handleSendClick: handleSendClick, inputRef: inputRef })), Components?.SendButton ? (_jsx(Components.SendButton, { ...{
                             canSendMessage,
                             handleSendClick,
                         } })) : (_jsx("button", { className: "cmnd-send-button", onClick: handleSendClick, children: "Send" }))] })] }));

package/dist/components/ConversationCard.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { ChatbotConversation } from "../type.js";
+interface ConversationCardProps {
+    conversation: ChatbotConversation;
+    isActive: boolean;
+    onClick: () => void;
+    onDelete?: () => void;
+    theme?: "light" | "dark";
+    customStyles?: {
+        conversationCardStyle?: React.CSSProperties;
+        activeConversationCardStyle?: React.CSSProperties;
+        titleStyle?: React.CSSProperties;
+        dateStyle?: React.CSSProperties;
+        deleteButtonStyle?: React.CSSProperties;
+    };
+}
+declare const ConversationCard: React.FC<ConversationCardProps>;
+export default ConversationCard;

package/dist/components/ConversationCard.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import formatDate from "../utils/format_date/index.js";
+const ConversationCard = ({ conversation, isActive, onClick, onDelete, theme = "light", customStyles, }) => {
+    const themeColors = {
+        light: {
+            card: "#ffffff",
+            activeCard: "#f0f2f5",
+            border: "#e0e0e0",
+            activeBorder: "#373E4E",
+            text: "#212121",
+            secondaryText: "#757575",
+            deleteHover: "#ff6b6b",
+            deleteHoverBg: "#ffebee",
+        },
+        dark: {
+            card: "#2a2f3a",
+            activeCard: "#3d4354",
+            border: "#3d4354",
+            activeBorder: "#5a67d8",
+            text: "#ffffff",
+            secondaryText: "#848d97",
+            deleteHover: "#ff6b6b",
+            deleteHoverBg: "#ff6b6b20",
+        },
+    };
+    const colors = themeColors[theme];
+    const truncateTitle = (title, maxLength = 50) => {
+        return title.length > maxLength
+            ? `${title.substring(0, maxLength)}...`
+            : title;
+    };
+    return (_jsx("div", { className: `cmnd-conversation-card ${isActive ? "cmnd-conversation-card-active" : ""}`, style: {
+            padding: "12px 16px",
+            margin: "8px 0",
+            borderRadius: "12px",
+            cursor: "pointer",
+            transition: "all 0.2s ease",
+            border: `1px solid ${isActive ? colors.activeBorder : colors.border}`,
+            backgroundColor: isActive ? colors.activeCard : colors.card,
+            position: "relative",
+            ...customStyles?.conversationCardStyle,
+            ...(isActive && customStyles?.activeConversationCardStyle),
+        }, onClick: onClick, children: _jsxs("div", { style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "flex-start",
+            }, children: [_jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("h4", { className: "cmnd-conversation-title", style: {
+                                margin: "0 0 4px 0",
+                                fontSize: "14px",
+                                fontWeight: "600",
+                                color: colors.text,
+                                lineHeight: "1.3",
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                ...customStyles?.titleStyle,
+                            }, children: conversation.chatbotConversationTitle }), _jsx("p", { className: "cmnd-conversation-date", style: {
+                                margin: "0",
+                                fontSize: "12px",
+                                color: colors.secondaryText,
+                                ...customStyles?.dateStyle,
+                            }, children: formatDate(conversation.updatedAt) })] }), onDelete && (_jsx("button", { className: "cmnd-conversation-delete", onClick: (e) => {
+                        e.stopPropagation();
+                        onDelete();
+                    }, style: {
+                        background: "none",
+                        border: "none",
+                        color: colors.secondaryText,
+                        cursor: "pointer",
+                        padding: "4px",
+                        borderRadius: "4px",
+                        fontSize: "14px",
+                        transition: "all 0.2s ease",
+                        ...customStyles?.deleteButtonStyle,
+                    }, onMouseEnter: (e) => {
+                        e.currentTarget.style.color = colors.deleteHover;
+                        e.currentTarget.style.backgroundColor = colors.deleteHoverBg;
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.color = colors.secondaryText;
+                        e.currentTarget.style.backgroundColor = "transparent";
+                    }, children: "\u00D7" }))] }) }));
+};
+export default ConversationCard;

package/dist/components/ConversationsPanel/index.d.ts

@@ -0,0 +1,46 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { ChatbotConversation, InputFieldProps, SendButtonProps } from "../../type.js";
+interface ConversationsPanelProps {
+    organizationId: number;
+    chatbotId: number;
+    baseUrl: string;
+    theme?: "light" | "dark";
+    enabledTools?: any[];
+    setChatbotConversationId: Dispatch<SetStateAction<number | undefined>>;
+    chatbotConversationId: number | undefined;
+    postSessionMessage: (newMessages: any, onData: any) => Promise<any>;
+    Components?: {
+        InputField?: (params: InputFieldProps) => JSX.Element;
+        SendButton?: (params: SendButtonProps) => JSX.Element;
+        error?: any;
+    };
+    UITools?: any[];
+    customStyles?: {
+        panelStyle?: React.CSSProperties;
+        sidebarStyle?: React.CSSProperties;
+        conversationListStyle?: React.CSSProperties;
+        headerStyle?: React.CSSProperties;
+        newChatButtonStyle?: React.CSSProperties;
+        refreshButtonStyle?: React.CSSProperties;
+        conversationCardStyle?: React.CSSProperties;
+        activeConversationCardStyle?: React.CSSProperties;
+        titleStyle?: React.CSSProperties;
+        dateStyle?: React.CSSProperties;
+        deleteButtonStyle?: React.CSSProperties;
+    };
+    isSidebarCollapsed?: boolean;
+    setIsSidebarCollapsed?: React.Dispatch<React.SetStateAction<boolean>>;
+    selectedConversation: ChatbotConversation | null;
+    setSelectedConversation: React.Dispatch<React.SetStateAction<ChatbotConversation | null>>;
+    messages: any[];
+    setMessages: React.Dispatch<React.SetStateAction<any[]>>;
+    input: string;
+    setInput: React.Dispatch<React.SetStateAction<string>>;
+    inputRef: React.RefObject<HTMLInputElement>;
+}
+export interface ConversationsPanelRef {
+    handleSendClick: () => void;
+    handleNewChat: () => void;
+}
+export declare const ConversationsPanel: React.ForwardRefExoticComponent<ConversationsPanelProps & React.RefAttributes<ConversationsPanelRef>>;
+export {};

package/dist/components/ConversationsPanel/index.js

@@ -0,0 +1,355 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, forwardRef, useImperativeHandle, } from "react";
+import useFetchData from "../../hooks/use-fetch-data.js";
+import getChatBotConversationsList from "../../services/getChatBotConversationsList/index.js";
+import Conversation from "../Conversation.js";
+import ConversationCard from "../ConversationCard.js";
+import { RiAddLine } from "react-icons/ri";
+import { FiSidebar } from "react-icons/fi";
+import getConversationLocalStorageKey from "../../utils/getConversationLocalStorageKey/index.js";
+import saveConversationIdToLocalStorage from "../../utils/saveConversationIdToLocalStorage/index.js";
+import getUTCDateTime from "../../utils/getUTCDateTime/index.js";
+import useMessagesScroll from "../../hooks/use-messages-scroll.js";
+export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseUrl, theme = "light", enabledTools = [], setChatbotConversationId, chatbotConversationId, postSessionMessage, Components, UITools, customStyles, isSidebarCollapsed, setIsSidebarCollapsed, selectedConversation, setSelectedConversation, messages, setMessages, input, setInput, inputRef, }, ref) => {
+    const [isChatLoading, setIsChatLoading] = useState(false);
+    const [canSendMessage, setCanSendMessage] = useState(true);
+    const [conversationIds, setConversationIds] = useState([]);
+    const isSidebarCollapsedProp = typeof isSidebarCollapsed === "boolean" ? isSidebarCollapsed : false;
+    const setIsSidebarCollapsedProp = setIsSidebarCollapsed;
+    const [internalSidebarCollapsed, setInternalSidebarCollapsed] = useState(false);
+    const isSidebarCollapsedFinal = typeof isSidebarCollapsed === "boolean"
+        ? isSidebarCollapsed
+        : internalSidebarCollapsed;
+    const setIsSidebarCollapsedFinal = setIsSidebarCollapsedProp || setInternalSidebarCollapsed;
+    const { messagesRef, resetMessagesScroll, isMessagesScrolledToBottom } = useMessagesScroll(messages);
+    const themeColors = {
+        light: {
+            background: "#ffffff",
+            sidebar: "#f8f9fa",
+            card: "#ffffff",
+            activeCard: "#f0f2f5",
+            border: "#e0e0e0",
+            text: "#212121",
+            secondaryText: "#757575",
+            button: "#373E4E",
+            buttonHover: "#2a2f3a",
+            deleteHover: "#ff6b6b",
+            deleteHoverBg: "#ffebee",
+        },
+        dark: {
+            background: "#1a1d24",
+            sidebar: "#20232c",
+            card: "#2a2f3a",
+            activeCard: "#3d4354",
+            border: "#3d4354",
+            text: "#ffffff",
+            secondaryText: "#848d97",
+            button: "#3d4354",
+            buttonHover: "#4a5568",
+            deleteHover: "#ff6b6b",
+            deleteHoverBg: "#ff6b6b20",
+        },
+    };
+    const colors = themeColors[theme];
+    const localStorageKey = getConversationLocalStorageKey({
+        organizationId,
+        chatbotId,
+    });
+    useEffect(() => {
+        try {
+            const conversationsFromLocalStorage = JSON.parse(localStorage.getItem(localStorageKey) || "[]") ?? [];
+            setConversationIds(conversationsFromLocalStorage);
+        }
+        catch (error) {
+            console.error("Error parsing conversations from localStorage:", error);
+            setConversationIds([]);
+        }
+    }, [organizationId, chatbotId, localStorageKey]);
+    const refetchConversationIds = () => {
+        try {
+            const conversationsFromLocalStorage = JSON.parse(localStorage.getItem(localStorageKey) || "[]") ?? [];
+            setConversationIds(conversationsFromLocalStorage);
+        }
+        catch (error) {
+            console.error("Error parsing conversations from localStorage:", error);
+            setConversationIds([]);
+        }
+    };
+    const { data, loading, error, refetch } = useFetchData(async () => {
+        // Only fetch if we have conversation IDs
+        if (conversationIds.length === 0) {
+            return { chatbotConversations: [] };
+        }
+        try {
+            return await getChatBotConversationsList({
+                organizationId,
+                chatbotId,
+                conversationIds,
+                baseUrl,
+            }).catch((error) => {
+                // Ignore any error from axios and return an empty list
+                console.error("Error fetching conversations (ignored):", error);
+                return { chatbotConversations: [] };
+            });
+        }
+        catch (error) {
+            console.error("Error fetching conversations (sync):", error);
+            return { chatbotConversations: [] };
+        }
+    }, [organizationId, chatbotId, conversationIds, baseUrl]);
+    const handleSendClick = () => {
+        if (!input.trim() || !canSendMessage)
+            return;
+        const userMessage = {
+            role: "user",
+            message: input,
+            id: Date.now().toString(),
+            unuseful: false,
+            hiddenFromUser: false,
+        };
+        const newMessages = [...messages, userMessage];
+        setMessages(newMessages);
+        setInput("");
+        setIsChatLoading(true);
+        setCanSendMessage(false);
+        const onData = async (data) => {
+            if (data.finalResponseWithUsageData) {
+                setIsChatLoading(false);
+                setCanSendMessage(true);
+                const { chatbotConversationId: newConversationId, messages: updatedMessages, } = data;
+                if (newConversationId) {
+                    setChatbotConversationId(newConversationId);
+                    await saveConversationIdToLocalStorage({
+                        chatbotConversationId: newConversationId,
+                        chatbotId,
+                        organizationId,
+                    });
+                    refetchConversationIds();
+                    if (selectedConversation &&
+                        selectedConversation.chatbotConversationTitle ===
+                            "New Conversation") {
+                        setSelectedConversation({
+                            ...selectedConversation,
+                            chatbotConversationId: newConversationId,
+                            chatbotConversationTitle: input.substring(0, 50) + (input.length > 50 ? "..." : ""),
+                            messages: updatedMessages || newMessages,
+                        });
+                    }
+                }
+                if (updatedMessages) {
+                    setMessages(updatedMessages);
+                }
+            }
+            if (data.message) {
+                setIsChatLoading(false);
+                setCanSendMessage(true);
+                const assistantMessage = {
+                    role: "assistant",
+                    message: data.message,
+                    id: Date.now().toString(),
+                    unuseful: false,
+                    hiddenFromUser: false,
+                };
+                setMessages([...newMessages, assistantMessage]);
+            }
+        };
+        postSessionMessage(newMessages, onData).catch((error) => {
+            console.error(error);
+            setIsChatLoading(false);
+            setCanSendMessage(true);
+        });
+    };
+    const handleConversationSelect = (conversation) => {
+        setSelectedConversation(conversation);
+        setChatbotConversationId(conversation.chatbotConversationId);
+        const formattedMessages = conversation.messages.map((msg) => ({
+            ...msg,
+            id: msg.id || Date.now().toString(),
+        }));
+        setMessages(formattedMessages);
+    };
+    const handleNewChat = () => {
+        setSelectedConversation(null);
+        setChatbotConversationId(undefined);
+        setMessages([]);
+        setInput("");
+        const dateString = getUTCDateTime();
+        const newConversation = {
+            chatbotConversationId: Date.now(),
+            messages: [],
+            chatbotId: chatbotId,
+            chatbotConversationTitle: "New Conversation",
+            createdAt: dateString,
+            updatedAt: dateString,
+            totalCostSoFar: 0,
+            totalTokensSoFar: 0,
+        };
+        setSelectedConversation(newConversation);
+    };
+    const handleDeleteConversation = async (conversationId) => {
+        try {
+            const currentConversations = JSON.parse(localStorage.getItem(localStorageKey) || "[]") ?? [];
+            const updatedConversations = currentConversations.filter((id) => id !== conversationId);
+            localStorage.setItem(localStorageKey, JSON.stringify(updatedConversations));
+            if (selectedConversation?.chatbotConversationId === conversationId) {
+                setSelectedConversation(null);
+                setMessages([]);
+                setChatbotConversationId(undefined);
+            }
+            refetchConversationIds();
+        }
+        catch (error) {
+            console.error("Error deleting conversation:", error);
+        }
+    };
+    const setCurrentConversationMemory = async (memory) => {
+        console.log("Set conversation memory:", memory);
+    };
+    const allConversations = React.useMemo(() => {
+        const existingConversations = data?.chatbotConversations || [];
+        const newConversation = selectedConversation &&
+            selectedConversation.chatbotConversationTitle === "New Conversation"
+            ? selectedConversation
+            : null;
+        let conversations = [...existingConversations];
+        if (newConversation) {
+            conversations.push(newConversation);
+        }
+        return conversations.sort((a, b) => {
+            const dateA = new Date(a.updatedAt);
+            const dateB = new Date(b.updatedAt);
+            return dateB.getTime() - dateA.getTime();
+        });
+    }, [data?.chatbotConversations, selectedConversation]);
+    useImperativeHandle(ref, () => ({
+        handleSendClick,
+        handleNewChat,
+    }));
+    return (_jsxs("div", { className: "cmnd-conversations-panel", style: {
+            display: "flex",
+            height: "100%",
+            backgroundColor: colors.background,
+            color: colors.text,
+            ...customStyles?.panelStyle,
+        }, children: [_jsxs("div", { className: "cmnd-conversations-sidebar", style: {
+                    width: isSidebarCollapsedFinal ? "50px" : "300px",
+                    borderRight: `1px solid ${colors.border}`,
+                    display: "flex",
+                    flexDirection: "column",
+                    backgroundColor: colors.sidebar,
+                    transition: "width 0.3s ease",
+                    ...customStyles?.sidebarStyle,
+                }, children: [_jsxs("div", { className: "cmnd-conversations-header", style: {
+                            padding: isSidebarCollapsedFinal ? "12px 8px" : "16px",
+                            borderBottom: `1px solid ${colors.border}`,
+                            display: "flex",
+                            justifyContent: isSidebarCollapsedFinal
+                                ? "center"
+                                : "space-between",
+                            alignItems: "center",
+                            flexDirection: isSidebarCollapsedFinal ? "column" : "row",
+                            gap: isSidebarCollapsedFinal ? "8px" : "0",
+                            ...customStyles?.headerStyle,
+                        }, children: [!isSidebarCollapsedFinal && (_jsx("h3", { style: {
+                                    margin: 0,
+                                    fontSize: "16px",
+                                    fontWeight: "600",
+                                    color: colors.text,
+                                }, children: "Conversations" })), _jsxs("div", { style: {
+                                    display: "flex",
+                                    gap: "8px",
+                                    flexDirection: isSidebarCollapsedFinal ? "column" : "row",
+                                }, children: [_jsx("button", { className: "cmnd-toggle-sidebar-button", onClick: () => setIsSidebarCollapsedFinal((prev) => !prev), title: isSidebarCollapsedFinal
+                                            ? "Expand Sidebar"
+                                            : "Collapse Sidebar", style: {
+                                            background: colors.button,
+                                            border: "none",
+                                            color: theme === "light" ? "#ffffff" : colors.text,
+                                            padding: "8px",
+                                            borderRadius: "6px",
+                                            cursor: "pointer",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            transition: "all 0.2s ease",
+                                            ...customStyles?.newChatButtonStyle,
+                                        }, onMouseEnter: (e) => {
+                                            e.currentTarget.style.backgroundColor = colors.buttonHover;
+                                        }, onMouseLeave: (e) => {
+                                            e.currentTarget.style.backgroundColor = colors.button;
+                                        }, children: _jsx(FiSidebar, { size: 16 }) }), _jsx("button", { className: "cmnd-new-chat-button", onClick: handleNewChat, title: "New Chat", style: {
+                                            background: colors.button,
+                                            border: "none",
+                                            color: theme === "light" ? "#ffffff" : colors.text,
+                                            padding: "8px",
+                                            borderRadius: "6px",
+                                            cursor: "pointer",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            transition: "all 0.2s ease",
+                                            ...customStyles?.newChatButtonStyle,
+                                        }, onMouseEnter: (e) => {
+                                            e.currentTarget.style.backgroundColor = colors.buttonHover;
+                                        }, onMouseLeave: (e) => {
+                                            e.currentTarget.style.backgroundColor = colors.button;
+                                        }, children: _jsx(RiAddLine, { size: 16 }) })] })] }), _jsx("div", { className: "cmnd-conversation-list", style: {
+                            flex: 1,
+                            overflowY: "auto",
+                            padding: "12px",
+                            ...customStyles?.conversationListStyle,
+                        }, children: isSidebarCollapsedFinal ? (_jsx("div", { style: {
+                                textAlign: "center",
+                                padding: "8px",
+                                color: colors.secondaryText,
+                                fontSize: "12px",
+                            }, children: allConversations.length })) : loading && allConversations.length === 0 ? (_jsx("div", { style: {
+                                textAlign: "center",
+                                padding: "20px",
+                                color: colors.secondaryText,
+                            }, children: "Loading conversations..." })) : error && allConversations.length === 0 ? (_jsx("div", { style: {
+                                textAlign: "center",
+                                padding: "20px",
+                                color: "#ff6b6b",
+                            }, children: "Error loading conversations" })) : allConversations.length === 0 ? (_jsx("div", { style: {
+                                textAlign: "center",
+                                padding: "20px",
+                                color: colors.secondaryText,
+                            }, children: "No conversations yet" })) : (allConversations.map((conversation) => (_jsx(ConversationCard, { conversation: conversation, isActive: selectedConversation?.chatbotConversationId ===
+                                conversation.chatbotConversationId, onClick: () => {
+                                if (conversation.chatbotConversationTitle ===
+                                    "New Conversation") {
+                                }
+                                else {
+                                    handleConversationSelect(conversation);
+                                }
+                            }, onDelete: () => {
+                                if (conversation.chatbotConversationTitle ===
+                                    "New Conversation") {
+                                    setSelectedConversation(null);
+                                    setMessages([]);
+                                }
+                                else {
+                                    handleDeleteConversation(conversation.chatbotConversationId);
+                                }
+                            }, theme: theme, customStyles: {
+                                conversationCardStyle: customStyles?.conversationCardStyle,
+                                activeConversationCardStyle: customStyles?.activeConversationCardStyle,
+                                titleStyle: customStyles?.titleStyle,
+                                dateStyle: customStyles?.dateStyle,
+                                deleteButtonStyle: customStyles?.deleteButtonStyle,
+                            } }, conversation.chatbotConversationId)))) })] }), _jsx("div", { className: "cmnd-chat-area", style: {
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                }, children: !selectedConversation ? (_jsx("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "100%",
+                        color: colors.secondaryText,
+                        fontSize: "16px",
+                        textAlign: "center",
+                        padding: "20px",
+                    }, children: _jsx("div", { children: _jsx("div", { children: "Select a conversation or start a new one" }) }) })) : (_jsx(Conversation, { messages: messages, setMessages: setMessages, handleSendClick: handleSendClick, input: input, setInput: setInput, isChatLoading: isChatLoading, error: error ? "Error loading conversations" : null, messagesRef: messagesRef, setChatbotConversationId: setChatbotConversationId, chatbotConversationId: chatbotConversationId, setIsChatLoading: setIsChatLoading, setCanSendMessage: setCanSendMessage, canSendMessage: canSendMessage, enabledTools: enabledTools, postSessionMessage: postSessionMessage, theme: theme, Components: Components, UITools: UITools, customStyles: customStyles, setCurrentConversationMemory: setCurrentConversationMemory, chatbotId: chatbotId, organizationId: organizationId, isMessagesScrolledToBottom: isMessagesScrolledToBottom, resetMessagesScroll: resetMessagesScroll, inputRef: inputRef })) })] }));
+});

package/dist/components/LoadingBubble.d.ts

@@ -1,7 +1,19 @@
 /// <reference types="react" />
-import { CustomStyles } from "../type.js";
+import { CustomStyles, InputFieldProps, SendButtonProps } from "../type.js";
 interface LoadingBubbleProps {
     customStyles?: CustomStyles;
+    chatbotId: number;
+    organizationId: number;
+    theme?: "light" | "dark";
+    Components?: {
+        InputField?: (params: InputFieldProps) => JSX.Element;
+        SendButton?: (params: SendButtonProps) => JSX.Element;
+        BotAvatar?: () => JSX.Element;
+        UserAvatar?: () => JSX.Element;
+        ToolAvatar?: () => JSX.Element;
+        LoadingIndicator?: () => JSX.Element;
+        error?: any;
+    };
 }
-declare const LoadingBubble: ({ customStyles }: LoadingBubbleProps) => JSX.Element;
+declare const LoadingBubble: ({ customStyles, chatbotId, organizationId, theme, Components, }: LoadingBubbleProps) => JSX.Element;
 export default LoadingBubble;

package/dist/components/LoadingBubble.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MessageRole } from "../type.js";
+import { MessageRole, } from "../type.js";
 import Chatbubble from "./Chatbubble.js";
-const LoadingBubble = ({ customStyles }) => {
+const LoadingBubble = ({ customStyles, chatbotId, organizationId, theme, Components, }) => {
     const color = "white";
-    return (_jsx(Chatbubble, { isLoadingBubble: true, customStyles: customStyles, message: _jsx("div", { className: "loading-container", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", style: {
-                    margin: "auto",
-                    display: "block",
-                    shapeRendering: "auto",
-                }, width: "60px", height: "30px", viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", children: [_jsxs("circle", { cx: "84", cy: "50", r: "10", fill: color, children: [_jsx("animate", { attributeName: "r", repeatCount: "indefinite", dur: "0.25s", calcMode: "spline", keyTimes: "0;1", values: "10;0", keySplines: "0 0.5 0.5 1", begin: "0s" }), _jsx("animate", { attributeName: "fill", repeatCount: "indefinite", dur: "1s", calcMode: "discrete", keyTimes: "0;0.25;0.5;0.75;1", values: color, begin: "0s" })] }), _jsxs("circle", { cx: "16", cy: "50", r: "10", fill: color, children: [_jsx("animate", { attributeName: "r", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "0;0;10;10;10", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "0s" }), _jsx("animate", { attributeName: "cx", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "16;16;16;50;84", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "0s" })] }), _jsxs("circle", { cx: "50", cy: "50", r: "10", fill: color, children: [_jsx("animate", { attributeName: "r", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "0;0;10;10;10", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.25s" }), _jsx("animate", { attributeName: "cx", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "16;16;16;50;84", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.25s" })] }), _jsxs("circle", { cx: "84", cy: "50", r: "10", fill: color, children: [_jsx("animate", { attributeName: "r", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "0;0;10;10;10", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.5s" }), _jsx("animate", { attributeName: "cx", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "16;16;16;50;84", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.5s" })] }), _jsxs("circle", { cx: "16", cy: "50", r: "10", fill: color, children: [_jsx("animate", { attributeName: "r", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "0;0;10;10;10", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.75s" }), _jsx("animate", { attributeName: "cx", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "16;16;16;50;84", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.75s" })] })] }) }), role: MessageRole.ASSISTANT, messages: [], postSessionMessage: () => { }, id: "__loading__", setMessages: () => { }, setChatbotConversationId: () => { }, setCanSendMessage: () => { }, setIsChatLoading: () => { }, scrollToBottom: () => { } }));
+    const defaultLoadingIndicator = (_jsx("div", { className: "loading-container", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", style: {
+                margin: "auto",
+                display: "block",
+                shapeRendering: "auto",
+            }, width: "60px", height: "30px", viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", children: [_jsxs("circle", { cx: "84", cy: "50", r: "10", fill: "#000", children: [_jsx("animate", { attributeName: "r", repeatCount: "indefinite", dur: "0.25s", calcMode: "spline", keyTimes: "0;1", values: "10;0", keySplines: "0 0.5 0.5 1", begin: "0s" }), _jsx("animate", { attributeName: "fill", repeatCount: "indefinite", dur: "1s", calcMode: "discrete", keyTimes: "0;0.25;0.5;0.75;1", values: color, begin: "0s" })] }), _jsxs("circle", { cx: "16", cy: "50", r: "10", fill: color, children: [_jsx("animate", { attributeName: "r", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "0;0;10;10;10", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "0s" }), _jsx("animate", { attributeName: "cx", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "16;16;16;50;84", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "0s" })] }), _jsxs("circle", { cx: "50", cy: "50", r: "10", fill: color, children: [_jsx("animate", { attributeName: "r", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "0;0;10;10;10", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.25s" }), _jsx("animate", { attributeName: "cx", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "16;16;16;50;84", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.25s" })] }), _jsxs("circle", { cx: "84", cy: "50", r: "10", fill: color, children: [_jsx("animate", { attributeName: "r", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "0;0;10;10;10", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.5s" }), _jsx("animate", { attributeName: "cx", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "16;16;16;50;84", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.5s" })] }), _jsxs("circle", { cx: "16", cy: "50", r: "10", fill: color, children: [_jsx("animate", { attributeName: "r", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "0;0;10;10;10", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.75s" }), _jsx("animate", { attributeName: "cx", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "16;16;16;50;84", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.75s" })] })] }) }));
+    return (_jsx(Chatbubble, { chatbotId: chatbotId, organizationId: organizationId, isLoadingBubble: true, customStyles: customStyles, theme: theme, Components: Components, message: Components?.LoadingIndicator ? (_jsx(Components.LoadingIndicator, {})) : (defaultLoadingIndicator), role: MessageRole.ASSISTANT, messages: [], postSessionMessage: () => { }, id: "__loading__", setMessages: () => { }, setChatbotConversationId: () => { }, setCanSendMessage: () => { }, setIsChatLoading: () => { } }));
 };
 export default LoadingBubble;

package/dist/components/ScrollToBottomButton.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { CustomStyles } from "../type.js";
+interface ScrollToBottomButtonProps {
+    onClick: () => void;
+    isVisible: boolean;
+    theme?: "light" | "dark";
+    customStyles?: CustomStyles;
+}
+declare const ScrollToBottomButton: React.FC<ScrollToBottomButtonProps>;
+export default ScrollToBottomButton;