@cmnd-ai/chatbot-react 1.7.1 → 1.8.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,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, 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 saveConversationIdToLocalStorage from "../utils/saveConversationIdToLocalStorage/index.js";
+import { ConversationsPanel } from "../components/ConversationsPanel/index.js";
+import useMessagesScroll from "../hooks/use-messages-scroll.js";
 let globalChatbotConversationId;
 let globalChatbotProps;
 export const ChatProviderContext = React.createContext(undefined);
@@ -55,7 +57,7 @@ function ChatProvider(props) {
     const [canContinue] = useState(false);
     const [isChatLoading, setIsChatLoading] = useState(false);
     const [canSendMessage, setCanSendMessage] = useState(true);
-    const messagesRef = useRef(null);
+    const { messagesRef, resetMessagesScroll, isMessagesScrolledToBottom } = useMessagesScroll(messages);
     const [chatbotConversationId, setChatbotConversationId] = useState(undefined);
     const [enabledTools, setEnabledTools] = useState([]);
     useEffect(() => {
@@ -75,14 +77,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;
@@ -118,13 +112,18 @@ function ChatProvider(props) {
         setInput("");
         setIsChatLoading(true);
         try {
-            const onData = (data) => {
+            const onData = async (data) => {
                 if (data.finalResponseWithUsageData) {
                     setIsChatLoading(false);
                     setCanSendMessage(true);
                     const { chatbotConversationId, messages } = data;
                     if (chatbotConversationId) {
                         setChatbotConversationId(chatbotConversationId);
+                        await saveConversationIdToLocalStorage({
+                            chatbotConversationId,
+                            chatbotId,
+                            organizationId,
+                        });
                     }
                     messages && setMessages(messages);
                 }
@@ -137,7 +136,6 @@ function ChatProvider(props) {
                         message: data.message,
                     };
                     setMessages([...newMessages, newAssistantMessage]);
-                    scrollToBottom();
                 }
             };
             setCanSendMessage(false);
@@ -164,7 +162,6 @@ function ChatProvider(props) {
                 setChatbotConversationId,
                 setIsChatLoading,
                 setCanSendMessage,
-                scrollToBottom,
                 enabledTools: getTools({
                     apiTools: enabledTools,
                     uiTools: parseUITools(UITools),
@@ -172,9 +169,9 @@ 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({
+        }, children: error ? (_jsx("div", { children: "An error occured" })) : (_jsxs(_Fragment, { children: [props.children, _jsx(ConversationsPanel, { 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 })] })) }));
 }
 export default ChatProvider;

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/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 {

package/dist/components/Conversation.d.ts

@@ -14,9 +14,9 @@ export interface ConversationProps {
     setIsChatLoading: Dispatch<SetStateAction<boolean>>;
     setCanSendMessage: Dispatch<SetStateAction<boolean>>;
     canSendMessage: boolean;
-    scrollToBottom: () => void;
     enabledTools: any[];
-    postSessionMessage: (message: string, onData: any) => void;
+    postSessionMessage: (newMessages: any, onData: any) => Promise<any>;
+    theme?: "light" | "dark";
     Components?: {
         InputField?: (params: InputFieldProps) => JSX.Element;
         SendButton?: (params: SendButtonProps) => JSX.Element;
@@ -25,6 +25,10 @@ export interface ConversationProps {
     UITools?: CMNDChatbotUITool[];
     customStyles?: CustomStyles;
     setCurrentConversationMemory: (memory: CMNDChatMemory) => Promise<any>;
+    chatbotId: number;
+    organizationId: number;
+    isMessagesScrolledToBottom?: boolean;
+    resetMessagesScroll?: () => void;
 }
-declare const Conversation: ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, scrollToBottom, canSendMessage, setInput, input, Components, UITools, customStyles, }: ConversationProps) => JSX.Element;
+declare const Conversation: ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, canSendMessage, setInput, input, theme, Components, UITools, customStyles, chatbotId, organizationId, isMessagesScrolledToBottom, resetMessagesScroll, }: ConversationProps) => JSX.Element;
 export default Conversation;

package/dist/components/Conversation.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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, scrollToBottom, canSendMessage, setInput, input, Components, UITools, customStyles, }) => {
-    return (_jsxs("div", { className: "cmnd-conversations", children: [_jsxs("div", { ref: messagesRef, id: "messages", className: "cmnd-conversations-messages", children: [error, messages.map((m, i) => (_jsx(Chatbubble, { customStyles: customStyles, hide: m.hiddenFromUser, message: m.message, role: m.role, toolCallDetails: m.tool, tools: enabledTools, postSessionMessage: postSessionMessage, messages: messages, setMessages: setMessages, id: m.id, setChatbotConversationId: setChatbotConversationId, setIsChatLoading: setIsChatLoading, setCanSendMessage: setCanSendMessage, scrollToBottom: scrollToBottom, UITools: UITools }, i))), isChatLoading ? _jsx(LoadingBubble, { customStyles: customStyles }) : null] }), _jsxs("div", { id: "cmnd-input-div", className: "cmnd-input-div", children: [Components?.InputField ? (_jsx(Components.InputField, { ...{ input, setInput, canSendMessage, handleSendClick } })) : (_jsx(ChatInputBox, { input: input, setInput: setInput, handleSendClick: handleSendClick })), Components?.SendButton ? (_jsx(Components.SendButton, { ...{
+const Conversation = ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, canSendMessage, setInput, input, theme, Components, UITools, customStyles, chatbotId, organizationId, isMessagesScrolledToBottom = true, resetMessagesScroll, }) => {
+    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, 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 } })) : (_jsx(ChatInputBox, { input: input, setInput: setInput, handleSendClick: handleSendClick })), Components?.SendButton ? (_jsx(Components.SendButton, { ...{
                             canSendMessage,
                             handleSendClick,
                         } })) : (_jsx("button", { className: "cmnd-send-button", onClick: handleSendClick, children: "Send" }))] })] }));

package/dist/components/ConversationCard.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { ChatbotConversation } from "../type.js";
+interface ConversationCardProps {
+    conversation: ChatbotConversation;
+    isActive: boolean;
+    onClick: () => void;
+    onDelete?: () => void;
+    theme?: "light" | "dark";
+    customStyles?: {
+        conversationCardStyle?: React.CSSProperties;
+        activeConversationCardStyle?: React.CSSProperties;
+        titleStyle?: React.CSSProperties;
+        dateStyle?: React.CSSProperties;
+        deleteButtonStyle?: React.CSSProperties;
+    };
+}
+declare const ConversationCard: React.FC<ConversationCardProps>;
+export default ConversationCard;