@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

package/src/components/ChatHistoryDrawer/ChatHistory.tsx

@@ -1,38 +1,29 @@
-import Drawer from '../ui/Drawer';
+import { Drawer, useAlertManager, createAlertOptions } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
-import React, {
-  useEffect,
-  useMemo,
-  useState,
-  useCallback,
-  ChangeEvent,
-} from 'react';
+import React, { useEffect, useMemo, useState, useCallback } 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 { Button } from '@memori.ai/ui';
+import {
+  MessageCircle,
+  ChevronLeft,
+  ChevronRight,
+  Download,
+} from 'lucide-react';
 import { stripHTML } from '../../helpers/utils';
 import { stripAllInternalTags } from '../../helpers/message';
-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';
-import ChevronLeft from '../icons/ChevronLeft';
+import { Spin } from '@memori.ai/ui';
+import { SelectBox } from '@memori.ai/ui';
 // Helpers / Utils
 import { getTranslation } from '../../helpers/translations';
-import Close from '../icons/Close';
+import ChatResumeDrawer from './ChatResumeDrawer';
 
 export interface Props {
   open: boolean;
@@ -52,6 +43,19 @@ export interface Props {
 
 const ITEMS_PER_PAGE = 8;
 const DEBOUNCE_DELAY = 300;
+const ICON_BACKGROUND_COLORS = [
+  'var(--chat-history-icon-purple, #EEEDFE)',
+  'var(--chat-history-icon-teal, #E1F5EE)',
+  'var(--chat-history-icon-amber, #FAEEDA)',
+  'var(--chat-history-icon-coral, #FAECE7)',
+] as const;
+
+type ContentTypeFilter = 'all' | 'with_images' | 'with_files';
+
+const isImageMimeType = (mimeType?: string) =>
+  mimeType?.startsWith('image/') ?? false;
+
+const isFileMimeType = (mimeType?: string) => !isImageMimeType(mimeType);
 
 // This function calculates the title of the chat log based on the most meaningful user message
 const calculateTitle = (lines: ChatLogLine[]): string => {
@@ -437,6 +441,7 @@ const ChatHistoryDrawer = ({
   isMultilanguageEnabled = false,
 }: Props) => {
   const { t } = useTranslation();
+  const { add } = useAlertManager();
   const { getUserChatLogsByTokenPaged } = apiClient.chatLogs;
 
   const textCurrentChat = `${t(
@@ -470,6 +475,52 @@ const ChatHistoryDrawer = ({
     useState<number>(3);
 
   const [customMinimumMessages, setCustomMinimumMessages] = useState<number>(1);
+  const [contentTypeFilter, setContentTypeFilter] =
+    useState<ContentTypeFilter>('all');
+
+  const isSameDay = (dateA: Date, dateB: Date) =>
+    dateA.getFullYear() === dateB.getFullYear() &&
+    dateA.getMonth() === dateB.getMonth() &&
+    dateA.getDate() === dateB.getDate();
+
+  const getChatLogStats = (chatLog: ChatLog) => {
+    const imageCount = chatLog.lines.reduce((total, line) => {
+      const imagesInLine =
+        line.media?.filter(medium => isImageMimeType(medium.mimeType))
+          .length || 0;
+      return total + imagesInLine;
+    }, 0);
+
+    const fileCount = chatLog.lines.reduce((total, line) => {
+      const filesInLine =
+        line.media?.filter(medium => isFileMimeType(medium.mimeType))
+          .length || 0;
+      return total + filesInLine;
+    }, 0);
+
+    const assistantReplies = chatLog.lines.filter(
+      line => !line.inbound && line.text?.trim()
+    );
+    const previewSource = assistantReplies[1] || assistantReplies[0];
+    const preview = stripHTML(previewSource?.text || '')
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    const allText = chatLog.lines
+      .map(line => line.text || '')
+      .join(' ')
+      .toLowerCase();
+    const isTestConversation =
+      /\b(test|testing|experiment|esperimento|prova)\b/.test(allText);
+
+    return {
+      imageCount,
+      fileCount,
+      preview,
+      isTestConversation,
+      messageCount: chatLog.lines.length,
+    };
+  };
 
   const formatDateForAPI = (date: Date) => {
     const year = date.getFullYear();
@@ -662,31 +713,68 @@ const ChatHistoryDrawer = ({
       setCurrentPage(1);
       setIndexPage(0);
     }
-  }, [sortOrder, dateRange, minimumMessagesPerChat, customMinimumMessages, open]);
+  }, [
+    sortOrder,
+    dateRange,
+    minimumMessagesPerChat,
+    customMinimumMessages,
+    open,
+  ]);
 
   // Fetch chat logs when current page, date range, or minimum messages filter changes
   useEffect(() => {
     if (open && currentPage > 0) {
       fetchChatLogs(dateRange);
     }
-  }, [currentPage, dateRange, minimumMessagesPerChat, customMinimumMessages, fetchChatLogs, open]);
+  }, [
+    currentPage,
+    dateRange,
+    minimumMessagesPerChat,
+    customMinimumMessages,
+    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 paginatedChatLogs = useMemo(() => {
+    if (contentTypeFilter === 'all') {
+      return chatLogs;
+    }
+
+    return chatLogs.filter(chatLog => {
+      const stats = getChatLogStats(chatLog);
+      if (contentTypeFilter === 'with_images') {
+        return stats.imageCount > 0;
+      }
+      return stats.fileCount > 0;
+    });
+  }, [chatLogs, contentTypeFilter]);
 
-  const handleResumeChat = async () => {
+  const handleResumeChat = async (_prompt?: string) => {
     if (selectedChatLog) {
       resumeSession(selectedChatLog);
+      add(
+        createAlertOptions({
+          description:
+            t('write_and_speak.chatResumed') || 'Conversation resumed.',
+          severity: 'success',
+        })
+      );
       onClose();
     }
   };
 
+  const handleCloseResumeDrawer = () => {
+    setIsViewingChatDetail(false);
+    setSelectedChatLog(null);
+  };
+
   const handleExportChat = (chatLog: ChatLog, e: React.MouseEvent) => {
-    e.stopPropagation(); // Prevent the card from toggling
+    e.stopPropagation(); // Prevent the list item from toggling
     const text = `${t(
       'write_and_speak.conversationStartedLabel'
     )} ${new Intl.DateTimeFormat(navigator.language, {
@@ -707,6 +795,28 @@ const ChatHistoryDrawer = ({
     );
   };
 
+  const handleExportSelectedChat = () => {
+    if (!selectedChatLog) return;
+    const text = `${t(
+      'write_and_speak.conversationStartedLabel'
+    )} ${new Intl.DateTimeFormat(navigator.language, {
+      dateStyle: 'short',
+      timeStyle: 'short',
+    }).format(new Date())}\n\n`.concat(
+      selectedChatLog.lines
+        .map(line => `${line.inbound ? 'YOU' : memori.name}: ${line.text}`)
+        .join('\n')
+    );
+
+    downloadFile(
+      text,
+      `${memori.name.replace(
+        /\W+/g,
+        '-'
+      )}-chat-${selectedChatLog.chatLogID.substring(0, 4)}.txt`
+    );
+  };
+
   const formatDate = (timestamp: string) => {
     return new Intl.DateTimeFormat(navigator.language, {
       dateStyle: 'medium',
@@ -714,6 +824,73 @@ const ChatHistoryDrawer = ({
     }).format(new Date(timestamp));
   };
 
+  const formatCountLabel = (count: number, singular: string, plural: string) =>
+    `${count} ${count === 1 ? singular : plural}`;
+
+  const selectedChatSession = useMemo(() => {
+    if (!selectedChatLog) return null;
+
+    const title =
+      calculateTitle(selectedChatLog.lines) ||
+      'Chat-' + selectedChatLog.chatLogID.substring(0, 4);
+
+    const hasInterruptedLine = selectedChatLog.lines.some(
+      line => !line.inbound && !line.text?.trim()
+    );
+    const lastMessageDate = Math.max(
+      ...selectedChatLog.lines.map(line => new Date(line.timestamp).getTime())
+    );
+
+    return {
+      title,
+      subtitle: `${formatDate(new Date(lastMessageDate).toISOString())} · ${
+        selectedChatLog.lines.length
+      } ${t('write_and_speak.messages') || 'messages'}`,
+      summary:
+        t('write_and_speak.sessionSummaryDescription') ||
+        'Hai caricato un file Markdown con la presentazione del gruppo. L’AI stava elaborando una risposta.',
+      messages: selectedChatLog.lines.map((line, index) => ({
+        id: `${selectedChatLog.chatLogID}-${index}`,
+        role: line.inbound ? ('user' as const) : ('assistant' as const),
+        content: line.text || '',
+        timestamp: line.timestamp,
+        media: (line.media || []).map((medium, mediumIndex) => ({
+          ...medium,
+          mediumID:
+            (medium as { mediumID?: string }).mediumID ||
+            `${selectedChatLog.chatLogID}-${index}-${mediumIndex}`,
+        })),
+        status:
+          !line.inbound && !line.text?.trim() && hasInterruptedLine
+            ? ('interrupted' as const)
+            : ('completed' as const),
+        attachment:
+          line.inbound && Array.isArray(line.media) && line.media.length > 0
+            ? {
+                name:
+                  line.media[0].url?.split('/').pop() ||
+                  line.media[0].url ||
+                  'Attachment file',
+                type: 'Markdown',
+                size: '2.4 KB',
+                ext: 'MD',
+              }
+            : undefined,
+      })),
+      quickActions: [
+        {
+          label:
+            t('write_and_speak.summarizeSession') || 'Riassumi la sessione',
+          prompt: 'Riassumi la sessione',
+        },
+        {
+          label: t('write_and_speak.retryRequest') || 'Riprova la richiesta',
+          prompt: 'Riprova la richiesta',
+        },
+      ],
+    };
+  }, [selectedChatLog, t]);
+
   const escapeUnderScore = (value: string) => {
     return value.replace(/_/g, ' ');
   };
@@ -746,7 +923,7 @@ const ChatHistoryDrawer = ({
     if (!chatLogs.length) {
       return (
         <div className="memori-chat-history-drawer--empty">
-          <ChatRound className="memori-chat-history-drawer--empty--icon" />
+          <MessageCircle className="memori-chat-history-drawer--empty--icon" />
           <p className="memori-chat-history-drawer--empty--text">
             {t('write_and_speak.noChatHistoryAvailable') ||
               'No chat history available'}
@@ -755,7 +932,7 @@ const ChatHistoryDrawer = ({
       );
     }
 
-    if (chatLogs.length === 0) {
+    if (paginatedChatLogs.length === 0) {
       return (
         <div className="memori-chat-history-drawer--no-results">
           <p>
@@ -769,338 +946,191 @@ const ChatHistoryDrawer = ({
 
     return (
       <>
-        <ul className="memori-chat-history-drawer--list">
-          {paginatedChatLogs.map((chatLog: ChatLog) => {
+        <ul
+          className="memori-chat-history-drawer--list"
+          aria-label={t('write_and_speak.chatHistory') || 'Chat history'}
+        >
+          {paginatedChatLogs.map((chatLog: ChatLog, index: number) => {
             const lastMessageDate = Math.max(
               ...chatLog.lines.map(line => new Date(line.timestamp).getTime())
             );
+            const stats = getChatLogStats(chatLog);
+            const iconSymbol = stats.fileCount > 0
+              ? '📄'
+              : stats.isTestConversation
+              ? '🧪'
+              : '💬';
+            const iconBackgroundColor =
+              ICON_BACKGROUND_COLORS[index % ICON_BACKGROUND_COLORS.length];
+            const isUpdatedToday = isSameDay(
+              new Date(lastMessageDate),
+              new Date()
+            );
+            const title =
+              calculateTitle(chatLog.lines) ||
+              'Chat-' + chatLog.chatLogID.substring(0, 4);
+
+            const isCurrentSession = chatLog?.sessionID === sessionId;
 
             return (
-              <Card
-                hoverable={chatLog?.sessionID !== sessionId}
-                onClick={async () => {
-                  // the active chat
-                  if (chatLog?.sessionID === sessionId) {
-                    return;
-                  }
-                  if (selectedChatLog?.chatLogID === chatLog.chatLogID) {
-                    setSelectedChatLog(null);
-                    if (isMobile) {
-                      setIsViewingChatDetail(false);
+              <li key={chatLog.chatLogID}>
+                <button
+                  type="button"
+                  aria-disabled={isCurrentSession || undefined}
+                  aria-label={title}
+                  className={`memori-chat-history-drawer--list-item ${
+                    selectedChatLog?.chatLogID === chatLog.chatLogID
+                      ? 'memori-chat-history-drawer--list-item--selected'
+                      : ''
+                  } ${
+                    !isCurrentSession
+                      ? 'memori-chat-history-drawer--list-item--hoverable'
+                      : ''
+                  } ${
+                    isCurrentSession
+                      ? 'memori-chat-history-drawer--list-item--disabled'
+                      : ''
+                  }`}
+                  onKeyDown={event => {
+                    if (
+                      isCurrentSession &&
+                      (event.key === 'Enter' || event.key === ' ')
+                    ) {
+                      event.preventDefault();
                     }
-                    return;
-                  }
-                  setSelectedChatLog(chatLog);
-                  // if (isMobile) {
-                  setIsViewingChatDetail(true);
-                  // }
-                }}
-                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--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>
+                  }}
+                  onClick={async () => {
+                    if (isCurrentSession) {
+                      return;
+                    }
+                    if (selectedChatLog?.chatLogID === chatLog.chatLogID) {
+                      setSelectedChatLog(null);
+                      if (isMobile) {
+                        setIsViewingChatDetail(false);
+                      }
+                      return;
+                    }
+                    setSelectedChatLog(chatLog);
+                    // if (isMobile) {
+                    setIsViewingChatDetail(true);
+                    // }
+                  }}
+                >
+                  {/* <div
+                    className="memori-chat-history-drawer--list-item--icon"
+                    style={{ backgroundColor: iconBackgroundColor }}
+                    aria-hidden="true"
+                  >
+                    {iconSymbol}
+                  </div> */}
+                  <div className="memori-chat-history-drawer--list-item--content">
+                    <div className="memori-chat-history-drawer--list-item--title-wrapper">
+                      <span className="memori-chat-history-drawer--list-item--title">
+                        {title}
+                      </span>
+                      {isUpdatedToday && (
+                        <span className="memori-chat-history-drawer--list-item--today-pill">
+                          {t('today') || 'Today'}
+                        </span>
+                      )}
                     </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"
+                    {/* {stats.preview && (
+                      <p className="memori-chat-history-drawer--list-item--preview">
+                        {stats.preview}
+                      </p>
+                    )} */}
+                    <div className="memori-chat-history-drawer--list-item--meta">
+                      <time
+                        className="memori-chat-history-drawer--list-item--meta--time"
+                        dateTime={new Date(lastMessageDate).toISOString()}
                       >
-                        <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
+                        {formatDate(new Date(lastMessageDate).toISOString())}
+                      </time>
+                      <span className="memori-chat-history-drawer--list-item--meta-badge memori-chat-history-drawer--list-item--meta-badge-messages">
+                        {formatCountLabel(
+                          stats.messageCount,
+                          t('write_and_speak.message') || 'message',
+                          t('write_and_speak.messages') || 'messages'
                         )}
                       </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>
-                    {!isMobile && (
-                      <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>
-                    )}
+                      {stats.imageCount > 0 && (
+                        <span className="memori-chat-history-drawer--list-item--meta-badge memori-chat-history-drawer--list-item--meta-badge-images">
+                          {formatCountLabel(
+                            stats.imageCount,
+                            t('write_and_speak.image') || 'image',
+                            t('write_and_speak.images') || 'images'
+                          )}
+                        </span>
+                      )}
+                      {stats.fileCount > 0 && (
+                        <span className="memori-chat-history-drawer--list-item--meta-badge memori-chat-history-drawer--list-item--meta-badge-files">
+                          {formatCountLabel(
+                            stats.fileCount,
+                            t('write_and_speak.file') || 'file',
+                            t('write_and_speak.files') || 'files'
+                          )}
+                        </span>
+                      )}
+                      {chatLog.boardOfExperts && (
+                        <span className="memori-chat-history-drawer--list-item--meta-badge memori-chat-history-drawer--list-item--meta-badge-boe">
+                          boe
+                        </span>
+                      )}
+                    </div>
                   </div>
-
-                  {/* {selectedChatLog?.chatLogID === chatLog.chatLogID &&
-                    !isMobile && (
-                      <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>
+                </button>
+                {/* {!isMobile && (
+                  <div className="memori-chat-history-drawer--list-item--actions">
+                    <Button
+                      variant="ghost"
+                      onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
+                        handleExportChat(chatLog, e)
+                      }
+                      disabled={chatLog?.sessionID === sessionId}
+                      icon={<Download />}
+                    />
+                  </div>
+                )} */}
+              </li>
             );
           })}
         </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>
-        )}
       </>
     );
   };
 
-  const renderChatDetailView = () => {
-    if (!selectedChatLog) return null;
-
-    // Calculate the date of the chat (using the last message timestamp)
-    const lastMessageDate = Math.max(
-      ...selectedChatLog.lines.map(line => new Date(line.timestamp).getTime())
-    );
-    const chatDate = formatDate(new Date(lastMessageDate).toISOString());
-
+  const renderListPagination = () => {
+    if (totalPages <= 1) return null;
     return (
-      <div className="memori-chat-history-drawer--detail-view">
-        <div className="memori-chat-history-drawer--detail-view--header">
-          <Button
-            className="memori-chat-history-drawer--detail-view--back-button"
-            onClick={() => {
-              setIsViewingChatDetail(false);
-              setSelectedChatLog(null);
-            }}
-            icon={<ChevronLeft />}
-          />
-          <div className="memori-chat-history-drawer--detail-view--header--title-wrapper">
-            <div className="memori-chat-history-drawer--detail-view--header--title">
-              {calculateTitle(selectedChatLog.lines) ||
-                'Chat-' + selectedChatLog.chatLogID.substring(0, 4)}
-            </div>
-            <div className="memori-chat-history-drawer--detail-view--header--date">
-              {chatDate}
-            </div>
-          </div>
-        </div>
-        <div className="memori-chat-history-drawer--detail-view--content">
-          <div className="memori-chat-history-drawer--detail-view--messages">
-            <Chat
-              key={`${selectedChatLog.chatLogID}-${selectedChatLog.lines.length}`}
-              baseUrl={baseUrl}
-              apiUrl={apiUrl}
-              memoriTyping={false}
-              showTypingText={false}
-              showAIicon={true}
-              showTranslationOriginal={false}
-              showWhyThisAnswer={false}
-              showCopyButton={false}
-              isChatlogPanel={true}
-              showInputs={false}
-              history={selectedChatLog.lines.map(line => ({
-                text: line.text,
-                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--detail-view--actions">
-            <Button
-              className="memori-chat-history-drawer--detail-view--resume-button"
-              primary
-              onClick={handleResumeChat}
-            >
-              <div className="memori-chat-history-drawer--detail-view--resume-button--content">
-                {/* <ChatRound className="memori-chat-history-drawer--detail-view--resume-button--icon" /> */}
-                <span className="memori-chat-history-drawer--detail-view--resume-button--text">
-                  {t('write_and_speak.resumeButton') || 'Resume chat'}
-                </span>
-              </div>
-            </Button>
-          </div>
-        </div>
-      </div>
+      <nav
+        className="memori-chat-history-drawer--pagination"
+        aria-label={
+          t('write_and_speak.chatHistory') || 'Chat history pagination'
+        }
+      >
+        <Button
+          variant="outline"
+          onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+          disabled={currentPage === 1}
+          className="memori-chat-history-drawer--pagination--button memori-chat-history-drawer--pagination--prev"
+          icon={<ChevronLeft />}
+          title={t('previous') || 'Previous'}
+        />
+        <span className="memori-chat-history-drawer--pagination--info">
+          {t('write_and_speak.page', {
+            current: currentPage,
+            total: totalPages,
+          })}
+        </span>
+        <Button
+          variant="outline"
+          onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+          disabled={currentPage === totalPages}
+          className="memori-chat-history-drawer--pagination--button memori-chat-history-drawer--pagination--next"
+          icon={<ChevronRight />}
+          title={t('next') || 'Next'}
+        />
+      </nav>
     );
   };
 
@@ -1109,186 +1139,150 @@ const ChatHistoryDrawer = ({
       className="memori-chat-history-drawer"
       open={open}
       onClose={onClose}
-      titleWithClosable={{
-        title: t('write_and_speak.chatHistory') || 'Chat History',
-        actions: [
-          {
-            icon: <Download />,
-            visible: isViewingChatDetail,
-            onClick: () => {
-              //download the chat already opened
-              const fileName = `${memori.name.replace(/\W+/g, '-')}-chat-${
-                new Date().toISOString().split('T')[0]
-              }.txt`;
-              const text =
-                selectedChatLog?.lines
-                  .map(
-                    line =>
-                      `${line.inbound ? 'YOU' : memori.name}: ${stripAllInternalTags(line.text)}`
-                  )
-                  .join('\n')
-                  .replaceAll(/<think.*?>(.*?)<\/think>/gs, '')
-                  .replaceAll(
-                    /<output.*?<\/output>/gsi,
-                    ''
-                  )
-                  .replaceAll(/```markdown([^```]+)```/g, '$1')
-                  .replaceAll('($', '( $')
-                  .replaceAll(':$', ': $')
-                  .replaceAll('\frac', '\\frac')
-                  .replaceAll('\beta', '\\beta')
-                  .replaceAll('cdot', '\\cdot') || 'No chat history available';
-              downloadFile(text, fileName);
-            },
-          },
-        ],
-        showClosable: true,
-      }}
-      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>
-      }
-      description={
-        !isViewingChatDetail
-          ? t('write_and_speak.chatHistoryDescription')
-          : undefined
-      }
+      title={t('write_and_speak.chatHistory') || 'Chat History'}
+      closable={true}
+      anchor="left"
+      size="md"
+      description={t('write_and_speak.chatHistoryDescription')}
     >
-      {isViewingChatDetail ? (
-        renderChatDetailView()
+      {selectedChatSession && isViewingChatDetail ? (
+        <div className="memori-chat-history-drawer--content memori-chat-history-drawer--content-with-footer">
+          <ChatResumeDrawer
+            embedded={true}
+            isOpen={true}
+            session={selectedChatSession}
+            onResume={handleResumeChat}
+            onBack={handleCloseResumeDrawer}
+            onClose={handleCloseResumeDrawer}
+            onExportChat={handleExportSelectedChat}
+          />
+        </div>
       ) : (
-        <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}>
+        <div className="memori-chat-history-drawer--content memori-chat-history-drawer--content-with-footer">
+          <div className="memori-chat-history-drawer--scrollable">
+            <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);
-                }}
-                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);
+                <SelectBox
+                  placeholder={
+                    (t('chatLogs.customMinimumMessages') ||
+                      'Customize the number of messages') ??
+                    'Customize the number of messages'
+                  }
+                  value={String(minimumMessagesPerChat)}
+                  onChange={value => {
+                    setMinimumMessagesPerChat(value ? Number(value) : 0);
                   }}
-                  style={{ minWidth: 50 }}
-                  className="memori-chat-history-drawer--toolbar--min-messages-filter--input-number"
+                  displayValue={
+                    minimumMessagesPerChat === 0
+                      ? t('chatLogs.customMinimumMessages') ||
+                        'Customize the number of messages'
+                      : t('chatLogs.atLeast' + minimumMessagesPerChat) ||
+                        'At least ' + minimumMessagesPerChat + ' messages'
+                  }
+                  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',
+                    },
+                  ]}
                 />
-              )}
-            </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
-                }}
-              />
+                {minimumMessagesPerChat === 0 && (
+                  <input
+                    type="number"
+                    min={1}
+                    value={customMinimumMessages}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      const value = parseInt(e.target.value, 10);
+                      setCustomMinimumMessages(value);
+                    }}
+                    style={{ minWidth: 50 }}
+                    className="memori-chat-history-drawer--toolbar--min-messages-filter--input-number"
+                  />
+                )}
+              </div>
+              <div className="memori-chat-history-drawer--toolbar--actions">
+                <SelectBox
+                  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={dateRange}
+                  displayValue={
+                    dateRange === 'all'
+                      ? t('all') || 'All'
+                      : t(dateRange) || dateRange
+                  }
+                  className="memori-chat-history-drawer--toolbar--actions--select"
+                  onChange={value => {
+                    if (value) {
+                      setDateRange(
+                        value as
+                          | 'today'
+                          | 'yesterday'
+                          | 'last_7_days'
+                          | 'last_30_days'
+                          | 'all'
+                      );
+                      setCurrentPage(1);
+                    }
+                  }}
+                />
+              </div>
             </div>
+            {renderContent()}
           </div>
-          {renderContent()}
+          {totalPages > 1 && (
+            <div className="memori-chat-history-drawer--pagination-footer">
+              {renderListPagination()}
+            </div>
+          )}
         </div>
       )}
     </Drawer>