@cmnd-ai/chatbot-react 1.4.0 → 1.5.0

package/dist/ChatProvider/index.js

@@ -6,6 +6,8 @@ import Conversation from "../components/Conversation.js";
 import getChatBotById from "../services/getchatBotById.js";
 import patchChatbotConversationMemory from "../services/patchChatbotConversationMemory/index.js";
 import deleteChatbotConversationMemory from "../services/deleteChatbotConversationMemory/index.js";
+import parseUITools from "../utils/parseUITools.js";
+import getTools from "../utils/getTools/index.js";
 let globalChatbotConversationId;
 let globalChatbotProps;
 export const ChatProviderContext = React.createContext(undefined);
@@ -86,6 +88,7 @@ function ChatProvider(props) {
             return;
         const payload = {
             messages: newMessages,
+            uiTools: parseUITools(UITools),
         };
         if (chatbotConversationId) {
             payload["chatbotConversationId"] = chatbotConversationId;
@@ -162,9 +165,16 @@ function ChatProvider(props) {
                 setIsChatLoading,
                 setCanSendMessage,
                 scrollToBottom,
-                enabledTools,
+                enabledTools: getTools({
+                    apiTools: enabledTools,
+                    uiTools: parseUITools(UITools),
+                }),
                 chatbotConversationId,
+                UITools: parseUITools(UITools),
             },
-        }, children: error ? (_jsx("div", { children: "An error occured" })) : (_jsxs(_Fragment, { children: [props.children, _jsx(Conversation, { messages: messages, setMessages: setMessages, postSessionMessage: postSessionMessage, isChatLoading: isChatLoading, messagesRef: messagesRef, input: input, setInput: setInput, handleSendClick: handleSendClick, setChatbotConversationId: setChatbotConversationId, setIsChatLoading: setIsChatLoading, setCanSendMessage: setCanSendMessage, canSendMessage: canSendMessage, scrollToBottom: scrollToBottom, error: error, enabledTools: enabledTools, Components: Components, UITools: UITools, customStyles: props.customStyles, chatbotConversationId: chatbotConversationId, setCurrentConversationMemory: setCurrentConversationMemory })] })) }));
+        }, children: error ? (_jsx("div", { children: "An error occured" })) : (_jsxs(_Fragment, { children: [props.children, _jsx(Conversation, { messages: messages, setMessages: setMessages, postSessionMessage: postSessionMessage, isChatLoading: isChatLoading, messagesRef: messagesRef, input: input, setInput: setInput, handleSendClick: handleSendClick, setChatbotConversationId: setChatbotConversationId, setIsChatLoading: setIsChatLoading, setCanSendMessage: setCanSendMessage, canSendMessage: canSendMessage, scrollToBottom: scrollToBottom, error: error, enabledTools: getTools({
+                        apiTools: enabledTools,
+                        uiTools: parseUITools(UITools),
+                    }), Components: Components, UITools: parseUITools(UITools), customStyles: props.customStyles, chatbotConversationId: chatbotConversationId, setCurrentConversationMemory: setCurrentConversationMemory })] })) }));
 }
 export default ChatProvider;

package/dist/CmndChatBot/index.d.ts

@@ -1,12 +1,11 @@
-import React from "react";
-import { CMNDChatMemory, CustomStyles, UIFunctionArguments } from "../type.js";
+import { CMNDChatbotUITool, CMNDChatMemory, CustomStyles } from "../type.js";
 import { ConversationProps } from "../components/Conversation.js";
-export interface CmndChatBotProps extends Pick<ConversationProps, 'Components'> {
+export interface CmndChatBotProps extends Pick<ConversationProps, "Components"> {
     chatbotId: number;
     organizationId: number;
     apiKey?: string;
     baseUrl: string;
-    UITools?: Record<string, React.FC<UIFunctionArguments<any>>>;
+    UITools?: CMNDChatbotUITool[];
     customStyles?: CustomStyles;
     initialMemory?: CMNDChatMemory;
 }

package/dist/components/Chatbubble.d.ts

@@ -1,5 +1,5 @@
-import React, { Dispatch, ReactNode, SetStateAction } from "react";
-import { MessageRole, ToolDetails, ToolData, UIFunctionArguments, CustomStyles } from "../type.js";
+import { Dispatch, ReactNode, SetStateAction } from "react";
+import { MessageRole, ToolDetails, ToolData, CustomStyles, CMNDChatbotUITool } from "../type.js";
 interface ChatBubbleProps {
     message: string | ReactNode | null;
     role: MessageRole;
@@ -15,7 +15,7 @@ interface ChatBubbleProps {
     setCanSendMessage: Dispatch<SetStateAction<boolean>>;
     setIsChatLoading: Dispatch<SetStateAction<boolean>>;
     scrollToBottom: () => void;
-    UITools?: Record<string, React.FC<UIFunctionArguments<any>>>;
+    UITools?: CMNDChatbotUITool[];
     customStyles?: CustomStyles;
 }
 declare const Chatbubble: ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, scrollToBottom, isLoadingBubble, UITools, customStyles, }: ChatBubbleProps) => JSX.Element | null;

package/dist/components/Chatbubble.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, } from "react";
+import { useEffect, useRef, } from "react";
 import { MessageRole, FunctionType, } from "../type.js";
 import { BsTools, BsRobot } from "react-icons/bs";
 import { FaUserCircle } from "react-icons/fa";
@@ -11,6 +11,57 @@ import SyntaxHighlighter from "react-syntax-highlighter";
 //@ts-ignore
 import oneDark from "react-syntax-highlighter/dist/cjs/styles/prism/one-dark.js";
 import { overrideStyle } from "../utils.js";
+const patchLastMessageToolInfo = (messages, toolInfo) => {
+    console.log("patchLastMessageToolInfo", messages, toolInfo);
+    const lastMessage = messages[messages.length - 1];
+    if (lastMessage.role !== MessageRole.FUNCTION) {
+        return messages;
+    }
+    const shallowCopyOfMessagesWithoutLast = messages.slice(0, -1);
+    const copyOfLastMessage = { ...lastMessage };
+    copyOfLastMessage.tool = {
+        ...copyOfLastMessage.tool,
+        ...toolInfo,
+    };
+    const newMessages = [...shallowCopyOfMessagesWithoutLast, copyOfLastMessage];
+    return newMessages;
+};
+const confirmToolRun = async ({ messages, setMessages, postSessionMessage, setIsChatLoading, setCanSendMessage, setChatbotConversationId, scrollToBottom, }) => {
+    const newMessages = patchLastMessageToolInfo(messages, {
+        confirmed: true,
+    });
+    setIsChatLoading(true);
+    setCanSendMessage(false);
+    setMessages(newMessages);
+    await postSessionMessage(newMessages, (data) => {
+        if (data.finalResponseWithUsageData) {
+            setCanSendMessage(true);
+            setIsChatLoading(false);
+            const { messages, chatbotConversationId } = data;
+            if (chatbotConversationId) {
+                setChatbotConversationId(chatbotConversationId);
+                // saveConversationIdToLocalStorage(
+                //   chatbotConversationId.toString(),
+                //   config.chatbot_id!,
+                //   config.organization_id!
+                // );
+            }
+            messages && setMessages(messages);
+        }
+        if (data.message) {
+            setIsChatLoading(false);
+            const newAssistantMessage = {
+                unuseful: false,
+                hiddenFromUser: false,
+                role: MessageRole.ASSISTANT,
+                message: "",
+            };
+            newAssistantMessage.message = data.message;
+            setMessages([...newMessages, newAssistantMessage]);
+            scrollToBottom();
+        }
+    });
+};
 const getChatAvatar = (role) => {
     switch (role) {
         case MessageRole.USER:
@@ -24,78 +75,31 @@ const getChatAvatar = (role) => {
     }
 };
 const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, scrollToBottom, isLoadingBubble, UITools, customStyles, }) => {
-    const patchLastMessageToolInfo = useCallback((messages, toolInfo) => {
-        const lastMessage = messages[messages.length - 1];
-        if (lastMessage.role !== MessageRole.FUNCTION) {
-            return messages;
-        }
-        const shallowCopyOfMessagesWithoutLast = messages.slice(0, -1);
-        const copyOfLastMessage = { ...lastMessage };
-        copyOfLastMessage.tool = {
-            ...copyOfLastMessage.tool,
-            ...toolInfo,
-        };
-        const newMessages = [
-            ...shallowCopyOfMessagesWithoutLast,
-            copyOfLastMessage,
-        ];
-        return newMessages;
-    }, []);
-    const confirmToolRun = useCallback(async ({ messages, setMessages, postSessionMessage, }) => {
-        const newMessages = patchLastMessageToolInfo(messages, {
-            confirmed: true,
-        });
-        setIsChatLoading(true);
-        setCanSendMessage(false);
-        setMessages(newMessages);
-        await postSessionMessage(newMessages, (data) => {
-            if (data.finalResponseWithUsageData) {
-                setCanSendMessage(true);
-                setIsChatLoading(false);
-                const { messages, chatbotConversationId } = data;
-                if (chatbotConversationId) {
-                    setChatbotConversationId(chatbotConversationId);
-                    // saveConversationIdToLocalStorage(
-                    //   chatbotConversationId.toString(),
-                    //   config.chatbot_id!,
-                    //   config.organization_id!
-                    // );
-                }
-                messages && setMessages(messages);
-            }
-            if (data.message) {
-                setIsChatLoading(false);
-                const newAssistantMessage = {
-                    unuseful: false,
-                    hiddenFromUser: false,
-                    role: MessageRole.ASSISTANT,
-                    message: "",
-                };
-                newAssistantMessage.message = data.message;
-                setMessages([...newMessages, newAssistantMessage]);
-                scrollToBottom();
-            }
-        });
-    }, [patchLastMessageToolInfo]);
-    const toolData = tools?.find((t) => t.title === toolCallDetails?.name);
+    const toolData = tools?.find((t) => t.name === toolCallDetails?.name);
+    const hasConfirmedToolRun = useRef(false);
+    const isPostingMessage = useRef(false);
     useEffect(() => {
-        if (role === MessageRole.FUNCTION &&
+        if (!hasConfirmedToolRun.current &&
+            role === MessageRole.FUNCTION &&
             tools &&
-            toolData?.metadata.functionType === FunctionType.BACKEND &&
+            toolData?.functionType === FunctionType.BACKEND &&
             Boolean(toolCallDetails?.runAt) === false) {
+            hasConfirmedToolRun.current = true;
             confirmToolRun({
                 messages,
                 setMessages,
                 postSessionMessage,
+                setIsChatLoading,
+                setCanSendMessage,
+                setChatbotConversationId,
+                scrollToBottom,
             });
         }
     }, []);
     if (hide)
         return null;
     const defaultStyle = {
-        display: toolData?.metadata.functionType === FunctionType.BACKEND
-            ? "none"
-            : "flex",
+        display: toolData?.functionType === FunctionType.BACKEND ? "none" : "flex",
         flexDirection: role === MessageRole.USER ? "row-reverse" : "row",
         gap: "10px",
         textAlign: role === MessageRole.USER ? "right" : "left",
@@ -125,11 +129,14 @@ const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage,
                                 const language = match ? match[1] : undefined;
                                 return !inline && match ? (_jsx(SyntaxHighlighter, { children: code, language: language, wrapLongLines: true, style: oneDark, ...props })) : (_jsx("code", { className: className, ...props, children: children }));
                             },
-                        } })), role === MessageRole.FUNCTION && (_jsx("div", { children: toolData?.metadata?.functionType === FunctionType.UI ? (_jsx(ErrorBoundary, { fallback: _jsxs("div", { children: ["Failed to render ", toolCallDetails?.name, ". Please report this error."] }), onError: (error) => {
+                        } })), role === MessageRole.FUNCTION && (_jsx("div", { children: toolData?.functionType === FunctionType.UI ? (_jsx(ErrorBoundary, { fallback: _jsxs("div", { children: ["Failed to render ", toolCallDetails?.name, ". Please report this error."] }), onError: (error) => {
                                 // todo: report this error to some central place
                                 // with toolCallDetails name, args, and conversation id
                                 console.log("captured error", error);
                             }, children: _jsx(UIToolComponent, { functionName: toolCallDetails?.name ?? "", functionArgs: toolCallDetails?.args, previousRunResults: toolCallDetails?.output, UITools: UITools, captureResults: async (msg) => {
+                                    if (isPostingMessage.current)
+                                        return; // Prevent multiple calls
+                                    isPostingMessage.current = true;
                                     setIsChatLoading(true);
                                     setCanSendMessage(false);
                                     const newMessages = patchLastMessageToolInfo(messages, {
@@ -139,10 +146,11 @@ const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage,
                                     });
                                     setMessages(newMessages);
                                     const onData = (data) => {
+                                        isPostingMessage.current = false;
                                         if (data.finalResponseWithUsageData) {
                                             setIsChatLoading(false);
                                             setCanSendMessage(true);
-                                            const { messages, chatbotConversationId } = data;
+                                            const { chatbotConversationId, messages } = data;
                                             if (chatbotConversationId) {
                                                 setChatbotConversationId(chatbotConversationId);
                                             }
@@ -154,14 +162,18 @@ const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage,
                                                 unuseful: false,
                                                 hiddenFromUser: false,
                                                 role: MessageRole.ASSISTANT,
-                                                message: "",
+                                                message: data.message,
                                             };
-                                            newAssistantMessage.message = data.message;
                                             setMessages([...newMessages, newAssistantMessage]);
                                             scrollToBottom();
                                         }
                                     };
-                                    await postSessionMessage(newMessages, onData);
+                                    try {
+                                        await postSessionMessage(newMessages, onData);
+                                    }
+                                    finally {
+                                        isPostingMessage.current = false;
+                                    }
                                 } }) })) : (_jsx(_Fragment, {})) }, "2"))] })] }));
 };
 export default Chatbubble;

package/dist/components/Conversation.d.ts

@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction } from "react";
-import { CMNDChatMemory, CustomStyles, InputFieldProps, SendButtonProps, UIFunctionArguments } from "../type.js";
+import { CMNDChatbotUITool, CMNDChatMemory, CustomStyles, InputFieldProps, SendButtonProps } from "../type.js";
 export interface ConversationProps {
     messages: any[];
     setMessages: Dispatch<SetStateAction<any[]>>;
@@ -22,7 +22,7 @@ export interface ConversationProps {
         SendButton?: (params: SendButtonProps) => JSX.Element;
         error?: any;
     };
-    UITools?: Record<string, React.FC<UIFunctionArguments<any>>>;
+    UITools?: CMNDChatbotUITool[];
     customStyles?: CustomStyles;
     setCurrentConversationMemory: (memory: CMNDChatMemory) => Promise<any>;
 }

package/dist/components/Conversation.js

@@ -5,7 +5,7 @@ import ChatInputBox from "./ChatInputBox.js";
 const Conversation = ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, scrollToBottom, canSendMessage, setInput, input, Components, UITools, customStyles, }) => {
     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, { 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, scrollToBottom: scrollToBottom, UITools: UITools }, i))), isChatLoading ? _jsx(LoadingBubble, { customStyles: customStyles }) : null] }), _jsxs("div", { id: "cmnd-input-div", className: "cmnd-input-div", children: [Components?.InputField ? (_jsx(Components.InputField, { ...{ input, setInput, canSendMessage, handleSendClick } })) : (_jsx(ChatInputBox, { input: input, setInput: setInput, handleSendClick: handleSendClick })), Components?.SendButton ? (_jsx(Components.SendButton, { ...{
                             canSendMessage,
-                            handleSendClick
+                            handleSendClick,
                         } })) : (_jsx("button", { className: "cmnd-send-button", onClick: handleSendClick, children: "Send" }))] })] }));
 };
 export default Conversation;

package/dist/type.d.ts

@@ -56,7 +56,6 @@ export declare enum FunctionType {
     BACKEND = "backend"
 }
 export type ToolData = {
-    [x: string]: any;
     name: string;
     description: string;
     category: string;
@@ -71,6 +70,25 @@ export type UIFunctionArguments<AIProvidedParams> = {
     previousRunResults?: string;
     captureResults: (result: string) => void;
 };
+export interface CMNDChatbotUITool {
+    name: string;
+    description: string;
+    category: string;
+    subcategory?: string;
+    dangerous?: boolean;
+    associatedCommands?: string[];
+    prerequisites?: string[];
+    argumentSchema: any;
+    rerun?: boolean;
+    rerunWithDifferentParameters?: boolean;
+    capturesUserInput?: boolean;
+    functionType?: "ui";
+    runCmd: (args: {
+        functionArgs?: Record<string, any>;
+        captureResults?: (result: any) => Promise<any>;
+        previousRunResults?: any;
+    }, ref?: React.RefObject<HTMLElement>) => void;
+}
 export declare enum MessageRole {
     FUNCTION = "function",
     USER = "user",

package/dist/ui-tools/index.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
-import { UIFunctionArguments } from "../type.js";
-declare const UIToolComponent: ({ functionName, functionArgs, previousRunResults, captureResults, UITools, }: {
+import { CMNDChatbotUITool } from "../type.js";
+interface UIToolComponentProps {
     functionName: string;
     functionArgs: any;
-    previousRunResults?: string | undefined;
-    captureResults: (result: string) => void;
-    UITools?: Record<string, React.FC<UIFunctionArguments<any>>> | undefined;
-}) => JSX.Element;
+    previousRunResults?: string;
+    captureResults?: ((result: any) => Promise<any>) | undefined;
+    UITools?: CMNDChatbotUITool[];
+}
+declare const UIToolComponent: React.FC<UIToolComponentProps>;
 export default UIToolComponent;

package/dist/ui-tools/index.js

@@ -1,9 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const UIToolComponent = ({ functionName, functionArgs, previousRunResults, captureResults, UITools = {}, }) => {
-    const Component = UITools[functionName];
-    if (!Component) {
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
+const UIToolComponent = ({ functionName, functionArgs, previousRunResults, captureResults, UITools = [], }) => {
+    const itemRef = useRef(null);
+    const hasRun = useRef(false); // Prevent multiple calls
+    const [component, setComponent] = useState(null);
+    const tool = UITools.find((tool) => tool.name === functionName);
+    useEffect(() => {
+        if (tool && !hasRun.current) {
+            hasRun.current = true; // Mark as executed
+            const result = tool.runCmd({
+                functionArgs,
+                captureResults,
+                previousRunResults,
+            }, itemRef);
+            // If runCmd returns a React element, store it in state
+            if (React.isValidElement(result)) {
+                setComponent(result);
+            }
+        }
+    }, [tool, functionArgs, previousRunResults, captureResults]);
+    if (!tool) {
         throw new Error(`Tried to render non-existing UI-Tool component for ${functionName}.`);
     }
-    return (_jsx(Component, { functionArgs: functionArgs, previousRunResults: previousRunResults, captureResults: captureResults }));
+    if (component) {
+        return _jsx(_Fragment, { children: component });
+    }
+    return (_jsx(_Fragment, { children: _jsx("div", { ref: itemRef }) }));
 };
 export default UIToolComponent;

package/dist/utils/getTools/index.d.ts

@@ -0,0 +1,5 @@
+declare const getTools: ({ uiTools, apiTools, }: {
+    uiTools?: any[] | undefined;
+    apiTools?: any[] | undefined;
+}) => any[];
+export default getTools;

package/dist/utils/getTools/index.js

@@ -0,0 +1,5 @@
+const getTools = ({ uiTools = [], apiTools = [], }) => {
+    apiTools = apiTools.map((tool) => ({ ...tool.metadata }));
+    return [...apiTools, ...uiTools];
+};
+export default getTools;

package/dist/utils/parseUITools.d.ts

@@ -0,0 +1,3 @@
+import { CMNDChatbotUITool } from "../type.js";
+declare const parseUITools: (uiTools?: CMNDChatbotUITool[]) => CMNDChatbotUITool[];
+export default parseUITools;

package/dist/utils/parseUITools.js

@@ -0,0 +1,18 @@
+const parseUITools = (uiTools) => {
+    if (!uiTools)
+        return [];
+    return uiTools.map((tool) => {
+        return {
+            ...tool,
+            rerun: tool.rerun ?? false,
+            capturesUserInput: tool.capturesUserInput ?? false,
+            rerunWithDifferentParameters: tool.rerunWithDifferentParameters ?? false,
+            prerequisites: tool.prerequisites ?? [],
+            associatedCommands: tool.associatedCommands ?? [],
+            dangerous: tool.dangerous ?? false,
+            subcategory: tool.subcategory ?? "",
+            functionType: "ui",
+        };
+    });
+};
+export default parseUITools;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmnd-ai/chatbot-react",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "main": "dist/index.js",
   "description": "",
   "type": "module",