@cmnd-ai/chatbot-react 1.7.1 → 1.9.0

package/dist/components/ScrollToBottomButton.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FiChevronDown } from "react-icons/fi";
+const ScrollToBottomButton = ({ onClick, isVisible, theme = "light", customStyles, }) => {
+    const themeColors = {
+        light: {
+            background: "#1a1d24",
+            hover: "#2a2f3a",
+            icon: "#ffffff",
+            shadow: "rgba(0, 0, 0, 0.2)",
+        },
+        dark: {
+            background: "#1a1d24",
+            hover: "#2a2f3a",
+            icon: "#ffffff",
+            shadow: "rgba(0, 0, 0, 0.4)",
+        },
+    };
+    const colors = themeColors[theme];
+    const baseStyle = {
+        position: "fixed",
+        bottom: "100px",
+        right: "20px",
+        width: "48px",
+        height: "48px",
+        borderRadius: "50%",
+        backgroundColor: colors.background,
+        color: colors.icon,
+        border: "none",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxShadow: `0 4px 12px ${colors.shadow}`,
+        transition: "all 0.2s ease-in-out",
+        opacity: isVisible ? 1 : 0,
+        visibility: isVisible ? "visible" : "hidden",
+        transform: isVisible ? "translateY(0)" : "translateY(10px)",
+        zIndex: 1000,
+    };
+    const hoverStyle = {
+        backgroundColor: colors.hover,
+        transform: "translateY(-2px)",
+        boxShadow: `0 6px 16px ${colors.shadow}`,
+    };
+    return (_jsx("button", { onClick: onClick, style: {
+            ...baseStyle,
+            ...customStyles?.scrollButtonStyle,
+        }, onMouseEnter: (e) => {
+            Object.assign(e.currentTarget.style, hoverStyle);
+        }, onMouseLeave: (e) => {
+            Object.assign(e.currentTarget.style, {
+                ...baseStyle,
+                ...customStyles?.scrollButtonStyle,
+            });
+        }, title: "Scroll to bottom", "aria-label": "Scroll to bottom", children: _jsx(FiChevronDown, { size: 20 }) }));
+};
+export default ScrollToBottomButton;

package/dist/constants/endpoints.d.ts

@@ -1,5 +1,10 @@
 declare const chatbot: {
     patchChatbotConversationMemory: (organizationId: number, chatbotId: number, chatbotConversationId: number) => string;
     deleteChatbotConversationMemory: (organizationId: number, chatbotId: number, chatbotConversationId: number, memoryKeyToDelete: string) => string;
+    getChatBotConversationsList: ({ organizationId, chatbotId, conversationIds, }: {
+        organizationId: number;
+        chatbotId: number;
+        conversationIds: number[];
+    }) => string;
 };
 export { chatbot };

package/dist/constants/endpoints.js

@@ -1,5 +1,11 @@
 const chatbot = {
     patchChatbotConversationMemory: (organizationId, chatbotId, chatbotConversationId) => `/organizations/${organizationId}/chatbots/${chatbotId}/conversations/${chatbotConversationId}/memory`,
     deleteChatbotConversationMemory: (organizationId, chatbotId, chatbotConversationId, memoryKeyToDelete) => `/organizations/${organizationId}/chatbots/${chatbotId}/conversations/${chatbotConversationId}/memory/${memoryKeyToDelete}`,
+    getChatBotConversationsList: ({ organizationId, chatbotId, conversationIds, }) => {
+        const ids = Array.isArray(conversationIds)
+            ? conversationIds.join(",")
+            : conversationIds;
+        return `/organizations/${organizationId}/chatbots/${chatbotId}/conversations-list/${ids}`;
+    },
 };
 export { chatbot };

package/dist/hooks/use-fetch-data.d.ts

@@ -0,0 +1,8 @@
+type UseFetchDataResult<T = any> = {
+    loading: boolean;
+    error: boolean;
+    data: T;
+    refetch: () => void;
+};
+declare const useFetchData: <T = any>(apiCallFn: () => Promise<T>, deps?: any[]) => UseFetchDataResult<T>;
+export default useFetchData;

package/dist/hooks/use-fetch-data.js

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useState } from "react";
+const useFetchData = (apiCallFn, deps = []) => {
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(false);
+    const [data, setData] = useState({});
+    const fetchData = async () => {
+        setLoading(true);
+        setError(false);
+        try {
+            const response = await apiCallFn();
+            setData(response);
+        }
+        catch {
+            setError(true);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        fetchData();
+    }, deps);
+    return {
+        loading,
+        error,
+        data,
+        refetch: fetchData,
+    };
+};
+export default useFetchData;

package/dist/hooks/use-messages-scroll.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { Message } from "../type.js";
+/**
+ * A custom hook to manage auto-scrolling of a message container.
+ * Automatically scrolls to the bottom when messages change, unless the user has scrolled up.
+ *
+ * @param messages - The list of messages.
+ * @returns An object containing the `messagesRef` for the chat timeline container and a `resetMessageScroll` function.
+ */
+declare const useMessagesScroll: (messages: Message[]) => {
+    messagesRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    resetMessagesScroll: () => void;
+    isMessagesScrolledToBottom: boolean;
+};
+export default useMessagesScroll;

package/dist/hooks/use-messages-scroll.js

@@ -0,0 +1,80 @@
+import { useRef, useEffect, useState, useCallback } from "react";
+/**
+ * A custom hook to manage auto-scrolling of a message container.
+ * Automatically scrolls to the bottom when messages change, unless the user has scrolled up.
+ *
+ * @param messages - The list of messages.
+ * @returns An object containing the `messagesRef` for the chat timeline container and a `resetMessageScroll` function.
+ */
+const useMessagesScroll = (messages) => {
+    const messagesRef = useRef(null);
+    const [userScrolled, setUserScrolled] = useState(false);
+    const [isMessagesScrolledToBottom, setIsMessagesScrolledToBottom] = useState(true);
+    const [refAvailable, setRefAvailable] = useState(false);
+    // Reset userScrolled when new messages arrive (so auto-scroll resumes)
+    useEffect(() => {
+        if (messages.length > 0 && userScrolled) {
+            setUserScrolled(false);
+        }
+    }, [messages.length]);
+    // Check if ref is available
+    useEffect(() => {
+        if (messagesRef.current && !refAvailable) {
+            setRefAvailable(true);
+        }
+        else if (!messagesRef.current && refAvailable) {
+            setRefAvailable(false);
+        }
+    });
+    const handleMessagesScroll = useCallback(() => {
+        const messagesElement = messagesRef.current;
+        if (!messagesElement)
+            return;
+        const { scrollTop, clientHeight, scrollHeight } = messagesElement;
+        const isScrolledToBottom = Math.abs(scrollTop + clientHeight - scrollHeight) <= 100;
+        setIsMessagesScrolledToBottom(isScrolledToBottom);
+    }, []);
+    // Set up event listeners when ref becomes available
+    useEffect(() => {
+        const ref = messagesRef.current;
+        if (!ref || !refAvailable) {
+            return;
+        }
+        const onScrollUp = (e) => {
+            if (e.deltaY < 0 && !userScrolled) {
+                setUserScrolled(true);
+                if (ref) {
+                    ref.removeEventListener("wheel", onScrollUp);
+                }
+            }
+        };
+        // Initial scroll position check
+        handleMessagesScroll();
+        ref.addEventListener("scroll", handleMessagesScroll);
+        if (!userScrolled) {
+            ref.addEventListener("wheel", onScrollUp);
+        }
+        return () => {
+            ref.removeEventListener("wheel", onScrollUp);
+            ref.removeEventListener("scroll", handleMessagesScroll);
+        };
+    }, [refAvailable, userScrolled, handleMessagesScroll]); // Run when ref becomes available or userScrolled changes
+    useEffect(() => {
+        if (messagesRef.current && !userScrolled) {
+            // Use setTimeout to ensure DOM has updated
+            setTimeout(() => {
+                if (messagesRef.current) {
+                    messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
+                }
+            }, 0);
+        }
+    }, [messages, userScrolled]);
+    const resetMessagesScroll = () => {
+        if (messagesRef.current) {
+            messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
+        }
+        setUserScrolled(false);
+    };
+    return { messagesRef, resetMessagesScroll, isMessagesScrolledToBottom };
+};
+export default useMessagesScroll;

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export { default as ChatProvider } from "./ChatProvider/index.js";
-export { CmndChatContext, InputFieldProps, SendButtonProps, CustomStyles, CMNDChatMemory, } from "./type.js";
+export { ConversationsPanel } from "./components/ConversationsPanel/index.js";
+export { CmndChatContext, InputFieldProps, SendButtonProps, CustomStyles, CMNDChatMemory, ChatbotConversation, ChatbotConversationsResponse, } from "./type.js";
 export { setCurrentConversationMemory, deleteCurrentConversationMemory, } from "./ChatProvider/index.js";
+export { useCMNDChatContext } from "./ChatProvider/useChatContext.js";

package/dist/index.js

@@ -1,2 +1,4 @@
 export { default as ChatProvider } from "./ChatProvider/index.js";
+export { ConversationsPanel } from "./components/ConversationsPanel/index.js";
 export { setCurrentConversationMemory, deleteCurrentConversationMemory, } from "./ChatProvider/index.js";
+export { useCMNDChatContext } from "./ChatProvider/useChatContext.js";

package/dist/services/getChatBotConversationsList/index.d.ts

@@ -0,0 +1,7 @@
+declare const getChatBotConversationsList: ({ organizationId, chatbotId, conversationIds, baseUrl, }: {
+    organizationId: number;
+    chatbotId: number;
+    conversationIds: number[];
+    baseUrl: string;
+}) => Promise<any>;
+export default getChatBotConversationsList;

package/dist/services/getChatBotConversationsList/index.js

@@ -0,0 +1,12 @@
+import axios from "axios";
+import { chatbot } from "../../constants/endpoints.js";
+const getChatBotConversationsList = async ({ organizationId, chatbotId, conversationIds, baseUrl, }) => {
+    const endpoint = chatbot.getChatBotConversationsList({
+        organizationId,
+        chatbotId,
+        conversationIds,
+    });
+    const response = await axios.get(`${baseUrl}${endpoint}`);
+    return response.data;
+};
+export default getChatBotConversationsList;

package/dist/styles/index.css

@@ -12,6 +12,7 @@
   justify-content: center;
   align-items: center;
 }
+
 .cmnd-conversations-messages {
   display: flex;
   flex-direction: column;
@@ -202,3 +203,112 @@
     font-size: 14px;
   }
 }
+
+/* Conversation Panel Styles */
+.cmnd-conversations-panel {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", sans-serif;
+}
+
+.cmnd-conversations-sidebar {
+  scrollbar-width: thin;
+  scrollbar-color: #3d4354 #20232c;
+}
+
+.cmnd-conversations-sidebar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.cmnd-conversations-sidebar::-webkit-scrollbar-track {
+  background: #20232c;
+}
+
+.cmnd-conversations-sidebar::-webkit-scrollbar-thumb {
+  background: #3d4354;
+  border-radius: 3px;
+}
+
+.cmnd-conversations-sidebar::-webkit-scrollbar-thumb:hover {
+  background: #4a5568;
+}
+
+.cmnd-conversation-card {
+  transition: all 0.2s ease;
+}
+
+.cmnd-conversation-card:hover {
+  background-color: #2d3748 !important;
+  border-color: #4a5568 !important;
+}
+
+.cmnd-conversation-card-active {
+  background-color: #3d4354 !important;
+  border-color: #5a67d8 !important;
+}
+
+.cmnd-conversation-delete {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.cmnd-conversation-card:hover .cmnd-conversation-delete {
+  opacity: 1;
+}
+
+/* Responsive design for mobile */
+@media screen and (max-width: 768px) {
+  .cmnd-conversations-sidebar {
+    width: 100% !important;
+    border-right: none !important;
+    border-bottom: 1px solid #3d4354;
+    max-height: 200px;
+  }
+
+  .cmnd-conversations-panel {
+    flex-direction: column;
+  }
+
+  .cmnd-conversation-card {
+    padding: 8px 12px !important;
+  }
+
+  .cmnd-conversation-title {
+    font-size: 13px !important;
+  }
+
+  .cmnd-conversation-date {
+    font-size: 11px !important;
+  }
+}
+
+/* Scroll to bottom button */
+.cmnd-scroll-to-bottom-button {
+  position: fixed;
+  bottom: 100px;
+  right: 20px;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+  z-index: 1000;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.cmnd-scroll-to-bottom-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+}
+
+@media screen and (max-width: 768px) {
+  .cmnd-scroll-to-bottom-button {
+    bottom: 80px;
+    right: 15px;
+    width: 44px;
+    height: 44px;
+  }
+}

package/dist/type.d.ts

@@ -2,12 +2,37 @@ import { CSSProperties } from "react";
 import { ConversationProps } from "./components/Conversation.js";
 export interface CmndChatContext {
     props: Partial<ConversationProps>;
+    /**
+     * Create a new conversation (resets state, starts a new chat thread)
+     */
+    createNewConversation: () => void;
+    /**
+     * Toggle the sidebar open/collapsed state
+     */
+    toggleSidebar: () => void;
+    /**
+     * Open the sidebar (set collapsed to false)
+     */
+    openSidePanel: () => void;
+    /**
+     * Close the sidebar (set collapsed to true)
+     */
+    closeSidePanel: () => void;
+    /**
+     * Set the message text in the input box
+     */
+    setMessageText: (text: string) => void;
+    /**
+     * Send the current message, or set and send if text is provided
+     */
+    sendMessage: (text?: string) => void;
 }
 export interface InputFieldProps {
     input: string;
     setInput: (input: string) => void;
     canSendMessage: boolean;
     handleSendClick: () => void;
+    inputRef?: React.RefObject<HTMLInputElement> | React.RefObject<HTMLTextAreaElement> | React.RefObject<HTMLTextAreaElement>;
 }
 export interface SendButtonProps {
     handleSendClick: () => void;
@@ -126,8 +151,40 @@ export interface CustomStyles {
     chatbubbleStyle?: CSSProperties;
     botChatbubbleStyle?: CSSProperties;
     userChatbubbleStyle?: CSSProperties;
+    scrollButtonStyle?: CSSProperties;
+    panelStyle?: CSSProperties;
+    sidebarStyle?: CSSProperties;
+    conversationListStyle?: CSSProperties;
+    headerStyle?: CSSProperties;
+    newChatButtonStyle?: CSSProperties;
+    refreshButtonStyle?: CSSProperties;
+    conversationCardStyle?: CSSProperties;
+    activeConversationCardStyle?: CSSProperties;
+    titleStyle?: CSSProperties;
+    dateStyle?: CSSProperties;
+    deleteButtonStyle?: CSSProperties;
 }
 export interface CMNDChatMemory {
     [key: string]: any;
 }
+export interface ChatbotConversationMessage {
+    id?: string;
+    role: "user" | "assistant";
+    message: string;
+    unuseful: boolean;
+    hiddenFromUser: boolean;
+}
+export interface ChatbotConversation {
+    chatbotConversationId: number;
+    messages: ChatbotConversationMessage[];
+    chatbotId: number;
+    chatbotConversationTitle: string;
+    createdAt: string;
+    updatedAt: string;
+    totalCostSoFar: number;
+    totalTokensSoFar: number;
+}
+export interface ChatbotConversationsResponse {
+    chatbotConversations: ChatbotConversation[];
+}
 export {};

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

@@ -0,0 +1,2 @@
+declare const formatDate: (date: string) => string;
+export default formatDate;

package/dist/utils/format_date/index.js

@@ -0,0 +1,32 @@
+const formatDate = (date) => {
+    // Parse the input date string as UTC
+    const timestamp = new Date(date + " UTC");
+    const now = new Date();
+    const localTimestampYear = timestamp.getFullYear();
+    const localTimestampMonth = timestamp.getMonth();
+    const localTimestampDate = timestamp.getDate();
+    const nowYear = now.getFullYear();
+    const nowMonth = now.getMonth();
+    const nowDate = now.getDate();
+    const hours = timestamp.getHours();
+    const minutes = timestamp.getMinutes();
+    if (nowYear === localTimestampYear &&
+        nowMonth === localTimestampMonth &&
+        nowDate === localTimestampDate) {
+        return `Today at ${hours}:${minutes < 10 ? "0" + minutes : minutes}`;
+    }
+    else if (nowYear === localTimestampYear &&
+        nowMonth === localTimestampMonth &&
+        nowDate - localTimestampDate === 1) {
+        return `Yesterday at ${hours}:${minutes < 10 ? "0" + minutes : minutes}`;
+    }
+    else {
+        // Use toLocaleDateString to format in local time zone
+        return timestamp.toLocaleDateString("en-GB", {
+            month: "long",
+            day: "numeric",
+            year: "numeric",
+        });
+    }
+};
+export default formatDate;

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

@@ -0,0 +1,5 @@
+declare const getConversationLocalStorageKey: ({ organizationId, chatbotId, }: {
+    organizationId: number;
+    chatbotId: number;
+}) => string;
+export default getConversationLocalStorageKey;

package/dist/utils/getConversationLocalStorageKey/index.js

@@ -0,0 +1,2 @@
+const getConversationLocalStorageKey = ({ organizationId, chatbotId, }) => `cmnd::orgId::${organizationId}::chatBotId::${chatbotId}`;
+export default getConversationLocalStorageKey;

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

@@ -0,0 +1,2 @@
+declare const getUTCDateTime: () => string;
+export default getUTCDateTime;

package/dist/utils/getUTCDateTime/index.js

@@ -0,0 +1,11 @@
+const getUTCDateTime = () => {
+    const now = new Date();
+    const year = now.getUTCFullYear();
+    const month = String(now.getUTCMonth() + 1).padStart(2, "0");
+    const day = String(now.getUTCDate()).padStart(2, "0");
+    const hours = String(now.getUTCHours()).padStart(2, "0");
+    const minutes = String(now.getUTCMinutes()).padStart(2, "0");
+    const seconds = String(now.getUTCSeconds()).padStart(2, "0");
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+};
+export default getUTCDateTime;

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

@@ -0,0 +1,6 @@
+declare const saveConversationIdToLocalStorage: ({ chatbotConversationId, chatbotId, organizationId, }: {
+    chatbotConversationId: number;
+    chatbotId: number;
+    organizationId: number;
+}) => Promise<void>;
+export default saveConversationIdToLocalStorage;

package/dist/utils/saveConversationIdToLocalStorage/index.js

@@ -0,0 +1,19 @@
+import getConversationLocalStorageKey from "../getConversationLocalStorageKey/index.js";
+const saveConversationIdToLocalStorage = async ({ chatbotConversationId, chatbotId, organizationId, }) => {
+    try {
+        const key = getConversationLocalStorageKey({
+            organizationId,
+            chatbotId: Number(chatbotId),
+        });
+        //get the conversation ids from local storage
+        const conversations = JSON.parse(localStorage.getItem(key) || "[]") ?? [];
+        if (!conversations.includes(chatbotConversationId)) {
+            conversations.push(chatbotConversationId);
+            localStorage.setItem(key, JSON.stringify(conversations));
+        }
+    }
+    catch (error) {
+        console.error("error saving conversation id to local storage", error);
+    }
+};
+export default saveConversationIdToLocalStorage;

package/package.json

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