@cmnd-ai/chatbot-react 1.8.0 → 1.9.1

package/Readme.md

@@ -36,6 +36,7 @@ const App = () => {
     <CmndChatBot
       chatbotId={123}
       organizationId={456}
+      chatHistoryStorageKey="your-unique-storage-key"
       apiKey="your-api-key"
       baseUrl="https://api.example.com"
     />
@@ -56,6 +57,7 @@ const App = () => {
     <CmndChatBot
       chatbotId={123}
       organizationId={456}
+      chatHistoryStorageKey="your-unique-storage-key"
       apiKey="your-api-key"
       baseUrl="https://api.example.com"
       theme="dark"
@@ -128,14 +130,15 @@ const App = () => {
 
 ### Optional Props
 
-| Prop            | Type                  | Default     | Description                 |
-| --------------- | --------------------- | ----------- | --------------------------- |
-| `theme`         | `"light" \| "dark"`   | `"light"`   | Theme for the chatbot       |
-| `UITools`       | `CMNDChatbotUITool[]` | `[]`        | Array of UI tools           |
-| `enabledTools`  | `any[]`               | `[]`        | Array of enabled tools      |
-| `initialMemory` | `CMNDChatMemory`      | `undefined` | Initial conversation memory |
-| `customStyles`  | `CustomStyles`        | `undefined` | Custom CSS styles           |
-| `Components`    | `Components`          | `undefined` | Custom component overrides  |
+| Prop                    | Type                  | Default     | Description                                           |
+| ----------------------- | --------------------- | ----------- | ----------------------------------------------------- |
+| `theme`                 | `"light" \| "dark"`   | `"light"`   | Theme for the chatbot                                 |
+| `UITools`               | `CMNDChatbotUITool[]` | `[]`        | Array of UI tools                                     |
+| `enabledTools`          | `any[]`               | `[]`        | Array of enabled tools                                |
+| `initialMemory`         | `CMNDChatMemory`      | `undefined` | Initial conversation memory                           |
+| `customStyles`          | `CustomStyles`        | `undefined` | Custom CSS styles                                     |
+| `Components`            | `Components`          | `undefined` | Custom component overrides                            |
+| `chatHistoryStorageKey` | `string`              | `undefined` | The chat history key defined by the client            |
 
 ## Custom Components
 

package/dist/ChatProvider/index.js

@@ -1,15 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from "react";
-import { MessageRole, } from "../type.js";
+import React, { useEffect, useRef, useState } from "react";
 import postUserConversation from "../services/postUserConversation.js";
 import getChatBotById from "../services/getchatBotById.js";
 import patchChatbotConversationMemory from "../services/patchChatbotConversationMemory/index.js";
 import deleteChatbotConversationMemory from "../services/deleteChatbotConversationMemory/index.js";
 import parseUITools from "../utils/parseUITools.js";
 import getTools from "../utils/getTools/index.js";
-import saveConversationIdToLocalStorage from "../utils/saveConversationIdToLocalStorage/index.js";
-import { ConversationsPanel } from "../components/ConversationsPanel/index.js";
-import useMessagesScroll from "../hooks/use-messages-scroll.js";
+import { ConversationsPanel, } from "../components/ConversationsPanel/index.js";
 let globalChatbotConversationId;
 let globalChatbotProps;
 export const ChatProviderContext = React.createContext(undefined);
@@ -57,9 +54,14 @@ function ChatProvider(props) {
     const [canContinue] = useState(false);
     const [isChatLoading, setIsChatLoading] = useState(false);
     const [canSendMessage, setCanSendMessage] = useState(true);
-    const { messagesRef, resetMessagesScroll, isMessagesScrolledToBottom } = useMessagesScroll(messages);
     const [chatbotConversationId, setChatbotConversationId] = useState(undefined);
     const [enabledTools, setEnabledTools] = useState([]);
+    const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+    const [selectedConversation, setSelectedConversation] = useState(null);
+    const inputRef = useRef(null);
+    const [shouldFocusInput, setShouldFocusInput] = useState(false);
+    const [pendingSendText, setPendingSendText] = useState(null);
+    const conversationsPanelRef = useRef(null);
     useEffect(() => {
         globalChatbotConversationId = chatbotConversationId;
     }, [chatbotConversationId]);
@@ -98,54 +100,48 @@ function ChatProvider(props) {
             onData,
         });
     };
-    const handleSendClick = async () => {
-        if (input.trim() === "" || !canSendMessage)
-            return;
-        const newUserMessage = {
-            unuseful: false,
-            hiddenFromUser: false,
-            role: "user",
-            message: canContinue ? "continue" : input,
-        };
-        const newMessages = [...messages, newUserMessage];
-        setMessages(newMessages);
-        setInput("");
-        setIsChatLoading(true);
-        try {
-            const onData = async (data) => {
-                if (data.finalResponseWithUsageData) {
-                    setIsChatLoading(false);
-                    setCanSendMessage(true);
-                    const { chatbotConversationId, messages } = data;
-                    if (chatbotConversationId) {
-                        setChatbotConversationId(chatbotConversationId);
-                        await saveConversationIdToLocalStorage({
-                            chatbotConversationId,
-                            chatbotId,
-                            organizationId,
-                        });
-                    }
-                    messages && setMessages(messages);
-                }
-                if (data.message) {
-                    setIsChatLoading(false);
-                    const newAssistantMessage = {
-                        unuseful: false,
-                        hiddenFromUser: false,
-                        role: MessageRole.ASSISTANT,
-                        message: data.message,
-                    };
-                    setMessages([...newMessages, newAssistantMessage]);
-                }
-            };
-            setCanSendMessage(false);
-            await postSessionMessage(newMessages, onData);
+    const toggleSidebar = () => {
+        setIsSidebarCollapsed((prev) => !prev);
+    };
+    const openSidePanel = () => {
+        setIsSidebarCollapsed(false);
+    };
+    const closeSidePanel = () => {
+        setIsSidebarCollapsed(true);
+    };
+    const createNewConversation = () => {
+        conversationsPanelRef.current?.handleNewChat();
+    };
+    const setMessageText = (text) => {
+        setInput(text);
+        setShouldFocusInput(true);
+    };
+    useEffect(() => {
+        if (shouldFocusInput) {
+            inputRef.current?.focus();
+            if (inputRef.current) {
+                const len = inputRef.current.value.length;
+                inputRef.current.setSelectionRange(len, len);
+            }
+            setShouldFocusInput(false);
+        }
+    }, [input, shouldFocusInput]);
+    const sendMessage = (text) => {
+        if (typeof text === "string") {
+            setInput(text);
+            setShouldFocusInput(true);
+            setPendingSendText(text);
         }
-        catch (error) {
-            console.error(error);
-            setError("Error sending message");
+        else {
+            conversationsPanelRef.current?.handleSendClick();
         }
     };
+    useEffect(() => {
+        if (pendingSendText !== null && input === pendingSendText) {
+            conversationsPanelRef.current?.handleSendClick();
+            setPendingSendText(null);
+        }
+    }, [input, pendingSendText]);
     if (loading)
         return null;
     return (_jsx(ChatProviderContext.Provider, { value: {
@@ -169,9 +165,15 @@ function ChatProvider(props) {
                 chatbotConversationId,
                 UITools: parseUITools(UITools),
             },
-        }, children: error ? (_jsx("div", { children: "An error occured" })) : (_jsxs(_Fragment, { children: [props.children, _jsx(ConversationsPanel, { organizationId: organizationId, chatbotId: chatbotId, baseUrl: baseUrl, theme: props.theme, enabledTools: getTools({
+            createNewConversation,
+            toggleSidebar,
+            openSidePanel,
+            closeSidePanel,
+            setMessageText,
+            sendMessage,
+        }, children: error ? (_jsx("div", { children: "An error occured" })) : (_jsxs(_Fragment, { children: [props.children, _jsx(ConversationsPanel, { ref: conversationsPanelRef, organizationId: organizationId, chatbotId: chatbotId, baseUrl: baseUrl, chatHistoryStorageKey: props.chatHistoryStorageKey, theme: props.theme, enabledTools: getTools({
                         apiTools: enabledTools,
                         uiTools: parseUITools(UITools),
-                    }), postSessionMessage: postSessionMessage, setChatbotConversationId: setChatbotConversationId, chatbotConversationId: chatbotConversationId, Components: Components, UITools: parseUITools(UITools), customStyles: props.customStyles })] })) }));
+                    }), postSessionMessage: postSessionMessage, setChatbotConversationId: setChatbotConversationId, chatbotConversationId: chatbotConversationId, Components: Components, UITools: parseUITools(UITools), customStyles: props.customStyles, isSidebarCollapsed: isSidebarCollapsed, setIsSidebarCollapsed: setIsSidebarCollapsed, selectedConversation: selectedConversation, setSelectedConversation: setSelectedConversation, messages: messages, setMessages: setMessages, input: input, setInput: setInput, inputRef: inputRef })] })) }));
 }
 export default ChatProvider;

package/dist/ChatProvider/useChatContext.d.ts

@@ -1,2 +1,2 @@
-declare const useChatContext: () => import("../type.js").CmndChatContext;
-export default useChatContext;
+declare const useCMNDChatContext: () => import("../type.js").CmndChatContext;
+export { useCMNDChatContext };

package/dist/ChatProvider/useChatContext.js

@@ -1,9 +1,9 @@
 import { useContext } from "react";
 import { ChatProviderContext } from "./index.js";
-const useChatContext = () => {
+const useCMNDChatContext = () => {
     const context = useContext(ChatProviderContext);
     if (!context)
         throw new Error("Cmnd chat context must be wrapped in a provider");
     return context;
 };
-export default useChatContext;
+export { useCMNDChatContext };

package/dist/CmndChatBot/index.d.ts

@@ -3,6 +3,7 @@ import { CMNDChatbotUITool, CMNDChatMemory, CustomStyles, InputFieldProps, SendB
 export interface CmndChatBotProps {
     chatbotId: number;
     organizationId: number;
+    chatHistoryStorageKey?: string;
     apiKey?: string;
     baseUrl: string;
     theme?: "light" | "dark";
@@ -20,5 +21,5 @@ export interface CmndChatBotProps {
         error?: any;
     };
 }
-declare function CmndChatBot({ chatbotId, organizationId, apiKey, baseUrl, theme, UITools, customStyles, enabledTools, Components, initialMemory, }: CmndChatBotProps): JSX.Element;
+declare function CmndChatBot({ chatbotId, organizationId, apiKey, baseUrl, theme, UITools, customStyles, chatHistoryStorageKey, enabledTools, Components, initialMemory, }: CmndChatBotProps): JSX.Element;
 export default CmndChatBot;

package/dist/CmndChatBot/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ChatProvider from "../ChatProvider/index.js";
-function CmndChatBot({ chatbotId, organizationId, apiKey, baseUrl, theme, UITools, customStyles, enabledTools = [], Components, initialMemory, }) {
-    return (_jsx(ChatProvider, { chatbotId: chatbotId, organizationId: organizationId, apiKey: apiKey, baseUrl: baseUrl, theme: theme, UITools: UITools, customStyles: customStyles, enabledTools: enabledTools, Components: Components, initialMemory: initialMemory }));
+function CmndChatBot({ chatbotId, organizationId, apiKey, baseUrl, theme, UITools, customStyles, chatHistoryStorageKey, enabledTools = [], Components, initialMemory, }) {
+    return (_jsx(ChatProvider, { chatbotId: chatbotId, organizationId: organizationId, chatHistoryStorageKey: chatHistoryStorageKey, apiKey: apiKey, baseUrl: baseUrl, theme: theme, UITools: UITools, customStyles: customStyles, enabledTools: enabledTools, Components: Components, initialMemory: initialMemory }));
 }
 export default CmndChatBot;

package/dist/components/ChatInputBox.d.ts

@@ -3,6 +3,7 @@ interface ChatInputBoxProps {
     input: string;
     setInput: (input: string) => void;
     handleSendClick: () => void;
+    inputRef?: React.RefObject<HTMLInputElement>;
 }
-declare const ChatInputBox: ({ input, setInput, handleSendClick }: ChatInputBoxProps) => JSX.Element;
+declare const ChatInputBox: ({ input, setInput, handleSendClick, inputRef, }: ChatInputBoxProps) => JSX.Element;
 export default ChatInputBox;

package/dist/components/ChatInputBox.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const ChatInputBox = ({ input, setInput, handleSendClick }) => {
-    return (_jsx("div", { className: "cmnd-input-wrapper", children: _jsx("input", { autoFocus: true, id: "cmnd-input", className: "cmnd-input", onKeyDown: e => {
+const ChatInputBox = ({ input, setInput, handleSendClick, inputRef, }) => {
+    return (_jsx("div", { className: "cmnd-input-wrapper", children: _jsx("input", { ref: inputRef, autoFocus: true, id: "cmnd-input", className: "cmnd-input", onKeyDown: (e) => {
                 if (e.key === "Enter") {
                     handleSendClick();
                 }
-            }, autoComplete: "off", value: input, onChange: e => setInput(e.target.value), type: "text", placeholder: "Type something..." }) }));
+            }, autoComplete: "off", value: input, onChange: (e) => setInput(e.target.value), type: "text", placeholder: "Type something..." }) }));
 };
 export default ChatInputBox;

package/dist/components/Chatbubble.d.ts

@@ -18,6 +18,7 @@ interface ChatBubbleProps {
     customStyles?: CustomStyles;
     chatbotId: number;
     organizationId: number;
+    chatHistoryStorageKey?: string;
     theme?: "light" | "dark";
     Components?: {
         InputField?: (params: InputFieldProps) => JSX.Element;
@@ -28,5 +29,5 @@ interface ChatBubbleProps {
         error?: any;
     };
 }
-declare const Chatbubble: ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, theme, Components, }: ChatBubbleProps) => JSX.Element | null;
+declare const Chatbubble: ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, theme, Components, }: ChatBubbleProps) => JSX.Element | null;
 export default Chatbubble;

package/dist/components/Chatbubble.js

@@ -27,7 +27,7 @@ const patchLastMessageToolInfo = (messages, toolInfo) => {
     const newMessages = [...shallowCopyOfMessagesWithoutLast, copyOfLastMessage];
     return newMessages;
 };
-const confirmToolRun = async ({ messages, setMessages, postSessionMessage, setIsChatLoading, setCanSendMessage, setChatbotConversationId, chatbotId, organizationId, }) => {
+const confirmToolRun = async ({ messages, setMessages, postSessionMessage, setIsChatLoading, setCanSendMessage, setChatbotConversationId, chatbotId, organizationId, chatHistoryStorageKey }) => {
     const newMessages = patchLastMessageToolInfo(messages, {
         confirmed: true,
     });
@@ -45,6 +45,7 @@ const confirmToolRun = async ({ messages, setMessages, postSessionMessage, setIs
                     chatbotConversationId,
                     chatbotId,
                     organizationId,
+                    chatHistoryStorageKey
                 });
             }
             messages && setMessages(messages);
@@ -75,7 +76,7 @@ const getChatAvatar = (role, theme = "light", Components) => {
             return _jsx(BsRobot, { color: iconColor });
     }
 };
-const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, theme, Components, }) => {
+const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, theme, Components, }) => {
     const toolData = tools?.find((t) => t.name === toolCallDetails?.name);
     const hasConfirmedToolRun = useRef(false);
     const isPostingMessage = useRef(false);
@@ -95,6 +96,7 @@ const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage,
                 setChatbotConversationId,
                 chatbotId,
                 organizationId,
+                chatHistoryStorageKey,
             });
         }
     }, []);

package/dist/components/Conversation.d.ts

@@ -27,8 +27,10 @@ export interface ConversationProps {
     setCurrentConversationMemory: (memory: CMNDChatMemory) => Promise<any>;
     chatbotId: number;
     organizationId: number;
+    chatHistoryStorageKey?: string;
     isMessagesScrolledToBottom?: boolean;
     resetMessagesScroll?: () => void;
+    inputRef?: React.RefObject<HTMLInputElement>;
 }
-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, }: 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, chatHistoryStorageKey, isMessagesScrolledToBottom, resetMessagesScroll, inputRef, }: ConversationProps) => JSX.Element;
 export default Conversation;

package/dist/components/Conversation.js

@@ -3,8 +3,8 @@ 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, canSendMessage, setInput, input, theme, Components, UITools, customStyles, chatbotId, organizationId, isMessagesScrolledToBottom = true, resetMessagesScroll, }) => {
-    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 } })) : (_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, chatHistoryStorageKey, 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, chatHistoryStorageKey: chatHistoryStorageKey, 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/ConversationsPanel/index.d.ts

@@ -1,9 +1,10 @@
 import React, { Dispatch, SetStateAction } from "react";
-import { InputFieldProps, SendButtonProps } from "../../type.js";
+import { ChatbotConversation, InputFieldProps, SendButtonProps } from "../../type.js";
 interface ConversationsPanelProps {
     organizationId: number;
     chatbotId: number;
     baseUrl: string;
+    chatHistoryStorageKey?: string;
     theme?: "light" | "dark";
     enabledTools?: any[];
     setChatbotConversationId: Dispatch<SetStateAction<number | undefined>>;
@@ -28,6 +29,19 @@ interface ConversationsPanelProps {
         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 declare const ConversationsPanel: React.FC<ConversationsPanelProps>;
+export interface ConversationsPanelRef {
+    handleSendClick: () => void;
+    handleNewChat: () => void;
+}
+export declare const ConversationsPanel: React.ForwardRefExoticComponent<ConversationsPanelProps & React.RefAttributes<ConversationsPanelRef>>;
 export {};

package/dist/components/ConversationsPanel/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect, } from "react";
+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";
@@ -10,14 +10,17 @@ import getConversationLocalStorageKey from "../../utils/getConversationLocalStor
 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 = ({ organizationId, chatbotId, baseUrl, theme = "light", enabledTools = [], setChatbotConversationId, chatbotConversationId, postSessionMessage, Components, UITools, customStyles, }) => {
-    const [selectedConversation, setSelectedConversation] = useState(null);
-    const [messages, setMessages] = useState([]);
-    const [input, setInput] = useState("");
+export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseUrl, chatHistoryStorageKey, 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 [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+    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: {
@@ -48,7 +51,7 @@ export const ConversationsPanel = ({ organizationId, chatbotId, baseUrl, theme =
         },
     };
     const colors = themeColors[theme];
-    const localStorageKey = getConversationLocalStorageKey({
+    const localStorageKey = chatHistoryStorageKey || getConversationLocalStorageKey({
         organizationId,
         chatbotId,
     });
@@ -72,23 +75,27 @@ export const ConversationsPanel = ({ organizationId, chatbotId, baseUrl, theme =
             setConversationIds([]);
         }
     };
-    const { data, loading, error, refetch } = useFetchData(() => {
+    const { data, loading, error, refetch } = useFetchData(async () => {
         // Only fetch if we have conversation IDs
         if (conversationIds.length === 0) {
-            return Promise.resolve({
-                data: { chatbotConversations: [] },
-                status: 200,
-                statusText: "OK",
-                headers: {},
-                config: {},
+            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: [] };
             });
         }
-        return getChatBotConversationsList({
-            organizationId,
-            chatbotId,
-            conversationIds,
-            baseUrl,
-        });
+        catch (error) {
+            console.error("Error fetching conversations (sync):", error);
+            return { chatbotConversations: [] };
+        }
     }, [organizationId, chatbotId, conversationIds, baseUrl]);
     const handleSendClick = () => {
         if (!input.trim() || !canSendMessage)
@@ -116,10 +123,12 @@ export const ConversationsPanel = ({ organizationId, chatbotId, baseUrl, theme =
                         chatbotConversationId: newConversationId,
                         chatbotId,
                         organizationId,
+                        chatHistoryStorageKey,
                     });
                     refetchConversationIds();
                     if (selectedConversation &&
-                        selectedConversation.chatbotConversationTitle === "New Conversation") {
+                        selectedConversation.chatbotConversationTitle ===
+                            "New Conversation") {
                         setSelectedConversation({
                             ...selectedConversation,
                             chatbotConversationId: newConversationId,
@@ -213,6 +222,10 @@ export const ConversationsPanel = ({ organizationId, chatbotId, baseUrl, theme =
             return dateB.getTime() - dateA.getTime();
         });
     }, [data?.chatbotConversations, selectedConversation]);
+    useImperativeHandle(ref, () => ({
+        handleSendClick,
+        handleNewChat,
+    }));
     return (_jsxs("div", { className: "cmnd-conversations-panel", style: {
             display: "flex",
             height: "100%",
@@ -220,7 +233,7 @@ export const ConversationsPanel = ({ organizationId, chatbotId, baseUrl, theme =
             color: colors.text,
             ...customStyles?.panelStyle,
         }, children: [_jsxs("div", { className: "cmnd-conversations-sidebar", style: {
-                    width: isSidebarCollapsed ? "50px" : "300px",
+                    width: isSidebarCollapsedFinal ? "50px" : "300px",
                     borderRight: `1px solid ${colors.border}`,
                     display: "flex",
                     flexDirection: "column",
@@ -228,15 +241,17 @@ export const ConversationsPanel = ({ organizationId, chatbotId, baseUrl, theme =
                     transition: "width 0.3s ease",
                     ...customStyles?.sidebarStyle,
                 }, children: [_jsxs("div", { className: "cmnd-conversations-header", style: {
-                            padding: isSidebarCollapsed ? "12px 8px" : "16px",
+                            padding: isSidebarCollapsedFinal ? "12px 8px" : "16px",
                             borderBottom: `1px solid ${colors.border}`,
                             display: "flex",
-                            justifyContent: isSidebarCollapsed ? "center" : "space-between",
+                            justifyContent: isSidebarCollapsedFinal
+                                ? "center"
+                                : "space-between",
                             alignItems: "center",
-                            flexDirection: isSidebarCollapsed ? "column" : "row",
-                            gap: isSidebarCollapsed ? "8px" : "0",
+                            flexDirection: isSidebarCollapsedFinal ? "column" : "row",
+                            gap: isSidebarCollapsedFinal ? "8px" : "0",
                             ...customStyles?.headerStyle,
-                        }, children: [!isSidebarCollapsed && (_jsx("h3", { style: {
+                        }, children: [!isSidebarCollapsedFinal && (_jsx("h3", { style: {
                                     margin: 0,
                                     fontSize: "16px",
                                     fontWeight: "600",
@@ -244,8 +259,10 @@ export const ConversationsPanel = ({ organizationId, chatbotId, baseUrl, theme =
                                 }, children: "Conversations" })), _jsxs("div", { style: {
                                     display: "flex",
                                     gap: "8px",
-                                    flexDirection: isSidebarCollapsed ? "column" : "row",
-                                }, children: [_jsx("button", { className: "cmnd-toggle-sidebar-button", onClick: () => setIsSidebarCollapsed(!isSidebarCollapsed), title: isSidebarCollapsed ? "Expand Sidebar" : "Collapse Sidebar", style: {
+                                    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,
@@ -282,7 +299,7 @@ export const ConversationsPanel = ({ organizationId, chatbotId, baseUrl, theme =
                             overflowY: "auto",
                             padding: "12px",
                             ...customStyles?.conversationListStyle,
-                        }, children: isSidebarCollapsed ? (_jsx("div", { style: {
+                        }, children: isSidebarCollapsedFinal ? (_jsx("div", { style: {
                                 textAlign: "center",
                                 padding: "8px",
                                 color: colors.secondaryText,
@@ -291,19 +308,25 @@ export const ConversationsPanel = ({ organizationId, chatbotId, baseUrl, theme =
                                 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: {
+                            }, 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") {
+                                if (conversation.chatbotConversationTitle ===
+                                    "New Conversation") {
                                 }
                                 else {
                                     handleConversationSelect(conversation);
                                 }
                             }, onDelete: () => {
-                                if (conversation.chatbotConversationTitle === "New Conversation") {
+                                if (conversation.chatbotConversationTitle ===
+                                    "New Conversation") {
                                     setSelectedConversation(null);
                                     setMessages([]);
                                 }
@@ -329,5 +352,5 @@ export const ConversationsPanel = ({ organizationId, chatbotId, baseUrl, theme =
                         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 })) })] }));
-};
+                    }, 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, chatHistoryStorageKey: chatHistoryStorageKey, isMessagesScrolledToBottom: isMessagesScrolledToBottom, resetMessagesScroll: resetMessagesScroll, inputRef: inputRef })) })] }));
+});

package/dist/hooks/use-fetch-data.d.ts

@@ -1,9 +1,8 @@
-import { AxiosPromise } from "axios";
 type UseFetchDataResult<T = any> = {
     loading: boolean;
     error: boolean;
     data: T;
     refetch: () => void;
 };
-declare const useFetchData: <T = any>(apiCallFn: () => AxiosPromise<T>, deps?: any[]) => UseFetchDataResult<T>;
+declare const useFetchData: <T = any>(apiCallFn: () => Promise<T>, deps?: any[]) => UseFetchDataResult<T>;
 export default useFetchData;

package/dist/hooks/use-fetch-data.js

@@ -10,7 +10,7 @@ const useFetchData = (apiCallFn, deps = []) => {
         setError(false);
         try {
             const response = await apiCallFn();
-            setData(response.data);
+            setData(response);
         }
         catch {
             setError(true);

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export { default as ChatProvider } from "./ChatProvider/index.js";
 export { ConversationsPanel } from "./components/ConversationsPanel/index.js";
 export { CmndChatContext, InputFieldProps, SendButtonProps, CustomStyles, CMNDChatMemory, ChatbotConversation, ChatbotConversationsResponse, } from "./type.js";
 export { setCurrentConversationMemory, deleteCurrentConversationMemory, } from "./ChatProvider/index.js";
+export { useCMNDChatContext } from "./ChatProvider/useChatContext.js";

package/dist/index.js

@@ -1,3 +1,4 @@
 export { default as ChatProvider } from "./ChatProvider/index.js";
 export { ConversationsPanel } from "./components/ConversationsPanel/index.js";
 export { setCurrentConversationMemory, deleteCurrentConversationMemory, } from "./ChatProvider/index.js";
+export { useCMNDChatContext } from "./ChatProvider/useChatContext.js";

package/dist/services/getChatBotConversationsList/index.d.ts

@@ -3,5 +3,5 @@ declare const getChatBotConversationsList: ({ organizationId, chatbotId, convers
     chatbotId: number;
     conversationIds: number[];
     baseUrl: string;
-}) => Promise<import("axios").AxiosResponse<any, any>>;
+}) => Promise<any>;
 export default getChatBotConversationsList;

package/dist/services/getChatBotConversationsList/index.js

@@ -1,11 +1,12 @@
 import axios from "axios";
 import { chatbot } from "../../constants/endpoints.js";
-const getChatBotConversationsList = ({ organizationId, chatbotId, conversationIds, baseUrl, }) => {
+const getChatBotConversationsList = async ({ organizationId, chatbotId, conversationIds, baseUrl, }) => {
     const endpoint = chatbot.getChatBotConversationsList({
         organizationId,
         chatbotId,
         conversationIds,
     });
-    return axios.get(`${baseUrl}${endpoint}`);
+    const response = await axios.get(`${baseUrl}${endpoint}`);
+    return response.data;
 };
 export default getChatBotConversationsList;

package/dist/type.d.ts

@@ -2,12 +2,37 @@ import { CSSProperties } from "react";
 import { ConversationProps } from "./components/Conversation.js";
 export interface CmndChatContext {
     props: Partial<ConversationProps>;
+    /**
+     * Create a new conversation (resets state, starts a new chat thread)
+     */
+    createNewConversation: () => void;
+    /**
+     * Toggle the sidebar open/collapsed state
+     */
+    toggleSidebar: () => void;
+    /**
+     * Open the sidebar (set collapsed to false)
+     */
+    openSidePanel: () => void;
+    /**
+     * Close the sidebar (set collapsed to true)
+     */
+    closeSidePanel: () => void;
+    /**
+     * Set the message text in the input box
+     */
+    setMessageText: (text: string) => void;
+    /**
+     * Send the current message, or set and send if text is provided
+     */
+    sendMessage: (text?: string) => void;
 }
 export interface InputFieldProps {
     input: string;
     setInput: (input: string) => void;
     canSendMessage: boolean;
     handleSendClick: () => void;
+    inputRef?: React.RefObject<HTMLInputElement> | React.RefObject<HTMLTextAreaElement> | React.RefObject<HTMLTextAreaElement>;
 }
 export interface SendButtonProps {
     handleSendClick: () => void;

package/dist/utils/saveConversationIdToLocalStorage/index.d.ts

@@ -1,6 +1,7 @@
-declare const saveConversationIdToLocalStorage: ({ chatbotConversationId, chatbotId, organizationId, }: {
+declare const saveConversationIdToLocalStorage: ({ chatbotConversationId, chatbotId, organizationId, chatHistoryStorageKey }: {
     chatbotConversationId: number;
     chatbotId: number;
     organizationId: number;
+    chatHistoryStorageKey?: string | undefined;
 }) => Promise<void>;
 export default saveConversationIdToLocalStorage;

package/dist/utils/saveConversationIdToLocalStorage/index.js

@@ -1,7 +1,7 @@
 import getConversationLocalStorageKey from "../getConversationLocalStorageKey/index.js";
-const saveConversationIdToLocalStorage = async ({ chatbotConversationId, chatbotId, organizationId, }) => {
+const saveConversationIdToLocalStorage = async ({ chatbotConversationId, chatbotId, organizationId, chatHistoryStorageKey }) => {
     try {
-        const key = getConversationLocalStorageKey({
+        const key = chatHistoryStorageKey || getConversationLocalStorageKey({
             organizationId,
             chatbotId: Number(chatbotId),
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmnd-ai/chatbot-react",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "main": "dist/index.js",
   "description": "",
   "type": "module",