@cmnd-ai/chatbot-react 1.7.1 → 1.8.0

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,4 @@
 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";

package/dist/index.js

@@ -1,2 +1,3 @@
 export { default as ChatProvider } from "./ChatProvider/index.js";
+export { ConversationsPanel } from "./components/ConversationsPanel/index.js";
 export { setCurrentConversationMemory, deleteCurrentConversationMemory, } from "./ChatProvider/index.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<import("axios").AxiosResponse<any, any>>;
+export default getChatBotConversationsList;

package/dist/services/getChatBotConversationsList/index.js

@@ -0,0 +1,11 @@
+import axios from "axios";
+import { chatbot } from "../../constants/endpoints.js";
+const getChatBotConversationsList = ({ organizationId, chatbotId, conversationIds, baseUrl, }) => {
+    const endpoint = chatbot.getChatBotConversationsList({
+        organizationId,
+        chatbotId,
+        conversationIds,
+    });
+    return axios.get(`${baseUrl}${endpoint}`);
+};
+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

@@ -126,8 +126,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.8.0",
   "main": "dist/index.js",
   "description": "",
   "type": "module",