@cmnd-ai/chatbot-react 1.1.2 → 1.2.0

package/dist/ChatProvider/index.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { CmndChatBotProps } from "../CmndChatBot";
-import { CmndChatContext } from "../type";
+import { CmndChatBotProps } from "../CmndChatBot/index.js";
+import { CmndChatContext } from "../type.js";
 export declare const ChatProviderContext: React.Context<CmndChatContext | undefined>;
-export interface ChatProviderProps extends Omit<CmndChatBotProps, "components"> {
-    children: React.ReactNode | ((props: Omit<CmndChatBotProps, "components">) => React.ReactNode);
+export interface ChatProviderProps extends CmndChatBotProps {
+    children: React.ReactNode | ((props: CmndChatBotProps) => React.ReactNode);
 }
-declare function ChatProvider(props: ChatProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function ChatProvider(props: ChatProviderProps): JSX.Element | null;
 export default ChatProvider;

package/dist/ChatProvider/index.js

@@ -1,121 +1,119 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatProviderContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const constants_1 = require("../constants");
-exports.ChatProviderContext = react_1.default.createContext(undefined);
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
+import { MessageRole, } from "../type.js";
+import postUserConversation from "../services/postUserConversation.js";
+import Conversation from "../components/Conversation.js";
+import getChatBotById from "../services/getchatBotById.js";
+export const ChatProviderContext = React.createContext(undefined);
 function ChatProvider(props) {
-    const { chatbotId, organizationId } = props;
-    const [chats, setchats] = (0, react_1.useState)({
-        data: undefined,
-        error: null,
-        isLoading: false,
-    });
-    const [message, setmessage] = (0, react_1.useState)({
-        error: null,
-        isSending: false,
-        textValue: "",
-    });
-    const sendMessage = async () => {
-        const temp = { ...message };
+    const { chatbotId, organizationId, baseUrl, Components, UITools } = props;
+    const [loading, setLoading] = useState(true);
+    const [messages, setMessages] = useState([]);
+    const [error, setError] = useState(null);
+    const [input, setInput] = useState("");
+    const [canContinue] = useState(false);
+    const [isChatLoading, setIsChatLoading] = useState(false);
+    const [canSendMessage, setCanSendMessage] = useState(true);
+    const messagesRef = useRef(null);
+    const [chatbotConversationId, setChatbotConversationId] = useState(undefined);
+    const [enabledTools, setEnabledTools] = useState([]);
+    useEffect(() => {
+        setLoading(true);
+        getChatBotById(baseUrl, organizationId, chatbotId)
+            .then((response) => {
+            const { chatbot } = response.data;
+            setEnabledTools(chatbot.enabledTools);
+        })
+            .catch(() => {
+            setError("Error fetching chatbot data");
+        })
+            .finally(() => {
+            setLoading(false);
+        });
+    }, [organizationId, chatbotId]);
+    useEffect(() => {
+        scrollToBottom();
+    }, [messages, canSendMessage]);
+    const scrollToBottom = () => {
+        if (messagesRef.current) {
+            messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
+        }
+    };
+    const postSessionMessage = async (newMessages, onData) => {
+        if (!organizationId || !chatbotId)
+            return;
+        return postUserConversation({
+            orgId: organizationId,
+            payload: newMessages,
+            apikey: props.apiKey,
+            chatbotId,
+            baseUrl,
+            onData,
+        });
+    };
+    const handleSendClick = async () => {
+        if (input.trim() === "" || !canSendMessage)
+            return;
+        const newUserMessage = {
+            unuseful: false,
+            hiddenFromUser: false,
+            role: "user",
+            message: canContinue ? "continue" : input,
+        };
+        const newMessages = [...messages, newUserMessage];
+        setMessages(newMessages);
+        setInput("");
+        setIsChatLoading(true);
         try {
-            temp.error = null;
-            const requestBody = {
-                messages: [
-                    {
-                        hiddenFromUser: false,
-                        message: message.textValue,
-                        role: "user",
+            const onData = (data) => {
+                if (data.finalResponseWithUsageData) {
+                    setIsChatLoading(false);
+                    setCanSendMessage(true);
+                    const { chatbotConversationId, messages } = data;
+                    if (chatbotConversationId) {
+                        setChatbotConversationId(chatbotConversationId);
+                    }
+                    messages && setMessages(messages);
+                }
+                if (data.message) {
+                    setIsChatLoading(false);
+                    const newAssistantMessage = {
                         unuseful: false,
-                    },
-                ],
+                        hiddenFromUser: false,
+                        role: MessageRole.ASSISTANT,
+                        message: data.message,
+                    };
+                    setMessages([...newMessages, newAssistantMessage]);
+                    scrollToBottom();
+                }
             };
-            const results = await postUserConversation({
-                orgId: organizationId,
-                payload: requestBody,
-                apikey: props.apiKey,
-                chatbotId,
-            });
-            if (!results.ok) {
-                throw new Error(`Failed to post conversation: ${results.statusText}`);
-            }
-            temp.textValue = "";
-            const data = await results.json();
-            setchats((prev) => ({
-                ...prev,
-                data: {
-                    ...prev.data,
-                    messages: [...(prev.data?.messages || [])].concat(...data.messages),
-                },
-            }));
+            setCanSendMessage(false);
+            await postSessionMessage(newMessages, onData);
         }
         catch (error) {
-            console.error("error while sending message: ", error);
-            temp.error = error;
+            console.error(error);
+            setError("Error sending message");
         }
-        temp.isSending = false;
-        setmessage(temp);
     };
-    (0, react_1.useEffect)(() => {
-        if (message.isSending) {
-            sendMessage();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [message.isSending]);
-    const currentPendingMessage = message.isSending
-        ? message.textValue
-        : undefined;
-    return ((0, jsx_runtime_1.jsx)(exports.ChatProviderContext.Provider, { value: {
+    if (loading)
+        return null;
+    return (_jsx(ChatProviderContext.Provider, { value: {
             props: {
-                chats,
-                userInputData: {
-                    ...message,
-                    setTextValue(value) {
-                        setmessage((prev) => ({ ...prev, textValue: value }));
-                    },
-                    submitMessage() {
-                        setmessage((prev) => ({ ...prev, isSending: true }));
-                    },
-                },
+                ...props,
+                messages,
+                setMessages,
+                error,
+                input,
+                setInput,
+                canSendMessage,
+                isChatLoading,
+                postSessionMessage,
+                setChatbotConversationId,
+                setIsChatLoading,
+                setCanSendMessage,
+                scrollToBottom,
+                enabledTools,
             },
-        }, children: typeof props.children === "function" ? ((0, jsx_runtime_1.jsx)(props.children, { ...props }) // If it's a function, call it with props
-        ) : (props.children) // Otherwise, render it as React node
-     }));
+        }, children: error ? (_jsx("div", { children: "An error occured" })) : (_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 })) }));
 }
-exports.default = ChatProvider;
-const postUserConversation = ({ orgId, payload, apikey, chatbotId, }) => {
-    return fetch(`${constants_1.baseUrl}/organizations/${orgId}/chatbots/${chatbotId}/conversations`, {
-        headers: {
-            accept: "application/json, text/plain, */*",
-            "accept-language": "en-US,en;q=0.9",
-            "content-type": "application/json;charset=UTF-8",
-            "x-api-key": apikey,
-        },
-        body: JSON.stringify(payload),
-        method: "POST",
-    });
-};
+export default ChatProvider;

package/dist/ChatProvider/processStream/index.d.ts

@@ -0,0 +1,3 @@
+import { ConversationDataObject } from "../../type.js";
+declare const processStream: (reader: ReadableStreamDefaultReader<any>, onData?: ((data: ConversationDataObject) => void) | undefined) => Promise<void>;
+export default processStream;

package/dist/ChatProvider/processStream/index.js

@@ -0,0 +1,74 @@
+const processStream = async (reader, onData) => {
+    if (!onData)
+        return;
+    let fullAssistantMessage = "";
+    let fullMessageContext = "";
+    try {
+        while (true) {
+            const { value, done } = await reader.read();
+            if (done) {
+                break;
+            }
+            // Process the incoming chunk of data
+            const chunk = value; // Assuming `value` is a string
+            // Split the chunk by lines
+            const lines = chunk.split("\n");
+            for (const line of lines) {
+                let dataString = line;
+                if (line.startsWith("data: ")) {
+                    dataString = line.slice(6);
+                }
+                if (dataString === "[DONE]") {
+                    onData({
+                        completionFinished: true,
+                        finalResponseWithUsageData: false,
+                    });
+                }
+                else {
+                    try {
+                        const dataObject = JSON.parse(fullMessageContext + dataString);
+                        if (dataObject.error) {
+                            throw new Error(dataObject.error);
+                        }
+                        if (dataObject.content) {
+                            fullAssistantMessage += dataObject.content;
+                            onData({
+                                completionFinished: false,
+                                finalResponseWithUsageData: false,
+                                message: fullAssistantMessage,
+                            });
+                        }
+                        else {
+                            //at this point, the dataObject does not have a content propery
+                            //and it is completed
+                            //get the last message from the dataObject to check if it is a function call
+                            const { messages, completionFinished, finalResponseWithUsageData, chatbotConversationId, conversationId, totalTokens, totalCost, } = dataObject;
+                            onData({
+                                messages,
+                                completionFinished,
+                                finalResponseWithUsageData,
+                                conversationId,
+                                chatbotConversationId,
+                                totalTokens,
+                                totalCost,
+                            });
+                        }
+                    }
+                    catch (error) {
+                        fullMessageContext += dataString;
+                    }
+                }
+            }
+        }
+    }
+    catch (error) {
+        onData({
+            completionFinished: true,
+            message: fullAssistantMessage,
+            finalResponseWithUsageData: true,
+        });
+        console.error(error);
+        throw new Error(error);
+    }
+};
+export default processStream;

package/dist/ChatProvider/useChatContext.d.ts

@@ -1,2 +1,2 @@
-declare const useChatContext: () => import("../type").CmndChatContext;
+declare const useChatContext: () => import("../type.js").CmndChatContext;
 export default useChatContext;

package/dist/ChatProvider/useChatContext.js

@@ -1,11 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-const _1 = require(".");
+import { useContext } from "react";
+import { ChatProviderContext } from "./index.js";
 const useChatContext = () => {
-    const context = (0, react_1.useContext)(_1.ChatProviderContext);
+    const context = useContext(ChatProviderContext);
     if (!context)
         throw new Error("Cmnd chat context must be wrapped in a provider");
     return context;
 };
-exports.default = useChatContext;
+export default useChatContext;

package/dist/CmndChatBot/index.d.ts

@@ -1,14 +1,12 @@
 import React from "react";
-import { CmndChatContext } from "../type";
-export interface CmndChatBotProps {
+import { UIFunctionArguments } from "../type.js";
+import { ConversationProps } from "../components/Conversation.js";
+export interface CmndChatBotProps extends Pick<ConversationProps, 'Components'> {
     chatbotId: number;
     organizationId: number;
     apiKey: string;
-    components: {
-        messages: (params: CmndChatContext) => React.ReactNode;
-        userInputBox: (params: CmndChatContext) => React.ReactNode;
-        error?: (params: CmndChatContext) => React.ReactNode;
-    };
+    baseUrl: string;
+    UITools?: Record<string, React.FC<UIFunctionArguments<any>>>;
 }
-declare function CmndChatBot(props: CmndChatBotProps): import("react/jsx-runtime").JSX.Element;
+declare function CmndChatBot(props: CmndChatBotProps): void;
 export default CmndChatBot;

package/dist/CmndChatBot/index.js

@@ -1,16 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const useChatContext_1 = __importDefault(require("../ChatProvider/useChatContext"));
+import useChatContext from "../ChatProvider/useChatContext.js";
 function CmndChatBot(props) {
-    const chatContext = (0, useChatContext_1.default)();
-    const { props: { chats }, } = chatContext;
-    if (chats.error && props.components.error) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(props.components.error, { props: chatContext.props }) });
-    }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(props.components.messages, { props: chatContext.props }), (0, jsx_runtime_1.jsx)(props.components.userInputBox, { props: chatContext.props })] }));
+    const chatContext = useChatContext();
+    return;
 }
-exports.default = CmndChatBot;
+export default CmndChatBot;

package/dist/components/Chatbubble.d.ts

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

package/dist/components/Chatbubble.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, } from "react";
+import { MessageRole, FunctionType, } from "../type.js";
+import { BsTools, BsRobot } from "react-icons/bs";
+import { FaUserCircle } from "react-icons/fa";
+import { ErrorBoundary } from "react-error-boundary";
+import UIToolComponent from "../ui-tools/index.js";
+import remarkGfm from "remark-gfm";
+import ReactMarkdown from "react-markdown";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+const getChatAvatar = (role) => {
+    switch (role) {
+        case MessageRole.USER:
+            return _jsx(FaUserCircle, {});
+        case MessageRole.FUNCTION:
+            return _jsx(BsTools, {});
+        case MessageRole.ASSISTANT:
+            return _jsx(BsRobot, {});
+        default:
+            return _jsx(BsRobot, {});
+    }
+};
+const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, scrollToBottom, isLoadingBubble, UITools, }) => {
+    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);
+    useEffect(() => {
+        if (role === MessageRole.FUNCTION &&
+            tools &&
+            toolData?.metadata.functionType === FunctionType.BACKEND &&
+            Boolean(toolCallDetails?.runAt) === false) {
+            confirmToolRun({
+                messages,
+                setMessages,
+                postSessionMessage,
+            });
+        }
+    }, []);
+    if (hide)
+        return null;
+    const defaultStyle = {
+        display: toolData?.metadata.functionType === FunctionType.BACKEND
+            ? "none"
+            : "flex",
+        flexDirection: role === MessageRole.USER ? "row-reverse" : "row",
+        gap: "10px",
+        textAlign: role === MessageRole.USER ? "right" : "left",
+        justifySelf: role === MessageRole.USER ? "flex-start" : "flex-end",
+        alignItems: "start",
+        width: "100%",
+        background: "none",
+    };
+    return (_jsxs("div", { style: defaultStyle, className: `cmnd-chatbot-chat-bubble ${role}`, children: [_jsx("span", { style: {
+                    fontSize: "30px",
+                    color: "black",
+                }, children: getChatAvatar(role) }), _jsxs("p", { style: {
+                    backgroundColor: role === MessageRole.USER ? "#7A8194" : "#373E4E",
+                    color: "white",
+                    padding: "10px",
+                    borderRadius: "10px",
+                }, children: [role === MessageRole.USER || isLoadingBubble ? (_jsx("span", { children: message })) : (_jsx(ReactMarkdown, { className: "markdown", remarkPlugins: [remarkGfm], children: message?.toString() ?? "", remarkRehypeOptions: { passThrough: ["link"] }, components: {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore
+                            code({ inline, className, children, ...props }) {
+                                const match = /language-(\w+)/.exec(className || "");
+                                const code = String(children).replace(/\n$/, "");
+                                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) => {
+                                // 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) => {
+                                    setIsChatLoading(true);
+                                    setCanSendMessage(false);
+                                    const newMessages = patchLastMessageToolInfo(messages, {
+                                        output: msg,
+                                        runAt: new Date().toISOString(),
+                                        confirmed: true,
+                                    });
+                                    setMessages(newMessages);
+                                    const onData = (data) => {
+                                        if (data.finalResponseWithUsageData) {
+                                            setIsChatLoading(false);
+                                            setCanSendMessage(true);
+                                            const { messages, chatbotConversationId } = data;
+                                            if (chatbotConversationId) {
+                                                setChatbotConversationId(chatbotConversationId);
+                                            }
+                                            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();
+                                        }
+                                    };
+                                    await postSessionMessage(newMessages, onData);
+                                } }) })) : (_jsx(_Fragment, {})) }, "2"))] })] }));
+};
+export default Chatbubble;

package/dist/components/Conversation.d.ts

@@ -0,0 +1,27 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { InputFieldProps, SendButtonProps, UIFunctionArguments } from "../type.js";
+export interface ConversationProps {
+    messages: any[];
+    setMessages: Dispatch<SetStateAction<any[]>>;
+    handleSendClick: () => void;
+    input: string;
+    setInput: Dispatch<SetStateAction<string>>;
+    isChatLoading: boolean;
+    error: string | null;
+    messagesRef: React.RefObject<HTMLDivElement>;
+    setChatbotConversationId: Dispatch<React.SetStateAction<number | undefined>>;
+    setIsChatLoading: Dispatch<SetStateAction<boolean>>;
+    setCanSendMessage: Dispatch<SetStateAction<boolean>>;
+    canSendMessage: boolean;
+    scrollToBottom: () => void;
+    enabledTools: any[];
+    postSessionMessage: (message: string, onData: any) => void;
+    Components?: {
+        InputField?: (params: InputFieldProps) => JSX.Element;
+        SendButton?: (params: SendButtonProps) => JSX.Element;
+        error?: any;
+    };
+    UITools?: Record<string, React.FC<UIFunctionArguments<any>>>;
+}
+declare const Conversation: ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, scrollToBottom, canSendMessage, setInput, input, Components, UITools, }: ConversationProps) => JSX.Element;
+export default Conversation;

package/dist/components/Conversation.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Chatbubble from "./Chatbubble.js";
+import LoadingBubble from "./LoadingBubble.js";
+import { RiSendPlane2Line } from "react-icons/ri";
+const Conversation = ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, scrollToBottom, canSendMessage, setInput, input, Components, UITools, }) => {
+    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, { 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, {}) : null] }), _jsxs("div", { id: "cmnd-input-div", className: "cmnd-input-div", children: [Components?.InputField ? (_jsx(Components.InputField, { ...{ input, setInput, canSendMessage, handleSendClick } })) : (_jsx("input", { id: "cmnd-input", className: "cmnd-input", onKeyDown: (e) => {
+                            if (e.key === "Enter") {
+                                handleSendClick();
+                            }
+                        }, autoComplete: "off", value: input, onChange: (e) => setInput(e.target.value), type: "text", placeholder: "type something..." })), Components?.SendButton ? (_jsx(Components.SendButton, { ...{
+                            canSendMessage,
+                            handleSendClick,
+                        } })) : (_jsx("span", { id: "cmnd-send-button", className: "cmnd-send-button", style: {
+                            opacity: canSendMessage ? "1" : "0.5",
+                            cursor: canSendMessage ? "pointer" : "not-allowed",
+                            fontSize: "1.5rem",
+                        }, onClick: handleSendClick, children: _jsx(RiSendPlane2Line, {}) }))] })] }));
+};
+export default Conversation;

package/dist/components/LoadingBubble.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const LoadingBubble: () => JSX.Element;
+export default LoadingBubble;

package/dist/components/LoadingBubble.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageRole } from "../type.js";
+import Chatbubble from "./Chatbubble.js";
+const LoadingBubble = () => {
+    const color = "white";
+    return (_jsx(Chatbubble, { isLoadingBubble: true, message: _jsx("div", { className: "loading-container", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", style: {
+                    margin: "auto",
+                    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: color, 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" })] })] }) }), role: MessageRole.ASSISTANT, messages: [], postSessionMessage: () => { }, id: "__loading__", setMessages: () => { }, setChatbotConversationId: () => { }, setCanSendMessage: () => { }, setIsChatLoading: () => { }, scrollToBottom: () => { } }));
+};
+export default LoadingBubble;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { default as ChatProvider } from "./ChatProvider";
-export { default as useChatContext } from "./ChatProvider/useChatContext";
-export { default as CmndChatBot } from "./CmndChatBot";
-export * from "./constants";
+export { default as ChatProvider } from "./ChatProvider/index.js";
+export { default as useChatContext } from "./ChatProvider/useChatContext.js";
+export { CmndChatContext } from "./type.js";
+export { default as CmndChatBot } from "./CmndChatBot/index.js";

package/dist/index.js

@@ -1,27 +1,3 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CmndChatBot = exports.useChatContext = exports.ChatProvider = void 0;
-var ChatProvider_1 = require("./ChatProvider");
-Object.defineProperty(exports, "ChatProvider", { enumerable: true, get: function () { return __importDefault(ChatProvider_1).default; } });
-var useChatContext_1 = require("./ChatProvider/useChatContext");
-Object.defineProperty(exports, "useChatContext", { enumerable: true, get: function () { return __importDefault(useChatContext_1).default; } });
-var CmndChatBot_1 = require("./CmndChatBot");
-Object.defineProperty(exports, "CmndChatBot", { enumerable: true, get: function () { return __importDefault(CmndChatBot_1).default; } });
-__exportStar(require("./constants"), exports);
+export { default as ChatProvider } from "./ChatProvider/index.js";
+export { default as useChatContext } from "./ChatProvider/useChatContext.js";
+export { default as CmndChatBot } from "./CmndChatBot/index.js";

package/dist/services/getchatBotById.d.ts

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

package/dist/services/getchatBotById.js

@@ -0,0 +1,6 @@
+import axios from "axios";
+const getChatBotById = (baseUrl, organizationId, chatbotId) => {
+    const endpoint = `${baseUrl}/organizations/${organizationId}/chatbots/${chatbotId}`;
+    return axios.get(endpoint);
+};
+export default getChatBotById;

package/dist/services/postUserConversation.d.ts

@@ -0,0 +1,10 @@
+import { ConversationDataObject } from "../type.js";
+declare const postUserConversation: ({ orgId, payload, apikey, chatbotId, baseUrl, onData, }: {
+    orgId: number;
+    payload: object;
+    chatbotId: number;
+    apikey: string;
+    baseUrl: string;
+    onData?: ((data: ConversationDataObject) => void) | undefined;
+}) => Promise<void>;
+export default postUserConversation;

package/dist/services/postUserConversation.js

@@ -0,0 +1,22 @@
+import axios from "axios";
+import processStream from "../ChatProvider/processStream/index.js";
+const postUserConversation = async ({ orgId, payload, apikey, chatbotId, baseUrl, onData, }) => {
+    const endpoint = `${baseUrl}/organizations/${orgId}/chatbots/${chatbotId}/conversations`;
+    const response = await axios.post(endpoint, {
+        messages: payload,
+    }, {
+        headers: {
+            Accept: "text/event-stream",
+            "accept-language": "en-US,en;q=0.9",
+            "content-type": "application/json;charset=UTF-8",
+            "x-api-key": apikey,
+        },
+        responseType: "stream",
+        adapter: "fetch",
+    });
+    const reader = response.data
+        .pipeThrough(new TextDecoderStream())
+        .getReader();
+    await processStream(reader, onData);
+};
+export default postUserConversation;

package/dist/type.d.ts

@@ -1,34 +1,20 @@
+import { ConversationProps } from "./components/Conversation.js";
 export interface CmndChatContext {
-    props: {
-        chats: {
-            isLoading: boolean;
-            data: Conversation | undefined;
-            error: null | unknown;
-        };
-        userInputData: {
-            isSending: boolean;
-            textValue: string;
-            /** whether there is an error while sending the message */
-            error: null | unknown;
-            /** to change the value of the input text */
-            setTextValue: (value: string) => any;
-            /** function to call for submitting a message */
-            submitMessage: () => void;
-            /**Message currently being sent */
-            currentPendingMessage?: string;
-        };
-    };
+    props: Partial<ConversationProps>;
+}
+export interface InputFieldProps {
+    input: string;
+    setInput: (input: string) => void;
+    canSendMessage: boolean;
+    handleSendClick: () => void;
+}
+export interface SendButtonProps {
+    handleSendClick: () => void;
+    canSendMessage: boolean;
 }
 export type ErrorOrData<T> = {
     error: unknown;
 } | T;
-export interface Message {
-    id?: string;
-    role: "user" | "assistant";
-    message: string;
-    unuseful: boolean;
-    hiddenFromUser: boolean;
-}
 export interface Conversation {
     conversationId: number;
     conversationTitle: string;
@@ -43,3 +29,75 @@ export interface Conversation {
     /** Date string format */
     updatedAt: string;
 }
+export interface ConversationDataObject {
+    completionFinished: boolean;
+    finalResponseWithUsageData: boolean;
+    message?: string;
+    conversationId?: string;
+    chatbotConversationId?: number;
+    totalTokens?: number;
+    totalCost?: number;
+    messages?: Message[];
+}
+interface ToolArgument {
+    type: string;
+    description: string;
+    default?: any;
+}
+interface ToolArguments {
+    type: string;
+    default?: any;
+    properties: Record<string, ToolArgument>;
+    required?: string[];
+}
+export declare enum FunctionType {
+    UI = "ui",
+    BACKEND = "backend"
+}
+export type ToolData = {
+    [x: string]: any;
+    name: string;
+    description: string;
+    category: string;
+    subcategory: string;
+    subsubcategory?: string;
+    functionType: FunctionType;
+    dangerous: boolean;
+    arguments: ToolArguments;
+};
+export type UIFunctionArguments<AIProvidedParams> = {
+    functionArgs: AIProvidedParams;
+    previousRunResults?: string;
+    captureResults: (result: string) => void;
+};
+export declare enum MessageRole {
+    FUNCTION = "function",
+    USER = "user",
+    ASSISTANT = "assistant",
+    SYSTEM = "system"
+}
+type MessageRoleExceptFunctions = Exclude<MessageRole, MessageRole.FUNCTION>;
+interface GenericMessage {
+    id: string;
+    unuseful: boolean;
+    hiddenFromUser: boolean;
+    message?: string;
+    role: MessageRoleExceptFunctions;
+}
+export interface ToolDetails {
+    args: any;
+    name: string;
+    confirmed?: boolean;
+    runAt?: string;
+    output?: string;
+}
+interface ToolMessage {
+    id: string;
+    unuseful: boolean;
+    hiddenFromUser: boolean;
+    message?: string;
+    role: MessageRole.FUNCTION;
+    tool: ToolDetails;
+}
+export type Message = GenericMessage | ToolMessage;
+export {};

package/dist/type.js

@@ -1,2 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export var FunctionType;
+(function (FunctionType) {
+    FunctionType["UI"] = "ui";
+    FunctionType["BACKEND"] = "backend";
+})(FunctionType = FunctionType || (FunctionType = {}));
+export var MessageRole;
+(function (MessageRole) {
+    MessageRole["FUNCTION"] = "function";
+    MessageRole["USER"] = "user";
+    MessageRole["ASSISTANT"] = "assistant";
+    MessageRole["SYSTEM"] = "system";
+})(MessageRole = MessageRole || (MessageRole = {}));

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

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

package/dist/ui-tools/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const UIToolComponent = ({ functionName, functionArgs, previousRunResults, captureResults, UITools = {}, }) => {
+    const Component = UITools[functionName];
+    if (!Component) {
+        throw new Error(`Tried to render non-existing UI-Tool component for ${functionName}.`);
+    }
+    return (_jsx(Component, { functionArgs: functionArgs, previousRunResults: previousRunResults, captureResults: captureResults }));
+};
+export default UIToolComponent;

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import { CSSProperties } from "react";
+export declare const overrideStyle: (style: CSSProperties, overrides?: Partial<CSSProperties>) => CSSProperties;

package/dist/utils.js

@@ -0,0 +1,3 @@
+export const overrideStyle = (style, overrides) => {
+    return { ...style, ...overrides };
+};

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@cmnd-ai/chatbot-react",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "main": "dist/index.js",
   "description": "",
+  "type": "module",
   "files": [
     "dist/",
     "package.json",
@@ -17,11 +18,20 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@types/react": "^18.2.55",
+    "@types/react": "18.0.28",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "semantic-release": "^22.0.12",
-    "typescript": "^5.3.3"
+    "typescript": "4.9.5"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "axios": "^1.7.5",
+    "react-error-boundary": "^4.0.13",
+    "react-icons": "^5.3.0",
+    "react-markdown": "^8.0.6",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^3.0.1"
   }
 }

package/dist/constants.d.ts

@@ -1 +0,0 @@
-export declare const baseUrl: "https://api.cmnd.ai";

package/dist/constants.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.baseUrl = void 0;
-exports.baseUrl = "https://api.cmnd.ai";