@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/ChatHistoryDrawer/ChatHistory.tsx

@@ -0,0 +1,1191 @@
+import Drawer from '../ui/Drawer';
+import { useTranslation } from 'react-i18next';
+import memoriApiClient from '@memori.ai/memori-api-client';
+import React, {
+  useEffect,
+  useMemo,
+  useState,
+  useCallback,
+  ChangeEvent,
+} from 'react';
+import {
+  ChatLog,
+  ChatLogLine,
+  Memori,
+  Medium,
+  Message,
+  ChatLogFilters,
+} from '@memori.ai/memori-api-client/dist/types';
+import Card from '../ui/Card';
+import Button from '../ui/Button';
+import ChatRound from '../icons/Chat';
+import { stripHTML } from '../../helpers/utils';
+import { Dialog } from '@headlessui/react';
+import debounce from 'lodash/debounce';
+import Spin from '../ui/Spin';
+import Chat from '../Chat/Chat';
+import Download from '../icons/Download';
+import MessageIcon from '../icons/Message';
+import ArrowUpIcon from '../icons/ArrowUp';
+import Select from '../ui/Select';
+// Helpers / Utils
+import { getTranslation } from '../../helpers/translations';
+
+export interface Props {
+  open: boolean;
+  onClose: () => void;
+  apiClient: ReturnType<typeof memoriApiClient>;
+  sessionId: string;
+  memori: Memori;
+  resumeSession: (chatLog: ChatLog) => void;
+  baseUrl: string;
+  apiUrl: string;
+  history: Message[];
+  loginToken?: string;
+  language: string;
+  userLang: string;
+  isMultilanguageEnabled?: boolean;
+}
+
+const ITEMS_PER_PAGE = 8;
+const DEBOUNCE_DELAY = 300;
+
+// This function calculates the title of the chat log based on the most meaningful user message
+const calculateTitle = (lines: ChatLogLine[]): string => {
+  const userMessages = lines.filter(line => line.inbound);
+  if (userMessages.length === 0) return '';
+
+  // Common non-significant phrases that shouldn't be used as titles (English and Italian)
+  const insignificantPhrases = [
+    // English phrases
+    'hello',
+    'hi',
+    'hey',
+    'good morning',
+    'good afternoon',
+    'good evening',
+    'thanks',
+    'thank you',
+    'thx',
+    'tnx',
+    'ty',
+    'thanks!',
+    'thank you!',
+    'ok',
+    'okay',
+    'k',
+    'yes',
+    'no',
+    'yep',
+    'nope',
+    'yeah',
+    'nah',
+    'good',
+    'great',
+    'nice',
+    'cool',
+    'awesome',
+    'perfect',
+    'excellent',
+    'bye',
+    'goodbye',
+    'see you',
+    'see ya',
+    'later',
+    'good night',
+    'how are you',
+    'how are you doing',
+    "what's up",
+    'sup',
+    'please',
+    'pls',
+    'sorry',
+    'excuse me',
+    'pardon',
+    'i see',
+    'i understand',
+    'got it',
+    'gotcha',
+    'understood',
+    'continue',
+    'go on',
+    'tell me more',
+    'more',
+    'next',
+    'start',
+    'begin',
+    "let's start",
+    "let's begin",
+    'help',
+    'can you help',
+    'i need help',
+    'test',
+    'testing',
+    'test message',
+    '?',
+    '??',
+    '???',
+    '!',
+    '!!',
+    '!!!',
+    '...',
+    '..',
+    '.',
+    'a',
+    'an',
+    'the',
+    'and',
+    'or',
+    'but',
+    'in',
+    'on',
+    'at',
+    'to',
+    'for',
+    'of',
+    'with',
+    'by',
+
+    // Italian phrases
+    'ciao',
+    'salve',
+    'buongiorno',
+    'buonasera',
+    'buonanotte',
+    'grazie',
+    'grazie mille',
+    'grazie!',
+    'grazie mille!',
+    'thx',
+    'tnx',
+    'ok',
+    'va bene',
+    'va bene così',
+    'perfetto',
+    'ottimo',
+    'bene',
+    'sì',
+    'si',
+    'no',
+    'certo',
+    'certamente',
+    'assolutamente',
+    'arrivederci',
+    'a presto',
+    'a dopo',
+    'ci vediamo',
+    'addio',
+    'come stai',
+    'come va',
+    'tutto bene',
+    'che succede',
+    'per favore',
+    'per piacere',
+    'scusa',
+    'scusami',
+    'mi dispiace',
+    'capisco',
+    'ho capito',
+    'capito',
+    'perfetto',
+    'continua',
+    'vai avanti',
+    'dimmi di più',
+    'altro',
+    'altro ancora',
+    'inizia',
+    'iniziamo',
+    'comincia',
+    'cominciamo',
+    'aiuto',
+    'puoi aiutarmi',
+    'ho bisogno di aiuto',
+    'test',
+    'prova',
+    'messaggio di prova',
+    '?',
+    '??',
+    '???',
+    '!',
+    '!!',
+    '!!!',
+    '...',
+    '..',
+    '.',
+    'un',
+    'una',
+    'il',
+    'la',
+    'gli',
+    'le',
+    'e',
+    'o',
+    'ma',
+    'in',
+    'su',
+    'a',
+    'per',
+    'di',
+    'con',
+    'da',
+  ];
+
+  // Function to calculate message significance score
+  const calculateSignificanceScore = (message: string): number => {
+    const cleanMessage = message.toLowerCase().trim();
+
+    // Check if it's an insignificant phrase
+    if (insignificantPhrases.includes(cleanMessage)) {
+      return 0;
+    }
+
+    // Check if it's too short (less than 3 words)
+    const wordCount = cleanMessage
+      .split(/\s+/)
+      .filter(word => word.length > 0).length;
+    if (wordCount < 3) {
+      return 0.1;
+    }
+
+    // Check if it's just punctuation or very short
+    if (cleanMessage.length < 5) {
+      return 0.1;
+    }
+
+    // Check if it's a question (questions are often more significant) - English and Italian
+    const isQuestion =
+      /\?$/.test(cleanMessage) ||
+      // English question starters
+      /^(what|how|why|when|where|who|which|can|could|would|will|do|does|did|is|are|was|were)/.test(
+        cleanMessage
+      ) ||
+      // Italian question starters
+      /^(cosa|come|perché|perche|quando|dove|chi|quale|quali|può|puo|potrebbe|vorrebbe|sarà|sara|fa|fai|fanno|è|e|sono|era|erano)/.test(
+        cleanMessage
+      );
+
+    // Calculate base score
+    let score = 0.5;
+
+    // Boost score for questions
+    if (isQuestion) score += 0.3;
+
+    // Boost score for longer, more detailed messages
+    if (wordCount > 5) score += 0.2;
+    if (wordCount > 10) score += 0.2;
+
+    // Reduce score for very long messages (might be too verbose for a title)
+    if (wordCount > 20) score -= 0.1;
+
+    // Boost score for messages with specific details (numbers, dates, names)
+    if (/\d/.test(cleanMessage)) score += 0.1;
+    if (
+      /[A-ZÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞŸ][a-zàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ]+/.test(
+        message
+      )
+    )
+      score += 0.1; // Proper nouns (including accented characters)
+
+    return Math.min(score, 1.0);
+  };
+
+  // Score all user messages
+  const scoredMessages = userMessages.map((msg, index) => {
+    const cleanText = stripHTML(msg.text || '');
+    const score = calculateSignificanceScore(cleanText);
+    return {
+      text: cleanText,
+      score,
+      index,
+      originalIndex: index,
+    };
+  });
+
+  // Sort by score (highest first) and then by position (earlier messages preferred for same score)
+  scoredMessages.sort((a, b) => {
+    if (Math.abs(a.score - b.score) < 0.1) {
+      // If scores are close, prefer earlier messages
+      return a.index - b.index;
+    }
+    return b.score - a.score;
+  });
+
+  // Find the best message
+  let bestMessage = scoredMessages[0];
+
+  // If the best message has a very low score, try to find a better one
+  if (bestMessage.score < 0.3) {
+    // Look for the first message that's not completely insignificant
+    const betterMessage = scoredMessages.find(msg => msg.score > 0.1);
+    if (betterMessage) {
+      bestMessage = betterMessage;
+    }
+  }
+
+  // If we still don't have a good message, try to create a title from multiple messages
+  if (bestMessage.score < 0.2) {
+    // Try to combine first few meaningful messages
+    const meaningfulMessages = scoredMessages
+      .filter(msg => msg.score > 0.1)
+      .slice(0, 3)
+      .sort((a, b) => a.index - b.index);
+
+    if (meaningfulMessages.length > 1) {
+      const combinedText = meaningfulMessages
+        .map(msg => msg.text)
+        .join(' - ')
+        .substring(0, 80);
+      return combinedText.length > 80 ? `${combinedText}...` : combinedText;
+    }
+  }
+
+  // Format the final title
+  const title = bestMessage.text;
+  const maxLength = 100;
+
+  if (title.length > maxLength) {
+    // Try to cut at a word boundary
+    const truncated = title.substring(0, maxLength);
+    const lastSpace = truncated.lastIndexOf(' ');
+    if (lastSpace > maxLength * 0.7) {
+      // If we can cut at a word boundary without losing too much
+      return `${truncated.substring(0, lastSpace)}...`;
+    }
+    return `${truncated}...`;
+  }
+
+  return title;
+};
+
+// Function to translate all chat logs lines
+const translateChatLogs = async (
+  chatLogs: ChatLog[],
+  fromLanguage: string,
+  toLanguage: string,
+  baseUrl: string
+): Promise<ChatLog[]> => {
+  try {
+    const translatedChatLogs = await Promise.all(
+      chatLogs.map(async (chatLog) => {
+        const translatedLines = await Promise.all(
+          chatLog.lines.map(async (line) => {
+            if (!line.text) return line;
+
+            try {
+              const translation = await getTranslation(
+                line.text,
+                toLanguage,
+                fromLanguage,
+                baseUrl
+              );
+
+              return {
+                ...line,
+                originalText: line.text,
+                text: translation.text,
+              };
+            } catch (e) {
+              console.error('Error translating line:', e);
+              return line; // Return original line if translation fails
+            }
+          })
+        );
+
+        return {
+          ...chatLog,
+          lines: translatedLines,
+        };
+      })
+    );
+
+    return translatedChatLogs;
+  } catch (e) {
+    console.error('Error translating chat logs:', e);
+    return chatLogs; // Return original chat logs if translation fails
+  }
+};
+
+const downloadFile = (text: string, filename: string) => {
+  const data = new Blob([text], { type: 'text/plain' });
+  const url = URL.createObjectURL(data);
+  const element = document.createElement('a');
+  element.setAttribute('href', url);
+  element.setAttribute('download', filename);
+  element.style.display = 'none';
+
+  document.body.appendChild(element);
+  element.click();
+  document.body.removeChild(element);
+};
+
+const ChatHistoryDrawer = ({
+  open,
+  onClose,
+  apiClient,
+  sessionId,
+  memori,
+  resumeSession,
+  baseUrl,
+  apiUrl,
+  history,
+  loginToken,
+  language,
+  userLang,
+  isMultilanguageEnabled = false,
+}: Props) => {
+  const { t } = useTranslation();
+  const { getUserChatLogsByTokenPaged } = apiClient.chatLogs;
+
+  const textCurrentChat = `${t(
+    'write_and_speak.conversationStartedLabel'
+  )} ${new Intl.DateTimeFormat('it', {
+    dateStyle: 'short',
+    timeStyle: 'short',
+  }).format(new Date())}\n\n`.concat(
+    history
+      .map(m => `${m.fromUser ? 'YOU' : memori.name}: ${m.text}`)
+      .join('\n')
+  );
+  const [chatLogs, setChatLogs] = useState<ChatLog[]>([]);
+  const [selectedChatLog, setSelectedChatLog] = useState<ChatLog | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [indexPage, setIndexPage] = useState(0);
+  const [searchText, setSearchText] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
+  const [dateRange, setDateRange] = useState<
+    'today' | 'yesterday' | 'last_7_days' | 'last_30_days' | 'all'
+  >('all');
+  const [totalItems, setTotalItems] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+
+  // New filter for minimum messages per chat
+  const [minimumMessagesPerChat, setMinimumMessagesPerChat] =
+    useState<number>(3);
+
+  const [customMinimumMessages, setCustomMinimumMessages] = useState<number>(1);
+
+  const formatDateForAPI = (date: Date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    const milliseconds = String(date.getMilliseconds()).padStart(3, '0');
+
+    return `${year}${month}${day}${hours}${minutes}${seconds}${milliseconds}`;
+  };
+
+  const formatDateRangeForAPI = (
+    dateRange: 'today' | 'yesterday' | 'last_7_days' | 'last_30_days'
+  ) => {
+    if (dateRange === 'today') {
+      const now = new Date();
+      const yesterday = new Date(
+        now.getFullYear(),
+        now.getMonth(),
+        now.getDate() - 1
+      );
+      const dateFrom = formatDateForAPI(yesterday);
+      const dateTo = formatDateForAPI(now);
+      return { dateFrom, dateTo };
+    }
+    if (dateRange === 'yesterday') {
+      const now = new Date();
+      const yesterday = new Date(
+        now.getFullYear(),
+        now.getMonth(),
+        now.getDate() - 1
+      );
+      const dayBeforeYesterday = new Date(
+        yesterday.getFullYear(),
+        yesterday.getMonth(),
+        yesterday.getDate() - 2
+      );
+      const dateFrom = formatDateForAPI(dayBeforeYesterday);
+      const dateTo = formatDateForAPI(yesterday);
+      return { dateFrom, dateTo };
+    }
+    if (dateRange === 'last_7_days') {
+      const now = new Date();
+      const sevenDaysAgo = new Date(
+        now.getFullYear(),
+        now.getMonth(),
+        now.getDate() - 7
+      );
+      const dateFrom = formatDateForAPI(sevenDaysAgo);
+      const dateTo = formatDateForAPI(now);
+      return { dateFrom, dateTo };
+    }
+    if (dateRange === 'last_30_days') {
+      const now = new Date();
+      const thirtyDaysAgo = new Date(
+        now.getFullYear(),
+        now.getMonth(),
+        now.getDate() - 30
+      );
+      const dateFrom = formatDateForAPI(thirtyDaysAgo);
+      const dateTo = formatDateForAPI(now);
+      return { dateFrom, dateTo };
+    }
+  };
+
+  const fetchChatLogs = useCallback(
+    async (
+      dateRangeValue:
+        | 'today'
+        | 'yesterday'
+        | 'last_7_days'
+        | 'last_30_days'
+        | 'all' = 'all'
+    ) => {
+      if (!loginToken) {
+        setError(
+          t('errorFetchingSession') ||
+            'Login token required to fetch chat history'
+        );
+        return;
+      }
+
+      // Calculate the index based on current page
+      const calculatedIndex = ITEMS_PER_PAGE * (currentPage - 1);
+      setIndexPage(calculatedIndex);
+
+      setIsLoading(true);
+      setError(null);
+      let response;
+      let filters: any = {
+        loginToken: loginToken,
+        memoriID: memori.engineMemoriID,
+        dateFrom: undefined,
+        dateTo: undefined,
+        from: calculatedIndex,
+        howMany: ITEMS_PER_PAGE,
+        minimumMessagesPerChat:
+          customMinimumMessages > 0
+            ? customMinimumMessages
+            : minimumMessagesPerChat,
+      };
+      try {
+        if (dateRangeValue === 'all') {
+          response = await getUserChatLogsByTokenPaged(filters);
+        } else {
+          const { dateFrom, dateTo } =
+            formatDateRangeForAPI(dateRangeValue) ?? {};
+          response = await getUserChatLogsByTokenPaged({
+            ...filters,
+            dateFrom: dateFrom ?? undefined,
+            dateTo: dateTo ?? undefined,
+          });
+        }
+
+        const res = response;
+
+        // Sort the chat logs by date
+        let sortedChatLogs = res.chatLogs.sort((a: ChatLog, b: ChatLog) => {
+          const dateA = Math.max(
+            ...a.lines.map((l: any) => new Date(l.timestamp).getTime())
+          );
+          const dateB = Math.max(
+            ...b.lines.map((l: any) => new Date(l.timestamp).getTime())
+          );
+          return sortOrder === 'desc' ? dateB - dateA : dateA - dateB;
+        });
+
+        // Translate chat logs if needed
+        if (
+          language.toUpperCase() !== userLang.toUpperCase() &&
+          isMultilanguageEnabled
+        ) {
+          sortedChatLogs = await translateChatLogs(
+            sortedChatLogs,
+            language,
+            userLang,
+            baseUrl
+          );
+        }
+
+        setChatLogs(sortedChatLogs);
+        setTotalItems(res.count || sortedChatLogs.length);
+        setTotalPages(
+          Math.ceil((res.count || sortedChatLogs.length) / ITEMS_PER_PAGE)
+        );
+      } catch (err) {
+        setError(t('errorFetchingSession') || 'Error loading chat history');
+        console.error('Error fetching chat logs:', err);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [
+      loginToken,
+      memori.engineMemoriID,
+      currentPage,
+      sortOrder,
+      apiUrl,
+      minimumMessagesPerChat,
+      customMinimumMessages,
+    ]
+  );
+
+  useEffect(() => {
+    if (open) {
+      setCurrentPage(1); // Reset to first page when opening
+      setIndexPage(0); // Reset index to 0
+    }
+  }, [open]);
+
+  // Reset to first page when changing sort order or date range
+  useEffect(() => {
+    if (open) {
+      setCurrentPage(1);
+      setIndexPage(0);
+    }
+  }, [sortOrder, dateRange, open]);
+
+  // Fetch chat logs when current page or date range changes
+  useEffect(() => {
+    if (open && currentPage > 0) {
+      fetchChatLogs(dateRange);
+    }
+  }, [currentPage, dateRange, fetchChatLogs, open]);
+
+  const debouncedSearch = useMemo(
+    () => debounce((value: string) => setSearchText(value), DEBOUNCE_DELAY),
+    []
+  );
+  // Remove client-side pagination since we're now using server-side pagination
+  const paginatedChatLogs = chatLogs;
+
+  const handleResumeChat = async () => {
+    if (selectedChatLog) {
+      resumeSession(selectedChatLog);
+      onClose();
+    }
+  };
+
+  const handleExportChat = (chatLog: ChatLog, e: React.MouseEvent) => {
+    e.stopPropagation(); // Prevent the card from toggling
+    const text = `${t(
+      'write_and_speak.conversationStartedLabel'
+    )} ${new Intl.DateTimeFormat(navigator.language, {
+      dateStyle: 'short',
+      timeStyle: 'short',
+    }).format(new Date())}\n\n`.concat(
+      chatLog.lines
+        .map(line => `${line.inbound ? 'YOU' : memori.name}: ${line.text}`)
+        .join('\n')
+    );
+
+    downloadFile(
+      text,
+      `${memori.name.replace(/\W+/g, '-')}-chat-${chatLog.chatLogID.substring(
+        0,
+        4
+      )}.txt`
+    );
+  };
+
+  const formatDate = (timestamp: string) => {
+    return new Intl.DateTimeFormat(navigator.language, {
+      dateStyle: 'medium',
+      timeStyle: 'short',
+    }).format(new Date(timestamp));
+  };
+
+  const escapeUnderScore = (value: string) => {
+    return value.replace(/_/g, ' ');
+  };
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <div className="memori-chat-history-drawer--loading">
+          <Spin
+            spinning={true}
+            primary={true}
+            className="memori-chat-history-drawer--loading--spinner"
+          />
+          <p className="memori-chat-history-drawer--loading--text">
+            {t('write_and_speak.loadingChatHistory') ||
+              'Loading chat history...'}
+          </p>
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className="memori-chat-history-drawer--error">
+          <p>{error}</p>
+        </div>
+      );
+    }
+
+    if (!chatLogs.length) {
+      return (
+        <div className="memori-chat-history-drawer--empty">
+          <ChatRound className="memori-chat-history-drawer--empty--icon" />
+          <p className="memori-chat-history-drawer--empty--text">
+            {t('write_and_speak.noChatHistoryAvailable') ||
+              'No chat history available'}
+          </p>
+        </div>
+      );
+    }
+
+    if (chatLogs.length === 0) {
+      return (
+        <div className="memori-chat-history-drawer--no-results">
+          <p>
+            {t('write_and_speak.noResultsFound', {
+              searchText: searchText || '',
+            }) || 'No results found'}
+          </p>
+        </div>
+      );
+    }
+
+    return (
+      <>
+        <ul className="memori-chat-history-drawer--list">
+          {paginatedChatLogs.map((chatLog: ChatLog) => {
+            const lastMessageDate = Math.max(
+              ...chatLog.lines.map(line => new Date(line.timestamp).getTime())
+            );
+
+            return (
+              <Card
+                hoverable={chatLog?.sessionID !== sessionId}
+                onClick={async () => {
+                  // the active chat
+                  if (chatLog?.sessionID === sessionId) {
+                    return;
+                  }
+                  if (selectedChatLog?.chatLogID === chatLog.chatLogID) {
+                    setSelectedChatLog(null);
+                    return;
+                  }
+                  // Check for chat-reference tag in the first line
+                  // const firstMessage = chatLog.lines[1]?.text;
+                  // const chatReferenceMatch = firstMessage?.match(/<chat-reference session-id="([^"]+)" event-log-id="([^"]+)"><\/chat-reference>/);
+                  // if (chatReferenceMatch) {
+                  //   const [_, refSessionId, refChatLogId] = chatReferenceMatch;
+                  //   try {
+                  //     const res = await getSessionChatLogs(refSessionId, refSessionId);
+                  //     const prevChatLog = res.chatLogs.find((c: ChatLog) => c.chatLogID === refChatLogId);
+                  //     if (prevChatLog) {
+                  //       setSelectedChatLog({
+                  //         ...chatLog,
+                  //         lines: [
+                  //           ...prevChatLog.lines,
+                  //           ...chatLog.lines
+                  //         ]
+                  //       });
+                  //       return;
+                  //     }
+                  //   } catch (e) {
+                  //     console.error('Error fetching referenced chat log:', e);
+                  //   }
+                  // }
+                  setSelectedChatLog(chatLog);
+                }}
+                key={chatLog.chatLogID}
+                className={`memori-chat-history-drawer--card ${
+                  selectedChatLog?.chatLogID === chatLog.chatLogID
+                    ? 'memori-chat-history-drawer--card--selected'
+                    : ''
+                } ${
+                  chatLog?.sessionID === sessionId
+                    ? 'memori-chat-history-drawer--card--disabled'
+                    : 'memori-chat-history-drawer--card--hoverable'
+                }`}
+              >
+                <>
+                  <div className="memori-chat-history-drawer--card--header">
+                    <div className="memori-chat-history-drawer--card--header--content">
+                      <div className="memori-chat-history-drawer--card--header--icon-wrapper">
+                        <MessageIcon className="memori-chat-history-drawer--card--header--icon" />
+                      </div>
+                      <div className="memori-chat-history-drawer--card--header--info">
+                        <div className="memori-chat-history-drawer--card--header--title-wrapper">
+                          <Dialog.Title
+                            as="h3"
+                            className="memori-chat-history-drawer--card--header--title"
+                          >
+                            {calculateTitle(chatLog.lines) ||
+                              'Chat-' + chatLog.chatLogID.substring(0, 4)}
+                          </Dialog.Title>
+                          {chatLog.boardOfExperts && (
+                            <div className="memori-chat-history-drawer--card--header--badge">
+                              BOE
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="memori-chat-history-drawer--card--header--meta">
+                    <time
+                      className="memori-chat-history-drawer--card--header--meta--time"
+                      dateTime={new Date(lastMessageDate).toISOString()}
+                    >
+                      <svg
+                        className="memori-chat-history-drawer--card--header--meta--icon"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                        />
+                      </svg>
+                      {formatDate(new Date(lastMessageDate).toISOString())}
+                    </time>
+                    {chatLog.lines.some(
+                      line =>
+                        line.media &&
+                        line.media.filter(
+                          m =>
+                            m.mimeType !== 'text/html' &&
+                            m.mimeType !== 'text/plain'
+                        ).length > 0
+                    ) && (
+                      <span className="memori-chat-history-drawer--card--header--meta--messages">
+                        <svg
+                          className="memori-chat-history-drawer--card--header--meta--icon"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                          />
+                        </svg>
+                        {chatLog.lines.reduce(
+                          (acc, line) =>
+                            acc +
+                            (line.media?.filter(
+                              m =>
+                                m.mimeType !== 'text/html' &&
+                                m.mimeType !== 'text/plain'
+                            ).length || 0),
+                          0
+                        )}
+                      </span>
+                    )}
+                    <span className="memori-chat-history-drawer--card--header--meta--messages">
+                      <svg
+                        className="memori-chat-history-drawer--card--header--meta--icon"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
+                        />
+                      </svg>
+                      {chatLog.lines.length}
+                    </span>
+                    <div className="memori-chat-history-drawer--card--content--header">
+                      <Button
+                        className="memori-chat-history-drawer--card--content--export-button"
+                        onClick={e => handleExportChat(chatLog, e)}
+                        disabled={chatLog?.sessionID === sessionId}
+                      >
+                        <div className="memori-chat-history-drawer--card--content--export-button--content">
+                          <Download className="memori-chat-history-drawer--card--content--export-button--icon" />
+                          {/* <span className="memori-chat-history-drawer--card--content--export-button--text">
+                            {t('write_and_speak.exportChat') || 'Export Chat'}
+                          </span> */}
+                        </div>
+                      </Button>
+                    </div>
+                  </div>
+
+                  {selectedChatLog?.chatLogID === chatLog.chatLogID && (
+                    <div className="memori-chat-history-drawer--card--content">
+                      <div className="memori-chat-history-drawer--card--content--messages">
+                        <Chat
+                          key={`${chatLog.chatLogID}-${chatLog.lines.length}`}
+                          baseUrl={baseUrl}
+                          apiUrl={apiUrl}
+                          memoriTyping={false}
+                          showTypingText={false}
+                          showAIicon={true}
+                          showTranslationOriginal={false}
+                          showWhyThisAnswer={false}
+                          showCopyButton={false}
+                          isChatlogPanel={true}
+                          showInputs={false}
+                          history={chatLog.lines.map(line => ({
+                            text: line.text, // Don't truncate to preserve document_attachment tags
+                            contextVars: line.contextVars,
+                            media: line.media as Medium[],
+                            fromUser: line.inbound,
+                            timestamp: line.timestamp,
+                          }))}
+                          memori={memori}
+                          sessionID={sessionId}
+                          pushMessage={() => {}}
+                          simulateUserPrompt={() => {}}
+                          setSendOnEnter={() => {}}
+                          attachmentsMenuOpen={undefined}
+                          setAttachmentsMenuOpen={() => {}}
+                          userMessage={''}
+                          onChangeUserMessage={() => {}}
+                          sendMessage={() => {}}
+                          startListening={() => {}}
+                          stopListening={() => {}}
+                          listening={false}
+                          setEnableFocusChatInput={() => {}}
+                          stopAudio={() => {}}
+                          isHistoryView={true}
+                        />
+                      </div>
+                      <div className="memori-chat-history-drawer--card--content--actions">
+                        <Button
+                          className="memori-chat-history-drawer--card--content--resume-button"
+                          primary
+                          onClick={handleResumeChat}
+                        >
+                          <div className="memori-chat-history-drawer--card--content--resume-button--content">
+                            <ChatRound className="memori-chat-history-drawer--card--content--resume-button--icon" />
+                            <span className="memori-chat-history-drawer--card--content--resume-button--text">
+                              {t('write_and_speak.resumeButton') ||
+                                'Resume chat'}
+                            </span>
+                          </div>
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </>
+              </Card>
+            );
+          })}
+        </ul>
+
+        {totalPages > 1 && (
+          <div className="memori-chat-history-drawer--pagination">
+            <Button
+              primary
+              onClick={() => {
+                setCurrentPage(p => Math.max(1, p - 1));
+                // fetchChatLogs will be triggered by the useEffect that depends on currentPage
+              }}
+              disabled={currentPage === 1}
+              className="memori-chat-history-drawer--pagination--button"
+            >
+              {t('previous') || 'Previous'}
+            </Button>
+            <span className="memori-chat-history-drawer--pagination--info">
+              {t('write_and_speak.page', {
+                current: currentPage,
+                total: totalPages,
+              })}
+            </span>
+            <Button
+              primary
+              onClick={() => {
+                setCurrentPage(p => Math.min(totalPages, p + 1));
+                // fetchChatLogs will be triggered by the useEffect that depends on currentPage
+              }}
+              disabled={currentPage === totalPages}
+              className="memori-chat-history-drawer--pagination--button"
+            >
+              {t('next') || 'Next'}
+            </Button>
+          </div>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <Drawer
+      className="memori-chat-history-drawer"
+      open={open}
+      onClose={onClose}
+      title={
+        <div
+          className="memori-chat-history-drawer--title-wrapper"
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            width: '100%',
+          }}
+        >
+          <span>{t('write_and_speak.chatHistory') || 'Chat History'}</span>
+
+          <div className="memori-chat-history-drawer--download-button-wrapper">
+            <span className="memori-chat-history-drawer--download-button-wrapper--text">
+              {t('write_and_speak.downloadChat') || 'Download chat'}
+            </span>
+            <Button
+              primary
+              shape="circle"
+              className="memori-chat-history-drawer--download-button"
+              title={t('download') || 'Download chat'}
+              icon={<Download />}
+              // disabled={!selectedChatLog}
+              onClick={() => {
+                //download the chat already opened
+                const fileName = `${memori.name.replace(/\W+/g, '-')}-chat-${
+                  new Date().toISOString().split('T')[0]
+                }.txt`;
+                downloadFile(textCurrentChat, fileName);
+              }}
+            />
+          </div>
+        </div>
+      }
+      description={t('write_and_speak.chatHistoryDescription')}
+    >
+      <div className="memori-chat-history-drawer--content">
+        <div className="memori-chat-history-drawer--toolbar">
+          {/* New minimum messages filter */}
+          <div className="memori-chat-history-drawer--toolbar--min-messages-filter">
+            {/* <label className={styles.filterLabel}>
+                {t('chatLogs.minimumMessages', { ns: 'admin' })}
+              </label> */}
+            <Select
+              displayValue={
+                minimumMessagesPerChat === 0
+                  ? (t('chatLogs.customMinimumMessages') ||
+                      'Customize the number of messages') ??
+                    'Customize the number of messages'
+                  : minimumMessagesPerChat === 1
+                  ? (t('chatLogs.anyMessage') || 'Any message') ?? 'Any message'
+                  : t('chatLogs.atLeast', { count: minimumMessagesPerChat }) ??
+                    `At least ${minimumMessagesPerChat} messages`
+              }
+              placeholder={
+                (t('chatLogs.customMinimumMessages') ||
+                  'Customize the number of messages') ??
+                'Customize the number of messages'
+              }
+              value={minimumMessagesPerChat}
+              onChange={value => {
+                setMinimumMessagesPerChat(value);
+                window.localStorage.setItem(
+                  'minimumMessagesPerChat',
+                  value.toString()
+                );
+              }}
+              className="memori-chat-history-drawer--toolbar--min-messages-filter--select"
+              options={[
+                {
+                  value: 1,
+                  label: t('chatLogs.anyMessage') || 'Any message',
+                },
+                {
+                  value: 2,
+                  label: t('chatLogs.atLeast2') || 'At least 2 messages',
+                },
+                {
+                  value: 3,
+                  label: t('chatLogs.atLeast3') || 'At least 3 messages',
+                },
+                {
+                  value: 5,
+                  label: t('chatLogs.atLeast5') || 'At least 5 messages',
+                },
+                {
+                  value: 10,
+                  label: t('chatLogs.atLeast10') || 'At least 10 messages',
+                },
+                {
+                  value: 15,
+                  label: t('chatLogs.atLeast15') || 'At least 15 messages',
+                },
+                {
+                  value: 20,
+                  label: t('chatLogs.atLeast20') || 'At least 20 messages',
+                },
+                {
+                  value: 0,
+                  label:
+                    t('chatLogs.customMinimumMessages') ||
+                    'Customize the number of messages',
+                },
+              ]}
+            />
+            {minimumMessagesPerChat === 0 && (
+              <input
+                type="number"
+                min={1}
+                value={customMinimumMessages}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  const value = parseInt(e.target.value, 10);
+                  setCustomMinimumMessages(value);
+                  window.localStorage.setItem(
+                    'customMinimumMessages',
+                    value.toString()
+                  );
+                }}
+                style={{ minWidth: 50 }}
+                className="memori-chat-history-drawer--toolbar--min-messages-filter--input-number"
+              />
+            )}
+          </div>
+          <div className="memori-chat-history-drawer--toolbar--actions">
+            <Select
+              options={[
+                {
+                  label: t('all') || 'All',
+                  value: 'all',
+                },
+                {
+                  label: t('today') || 'Today',
+                  value: 'today',
+                },
+                {
+                  label: t('yesterday') || 'Yesterday',
+                  value: 'yesterday',
+                },
+                {
+                  label: t('last_7_days') || 'Last 7 days',
+                  value: 'last_7_days',
+                },
+                {
+                  label: t('last_30_days') || 'Last 30 days',
+                  value: 'last_30_days',
+                },
+              ]}
+              value={t(dateRange) || 'All'}
+              className="memori-chat-history-drawer--toolbar--actions--select"
+              onChange={(value: string) => {
+                setDateRange(
+                  value as
+                    | 'today'
+                    | 'yesterday'
+                    | 'last_7_days'
+                    | 'last_30_days'
+                    | 'all'
+                );
+                setCurrentPage(1);
+                // fetchChatLogs will be triggered by the useEffect that depends on dateRange
+              }}
+            />
+          </div>
+        </div>
+        {renderContent()}
+      </div>
+    </Drawer>
+  );
+};
+
+export default ChatHistoryDrawer;