@cmnd-ai/chatbot-react 1.9.2 → 1.13.0

package/dist/hooks/use-cmnd-chat.js

@@ -0,0 +1,396 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { v4 as uuidv4 } from "uuid";
+import postUserConversation from "../services/postUserConversation.js";
+import getChatBotConversationsList from "../services/getChatBotConversationsList/index.js";
+import getEmbedChatBotById from "../services/getEmbedChatBotById.js";
+import { MessageRole, FunctionType, } from "../type.js";
+import getConversationLocalStorageKey from "../utils/getConversationLocalStorageKey/index.js";
+import saveConversationIdToLocalStorage from "../utils/saveConversationIdToLocalStorage/index.js";
+import getUTCDateTime from "../utils/getUTCDateTime/index.js";
+import parseUITools from "../utils/parseUITools.js";
+import getTools from "../utils/getTools/index.js";
+import { cleanMarkdown } from "../utils/cleanMarkdown.js";
+/**
+ * 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 const useCMNDChat = (options) => {
+    const { chatbotId, organizationId, baseUrl, apiKey, chatHistoryStorageKey, initialMemory, UITools, onData: globalOnData, onToolCall, cleanResponse = false, } = options;
+    const [messages, setMessages] = useState([]);
+    const [input, setInput] = useState("");
+    const [isChatLoading, setIsChatLoading] = useState(false);
+    const [canSendMessage, setCanSendMessage] = useState(true);
+    const [chatbotConversationRef, setChatbotConversationRef] = useState(undefined);
+    const [conversations, setConversations] = useState([]);
+    const [selectedConversation, setSelectedConversation] = useState(null);
+    const [enabledTools, setEnabledTools] = useState([]);
+    const [error, setError] = useState(null);
+    const lastProcessedToolCallId = useRef(null);
+    const localStorageKey = useMemo(() => chatHistoryStorageKey ||
+        getConversationLocalStorageKey({ organizationId, chatbotId }), [chatHistoryStorageKey, organizationId, chatbotId]);
+    const tools = useMemo(() => getTools({
+        apiTools: enabledTools,
+        uiTools: parseUITools(UITools),
+    }), [enabledTools, UITools]);
+    // Fetch Chatbot Info for enabled tools
+    useEffect(() => {
+        if (!baseUrl || !organizationId || !chatbotId)
+            return;
+        getEmbedChatBotById(baseUrl, organizationId, chatbotId)
+            .then((response) => {
+            const { chatbot } = response.data;
+            setEnabledTools(chatbot.enabledTools || []);
+        })
+            .catch((err) => {
+            console.error("Error fetching chatbot tools:", err);
+        });
+    }, [baseUrl, organizationId, chatbotId]);
+    const refreshConversations = useCallback(async () => {
+        try {
+            const storedIds = JSON.parse(localStorage.getItem(localStorageKey) || "[]");
+            if (storedIds.length > 0) {
+                const response = await getChatBotConversationsList({
+                    organizationId,
+                    chatbotId,
+                    conversationIds: storedIds,
+                    baseUrl,
+                });
+                setConversations(response.chatbotConversations || []);
+            }
+            else {
+                setConversations([]);
+            }
+        }
+        catch (err) {
+            console.error("Error fetching conversations:", err);
+        }
+    }, [baseUrl, chatbotId, localStorageKey, organizationId]);
+    useEffect(() => {
+        refreshConversations();
+    }, [refreshConversations]);
+    const handleStreamData = useCallback(async (data, currentMessages, onDataCallback) => {
+        if (onDataCallback)
+            onDataCallback(data);
+        if (globalOnData)
+            globalOnData(data);
+        // Handle streaming assistant message
+        if (data.message && !data.finalResponseWithUsageData) {
+            // Clear loading state when assistant starts responding
+            setIsChatLoading(false);
+            setCanSendMessage(true);
+            const assistantMessage = {
+                role: MessageRole.ASSISTANT,
+                message: data.message,
+                id: "streaming-assistant-message",
+                unuseful: false,
+                hiddenFromUser: false,
+            };
+            setMessages([...currentMessages, assistantMessage]);
+        }
+        if (data.finalResponseWithUsageData) {
+            const { messages: updatedMessages, message, hasError } = data;
+            const newConversationId = data.chatbotConversationRef || data.conversationRef;
+            if (hasError) {
+                setError(message || "Oops! I ran into a problem.");
+            }
+            if (newConversationId) {
+                setChatbotConversationRef(newConversationId);
+                await saveConversationIdToLocalStorage({
+                    chatbotConversationRef: newConversationId,
+                    chatbotId,
+                    organizationId,
+                    chatHistoryStorageKey,
+                });
+                refreshConversations();
+            }
+            if (updatedMessages) {
+                setMessages(updatedMessages);
+            }
+            else if (message) {
+                // If we have a standalone message in the final response (e.g. an error)
+                const assistantMessage = {
+                    role: MessageRole.ASSISTANT,
+                    message: message,
+                    id: uuidv4(),
+                    unuseful: false,
+                    hiddenFromUser: false,
+                };
+                setMessages([...currentMessages, assistantMessage]);
+            }
+            // Ensure loading state is cleared (in case no streaming message came)
+            setIsChatLoading(false);
+            setCanSendMessage(true);
+        }
+    }, [
+        globalOnData,
+        refreshConversations,
+        chatbotId,
+        organizationId,
+        chatHistoryStorageKey,
+    ]);
+    const sendMessage = useCallback(async (text, onData) => {
+        const messageToSend = text !== undefined ? text : input;
+        if (!messageToSend.trim() || !canSendMessage)
+            return;
+        const userMessage = {
+            role: MessageRole.USER,
+            message: messageToSend,
+            id: uuidv4(),
+            unuseful: false,
+            hiddenFromUser: false,
+        };
+        const newMessages = [...messages, userMessage];
+        setMessages(newMessages);
+        if (text === undefined)
+            setInput("");
+        setIsChatLoading(true);
+        setCanSendMessage(false);
+        setError(null);
+        const payload = {
+            messages: newMessages,
+            uiTools: parseUITools(UITools),
+        };
+        if (chatbotConversationRef) {
+            payload["chatbotConversationRef"] = chatbotConversationRef;
+        }
+        else if (initialMemory) {
+            payload["initialMemory"] = initialMemory;
+        }
+        try {
+            await postUserConversation({
+                payload,
+                apikey: apiKey,
+                chatbotId,
+                baseUrl,
+                onData: (data) => handleStreamData(data, newMessages, onData),
+            });
+        }
+        catch (err) {
+            console.error("Error sending message:", err);
+            setError(err.message || "Failed to send message");
+            setIsChatLoading(false);
+            setCanSendMessage(true);
+        }
+    }, [
+        input,
+        canSendMessage,
+        messages,
+        UITools,
+        chatbotConversationRef,
+        initialMemory,
+        chatbotId,
+        baseUrl,
+        apiKey,
+        handleStreamData,
+    ]);
+    // Confirm a backend tool (sets confirmed: true, server will add output)
+    const confirmBackendTool = useCallback(async () => {
+        const lastMessage = messages[messages.length - 1];
+        if (!lastMessage || lastMessage.role !== MessageRole.FUNCTION) {
+            return;
+        }
+        const updatedLastMessage = {
+            ...lastMessage,
+            tool: {
+                ...lastMessage.tool,
+                confirmed: true,
+            },
+        };
+        const newMessages = [...messages.slice(0, -1), updatedLastMessage];
+        setMessages(newMessages);
+        // Keep loading state true while backend tool executes
+        setIsChatLoading(true);
+        setCanSendMessage(false);
+        const payload = {
+            messages: newMessages,
+            uiTools: parseUITools(UITools),
+            chatbotConversationRef,
+        };
+        try {
+            await postUserConversation({
+                payload,
+                apikey: apiKey,
+                chatbotId,
+                baseUrl,
+                onData: (data) => handleStreamData(data, newMessages),
+            });
+        }
+        catch (err) {
+            console.error("Error confirming backend tool:", err);
+            setError(err.message || "Failed to confirm backend tool");
+            setIsChatLoading(false);
+            setCanSendMessage(true);
+        }
+    }, [
+        messages,
+        UITools,
+        chatbotConversationRef,
+        apiKey,
+        chatbotId,
+        baseUrl,
+        handleStreamData,
+    ]);
+    const submitToolResult = useCallback(async (toolOutput, onData) => {
+        const lastMessage = messages[messages.length - 1];
+        if (!lastMessage || lastMessage.role !== MessageRole.FUNCTION) {
+            console.error("Last message is not a function call");
+            return;
+        }
+        const updatedLastMessage = {
+            ...lastMessage,
+            tool: {
+                ...lastMessage.tool,
+                output: toolOutput,
+                confirmed: true,
+                runAt: new Date().toISOString(),
+            },
+        };
+        const newMessages = [...messages.slice(0, -1), updatedLastMessage];
+        setMessages(newMessages);
+        setIsChatLoading(true);
+        setCanSendMessage(false);
+        const payload = {
+            messages: newMessages,
+            uiTools: parseUITools(UITools),
+            chatbotConversationRef,
+        };
+        try {
+            await postUserConversation({
+                payload,
+                apikey: apiKey,
+                chatbotId,
+                baseUrl,
+                onData: (data) => handleStreamData(data, newMessages, onData),
+            });
+        }
+        catch (err) {
+            console.error("Error submitting tool result:", err);
+            setError(err.message || "Failed to submit tool result");
+            setIsChatLoading(false);
+            setCanSendMessage(true);
+        }
+    }, [
+        messages,
+        UITools,
+        chatbotConversationRef,
+        apiKey,
+        chatbotId,
+        baseUrl,
+        handleStreamData,
+    ]);
+    // Handle tool call detection and auto-confirmation
+    useEffect(() => {
+        const lastMessage = messages[messages.length - 1];
+        if (lastMessage &&
+            lastMessage.role === MessageRole.FUNCTION &&
+            lastMessage.id !== lastProcessedToolCallId.current) {
+            const toolDetails = lastMessage.tool;
+            const toolDef = tools.find((t) => t.name === toolDetails.name);
+            // Notify consumer about the tool call
+            if (onToolCall)
+                onToolCall(toolDetails);
+            // Auto-confirm backend tools so the server can execute them
+            if (toolDef?.functionType === FunctionType.BACKEND &&
+                !toolDetails.confirmed) {
+                lastProcessedToolCallId.current = lastMessage.id;
+                confirmBackendTool();
+            }
+        }
+    }, [messages, tools, onToolCall, confirmBackendTool]);
+    const handleNewChat = useCallback(() => {
+        setSelectedConversation(null);
+        setChatbotConversationRef(undefined);
+        setMessages([]);
+        setInput("");
+        const dateString = getUTCDateTime();
+        const newConversation = {
+            chatbotConversationRef: uuidv4(),
+            messages: [],
+            chatbotId: chatbotId,
+            chatbotConversationTitle: "New Conversation",
+            createdAt: dateString,
+            updatedAt: dateString,
+            totalCostSoFar: 0,
+            totalTokensSoFar: 0,
+        };
+        setSelectedConversation(newConversation);
+    }, [chatbotId]);
+    const handleConversationSelect = useCallback((conversation) => {
+        setSelectedConversation(conversation);
+        setChatbotConversationRef(conversation.chatbotConversationRef);
+        setMessages(conversation.messages.map((m) => ({
+            ...m,
+            id: m.id || uuidv4(),
+        })));
+    }, []);
+    const handleDeleteConversation = useCallback(async (conversationId) => {
+        try {
+            const storedIds = JSON.parse(localStorage.getItem(localStorageKey) || "[]");
+            const updatedIds = storedIds.filter((id) => id !== conversationId);
+            localStorage.setItem(localStorageKey, JSON.stringify(updatedIds));
+            if (selectedConversation?.chatbotConversationRef === conversationId) {
+                handleNewChat();
+            }
+            refreshConversations();
+        }
+        catch (err) {
+            console.error("Error deleting conversation:", err);
+        }
+    }, [localStorageKey, selectedConversation, handleNewChat, refreshConversations]);
+    const visibleMessages = useMemo(() => {
+        return messages
+            .filter((msg) => !msg.hiddenFromUser && msg.role !== MessageRole.FUNCTION)
+            .map((msg) => {
+            if (cleanResponse &&
+                msg.role === MessageRole.ASSISTANT &&
+                msg.message) {
+                return {
+                    ...msg,
+                    message: cleanMarkdown(msg.message),
+                };
+            }
+            return msg;
+        });
+    }, [messages, cleanResponse]);
+    return {
+        messages: visibleMessages,
+        setMessages,
+        input,
+        setInput,
+        isChatLoading,
+        canSendMessage,
+        sendMessage,
+        submitToolResult,
+        chatbotConversationRef,
+        conversations,
+        selectedConversation,
+        handleNewChat,
+        handleConversationSelect,
+        handleDeleteConversation,
+        refreshConversations,
+        tools,
+        error,
+    };
+};

package/dist/index.d.ts

@@ -1,5 +1,8 @@
+export { default as CmndChatBot } from "./CmndChatBot/index.js";
 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 { default as Conversation } from "./components/Conversation.js";
+export { CmndChatContext, InputFieldProps, SendButtonProps, CustomStyles, CMNDChatMemory, ChatbotConversation, ChatbotConversationsResponse, Message, MessageRole, ConversationDataObject, ToolDetails, FunctionType, CMNDChatbotUITool, ChatbotConversationMessage, } from "./type.js";
 export { setCurrentConversationMemory, deleteCurrentConversationMemory, } from "./ChatProvider/index.js";
 export { useCMNDChatContext } from "./ChatProvider/useChatContext.js";
+export { useCMNDChat, UseCMNDChatOptions, UseCMNDChatResult, } from "./hooks/use-cmnd-chat.js";

package/dist/index.js

@@ -1,4 +1,8 @@
+export { default as CmndChatBot } from "./CmndChatBot/index.js";
 export { default as ChatProvider } from "./ChatProvider/index.js";
 export { ConversationsPanel } from "./components/ConversationsPanel/index.js";
+export { default as Conversation } from "./components/Conversation.js";
+export { MessageRole, FunctionType, } from "./type.js";
 export { setCurrentConversationMemory, deleteCurrentConversationMemory, } from "./ChatProvider/index.js";
 export { useCMNDChatContext } from "./ChatProvider/useChatContext.js";
+export { useCMNDChat, } from "./hooks/use-cmnd-chat.js";

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

@@ -1,9 +1,9 @@
 interface IDeleteChatbotConversationMemory {
     organizationId: number;
     chatbotId: number;
-    chatbotConversationId: number;
+    chatbotConversationRef: string;
     memoryKeyToDelete: string;
     baseUrl: string;
 }
-declare const deleteChatbotConversationMemory: ({ organizationId, chatbotId, chatbotConversationId, memoryKeyToDelete, baseUrl, }: IDeleteChatbotConversationMemory) => Promise<import("axios").AxiosResponse<any, any>>;
+declare const deleteChatbotConversationMemory: ({ organizationId, chatbotId, chatbotConversationRef, memoryKeyToDelete, baseUrl, }: IDeleteChatbotConversationMemory) => Promise<import("axios").AxiosResponse<any, any, {}>>;
 export default deleteChatbotConversationMemory;

package/dist/services/deleteChatbotConversationMemory/index.js

@@ -1,7 +1,7 @@
 import { chatbot } from "../../constants/endpoints.js";
 import axios from "axios";
-const deleteChatbotConversationMemory = ({ organizationId, chatbotId, chatbotConversationId, memoryKeyToDelete, baseUrl, }) => {
-    const endpoint = chatbot.deleteChatbotConversationMemory(organizationId, chatbotId, chatbotConversationId, memoryKeyToDelete);
+const deleteChatbotConversationMemory = ({ organizationId, chatbotId, chatbotConversationRef, memoryKeyToDelete, baseUrl, }) => {
+    const endpoint = chatbot.deleteChatbotConversationMemory(organizationId, chatbotId, chatbotConversationRef, memoryKeyToDelete);
     return axios.delete(`${baseUrl}${endpoint}`);
 };
 export default deleteChatbotConversationMemory;

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

@@ -1,7 +1,7 @@
 declare const getChatBotConversationsList: ({ organizationId, chatbotId, conversationIds, baseUrl, }: {
     organizationId: number;
     chatbotId: number;
-    conversationIds: number[];
+    conversationIds: string[];
     baseUrl: string;
 }) => Promise<any>;
 export default getChatBotConversationsList;

package/dist/services/getEmbedChatBotById.d.ts

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

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

@@ -1,11 +1,11 @@
 interface IPatchChatbotConversationMemory {
     organizationId: number;
     chatbotId: number;
-    chatbotConversationId: number;
+    chatbotConversationRef: string;
     memory: {
         [key: string]: any;
     };
     baseUrl: string;
 }
-declare const patchChatbotConversationMemory: ({ organizationId, chatbotId, chatbotConversationId, memory, baseUrl, }: IPatchChatbotConversationMemory) => Promise<import("axios").AxiosResponse<any, any>>;
+declare const patchChatbotConversationMemory: ({ organizationId, chatbotId, chatbotConversationRef, memory, baseUrl, }: IPatchChatbotConversationMemory) => Promise<import("axios").AxiosResponse<any, any, {}>>;
 export default patchChatbotConversationMemory;

package/dist/services/patchChatbotConversationMemory/index.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 import { chatbot } from "../../constants/endpoints.js";
-const patchChatbotConversationMemory = ({ organizationId, chatbotId, chatbotConversationId, memory, baseUrl, }) => {
-    const endpoint = chatbot.patchChatbotConversationMemory(organizationId, chatbotId, chatbotConversationId);
+const patchChatbotConversationMemory = ({ organizationId, chatbotId, chatbotConversationRef, memory, baseUrl, }) => {
+    const endpoint = chatbot.patchChatbotConversationMemory(organizationId, chatbotId, chatbotConversationRef);
     return axios.patch(`${baseUrl}${endpoint}`, {
         memory,
     });