@cmnd-ai/chatbot-react 1.9.2 → 1.13.0

package/dist/components/ConversationsPanel/index.js

@@ -10,11 +10,11 @@ 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, chatHistoryStorageKey, theme = "light", enabledTools = [], setChatbotConversationId, chatbotConversationId, postSessionMessage, Components, UITools, customStyles, isSidebarCollapsed, setIsSidebarCollapsed, selectedConversation, setSelectedConversation, messages, setMessages, input, setInput, inputRef, }, ref) => {
+import { v4 as uuidv4 } from "uuid";
+export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseUrl, chatHistoryStorageKey, theme = "light", enabledTools = [], setChatbotConversationRef, chatbotConversationRef, 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"
@@ -51,10 +51,11 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
         },
     };
     const colors = themeColors[theme];
-    const localStorageKey = chatHistoryStorageKey || getConversationLocalStorageKey({
-        organizationId,
-        chatbotId,
-    });
+    const localStorageKey = chatHistoryStorageKey ||
+        getConversationLocalStorageKey({
+            organizationId,
+            chatbotId,
+        });
     useEffect(() => {
         try {
             const conversationsFromLocalStorage = JSON.parse(localStorage.getItem(localStorageKey) || "[]") ?? [];
@@ -75,7 +76,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
             setConversationIds([]);
         }
     };
-    const { data, loading, error, refetch } = useFetchData(async () => {
+    const { data, loading, error } = useFetchData(async () => {
         // Only fetch if we have conversation IDs
         if (conversationIds.length === 0) {
             return { chatbotConversations: [] };
@@ -116,11 +117,11 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
             if (data.finalResponseWithUsageData) {
                 setIsChatLoading(false);
                 setCanSendMessage(true);
-                const { chatbotConversationId: newConversationId, messages: updatedMessages, } = data;
+                const { chatbotConversationRef: newConversationId, messages: updatedMessages, } = data;
                 if (newConversationId) {
-                    setChatbotConversationId(newConversationId);
+                    setChatbotConversationRef(newConversationId);
                     await saveConversationIdToLocalStorage({
-                        chatbotConversationId: newConversationId,
+                        chatbotConversationRef: newConversationId,
                         chatbotId,
                         organizationId,
                         chatHistoryStorageKey,
@@ -131,7 +132,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
                             "New Conversation") {
                         setSelectedConversation({
                             ...selectedConversation,
-                            chatbotConversationId: newConversationId,
+                            chatbotConversationRef: newConversationId,
                             chatbotConversationTitle: input.substring(0, 50) + (input.length > 50 ? "..." : ""),
                             messages: updatedMessages || newMessages,
                         });
@@ -162,7 +163,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
     };
     const handleConversationSelect = (conversation) => {
         setSelectedConversation(conversation);
-        setChatbotConversationId(conversation.chatbotConversationId);
+        setChatbotConversationRef(conversation.chatbotConversationRef);
         const formattedMessages = conversation.messages.map((msg) => ({
             ...msg,
             id: msg.id || Date.now().toString(),
@@ -171,12 +172,12 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
     };
     const handleNewChat = () => {
         setSelectedConversation(null);
-        setChatbotConversationId(undefined);
+        setChatbotConversationRef(undefined);
         setMessages([]);
         setInput("");
         const dateString = getUTCDateTime();
         const newConversation = {
-            chatbotConversationId: Date.now(),
+            chatbotConversationRef: uuidv4(),
             messages: [],
             chatbotId: chatbotId,
             chatbotConversationTitle: "New Conversation",
@@ -192,10 +193,10 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
             const currentConversations = JSON.parse(localStorage.getItem(localStorageKey) || "[]") ?? [];
             const updatedConversations = currentConversations.filter((id) => id !== conversationId);
             localStorage.setItem(localStorageKey, JSON.stringify(updatedConversations));
-            if (selectedConversation?.chatbotConversationId === conversationId) {
+            if (selectedConversation?.chatbotConversationRef === conversationId) {
                 setSelectedConversation(null);
                 setMessages([]);
-                setChatbotConversationId(undefined);
+                setChatbotConversationRef(undefined);
             }
             refetchConversationIds();
         }
@@ -207,6 +208,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
         console.log("Set conversation memory:", memory);
     };
     const allConversations = React.useMemo(() => {
+        console.log("data", data?.chatbotConversations);
         const existingConversations = data?.chatbotConversations || [];
         const newConversation = selectedConversation &&
             selectedConversation.chatbotConversationTitle === "New Conversation"
@@ -217,8 +219,8 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
             conversations.push(newConversation);
         }
         return conversations.sort((a, b) => {
-            const dateA = new Date(a.updatedAt);
-            const dateB = new Date(b.updatedAt);
+            const dateA = new Date(a.updatedAt ?? a.createdAt);
+            const dateB = new Date(b.updatedAt ?? b.createdAt);
             return dateB.getTime() - dateA.getTime();
         });
     }, [data?.chatbotConversations, selectedConversation]);
@@ -316,8 +318,8 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
                                 textAlign: "center",
                                 padding: "20px",
                                 color: colors.secondaryText,
-                            }, children: "No conversations yet" })) : (allConversations.map((conversation) => (_jsx(ConversationCard, { conversation: conversation, isActive: selectedConversation?.chatbotConversationId ===
-                                conversation.chatbotConversationId, onClick: () => {
+                            }, children: "No conversations yet" })) : (allConversations.map((conversation) => (_jsx(ConversationCard, { conversation: conversation, isActive: selectedConversation?.chatbotConversationRef ===
+                                conversation.chatbotConversationRef, onClick: () => {
                                 if (conversation.chatbotConversationTitle ===
                                     "New Conversation") {
                                 }
@@ -331,7 +333,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
                                     setMessages([]);
                                 }
                                 else {
-                                    handleDeleteConversation(conversation.chatbotConversationId);
+                                    handleDeleteConversation(conversation.chatbotConversationRef);
                                 }
                             }, theme: theme, customStyles: {
                                 conversationCardStyle: customStyles?.conversationCardStyle,
@@ -339,7 +341,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
                                 titleStyle: customStyles?.titleStyle,
                                 dateStyle: customStyles?.dateStyle,
                                 deleteButtonStyle: customStyles?.deleteButtonStyle,
-                            } }, conversation.chatbotConversationId)))) })] }), _jsx("div", { className: "cmnd-chat-area", style: {
+                            } }, conversation.chatbotConversationRef)))) })] }), _jsx("div", { className: "cmnd-chat-area", style: {
                     flex: 1,
                     display: "flex",
                     flexDirection: "column",
@@ -352,5 +354,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, chatHistoryStorageKey: chatHistoryStorageKey, 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, setChatbotConversationRef: setChatbotConversationRef, chatbotConversationRef: chatbotConversationRef, 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/components/LoadingBubble.js

@@ -8,6 +8,6 @@ const LoadingBubble = ({ customStyles, chatbotId, organizationId, theme, Compone
                 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: () => { } }));
+    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: () => { }, setChatbotConversationRef: () => { }, setCanSendMessage: () => { }, setIsChatLoading: () => { } }));
 };
 export default LoadingBubble;

package/dist/constants/endpoints.d.ts

@@ -1,10 +1,10 @@
 declare const chatbot: {
-    patchChatbotConversationMemory: (organizationId: number, chatbotId: number, chatbotConversationId: number) => string;
-    deleteChatbotConversationMemory: (organizationId: number, chatbotId: number, chatbotConversationId: number, memoryKeyToDelete: string) => string;
+    patchChatbotConversationMemory: (organizationId: number, chatbotId: number, chatbotConversationRef: string) => string;
+    deleteChatbotConversationMemory: (organizationId: number, chatbotId: number, chatbotConversationRef: string, memoryKeyToDelete: string) => string;
     getChatBotConversationsList: ({ organizationId, chatbotId, conversationIds, }: {
         organizationId: number;
         chatbotId: number;
-        conversationIds: number[];
+        conversationIds: string[];
     }) => string;
 };
 export { chatbot };

package/dist/constants/endpoints.js

@@ -1,6 +1,6 @@
 const chatbot = {
-    patchChatbotConversationMemory: (organizationId, chatbotId, chatbotConversationId) => `/organizations/${organizationId}/chatbots/${chatbotId}/conversations/${chatbotConversationId}/memory`,
-    deleteChatbotConversationMemory: (organizationId, chatbotId, chatbotConversationId, memoryKeyToDelete) => `/organizations/${organizationId}/chatbots/${chatbotId}/conversations/${chatbotConversationId}/memory/${memoryKeyToDelete}`,
+    patchChatbotConversationMemory: (organizationId, chatbotId, chatbotConversationRef) => `/organizations/${organizationId}/chatbots/${chatbotId}/conversations/${chatbotConversationRef}/memory`,
+    deleteChatbotConversationMemory: (organizationId, chatbotId, chatbotConversationRef, memoryKeyToDelete) => `/organizations/${organizationId}/chatbots/${chatbotId}/conversations/${chatbotConversationRef}/memory/${memoryKeyToDelete}`,
     getChatBotConversationsList: ({ organizationId, chatbotId, conversationIds, }) => {
         const ids = Array.isArray(conversationIds)
             ? conversationIds.join(",")

package/dist/hooks/use-cmnd-chat.d.ts

@@ -0,0 +1,130 @@
+/// <reference types="react" />
+import { ChatbotConversation, Message, CMNDChatMemory, CMNDChatbotUITool, ConversationDataObject, ToolDetails } from "../type.js";
+/**
+ * Options for configuring the useCMNDChat hook.
+ */
+export interface UseCMNDChatOptions {
+    /** The unique identifier for the chatbot. */
+    chatbotId: number;
+    /** The unique identifier for the organization. */
+    organizationId: number;
+    /** The base URL for the CMND API. */
+    baseUrl: string;
+    /** Optional API key for authentication. If provided, it will be sent in the 'x-api-key' header. */
+    apiKey?: string;
+    /** Optional key used for local message persistence. Defaults to a combined string of orgId and chatbotId. */
+    chatHistoryStorageKey?: string;
+    /** Initial memory/context to send when starting a new conversation. */
+    initialMemory?: CMNDChatMemory;
+    /** Array of custom UI tools that the AI can call. */
+    UITools?: CMNDChatbotUITool[];
+    /** Callback triggered whenever new data (chunks or finalized messages) is received from the stream. */
+    onData?: (data: ConversationDataObject) => void;
+    /**
+     * Callback triggered whenever the AI initiates a tool call.
+     *
+     * For **backend tools**: The hook automatically confirms them, which triggers your backend server
+     * to execute the tool and return the output. Use this callback for logging or UI updates.
+     *
+     * For **UI tools**: You must execute the tool in your frontend, then call submitToolResult with the output.
+     *
+     * @example
+     * ```tsx
+     * onToolCall: async (toolDetails) => {
+     *   if (toolDetails.name === 'show_ui_component') {
+     *     // UI tool - execute in frontend
+     *     displayComponent(toolDetails.args);
+     *     submitToolResult('Component displayed');
+     *   }
+     *   // Backend tools are handled automatically by the server
+     * }
+     * ```
+     */
+    onToolCall?: (toolCall: ToolDetails) => void;
+    /**
+     * Whether to clean the AI response by removing markdown characters.
+     * If true, assistant messages will be returned as plaintext.
+     * @default false
+     */
+    cleanResponse?: boolean;
+}
+/**
+ * The object returned by the useCMNDChat hook.
+ */
+export interface UseCMNDChatResult {
+    /** The list of messages in the current active conversation thread. */
+    messages: Message[];
+    /** A setter function for the messages list. */
+    setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
+    /** The current text value of the chat input field. */
+    input: string;
+    /** A setter function for the chat input field. */
+    setInput: React.Dispatch<React.SetStateAction<string>>;
+    /** Indicates if a message is currently being processed or streamed. */
+    isChatLoading: boolean;
+    /** Indicates if the user is allowed to send a message (e.g., not loading, not empty). */
+    canSendMessage: boolean;
+    /**
+     * Sends a message to the chatbot.
+     * @param text Optional text to send. If not provided, it uses the current 'input' state.
+     * @param onData Optional callback for this specific message stream.
+     */
+    sendMessage: (text?: string, onData?: (data: ConversationDataObject) => void) => Promise<void>;
+    /**
+     * Submits the result of a tool call back to the AI.
+     * @param toolOutput The string result of the tool execution.
+     * @param onData Optional callback for the resulting message stream.
+     */
+    submitToolResult: (toolOutput: string, onData?: (data: ConversationDataObject) => void) => Promise<void>;
+    /** The reference ID for the current active conversation. */
+    chatbotConversationRef: string | undefined;
+    /** A list of all historical conversations for the current chatbot/org. */
+    conversations: ChatbotConversation[];
+    /** The currently selected conversation object from history. */
+    selectedConversation: ChatbotConversation | null;
+    /** Resets the chat state and prepares for a new conversation thread. */
+    handleNewChat: () => void;
+    /**
+     * Switches to an existing conversation from history.
+     * @param conversation The conversation object to load.
+     */
+    handleConversationSelect: (conversation: ChatbotConversation) => void;
+    /**
+     * Deletes a conversation from history and local storage.
+     * @param conversationId The ID of the conversation to delete.
+     */
+    handleDeleteConversation: (conversationId: string) => Promise<void>;
+    /** Re-fetches the list of historical conversations. */
+    refreshConversations: () => Promise<void>;
+    /** Combined list of backend tools (from API) and UI tools (provided in options). */
+    tools: any[];
+    /** Holds any error message encountered during API calls. */
+    error: string | null;
+}
+/**
+ * A comprehensive hook to manage CMND.AI chatbot logic without being forced to use the default UI.
+ * This hook handles conversation state, message sending (including streaming), history management, and tool call orchestration.
+ *
+ * @example
+ * ```tsx
+ * const { messages, sendMessage, input, setInput, submitToolResult } = useCMNDChat({
+ *   chatbotId: 1,
+ *   organizationId: 1,
+ *   baseUrl: 'https://api.cmnd.ai',
+ *   cleanResponse: true, // Optional: Returns assistant messages as plaintext
+ *   onToolCall: async (toolDetails) => {
+ *     // Backend tools are auto-confirmed by the hook
+ *     if (toolDetails.name === 'get_playlists') {
+ *       console.log('Fetching playlists from backend...');
+ *     }
+ *
+ *     // UI tools need manual execution and confirmation
+ *     if (toolDetails.name === 'show_notification') {
+ *       showNotification(toolDetails.args.message);
+ *       submitToolResult('Notification displayed');
+ *     }
+ *   }
+ * });
+ * ```
+ */
+export declare const useCMNDChat: (options: UseCMNDChatOptions) => UseCMNDChatResult;