@cmnd-ai/chatbot-react 1.10.0 → 1.14.0

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

@@ -0,0 +1,432 @@
+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";
+import { useSocket } from "./use-socket.js";
+import { SOCKET_MESSAGE_TYPES } from "../constants/socketEvents.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 handleSocketMessage = useCallback((notification) => {
+        if (notification.type === SOCKET_MESSAGE_TYPES.NEW_HUMAN_INBOX_MESSAGE &&
+            notification.chatbotConversationRef === chatbotConversationRef) {
+            setMessages((prev) => {
+                if (prev.some((m) => m.id === notification.message.id))
+                    return prev;
+                return [...prev, notification.message];
+            });
+        }
+        else if (notification.type === SOCKET_MESSAGE_TYPES.HUMAN_AGENT_JOINED &&
+            notification.chatbotConversationRef === chatbotConversationRef) {
+            // Add a system message to indicate human agent joined
+            const agentName = notification.agentName || "A human agent";
+            const systemMessage = {
+                id: `system-${notification.timestamp}`,
+                role: MessageRole.ASSISTANT,
+                message: `${agentName} has joined the conversation`,
+                unuseful: false,
+                hiddenFromUser: false,
+            };
+            setMessages((prev) => [...prev, systemMessage]);
+        }
+    }, [chatbotConversationRef]);
+    useSocket({
+        baseUrl,
+        chatbotConversationRef,
+        onMessage: handleSocketMessage,
+        enabled: !!baseUrl,
+    });
+    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/hooks/use-socket.d.ts

@@ -0,0 +1,13 @@
+import { Socket } from "socket.io-client";
+interface UseSocketOptions {
+    baseUrl?: string;
+    accessToken?: string | null;
+    chatbotConversationRef?: string;
+    onMessage?: (data: any) => void;
+    enabled?: boolean;
+}
+export declare const useSocket: ({ baseUrl, accessToken, chatbotConversationRef, onMessage, enabled, }: UseSocketOptions) => {
+    socket: Socket<import("@socket.io/component-emitter").DefaultEventsMap, import("@socket.io/component-emitter").DefaultEventsMap> | null;
+    isConnected: boolean;
+};
+export default useSocket;

package/dist/hooks/use-socket.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+import socketService from "../services/socketService.js";
+import { SOCKET_EVENTS } from "../constants/socketEvents.js";
+export const useSocket = ({ baseUrl, accessToken, chatbotConversationRef, onMessage, enabled = true, }) => {
+    const socketRef = useRef(null);
+    useEffect(() => {
+        if (!enabled || !baseUrl)
+            return;
+        const socket = socketService.connect(baseUrl, accessToken, chatbotConversationRef);
+        socketRef.current = socket;
+        const handleMessage = (data) => {
+            if (onMessage)
+                onMessage(data);
+        };
+        socket.on(SOCKET_EVENTS.MESSAGE, handleMessage);
+        return () => {
+            socket.off(SOCKET_EVENTS.MESSAGE, handleMessage);
+        };
+    }, [baseUrl, accessToken, chatbotConversationRef, enabled, onMessage]);
+    return {
+        socket: socketRef.current,
+        isConnected: socketService.isConnected(),
+    };
+};
+export default useSocket;

package/dist/index.d.ts

@@ -1,5 +1,11 @@
+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";
+export { useSocket } from "./hooks/use-socket.js";
+export { default as socketService } from "./services/socketService.js";
+export { SOCKET_EVENTS, SOCKET_MESSAGE_TYPES, SocketEvent, SocketMessageType, } from "./constants/socketEvents.js";

package/dist/index.js

@@ -1,4 +1,12 @@
+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";
+// Socket exports
+export { useSocket } from "./hooks/use-socket.js";
+export { default as socketService } from "./services/socketService.js";
+export { SOCKET_EVENTS, SOCKET_MESSAGE_TYPES, } from "./constants/socketEvents.js";

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

@@ -5,5 +5,5 @@ interface IDeleteChatbotConversationMemory {
     memoryKeyToDelete: string;
     baseUrl: string;
 }
-declare const deleteChatbotConversationMemory: ({ organizationId, chatbotId, chatbotConversationRef, 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/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

@@ -7,5 +7,5 @@ interface IPatchChatbotConversationMemory {
     };
     baseUrl: string;
 }
-declare const patchChatbotConversationMemory: ({ organizationId, chatbotId, chatbotConversationRef, 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/socketService.d.ts

@@ -0,0 +1,10 @@
+import { Socket } from "socket.io-client";
+declare class SocketService {
+    private socket;
+    connect(baseUrl: string, accessToken?: string | null, chatbotConversationRef?: string): Socket;
+    disconnect(): void;
+    getSocket(): Socket | null;
+    isConnected(): boolean;
+}
+export declare const socketService: SocketService;
+export default socketService;

package/dist/services/socketService.js

@@ -0,0 +1,40 @@
+import { io } from "socket.io-client";
+import { SOCKET_EVENTS } from "../constants/socketEvents.js";
+class SocketService {
+    socket = null;
+    connect(baseUrl, accessToken, chatbotConversationRef) {
+        if (this.socket?.connected) {
+            if (chatbotConversationRef) {
+                this.socket.emit(SOCKET_EVENTS.JOIN_CHATBOT_CONVERSATION, {
+                    chatbotConversationRef,
+                });
+            }
+            return this.socket;
+        }
+        this.socket = io(baseUrl, {
+            auth: {
+                accessToken,
+                chatbotConversationRef,
+            },
+            transports: ["websocket", "polling"],
+            reconnection: true,
+            reconnectionAttempts: 5,
+            reconnectionDelay: 1000,
+        });
+        return this.socket;
+    }
+    disconnect() {
+        if (this.socket) {
+            this.socket.disconnect();
+            this.socket = null;
+        }
+    }
+    getSocket() {
+        return this.socket;
+    }
+    isConnected() {
+        return this.socket?.connected ?? false;
+    }
+}
+export const socketService = new SocketService();
+export default socketService;