@cmnd-ai/chatbot-react 1.13.0 → 1.14.0

package/dist/ChatProvider/index.js

@@ -7,6 +7,8 @@ import deleteChatbotConversationMemory from "../services/deleteChatbotConversati
 import parseUITools from "../utils/parseUITools.js";
 import getTools from "../utils/getTools/index.js";
 import { ConversationsPanel, } from "../components/ConversationsPanel/index.js";
+import socketService from "../services/socketService.js";
+import { SOCKET_EVENTS } from "../constants/socketEvents.js";
 let globalChatbotConversationRef;
 let globalChatbotProps;
 export const ChatProviderContext = React.createContext(undefined);
@@ -64,7 +66,26 @@ function ChatProvider(props) {
     const conversationsPanelRef = useRef(null);
     useEffect(() => {
         globalChatbotConversationRef = chatbotConversationRef;
+        if (chatbotConversationRef && socketService.isConnected()) {
+            socketService.getSocket()?.emit(SOCKET_EVENTS.JOIN_CHATBOT_CONVERSATION, {
+                chatbotConversationRef,
+            });
+        }
     }, [chatbotConversationRef]);
+    const [isConnected, setIsConnected] = useState(false);
+    useEffect(() => {
+        const socket = socketService.connect(baseUrl);
+        const handleConnect = () => setIsConnected(true);
+        const handleDisconnect = () => setIsConnected(false);
+        socket.on(SOCKET_EVENTS.CONNECT, handleConnect);
+        socket.on(SOCKET_EVENTS.DISCONNECT, handleDisconnect);
+        setIsConnected(socket.connected);
+        return () => {
+            socket.off(SOCKET_EVENTS.CONNECT, handleConnect);
+            socket.off(SOCKET_EVENTS.DISCONNECT, handleDisconnect);
+            socketService.disconnect();
+        };
+    }, [baseUrl]);
     useEffect(() => {
         setLoading(true);
         getEmbedChatBotById(baseUrl, organizationId, chatbotId)
@@ -171,6 +192,8 @@ function ChatProvider(props) {
             closeSidePanel,
             setMessageText,
             sendMessage,
+            socket: socketService.getSocket(),
+            isConnected,
         }, 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),

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, forwardRef, useImperativeHandle, } from "react";
+import React, { useState, useEffect, forwardRef, useImperativeHandle, useCallback, } from "react";
 import useFetchData from "../../hooks/use-fetch-data.js";
 import getChatBotConversationsList from "../../services/getChatBotConversationsList/index.js";
 import Conversation from "../Conversation.js";
@@ -11,6 +11,8 @@ import saveConversationIdToLocalStorage from "../../utils/saveConversationIdToLo
 import getUTCDateTime from "../../utils/getUTCDateTime/index.js";
 import useMessagesScroll from "../../hooks/use-messages-scroll.js";
 import { v4 as uuidv4 } from "uuid";
+import { useSocket } from "../../hooks/use-socket.js";
+import { SOCKET_MESSAGE_TYPES } from "../../constants/socketEvents.js";
 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);
@@ -98,6 +100,41 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
             return { chatbotConversations: [] };
         }
     }, [organizationId, chatbotId, conversationIds, baseUrl]);
+    // Socket message handler
+    const handleSocketMessage = useCallback((notification) => {
+        console.log("chatbot notification", 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];
+            });
+            resetMessagesScroll();
+        }
+        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: "assistant",
+                message: `${agentName} has joined the conversation`,
+                unuseful: false,
+                hiddenFromUser: false,
+            };
+            setMessages((prev) => [...prev, systemMessage]);
+            resetMessagesScroll();
+        }
+    }, [chatbotConversationRef, resetMessagesScroll]);
+    // Socket connection
+    useSocket({
+        baseUrl,
+        accessToken: null,
+        chatbotConversationRef,
+        onMessage: handleSocketMessage,
+        enabled: Boolean(chatbotConversationRef),
+    });
     const handleSendClick = () => {
         if (!input.trim() || !canSendMessage)
             return;

package/dist/constants/socketEvents.d.ts

@@ -0,0 +1,14 @@
+export declare const SOCKET_EVENTS: {
+    readonly MESSAGE: "message";
+    readonly CONNECT: "connect";
+    readonly DISCONNECT: "disconnect";
+    readonly ERROR: "error";
+    readonly JOIN_CHATBOT_CONVERSATION: "join_chatbot_conversation";
+};
+export declare const SOCKET_MESSAGE_TYPES: {
+    readonly NEW_HUMAN_INBOX_MESSAGE: "NEW_HUMAN_INBOX_MESSAGE";
+    readonly HUMAN_AGENT_JOINED: "HUMAN_AGENT_JOINED";
+    readonly HANDOVER_REQUEST: "HANDOVER_REQUEST";
+};
+export type SocketEvent = (typeof SOCKET_EVENTS)[keyof typeof SOCKET_EVENTS];
+export type SocketMessageType = (typeof SOCKET_MESSAGE_TYPES)[keyof typeof SOCKET_MESSAGE_TYPES];

package/dist/constants/socketEvents.js

@@ -0,0 +1,12 @@
+export const SOCKET_EVENTS = {
+    MESSAGE: "message",
+    CONNECT: "connect",
+    DISCONNECT: "disconnect",
+    ERROR: "error",
+    JOIN_CHATBOT_CONVERSATION: "join_chatbot_conversation",
+};
+export const SOCKET_MESSAGE_TYPES = {
+    NEW_HUMAN_INBOX_MESSAGE: "NEW_HUMAN_INBOX_MESSAGE",
+    HUMAN_AGENT_JOINED: "HUMAN_AGENT_JOINED",
+    HANDOVER_REQUEST: "HANDOVER_REQUEST",
+};

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

@@ -10,6 +10,8 @@ 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.
@@ -90,6 +92,35 @@ export const useCMNDChat = (options) => {
     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);
@@ -358,7 +389,12 @@ export const useCMNDChat = (options) => {
         catch (err) {
             console.error("Error deleting conversation:", err);
         }
-    }, [localStorageKey, selectedConversation, handleNewChat, refreshConversations]);
+    }, [
+        localStorageKey,
+        selectedConversation,
+        handleNewChat,
+        refreshConversations,
+    ]);
     const visibleMessages = useMemo(() => {
         return messages
             .filter((msg) => !msg.hiddenFromUser && msg.role !== MessageRole.FUNCTION)

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

@@ -6,3 +6,6 @@ export { CmndChatContext, InputFieldProps, SendButtonProps, CustomStyles, CMNDCh
 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

@@ -6,3 +6,7 @@ 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/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;

package/dist/type.d.ts

@@ -19,6 +19,10 @@ export interface CmndChatContext {
     setMessageText: (text: string) => void;
     /** Send the current message, or set and send if text is provided. */
     sendMessage: (text?: string) => void;
+    /** The socket instance. */
+    socket: any | null;
+    /** Whether the socket is connected. */
+    isConnected: boolean;
 }
 /**
  * Props for a custom input field component.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmnd-ai/chatbot-react",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "main": "dist/index.js",
   "description": "",
   "type": "module",
@@ -37,6 +37,7 @@
     "react-markdown": "^8.0.6",
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",
+    "socket.io-client": "^4.8.3",
     "uuid": "^13.0.0"
   }
 }