@cmnd-ai/chatbot-react 1.7.1 → 1.9.0

package/Readme.md

@@ -1,38 +1,262 @@
-## @cmnd-ai/chatbot-react
+# @cmnd-ai/chatbot-react
 
-This npm package provides a customizable chatbot component for use in web applications, designed specifically for React environments.
+A fully customizable React chatbot component with conversation management, themes, and custom components support.
 
-### Installation
+## Features
 
-You can install the `@cmnd-ai/chatbot-react` from npm using npm or yarn:
+- 🤖 **Conversation Management**: Full conversation history with create, select, and delete functionality
+- 🎨 **Theme Support**: Light and dark themes with customizable styling
+- 🧩 **Custom Components**: Replace any UI component with your own (input fields, buttons, avatars, loading indicators)
+- 💾 **Local Storage**: Automatic conversation persistence
+- 📱 **Responsive Design**: Works on desktop and mobile devices
+- ⚡ **Real-time Streaming**: Live message streaming with loading states
+- 🛠️ **Tool Integration**: Support for UI and backend tools
+- 🔄 **Auto-refresh**: Keep conversations up to date
+
+## Installation
 
 ```bash
 npm install @cmnd-ai/chatbot-react
 ```
 
-### With yarn
+or
 
 ```bash
 yarn add @cmnd-ai/chatbot-react
 ```
 
-### Example implementation
+## Basic Usage
 
-```javascript
-import { ChatProvider } from "@cmnd-ai/chatbot-react";
-import "@cmnd-ai/chatbot-react/dist/styles/index.css"
+```tsx
+import CmndChatBot from "@cmnd-ai/chatbot-react";
+import "@cmnd-ai/chatbot-react/dist/styles/index.css";
 
 const App = () => {
   return (
-    <ChatProvider
-      baseUrl="<your-cmnd-api-base-url>"
-      chatbotId={"<your-chatbot-id>"}
-      organizationId={"<your-organization-id>"}
+    <CmndChatBot
+      chatbotId={123}
+      organizationId={456}
+      apiKey="your-api-key"
+      baseUrl="https://api.example.com"
+    />
+  );
+};
+```
+
+## Advanced Usage with Custom Components
+
+```tsx
+import CmndChatBot from "@cmnd-ai/chatbot-react";
+import { FaUserCircle } from "react-icons/fa";
+import { BsRobot, BsTools } from "react-icons/bs";
+import "@cmnd-ai/chatbot-react/dist/styles/index.css";
+
+const App = () => {
+  return (
+    <CmndChatBot
+      chatbotId={123}
+      organizationId={456}
+      apiKey="your-api-key"
+      baseUrl="https://api.example.com"
+      theme="dark"
+      Components={{
+        // Custom avatar components
+        BotAvatar: () => <BsRobot size={24} color="#373E4E" />,
+        UserAvatar: () => <FaUserCircle size={24} color="#7A8194" />,
+        ToolAvatar: () => <BsTools size={24} color="#FF6B6B" />,
+
+        // Custom loading indicator
+        LoadingIndicator: () => <div>🤔 Thinking...</div>,
+
+        // Custom input field
+        InputField: ({ input, setInput, canSendMessage, handleSendClick }) => (
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            disabled={!canSendMessage}
+            onKeyPress={(e) => e.key === "Enter" && handleSendClick()}
+            placeholder="Type your message..."
+            style={{
+              padding: "12px",
+              borderRadius: "8px",
+              border: "1px solid #ccc",
+            }}
+          />
+        ),
+
+        // Custom send button
+        SendButton: ({ canSendMessage, handleSendClick }) => (
+          <button
+            onClick={handleSendClick}
+            disabled={!canSendMessage}
+            style={{
+              padding: "12px 24px",
+              backgroundColor: canSendMessage ? "#373E4E" : "#ccc",
+              color: "white",
+              border: "none",
+              borderRadius: "8px",
+              cursor: canSendMessage ? "pointer" : "not-allowed",
+            }}
+          >
+            Send
+          </button>
+        ),
+      }}
+      customStyles={{
+        // Custom styling
+        panelStyle: { backgroundColor: "#f5f5f5" },
+        chatbubbleStyle: { borderRadius: "12px" },
+        botChatbubbleStyle: { backgroundColor: "#373E4E" },
+        userChatbubbleStyle: { backgroundColor: "#7A8194" },
+      }}
     />
   );
 };
+```
+
+## Props
+
+### Required Props
+
+| Prop             | Type     | Description                     |
+| ---------------- | -------- | ------------------------------- |
+| `chatbotId`      | `number` | Your chatbot ID                 |
+| `organizationId` | `number` | Your organization ID            |
+| `baseUrl`        | `string` | Your CMND API base URL          |
+| `apiKey`         | `string` | Your API key for authentication |
+
+### 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  |
+
+## Custom Components
 
-export default App;
+You can replace any UI component with your own implementation:
+
+### Avatar Components
+
+```tsx
+Components={{
+  BotAvatar: () => <YourBotIcon />,
+  UserAvatar: () => <YourUserIcon />,
+  ToolAvatar: () => <YourToolIcon />
+}}
+```
+
+### Input Components
+
+```tsx
+Components={{
+  InputField: ({ input, setInput, canSendMessage, handleSendClick }) => (
+    <YourCustomInput />
+  ),
+  SendButton: ({ canSendMessage, handleSendClick }) => (
+    <YourCustomButton />
+  )
+}}
 ```
 
-For more information on customizing the chatbot components, please refer [here](https://github.com/CyprusCodes/cmnd-react-chatbot-example.git)
+### Loading Component
+
+```tsx
+Components={{
+  LoadingIndicator: () => <YourCustomLoader />
+}}
+```
+
+## Custom Styles
+
+You can customize the appearance using the `customStyles` prop:
+
+```tsx
+customStyles={{
+  // Panel and layout styles
+  panelStyle: { backgroundColor: '#f5f5f5' },
+  sidebarStyle: { width: '350px' },
+  conversationListStyle: { padding: '16px' },
+
+  // Header styles
+  headerStyle: { padding: '20px' },
+  newChatButtonStyle: { backgroundColor: '#007bff' },
+  refreshButtonStyle: { backgroundColor: '#28a745' },
+
+  // Conversation card styles
+  conversationCardStyle: { borderRadius: '8px' },
+  activeConversationCardStyle: { borderColor: '#007bff' },
+  titleStyle: { fontSize: '16px' },
+  dateStyle: { fontSize: '12px' },
+  deleteButtonStyle: { color: '#dc3545' },
+
+  // Chat bubble styles
+  chatbubbleStyle: { borderRadius: '12px' },
+  botChatbubbleStyle: { backgroundColor: '#373E4E' },
+  userChatbubbleStyle: { backgroundColor: '#7A8194' },
+  chatAvatarStyle: { fontSize: '24px' },
+
+  // Input styles
+  inputStyle: { padding: '12px' },
+  sendButtonStyle: { backgroundColor: '#373E4E' }
+}}
+```
+
+## Conversation Management
+
+The chatbot automatically handles:
+
+- **Creating new conversations** when you start chatting
+- **Loading existing conversations** from localStorage
+- **Switching between conversations** by clicking on them
+- **Deleting conversations** with the delete button
+- **Auto-refreshing** conversation list
+- **Persistent storage** of conversation IDs
+
+## Theme Support
+
+The chatbot supports light and dark themes with automatic color schemes:
+
+- **Light Theme**: Clean white background with dark text
+- **Dark Theme**: Dark background with light text
+- **Custom Colors**: Override any color with `customStyles`
+
+## Tool Integration
+
+Support for both UI and backend tools:
+
+```tsx
+const UITools = [
+  {
+    name: "calculator",
+    description: "Perform calculations",
+    category: "utility",
+    argumentSchema: {
+      type: "object",
+      properties: {
+        expression: { type: "string", description: "Math expression" },
+      },
+    },
+    runCmd: ({ functionArgs }) => {
+      // Your tool implementation
+    },
+  },
+];
+```
+
+## Examples
+
+For more detailed examples and implementations, check out our [example repository](https://github.com/CyprusCodes/cmnd-react-chatbot-example.git).
+
+## Contributing
+
+We welcome contributions! Please feel free to submit a Pull Request.
+
+## License
+
+This project is licensed under the MIT License.

package/dist/ChatProvider/index.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { CmndChatBotProps } from "../CmndChatBot/index.js";
 import { CmndChatContext, CMNDChatMemory } from "../type.js";
 export declare const ChatProviderContext: React.Context<CmndChatContext | undefined>;
-export interface ChatProviderProps extends CmndChatBotProps {
+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>;

package/dist/ChatProvider/index.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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";
 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";
+import { ConversationsPanel, } from "../components/ConversationsPanel/index.js";
 let globalChatbotConversationId;
 let globalChatbotProps;
 export const ChatProviderContext = React.createContext(undefined);
@@ -55,9 +54,14 @@ function ChatProvider(props) {
     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([]);
+    const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+    const [selectedConversation, setSelectedConversation] = useState(null);
+    const inputRef = useRef(null);
+    const [shouldFocusInput, setShouldFocusInput] = useState(false);
+    const [pendingSendText, setPendingSendText] = useState(null);
+    const conversationsPanelRef = useRef(null);
     useEffect(() => {
         globalChatbotConversationId = chatbotConversationId;
     }, [chatbotConversationId]);
@@ -75,14 +79,6 @@ function ChatProvider(props) {
             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;
@@ -104,50 +100,48 @@ function ChatProvider(props) {
             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 {
-            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();
-                }
-            };
-            setCanSendMessage(false);
-            await postSessionMessage(newMessages, onData);
+    const toggleSidebar = () => {
+        setIsSidebarCollapsed((prev) => !prev);
+    };
+    const openSidePanel = () => {
+        setIsSidebarCollapsed(false);
+    };
+    const closeSidePanel = () => {
+        setIsSidebarCollapsed(true);
+    };
+    const createNewConversation = () => {
+        conversationsPanelRef.current?.handleNewChat();
+    };
+    const setMessageText = (text) => {
+        setInput(text);
+        setShouldFocusInput(true);
+    };
+    useEffect(() => {
+        if (shouldFocusInput) {
+            inputRef.current?.focus();
+            if (inputRef.current) {
+                const len = inputRef.current.value.length;
+                inputRef.current.setSelectionRange(len, len);
+            }
+            setShouldFocusInput(false);
         }
-        catch (error) {
-            console.error(error);
-            setError("Error sending message");
+    }, [input, shouldFocusInput]);
+    const sendMessage = (text) => {
+        if (typeof text === "string") {
+            setInput(text);
+            setShouldFocusInput(true);
+            setPendingSendText(text);
+        }
+        else {
+            conversationsPanelRef.current?.handleSendClick();
         }
     };
+    useEffect(() => {
+        if (pendingSendText !== null && input === pendingSendText) {
+            conversationsPanelRef.current?.handleSendClick();
+            setPendingSendText(null);
+        }
+    }, [input, pendingSendText]);
     if (loading)
         return null;
     return (_jsx(ChatProviderContext.Provider, { value: {
@@ -164,7 +158,6 @@ function ChatProvider(props) {
                 setChatbotConversationId,
                 setIsChatLoading,
                 setCanSendMessage,
-                scrollToBottom,
                 enabledTools: getTools({
                     apiTools: enabledTools,
                     uiTools: parseUITools(UITools),
@@ -172,9 +165,15 @@ function ChatProvider(props) {
                 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: getTools({
+            createNewConversation,
+            toggleSidebar,
+            openSidePanel,
+            closeSidePanel,
+            setMessageText,
+            sendMessage,
+        }, children: error ? (_jsx("div", { children: "An error occured" })) : (_jsxs(_Fragment, { children: [props.children, _jsx(ConversationsPanel, { ref: conversationsPanelRef, organizationId: organizationId, chatbotId: chatbotId, baseUrl: baseUrl, theme: props.theme, enabledTools: getTools({
                         apiTools: enabledTools,
                         uiTools: parseUITools(UITools),
-                    }), Components: Components, UITools: parseUITools(UITools), customStyles: props.customStyles, chatbotConversationId: chatbotConversationId, setCurrentConversationMemory: setCurrentConversationMemory })] })) }));
+                    }), 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 })] })) }));
 }
 export default ChatProvider;

package/dist/ChatProvider/useChatContext.d.ts

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

package/dist/ChatProvider/useChatContext.js

@@ -1,9 +1,9 @@
 import { useContext } from "react";
 import { ChatProviderContext } from "./index.js";
-const useChatContext = () => {
+const useCMNDChatContext = () => {
     const context = useContext(ChatProviderContext);
     if (!context)
         throw new Error("Cmnd chat context must be wrapped in a provider");
     return context;
 };
-export default useChatContext;
+export { useCMNDChatContext };

package/dist/CmndChatBot/index.d.ts

@@ -1,13 +1,24 @@
-import { CMNDChatbotUITool, CMNDChatMemory, CustomStyles } from "../type.js";
-import { ConversationProps } from "../components/Conversation.js";
-export interface CmndChatBotProps extends Pick<ConversationProps, "Components"> {
+/// <reference types="react" />
+import { CMNDChatbotUITool, CMNDChatMemory, CustomStyles, InputFieldProps, SendButtonProps } from "../type.js";
+export interface CmndChatBotProps {
     chatbotId: number;
     organizationId: number;
     apiKey?: string;
     baseUrl: string;
+    theme?: "light" | "dark";
     UITools?: CMNDChatbotUITool[];
     customStyles?: CustomStyles;
     initialMemory?: CMNDChatMemory;
+    enabledTools?: any[];
+    Components?: {
+        InputField?: (params: InputFieldProps) => JSX.Element;
+        SendButton?: (params: SendButtonProps) => JSX.Element;
+        BotAvatar?: () => JSX.Element;
+        UserAvatar?: () => JSX.Element;
+        ToolAvatar?: () => JSX.Element;
+        LoadingIndicator?: () => JSX.Element;
+        error?: any;
+    };
 }
-declare function CmndChatBot(): import("../type.js").CmndChatContext;
+declare function CmndChatBot({ chatbotId, organizationId, apiKey, baseUrl, theme, UITools, customStyles, enabledTools, Components, initialMemory, }: CmndChatBotProps): JSX.Element;
 export default CmndChatBot;

package/dist/CmndChatBot/index.js

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

package/dist/components/ChatInputBox.d.ts

@@ -3,6 +3,7 @@ interface ChatInputBoxProps {
     input: string;
     setInput: (input: string) => void;
     handleSendClick: () => void;
+    inputRef?: React.RefObject<HTMLInputElement>;
 }
-declare const ChatInputBox: ({ input, setInput, handleSendClick }: ChatInputBoxProps) => JSX.Element;
+declare const ChatInputBox: ({ input, setInput, handleSendClick, inputRef, }: ChatInputBoxProps) => JSX.Element;
 export default ChatInputBox;

package/dist/components/ChatInputBox.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const ChatInputBox = ({ input, setInput, handleSendClick }) => {
-    return (_jsx("div", { className: "cmnd-input-wrapper", children: _jsx("input", { autoFocus: true, id: "cmnd-input", className: "cmnd-input", onKeyDown: e => {
+const ChatInputBox = ({ input, setInput, handleSendClick, inputRef, }) => {
+    return (_jsx("div", { className: "cmnd-input-wrapper", children: _jsx("input", { ref: inputRef, autoFocus: true, 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..." }) }));
+            }, autoComplete: "off", value: input, onChange: (e) => setInput(e.target.value), type: "text", placeholder: "Type something..." }) }));
 };
 export default ChatInputBox;

package/dist/components/Chatbubble.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, ReactNode, SetStateAction } from "react";
-import { MessageRole, ToolDetails, ToolData, CustomStyles, CMNDChatbotUITool } from "../type.js";
+import { MessageRole, ToolDetails, ToolData, CustomStyles, CMNDChatbotUITool, InputFieldProps, SendButtonProps } from "../type.js";
 interface ChatBubbleProps {
     message: string | ReactNode | null;
     role: MessageRole;
@@ -14,9 +14,19 @@ interface ChatBubbleProps {
     setChatbotConversationId: Dispatch<SetStateAction<number | undefined>>;
     setCanSendMessage: Dispatch<SetStateAction<boolean>>;
     setIsChatLoading: Dispatch<SetStateAction<boolean>>;
-    scrollToBottom: () => void;
     UITools?: CMNDChatbotUITool[];
     customStyles?: CustomStyles;
+    chatbotId: number;
+    organizationId: number;
+    theme?: "light" | "dark";
+    Components?: {
+        InputField?: (params: InputFieldProps) => JSX.Element;
+        SendButton?: (params: SendButtonProps) => JSX.Element;
+        BotAvatar?: () => JSX.Element;
+        UserAvatar?: () => JSX.Element;
+        ToolAvatar?: () => JSX.Element;
+        error?: any;
+    };
 }
-declare const Chatbubble: ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, scrollToBottom, isLoadingBubble, UITools, customStyles, }: ChatBubbleProps) => JSX.Element | null;
+declare const Chatbubble: ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, theme, Components, }: ChatBubbleProps) => JSX.Element | null;
 export default Chatbubble;

package/dist/components/Chatbubble.js

@@ -11,6 +11,7 @@ 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";
+import saveConversationIdToLocalStorage from "../utils/saveConversationIdToLocalStorage/index.js";
 const patchLastMessageToolInfo = (messages, toolInfo) => {
     console.log("patchLastMessageToolInfo", messages, toolInfo);
     const lastMessage = messages[messages.length - 1];
@@ -26,25 +27,25 @@ const patchLastMessageToolInfo = (messages, toolInfo) => {
     const newMessages = [...shallowCopyOfMessagesWithoutLast, copyOfLastMessage];
     return newMessages;
 };
-const confirmToolRun = async ({ messages, setMessages, postSessionMessage, setIsChatLoading, setCanSendMessage, setChatbotConversationId, scrollToBottom, }) => {
+const confirmToolRun = async ({ messages, setMessages, postSessionMessage, setIsChatLoading, setCanSendMessage, setChatbotConversationId, chatbotId, organizationId, }) => {
     const newMessages = patchLastMessageToolInfo(messages, {
         confirmed: true,
     });
     setIsChatLoading(true);
     setCanSendMessage(false);
     setMessages(newMessages);
-    await postSessionMessage(newMessages, (data) => {
+    await postSessionMessage(newMessages, async (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!
-                // );
+                await saveConversationIdToLocalStorage({
+                    chatbotConversationId,
+                    chatbotId,
+                    organizationId,
+                });
             }
             messages && setMessages(messages);
         }
@@ -58,23 +59,23 @@ const confirmToolRun = async ({ messages, setMessages, postSessionMessage, setIs
             };
             newAssistantMessage.message = data.message;
             setMessages([...newMessages, newAssistantMessage]);
-            scrollToBottom();
         }
     });
 };
-const getChatAvatar = (role) => {
+const getChatAvatar = (role, theme = "light", Components) => {
+    const iconColor = theme === "dark" ? "#ffffff" : "#000000";
     switch (role) {
         case MessageRole.USER:
-            return _jsx(FaUserCircle, {});
+            return Components?.UserAvatar ? (_jsx(Components.UserAvatar, {})) : (_jsx(FaUserCircle, { color: iconColor }));
         case MessageRole.FUNCTION:
-            return _jsx(BsTools, {});
+            return Components?.ToolAvatar ? (_jsx(Components.ToolAvatar, {})) : (_jsx(BsTools, { color: iconColor }));
         case MessageRole.ASSISTANT:
-            return _jsx(BsRobot, {});
+            return Components?.BotAvatar ? (_jsx(Components.BotAvatar, {})) : (_jsx(BsRobot, { color: iconColor }));
         default:
-            return _jsx(BsRobot, {});
+            return _jsx(BsRobot, { color: iconColor });
     }
 };
-const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, scrollToBottom, isLoadingBubble, UITools, customStyles, }) => {
+const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, theme, Components, }) => {
     const toolData = tools?.find((t) => t.name === toolCallDetails?.name);
     const hasConfirmedToolRun = useRef(false);
     const isPostingMessage = useRef(false);
@@ -92,7 +93,8 @@ const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage,
                 setIsChatLoading,
                 setCanSendMessage,
                 setChatbotConversationId,
-                scrollToBottom,
+                chatbotId,
+                organizationId,
             });
         }
     }, []);
@@ -120,7 +122,7 @@ const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage,
     return (_jsxs("div", { style: defaultStyle, className: `cmnd-chatbot-chat-bubble ${role}`, children: [_jsx("span", { style: overrideStyle({
                     fontSize: "30px",
                     color: "black",
-                }, customStyles?.chatAvatarStyle), children: getChatAvatar(role) }), _jsxs("span", { style: chatBubbleCustomStyle, children: [role === MessageRole.USER || isLoadingBubble ? (_jsx("span", { children: message })) : (_jsx(ReactMarkdown, { className: "markdown", remarkPlugins: [remarkGfm], children: message?.toString() ?? "", remarkRehypeOptions: { passThrough: ["link"] }, components: {
+                }, customStyles?.chatAvatarStyle), children: getChatAvatar(role, theme, Components) }), _jsxs("span", { style: chatBubbleCustomStyle, 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 }) {
@@ -165,7 +167,6 @@ const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage,
                                                 message: data.message,
                                             };
                                             setMessages([...newMessages, newAssistantMessage]);
-                                            scrollToBottom();
                                         }
                                     };
                                     try {