@cmnd-ai/chatbot-react 1.9.2 → 1.13.0

package/Readme.md

@@ -117,6 +117,110 @@ const App = () => {
 };
 ```
 
+## Headless Usage with `useCMNDChat` Hook
+
+If you want complete control over your UI while maintaining the powerful chatbot logic, you can use the `useCMNDChat` hook. It handles all state management, real-time streaming, conversation history, and tool orchestration.
+
+```tsx
+import { useCMNDChat, MessageRole } from "@cmnd-ai/chatbot-react";
+
+const MyCustomChat = () => {
+  const {
+    messages,
+    input,
+    setInput,
+    isChatLoading,
+    canSendMessage,
+    sendMessage,
+    submitToolResult,
+    conversations,
+    handleNewChat,
+    handleConversationSelect,
+    error,
+  } = useCMNDChat({
+    chatbotId: 123,
+    organizationId: 456,
+    baseUrl: "https://api.cmnd.ai",
+    apiKey: "your-api-key",
+    cleanResponse: true, // Optional: Returns assistant messages as plaintext
+    onData: (data) => console.log("Stream update:", data),
+    onToolCall: async (tool) => {
+      console.log("AI called tool:", tool.name);
+
+      // For UI tools, you must execute and call submitToolResult
+      if (tool.name === "my_custom_tool") {
+        const result = await runMyTool(tool.args);
+        submitToolResult(JSON.stringify(result));
+      }
+    },
+  });
+
+  return (
+    <div className="custom-chat">
+      <div className="message-list">
+        {messages.map((m) => (
+          <div key={m.id} className={`message ${m.role}`}>
+            {m.role === MessageRole.ASSISTANT ? "🤖" : "👤"}: {m.message}
+            {/* Handle tool calls */}
+            {m.role === MessageRole.FUNCTION && (
+              <div className="tool-ui">
+                Rendering Tool: {m.tool.name}
+                {/* Once done, call submitToolResult("result") */}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      <div className="controls">
+        <input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Type here..."
+        />
+        <button onClick={() => sendMessage()}>Send</button>
+        <button onClick={handleNewChat}>Clear Chat</button>
+      </div>
+    </div>
+  );
+};
+```
+
+### Hook API Reference
+
+#### `UseCMNDChatOptions`
+
+| Option           | Type                  | Description                                                                |
+| ---------------- | --------------------- | -------------------------------------------------------------------------- |
+| `chatbotId`      | `number`              | **Required**. Your unique chatbot ID.                                      |
+| `organizationId` | `number`              | **Required**. Your unique organization ID.                                 |
+| `baseUrl`        | `string`              | **Required**. The CMND API base URL.                                       |
+| `apiKey`         | `string`              | Optional API key for authentication.                                       |
+| `initialMemory`  | `object`              | Context to send when starting a new conversation.                          |
+| `UITools`        | `CMNDChatbotUITool[]` | Array of custom UI tools.                                                  |
+| `onData`         | `function`            | Triggered for every response chunk or message update.                      |
+| `onToolCall`     | `function`            | Triggered when the AI requests a tool execution.                           |
+| `cleanResponse`  | `boolean`             | If `true`, assistant messages are returned as plaintext. Default: `false`. |
+
+#### `UseCMNDChatResult`
+
+| Property                   | Type                    | Description                                               |
+| -------------------------- | ----------------------- | --------------------------------------------------------- |
+| `messages`                 | `Message[]`             | Array of all messages in the current conversation thread. |
+| `input`                    | `string`                | The current text in the chat input.                       |
+| `setInput`                 | `function`              | Update the chat input text.                               |
+| `isChatLoading`            | `boolean`               | True if a message is being generated or tool is running.  |
+| `canSendMessage`           | `boolean`               | True if the system is ready to receive the next message.  |
+| `sendMessage`              | `(text?) => Promise`    | Send a message. Uses `input` if `text` is omitted.        |
+| `submitToolResult`         | `(output) => Promise`   | Submit results from a UI tool back to the AI.             |
+| `conversations`            | `ChatbotConversation[]` | List of historical conversations.                         |
+| `selectedConversation`     | `ChatbotConversation`   | The currently active conversation metadata.               |
+| `handleNewChat`            | `function`              | Starts a fresh conversation thread.                       |
+| `handleConversationSelect` | `function`              | Loads a specific conversation from history.               |
+| `handleDeleteConversation` | `function`              | Deletes a conversation from history.                      |
+| `tools`                    | `any[]`                 | All available tools (API + UI).                           |
+| `error`                    | `string`                | Contains description of any API or processing errors.     |
+
 ## Props
 
 ### Required Props
@@ -130,15 +234,15 @@ const App = () => {
 
 ### Optional Props
 
-| Prop                    | Type                  | Default     | Description                                           |
-| ----------------------- | --------------------- | ----------- | ----------------------------------------------------- |
-| `theme`                 | `"light" \| "dark"`   | `"light"`   | Theme for the chatbot                                 |
-| `UITools`               | `CMNDChatbotUITool[]` | `[]`        | Array of UI tools                                     |
-| `enabledTools`          | `any[]`               | `[]`        | Array of enabled tools                                |
-| `initialMemory`         | `CMNDChatMemory`      | `undefined` | Initial conversation memory                           |
-| `customStyles`          | `CustomStyles`        | `undefined` | Custom CSS styles                                     |
-| `Components`            | `Components`          | `undefined` | Custom component overrides                            |
-| `chatHistoryStorageKey` | `string`              | `undefined` | The chat history key defined by the client            |
+| Prop                    | Type                  | Default     | Description                                |
+| ----------------------- | --------------------- | ----------- | ------------------------------------------ |
+| `theme`                 | `"light" \| "dark"`   | `"light"`   | Theme for the chatbot                      |
+| `UITools`               | `CMNDChatbotUITool[]` | `[]`        | Array of UI tools                          |
+| `enabledTools`          | `any[]`               | `[]`        | Array of enabled tools                     |
+| `initialMemory`         | `CMNDChatMemory`      | `undefined` | Initial conversation memory                |
+| `customStyles`          | `CustomStyles`        | `undefined` | Custom CSS styles                          |
+| `Components`            | `Components`          | `undefined` | Custom component overrides                 |
+| `chatHistoryStorageKey` | `string`              | `undefined` | The chat history key defined by the client |
 
 ## Custom Components
 

package/dist/ChatProvider/index.d.ts

@@ -5,7 +5,7 @@ export declare const ChatProviderContext: React.Context<CmndChatContext | undefi
 export interface ChatProviderProps extends Omit<CmndChatBotProps, "postSessionMessage"> {
     children?: React.ReactNode | ((props: CmndChatBotProps) => React.ReactNode);
 }
-export declare const setCurrentConversationMemory: (memory: CMNDChatMemory) => Promise<import("axios").AxiosResponse<any, any> | undefined>;
-export declare const deleteCurrentConversationMemory: (memoryKeyToDelete: string) => Promise<import("axios").AxiosResponse<any, any> | undefined>;
+export declare const setCurrentConversationMemory: (memory: CMNDChatMemory) => Promise<import("axios").AxiosResponse<any, any, {}> | undefined>;
+export declare const deleteCurrentConversationMemory: (memoryKeyToDelete: string) => Promise<import("axios").AxiosResponse<any, any, {}> | undefined>;
 declare function ChatProvider(props: ChatProviderProps): JSX.Element | null;
 export default ChatProvider;

package/dist/ChatProvider/index.js

@@ -7,16 +7,16 @@ 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";
-let globalChatbotConversationId;
+let globalChatbotConversationRef;
 let globalChatbotProps;
 export const ChatProviderContext = React.createContext(undefined);
 export const setCurrentConversationMemory = async (memory) => {
     try {
-        if (!globalChatbotConversationId || !globalChatbotProps) {
+        if (!globalChatbotConversationRef || !globalChatbotProps) {
             return Promise.reject("setCurrentConversationMemory method is only available when user is interacting with an active chat thread.");
         }
         return await patchChatbotConversationMemory({
-            chatbotConversationId: globalChatbotConversationId,
+            chatbotConversationRef: globalChatbotConversationRef,
             memory,
             baseUrl: globalChatbotProps.baseUrl,
             chatbotId: globalChatbotProps.chatbotId,
@@ -29,11 +29,11 @@ export const setCurrentConversationMemory = async (memory) => {
 };
 export const deleteCurrentConversationMemory = async (memoryKeyToDelete) => {
     try {
-        if (!globalChatbotConversationId || !globalChatbotProps) {
+        if (!globalChatbotConversationRef || !globalChatbotProps) {
             return Promise.reject("deleteCurrentConversationMemory method is only available when user is interacting with an active chat thread.");
         }
         return await deleteChatbotConversationMemory({
-            chatbotConversationId: globalChatbotConversationId,
+            chatbotConversationRef: globalChatbotConversationRef,
             memoryKeyToDelete,
             baseUrl: globalChatbotProps.baseUrl,
             chatbotId: globalChatbotProps.chatbotId,
@@ -54,7 +54,7 @@ function ChatProvider(props) {
     const [canContinue] = useState(false);
     const [isChatLoading, setIsChatLoading] = useState(false);
     const [canSendMessage, setCanSendMessage] = useState(true);
-    const [chatbotConversationId, setChatbotConversationId] = useState(undefined);
+    const [chatbotConversationRef, setChatbotConversationRef] = useState(undefined);
     const [enabledTools, setEnabledTools] = useState([]);
     const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
     const [selectedConversation, setSelectedConversation] = useState(null);
@@ -63,8 +63,8 @@ function ChatProvider(props) {
     const [pendingSendText, setPendingSendText] = useState(null);
     const conversationsPanelRef = useRef(null);
     useEffect(() => {
-        globalChatbotConversationId = chatbotConversationId;
-    }, [chatbotConversationId]);
+        globalChatbotConversationRef = chatbotConversationRef;
+    }, [chatbotConversationRef]);
     useEffect(() => {
         setLoading(true);
         getEmbedChatBotById(baseUrl, organizationId, chatbotId)
@@ -86,8 +86,8 @@ function ChatProvider(props) {
             messages: newMessages,
             uiTools: parseUITools(UITools),
         };
-        if (chatbotConversationId) {
-            payload["chatbotConversationId"] = chatbotConversationId;
+        if (chatbotConversationRef) {
+            payload["chatbotConversationRef"] = chatbotConversationRef;
         }
         else {
             payload["initialMemory"] = initialMemory;
@@ -155,14 +155,14 @@ function ChatProvider(props) {
                 canSendMessage,
                 isChatLoading,
                 postSessionMessage,
-                setChatbotConversationId,
+                setChatbotConversationRef,
                 setIsChatLoading,
                 setCanSendMessage,
                 enabledTools: getTools({
                     apiTools: enabledTools,
                     uiTools: parseUITools(UITools),
                 }),
-                chatbotConversationId,
+                chatbotConversationRef,
                 UITools: parseUITools(UITools),
             },
             createNewConversation,
@@ -174,6 +174,6 @@ function ChatProvider(props) {
         }, 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),
-                    }), postSessionMessage: postSessionMessage, setChatbotConversationId: setChatbotConversationId, chatbotConversationId: chatbotConversationId, Components: Components, UITools: parseUITools(UITools), customStyles: props.customStyles, isSidebarCollapsed: isSidebarCollapsed, setIsSidebarCollapsed: setIsSidebarCollapsed, selectedConversation: selectedConversation, setSelectedConversation: setSelectedConversation, messages: messages, setMessages: setMessages, input: input, setInput: setInput, inputRef: inputRef })] })) }));
+                    }), postSessionMessage: postSessionMessage, setChatbotConversationRef: setChatbotConversationRef, chatbotConversationRef: chatbotConversationRef, Components: Components, UITools: parseUITools(UITools), customStyles: props.customStyles, isSidebarCollapsed: isSidebarCollapsed, setIsSidebarCollapsed: setIsSidebarCollapsed, selectedConversation: selectedConversation, setSelectedConversation: setSelectedConversation, messages: messages, setMessages: setMessages, input: input, setInput: setInput, inputRef: inputRef })] })) }));
 }
 export default ChatProvider;

package/dist/ChatProvider/processStream/index.js

@@ -3,6 +3,7 @@ const processStream = async (reader, onData) => {
     if (!onData)
         return;
     let fullAssistantMessage = "";
+    let functionName = "";
     let buffer = ""; // buffer to store incomplete JSON string fragments
     try {
         while (true) {
@@ -44,19 +45,32 @@ const processStream = async (reader, onData) => {
                         });
                     }
                     else if (dataObject.function_call) {
-                        // console.log("no processing necessary");
+                        const { name } = dataObject.function_call;
+                        if (name)
+                            functionName = name;
+                        onData({
+                            completionFinished: false,
+                            finalResponseWithUsageData: false,
+                            streamingFunctionCall: true,
+                            functionName,
+                        });
+                    }
+                    else if (dataObject.function_result) {
+                        onData({
+                            completionFinished: false,
+                            finalResponseWithUsageData: false,
+                            streamingFunctionCall: false,
+                            functionResult: dataObject.function_result,
+                        });
                     }
                     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, conversationId, chatbotConversationId, totalTokens, totalCost, } = dataObject;
+                        const { messages, completionFinished, finalResponseWithUsageData, conversationRef, chatbotConversationRef, totalTokens, totalCost, } = dataObject;
                         onData({
                             messages,
                             completionFinished,
                             finalResponseWithUsageData,
-                            conversationId,
-                            chatbotConversationId,
+                            conversationRef,
+                            chatbotConversationRef,
                             totalTokens,
                             totalCost,
                         });
@@ -69,13 +83,23 @@ const processStream = async (reader, onData) => {
                         continue;
                     }
                     console.error("StreamError caught", error);
-                    onData({
-                        completionFinished: true,
-                        message: error instanceof StreamError
-                            ? error.message
-                            : "Oops! I ran into a problem.",
-                        finalResponseWithUsageData: true,
-                    });
+                    if (error instanceof StreamError) {
+                        onData({
+                            completionFinished: true,
+                            message: error.message,
+                            finalResponseWithUsageData: true,
+                            hasError: true,
+                            errorPath: error.path,
+                        });
+                    }
+                    else {
+                        onData({
+                            completionFinished: true,
+                            message: "Oops! I ran into a problem.",
+                            finalResponseWithUsageData: true,
+                            hasError: true,
+                        });
+                    }
                 }
             }
         }
@@ -85,11 +109,12 @@ const processStream = async (reader, onData) => {
         }
     }
     catch (error) {
-        console.error("Error processing stream", error);
+        console.error("Fatal error in processStream", error);
         onData({
             completionFinished: true,
             message: "Oops! I ran into a problem.",
             finalResponseWithUsageData: true,
+            hasError: true,
         });
     }
 };

package/dist/CmndChatBot/index.d.ts

@@ -20,6 +20,7 @@ export interface CmndChatBotProps {
         LoadingIndicator?: () => JSX.Element;
         error?: any;
     };
+    cleanResponse?: boolean;
 }
-declare function CmndChatBot({ chatbotId, organizationId, apiKey, baseUrl, theme, UITools, customStyles, chatHistoryStorageKey, enabledTools, Components, initialMemory, }: CmndChatBotProps): JSX.Element;
+declare function CmndChatBot({ chatbotId, organizationId, apiKey, baseUrl, theme, UITools, customStyles, chatHistoryStorageKey, enabledTools, Components, initialMemory, cleanResponse, }: CmndChatBotProps): JSX.Element;
 export default CmndChatBot;

package/dist/CmndChatBot/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ChatProvider from "../ChatProvider/index.js";
-function CmndChatBot({ chatbotId, organizationId, apiKey, baseUrl, theme, UITools, customStyles, chatHistoryStorageKey, enabledTools = [], Components, initialMemory, }) {
-    return (_jsx(ChatProvider, { chatbotId: chatbotId, organizationId: organizationId, chatHistoryStorageKey: chatHistoryStorageKey, apiKey: apiKey, baseUrl: baseUrl, theme: theme, UITools: UITools, customStyles: customStyles, enabledTools: enabledTools, Components: Components, initialMemory: initialMemory }));
+function CmndChatBot({ chatbotId, organizationId, apiKey, baseUrl, theme, UITools, customStyles, chatHistoryStorageKey, enabledTools = [], Components, initialMemory, cleanResponse, }) {
+    return (_jsx(ChatProvider, { chatbotId: chatbotId, organizationId: organizationId, chatHistoryStorageKey: chatHistoryStorageKey, apiKey: apiKey, baseUrl: baseUrl, theme: theme, UITools: UITools, customStyles: customStyles, enabledTools: enabledTools, Components: Components, initialMemory: initialMemory, cleanResponse: cleanResponse }));
 }
 export default CmndChatBot;

package/dist/components/Chatbubble.d.ts

@@ -11,7 +11,7 @@ interface ChatBubbleProps {
     hide?: boolean;
     id: string;
     isLoadingBubble?: boolean;
-    setChatbotConversationId: Dispatch<SetStateAction<number | undefined>>;
+    setChatbotConversationRef: Dispatch<SetStateAction<string | undefined>>;
     setCanSendMessage: Dispatch<SetStateAction<boolean>>;
     setIsChatLoading: Dispatch<SetStateAction<boolean>>;
     UITools?: CMNDChatbotUITool[];
@@ -29,5 +29,5 @@ interface ChatBubbleProps {
         error?: any;
     };
 }
-declare const Chatbubble: ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, theme, Components, }: ChatBubbleProps) => JSX.Element | null;
+declare const Chatbubble: ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationRef, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, theme, Components, }: ChatBubbleProps) => JSX.Element | null;
 export default Chatbubble;

package/dist/components/Chatbubble.js

@@ -27,7 +27,7 @@ const patchLastMessageToolInfo = (messages, toolInfo) => {
     const newMessages = [...shallowCopyOfMessagesWithoutLast, copyOfLastMessage];
     return newMessages;
 };
-const confirmToolRun = async ({ messages, setMessages, postSessionMessage, setIsChatLoading, setCanSendMessage, setChatbotConversationId, chatbotId, organizationId, chatHistoryStorageKey }) => {
+const confirmToolRun = async ({ messages, setMessages, postSessionMessage, setIsChatLoading, setCanSendMessage, setChatbotConversationRef, chatbotId, organizationId, chatHistoryStorageKey, }) => {
     const newMessages = patchLastMessageToolInfo(messages, {
         confirmed: true,
     });
@@ -38,14 +38,14 @@ const confirmToolRun = async ({ messages, setMessages, postSessionMessage, setIs
         if (data.finalResponseWithUsageData) {
             setCanSendMessage(true);
             setIsChatLoading(false);
-            const { messages, chatbotConversationId } = data;
-            if (chatbotConversationId) {
-                setChatbotConversationId(chatbotConversationId);
+            const { messages, chatbotConversationRef } = data;
+            if (chatbotConversationRef) {
+                setChatbotConversationRef(chatbotConversationRef);
                 await saveConversationIdToLocalStorage({
-                    chatbotConversationId,
+                    chatbotConversationRef,
                     chatbotId,
                     organizationId,
-                    chatHistoryStorageKey
+                    chatHistoryStorageKey,
                 });
             }
             messages && setMessages(messages);
@@ -76,7 +76,7 @@ const getChatAvatar = (role, theme = "light", Components) => {
             return _jsx(BsRobot, { color: iconColor });
     }
 };
-const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, theme, Components, }) => {
+const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationRef, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, theme, Components, }) => {
     const toolData = tools?.find((t) => t.name === toolCallDetails?.name);
     const hasConfirmedToolRun = useRef(false);
     const isPostingMessage = useRef(false);
@@ -93,7 +93,7 @@ const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage,
                 postSessionMessage,
                 setIsChatLoading,
                 setCanSendMessage,
-                setChatbotConversationId,
+                setChatbotConversationRef,
                 chatbotId,
                 organizationId,
                 chatHistoryStorageKey,
@@ -154,9 +154,9 @@ const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage,
                                         if (data.finalResponseWithUsageData) {
                                             setIsChatLoading(false);
                                             setCanSendMessage(true);
-                                            const { chatbotConversationId, messages } = data;
-                                            if (chatbotConversationId) {
-                                                setChatbotConversationId(chatbotConversationId);
+                                            const { chatbotConversationRef, messages } = data;
+                                            if (chatbotConversationRef) {
+                                                setChatbotConversationRef(chatbotConversationRef);
                                             }
                                             messages && setMessages(messages);
                                         }

package/dist/components/Conversation.d.ts

@@ -9,8 +9,8 @@ export interface ConversationProps {
     isChatLoading: boolean;
     error: string | null;
     messagesRef: React.RefObject<HTMLDivElement>;
-    setChatbotConversationId: Dispatch<React.SetStateAction<number | undefined>>;
-    chatbotConversationId: number | undefined;
+    setChatbotConversationRef: Dispatch<SetStateAction<string | undefined>>;
+    chatbotConversationRef: string | undefined;
     setIsChatLoading: Dispatch<SetStateAction<boolean>>;
     setCanSendMessage: Dispatch<SetStateAction<boolean>>;
     canSendMessage: boolean;
@@ -32,5 +32,5 @@ export interface ConversationProps {
     resetMessagesScroll?: () => void;
     inputRef?: React.RefObject<HTMLInputElement>;
 }
-declare const Conversation: ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, canSendMessage, setInput, input, theme, Components, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, isMessagesScrolledToBottom, resetMessagesScroll, inputRef, }: ConversationProps) => JSX.Element;
+declare const Conversation: ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationRef, setIsChatLoading, setCanSendMessage, canSendMessage, setInput, input, theme, Components, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, isMessagesScrolledToBottom, resetMessagesScroll, inputRef, }: ConversationProps) => JSX.Element;
 export default Conversation;

package/dist/components/Conversation.js

@@ -3,8 +3,8 @@ import Chatbubble from "./Chatbubble.js";
 import LoadingBubble from "./LoadingBubble.js";
 import ScrollToBottomButton from "./ScrollToBottomButton.js";
 import ChatInputBox from "./ChatInputBox.js";
-const Conversation = ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, canSendMessage, setInput, input, theme, Components, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, isMessagesScrolledToBottom = true, resetMessagesScroll, inputRef, }) => {
-    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, { chatbotId: chatbotId, organizationId: organizationId, chatHistoryStorageKey: chatHistoryStorageKey, 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, UITools: UITools, theme: theme, Components: Components }, i))), isChatLoading ? (_jsx(LoadingBubble, { customStyles: customStyles, chatbotId: chatbotId, organizationId: organizationId, theme: theme, Components: Components })) : null] }), _jsx(ScrollToBottomButton, { onClick: resetMessagesScroll || (() => { }), isVisible: !isMessagesScrolledToBottom && messages.length > 0, theme: theme, customStyles: customStyles }), _jsxs("div", { id: "cmnd-input-div", className: "cmnd-input-div", children: [Components?.InputField ? (_jsx(Components.InputField, { ...{ input, setInput, canSendMessage, handleSendClick, inputRef } })) : (_jsx(ChatInputBox, { input: input, setInput: setInput, handleSendClick: handleSendClick, inputRef: inputRef })), Components?.SendButton ? (_jsx(Components.SendButton, { ...{
+const Conversation = ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationRef, setIsChatLoading, setCanSendMessage, canSendMessage, setInput, input, theme, Components, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, isMessagesScrolledToBottom = true, resetMessagesScroll, inputRef, }) => {
+    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, { chatbotId: chatbotId, organizationId: organizationId, chatHistoryStorageKey: chatHistoryStorageKey, 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, setChatbotConversationRef: setChatbotConversationRef, setIsChatLoading: setIsChatLoading, setCanSendMessage: setCanSendMessage, UITools: UITools, theme: theme, Components: Components }, i))), isChatLoading ? (_jsx(LoadingBubble, { customStyles: customStyles, chatbotId: chatbotId, organizationId: organizationId, theme: theme, Components: Components })) : null] }), _jsx(ScrollToBottomButton, { onClick: resetMessagesScroll || (() => { }), isVisible: !isMessagesScrolledToBottom && messages.length > 0, theme: theme, customStyles: customStyles }), _jsxs("div", { id: "cmnd-input-div", className: "cmnd-input-div", children: [Components?.InputField ? (_jsx(Components.InputField, { ...{ input, setInput, canSendMessage, handleSendClick, inputRef } })) : (_jsx(ChatInputBox, { input: input, setInput: setInput, handleSendClick: handleSendClick, inputRef: inputRef })), Components?.SendButton ? (_jsx(Components.SendButton, { ...{
                             canSendMessage,
                             handleSendClick,
                         } })) : (_jsx("button", { className: "cmnd-send-button", onClick: handleSendClick, children: "Send" }))] })] }));

package/dist/components/ConversationCard.js

@@ -59,7 +59,7 @@ const ConversationCard = ({ conversation, isActive, onClick, onDelete, theme = "
                                 fontSize: "12px",
                                 color: colors.secondaryText,
                                 ...customStyles?.dateStyle,
-                            }, children: formatDate(conversation.updatedAt) })] }), onDelete && (_jsx("button", { className: "cmnd-conversation-delete", onClick: (e) => {
+                            }, children: formatDate(conversation.updatedAt ?? conversation.createdAt) })] }), onDelete && (_jsx("button", { className: "cmnd-conversation-delete", onClick: (e) => {
                         e.stopPropagation();
                         onDelete();
                     }, style: {

package/dist/components/ConversationsPanel/index.d.ts

@@ -7,8 +7,8 @@ interface ConversationsPanelProps {
     chatHistoryStorageKey?: string;
     theme?: "light" | "dark";
     enabledTools?: any[];
-    setChatbotConversationId: Dispatch<SetStateAction<number | undefined>>;
-    chatbotConversationId: number | undefined;
+    setChatbotConversationRef: Dispatch<SetStateAction<string | undefined>>;
+    chatbotConversationRef: string | undefined;
     postSessionMessage: (newMessages: any, onData: any) => Promise<any>;
     Components?: {
         InputField?: (params: InputFieldProps) => JSX.Element;