@cmnd-ai/chatbot-react 1.9.0 → 1.9.2

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,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from "react";
 import postUserConversation from "../services/postUserConversation.js";
-import getChatBotById from "../services/getchatBotById.js";
+import getEmbedChatBotById from "../services/getEmbedChatBotById.js";
 import patchChatbotConversationMemory from "../services/patchChatbotConversationMemory/index.js";
 import deleteChatbotConversationMemory from "../services/deleteChatbotConversationMemory/index.js";
 import parseUITools from "../utils/parseUITools.js";
@@ -67,7 +67,7 @@ function ChatProvider(props) {
     }, [chatbotConversationId]);
     useEffect(() => {
         setLoading(true);
-        getChatBotById(baseUrl, organizationId, chatbotId)
+        getEmbedChatBotById(baseUrl, organizationId, chatbotId)
             .then((response) => {
             const { chatbot } = response.data;
             setEnabledTools(chatbot.enabledTools);
@@ -171,7 +171,7 @@ function ChatProvider(props) {
             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, theme: props.theme, enabledTools: getTools({
+        }, 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, isSidebarCollapsed: isSidebarCollapsed, setIsSidebarCollapsed: setIsSidebarCollapsed, selectedConversation: selectedConversation, setSelectedConversation: setSelectedConversation, messages: messages, setMessages: setMessages, input: input, setInput: setInput, inputRef: inputRef })] })) }));

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/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,9 +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, inputRef, }: 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, 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, { ...{
+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

@@ -4,6 +4,7 @@ interface ConversationsPanelProps {
     organizationId: number;
     chatbotId: number;
     baseUrl: string;
+    chatHistoryStorageKey?: string;
     theme?: "light" | "dark";
     enabledTools?: any[];
     setChatbotConversationId: Dispatch<SetStateAction<number | undefined>>;

package/dist/components/ConversationsPanel/index.js

@@ -10,7 +10,7 @@ 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 = forwardRef(({ organizationId, chatbotId, baseUrl, theme = "light", enabledTools = [], setChatbotConversationId, chatbotConversationId, postSessionMessage, Components, UITools, customStyles, isSidebarCollapsed, setIsSidebarCollapsed, selectedConversation, setSelectedConversation, messages, setMessages, input, setInput, inputRef, }, ref) => {
+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([]);
@@ -51,7 +51,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
         },
     };
     const colors = themeColors[theme];
-    const localStorageKey = getConversationLocalStorageKey({
+    const localStorageKey = chatHistoryStorageKey || getConversationLocalStorageKey({
         organizationId,
         chatbotId,
     });
@@ -123,6 +123,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
                         chatbotConversationId: newConversationId,
                         chatbotId,
                         organizationId,
+                        chatHistoryStorageKey,
                     });
                     refetchConversationIds();
                     if (selectedConversation &&
@@ -351,5 +352,5 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
                         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 })) })] }));
+                    }, 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/services/getEmbedChatBotById.d.ts

@@ -0,0 +1,2 @@
+declare const getEmbedChatBotById: (baseUrl: string, organizationId: number, chatbotId: number) => Promise<import("axios").AxiosResponse<any, any>>;
+export default getEmbedChatBotById;

package/dist/services/getEmbedChatBotById.js

@@ -0,0 +1,6 @@
+import axios from "axios";
+const getEmbedChatBotById = (baseUrl, organizationId, chatbotId) => {
+    const endpoint = `${baseUrl}/organizations/${organizationId}/chatbots/${chatbotId}/embed`;
+    return axios.get(endpoint);
+};
+export default getEmbedChatBotById;

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.9.0",
+  "version": "1.9.2",
   "main": "dist/index.js",
   "description": "",
   "type": "module",

package/dist/services/getchatBotById.d.ts

@@ -1,2 +0,0 @@
-declare const getChatBotById: (baseUrl: string, organizationId: number, chatbotId: number) => Promise<import("axios").AxiosResponse<any, any>>;
-export default getChatBotById;

package/dist/services/getchatBotById.js

@@ -1,6 +0,0 @@
-import axios from "axios";
-const getChatBotById = (baseUrl, organizationId, chatbotId) => {
-    const endpoint = `${baseUrl}/organizations/${organizationId}/chatbots/${chatbotId}`;
-    return axios.get(endpoint);
-};
-export default getChatBotById;