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

package/esm/components/ChatHistoryDrawer/ChatHistory.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import memoriApiClient from '@memori.ai/memori-api-client';
 import { ChatLog, Memori, Message } from '@memori.ai/memori-api-client/dist/types';
 export interface Props {

package/esm/components/ChatHistoryDrawer/ChatHistory.js

@@ -1,22 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import Drawer from '../ui/Drawer';
+import { Drawer, useAlertManager, createAlertOptions } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
-import { useEffect, useMemo, useState, useCallback, } from 'react';
-import Card from '../ui/Card';
-import Button from '../ui/Button';
-import ChatRound from '../icons/Chat';
+import { useEffect, useMemo, useState, useCallback } from 'react';
+import { Button } from '@memori.ai/ui';
+import { MessageCircle, ChevronLeft, ChevronRight, } 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 Select from '../ui/Select';
-import ChevronLeft from '../icons/ChevronLeft';
+import { Spin } from '@memori.ai/ui';
+import { SelectBox } from '@memori.ai/ui';
 import { getTranslation } from '../../helpers/translations';
+import ChatResumeDrawer from './ChatResumeDrawer';
 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)',
+];
+const isImageMimeType = (mimeType) => { var _a; return (_a = mimeType === null || mimeType === void 0 ? void 0 : mimeType.startsWith('image/')) !== null && _a !== void 0 ? _a : false; };
+const isFileMimeType = (mimeType) => !isImageMimeType(mimeType);
 const calculateTitle = (lines) => {
     const userMessages = lines.filter(line => line.inbound);
     if (userMessages.length === 0)
@@ -314,8 +318,9 @@ const downloadFile = (text, filename) => {
     document.body.removeChild(element);
 };
 const ChatHistoryDrawer = ({ open, onClose, apiClient, sessionId, memori, resumeSession, baseUrl, apiUrl, history, loginToken, language, userLang, isMultilanguageEnabled = false, }) => {
-    var _a, _b, _c, _d;
+    var _a;
     const { t } = useTranslation();
+    const { add } = useAlertManager();
     const { getUserChatLogsByTokenPaged } = apiClient.chatLogs;
     const textCurrentChat = `${t('write_and_speak.conversationStartedLabel')} ${new Intl.DateTimeFormat('it', {
         dateStyle: 'short',
@@ -338,6 +343,39 @@ const ChatHistoryDrawer = ({ open, onClose, apiClient, sessionId, memori, resume
     const [isViewingChatDetail, setIsViewingChatDetail] = useState(false);
     const [minimumMessagesPerChat, setMinimumMessagesPerChat] = useState(3);
     const [customMinimumMessages, setCustomMinimumMessages] = useState(1);
+    const [contentTypeFilter, setContentTypeFilter] = useState('all');
+    const isSameDay = (dateA, dateB) => dateA.getFullYear() === dateB.getFullYear() &&
+        dateA.getMonth() === dateB.getMonth() &&
+        dateA.getDate() === dateB.getDate();
+    const getChatLogStats = (chatLog) => {
+        const imageCount = chatLog.lines.reduce((total, line) => {
+            var _a;
+            const imagesInLine = ((_a = line.media) === null || _a === void 0 ? void 0 : _a.filter(medium => isImageMimeType(medium.mimeType)).length) || 0;
+            return total + imagesInLine;
+        }, 0);
+        const fileCount = chatLog.lines.reduce((total, line) => {
+            var _a;
+            const filesInLine = ((_a = line.media) === null || _a === void 0 ? void 0 : _a.filter(medium => isFileMimeType(medium.mimeType)).length) || 0;
+            return total + filesInLine;
+        }, 0);
+        const assistantReplies = chatLog.lines.filter(line => { var _a; return !line.inbound && ((_a = line.text) === null || _a === void 0 ? void 0 : _a.trim()); });
+        const previewSource = assistantReplies[1] || assistantReplies[0];
+        const preview = stripHTML((previewSource === null || previewSource === void 0 ? void 0 : 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) => {
         const year = date.getFullYear();
         const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -465,20 +503,52 @@ const ChatHistoryDrawer = ({ open, onClose, apiClient, sessionId, memori, resume
             setCurrentPage(1);
             setIndexPage(0);
         }
-    }, [sortOrder, dateRange, minimumMessagesPerChat, customMinimumMessages, open]);
+    }, [
+        sortOrder,
+        dateRange,
+        minimumMessagesPerChat,
+        customMinimumMessages,
+        open,
+    ]);
     useEffect(() => {
         if (open && currentPage > 0) {
             fetchChatLogs(dateRange);
         }
-    }, [currentPage, dateRange, minimumMessagesPerChat, customMinimumMessages, fetchChatLogs, open]);
+    }, [
+        currentPage,
+        dateRange,
+        minimumMessagesPerChat,
+        customMinimumMessages,
+        fetchChatLogs,
+        open,
+    ]);
     const debouncedSearch = useMemo(() => debounce((value) => setSearchText(value), DEBOUNCE_DELAY), []);
-    const paginatedChatLogs = chatLogs;
-    const handleResumeChat = async () => {
+    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 (_prompt) => {
         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, e) => {
         e.stopPropagation();
         const text = `${t('write_and_speak.conversationStartedLabel')} ${new Intl.DateTimeFormat(navigator.language, {
@@ -489,12 +559,75 @@ const ChatHistoryDrawer = ({ open, onClose, apiClient, sessionId, memori, resume
             .join('\n'));
         downloadFile(text, `${memori.name.replace(/\W+/g, '-')}-chat-${chatLog.chatLogID.substring(0, 4)}.txt`);
     };
+    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) => {
         return new Intl.DateTimeFormat(navigator.language, {
             dateStyle: 'medium',
             timeStyle: 'short',
         }).format(new Date(timestamp));
     };
+    const formatCountLabel = (count, singular, plural) => `${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 => { var _a; return !line.inbound && !((_a = line.text) === null || _a === void 0 ? void 0 : _a.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) => {
+                var _a, _b;
+                return ({
+                    id: `${selectedChatLog.chatLogID}-${index}`,
+                    role: line.inbound ? 'user' : 'assistant',
+                    content: line.text || '',
+                    timestamp: line.timestamp,
+                    media: (line.media || []).map((medium, mediumIndex) => ({
+                        ...medium,
+                        mediumID: medium.mediumID ||
+                            `${selectedChatLog.chatLogID}-${index}-${mediumIndex}`,
+                    })),
+                    status: !line.inbound && !((_a = line.text) === null || _a === void 0 ? void 0 : _a.trim()) && hasInterruptedLine
+                        ? 'interrupted'
+                        : 'completed',
+                    attachment: line.inbound && Array.isArray(line.media) && line.media.length > 0
+                        ? {
+                            name: ((_b = line.media[0].url) === null || _b === void 0 ? void 0 : _b.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) => {
         return value.replace(/_/g, ' ');
     };
@@ -507,18 +640,40 @@ const ChatHistoryDrawer = ({ open, onClose, apiClient, sessionId, memori, resume
             return (_jsx("div", { className: "memori-chat-history-drawer--error", children: _jsx("p", { children: error }) }));
         }
         if (!chatLogs.length) {
-            return (_jsxs("div", { className: "memori-chat-history-drawer--empty", children: [_jsx(ChatRound, { className: "memori-chat-history-drawer--empty--icon" }), _jsx("p", { className: "memori-chat-history-drawer--empty--text", children: t('write_and_speak.noChatHistoryAvailable') ||
+            return (_jsxs("div", { className: "memori-chat-history-drawer--empty", children: [_jsx(MessageCircle, { className: "memori-chat-history-drawer--empty--icon" }), _jsx("p", { className: "memori-chat-history-drawer--empty--text", children: t('write_and_speak.noChatHistoryAvailable') ||
                             'No chat history available' })] }));
         }
-        if (chatLogs.length === 0) {
+        if (paginatedChatLogs.length === 0) {
             return (_jsx("div", { className: "memori-chat-history-drawer--no-results", children: _jsx("p", { children: t('write_and_speak.noResultsFound', {
                         searchText: searchText || '',
                     }) || 'No results found' }) }));
         }
-        return (_jsxs(_Fragment, { children: [_jsx("ul", { className: "memori-chat-history-drawer--list", children: paginatedChatLogs.map((chatLog) => {
-                        const lastMessageDate = Math.max(...chatLog.lines.map(line => new Date(line.timestamp).getTime()));
-                        return (_jsx(Card, { hoverable: (chatLog === null || chatLog === void 0 ? void 0 : chatLog.sessionID) !== sessionId, onClick: async () => {
-                                if ((chatLog === null || chatLog === void 0 ? void 0 : chatLog.sessionID) === sessionId) {
+        return (_jsx(_Fragment, { children: _jsx("ul", { className: "memori-chat-history-drawer--list", "aria-label": t('write_and_speak.chatHistory') || 'Chat history', children: paginatedChatLogs.map((chatLog, index) => {
+                    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 === null || chatLog === void 0 ? void 0 : chatLog.sessionID) === sessionId;
+                    return (_jsx("li", { children: _jsx("button", { type: "button", "aria-disabled": isCurrentSession || undefined, "aria-label": title, className: `memori-chat-history-drawer--list-item ${(selectedChatLog === null || selectedChatLog === void 0 ? void 0 : 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();
+                                }
+                            }, onClick: async () => {
+                                if (isCurrentSession) {
                                     return;
                                 }
                                 if ((selectedChatLog === null || selectedChatLog === void 0 ? void 0 : selectedChatLog.chatLogID) === chatLog.chatLogID) {
@@ -530,138 +685,84 @@ const ChatHistoryDrawer = ({ open, onClose, apiClient, sessionId, memori, resume
                                 }
                                 setSelectedChatLog(chatLog);
                                 setIsViewingChatDetail(true);
-                            }, className: `memori-chat-history-drawer--card ${(selectedChatLog === null || selectedChatLog === void 0 ? void 0 : selectedChatLog.chatLogID) === chatLog.chatLogID
-                                ? 'memori-chat-history-drawer--card--selected'
-                                : ''} ${(chatLog === null || chatLog === void 0 ? void 0 : chatLog.sessionID) === sessionId
-                                ? 'memori-chat-history-drawer--card--disabled'
-                                : 'memori-chat-history-drawer--card--hoverable'}`, children: _jsxs(_Fragment, { children: [_jsx("div", { className: "memori-chat-history-drawer--card--header", children: _jsx("div", { className: "memori-chat-history-drawer--card--header--content", children: _jsx("div", { className: "memori-chat-history-drawer--card--header--info", children: _jsxs("div", { className: "memori-chat-history-drawer--card--header--title-wrapper", children: [_jsx(Dialog.Title, { as: "h3", className: "memori-chat-history-drawer--card--header--title", children: calculateTitle(chatLog.lines) ||
-                                                                'Chat-' + chatLog.chatLogID.substring(0, 4) }), chatLog.boardOfExperts && (_jsx("div", { className: "memori-chat-history-drawer--card--header--badge", children: "BOE" }))] }) }) }) }), _jsxs("div", { className: "memori-chat-history-drawer--card--header--meta", children: [_jsx("time", { className: "memori-chat-history-drawer--card--header--meta--time", dateTime: new Date(lastMessageDate).toISOString(), children: formatDate(new Date(lastMessageDate).toISOString()) }), chatLog.lines.some(line => line.media &&
-                                                line.media.filter(m => m.mimeType !== 'text/html' &&
-                                                    m.mimeType !== 'text/plain').length > 0) && (_jsxs("span", { className: "memori-chat-history-drawer--card--header--meta--messages", children: [_jsx("svg", { className: "memori-chat-history-drawer--card--header--meta--icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("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" }) }), chatLog.lines.reduce((acc, line) => {
-                                                        var _a;
-                                                        return acc +
-                                                            (((_a = line.media) === null || _a === void 0 ? void 0 : _a.filter(m => m.mimeType !== 'text/html' &&
-                                                                m.mimeType !== 'text/plain').length) || 0);
-                                                    }, 0)] })), _jsxs("span", { className: "memori-chat-history-drawer--card--header--meta--messages", children: [_jsx("svg", { className: "memori-chat-history-drawer--card--header--meta--icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("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" }) }), chatLog.lines.length] }), !isMobile && (_jsx("div", { className: "memori-chat-history-drawer--card--content--header", children: _jsx(Button, { className: "memori-chat-history-drawer--card--content--export-button", onClick: e => handleExportChat(chatLog, e), disabled: (chatLog === null || chatLog === void 0 ? void 0 : chatLog.sessionID) === sessionId, children: _jsx("div", { className: "memori-chat-history-drawer--card--content--export-button--content", children: _jsx(Download, { className: "memori-chat-history-drawer--card--content--export-button--icon" }) }) }) }))] })] }) }, chatLog.chatLogID));
-                    }) }), totalPages > 1 && (_jsxs("div", { className: "memori-chat-history-drawer--pagination", children: [_jsx(Button, { primary: true, onClick: () => {
-                                setCurrentPage(p => Math.max(1, p - 1));
-                            }, disabled: currentPage === 1, className: "memori-chat-history-drawer--pagination--button", children: t('previous') || 'Previous' }), _jsx("span", { className: "memori-chat-history-drawer--pagination--info", children: t('write_and_speak.page', {
-                                current: currentPage,
-                                total: totalPages,
-                            }) }), _jsx(Button, { primary: true, onClick: () => {
-                                setCurrentPage(p => Math.min(totalPages, p + 1));
-                            }, disabled: currentPage === totalPages, className: "memori-chat-history-drawer--pagination--button", children: t('next') || 'Next' })] }))] }));
+                            }, children: _jsxs("div", { className: "memori-chat-history-drawer--list-item--content", children: [_jsxs("div", { className: "memori-chat-history-drawer--list-item--title-wrapper", children: [_jsx("span", { className: "memori-chat-history-drawer--list-item--title", children: title }), isUpdatedToday && (_jsx("span", { className: "memori-chat-history-drawer--list-item--today-pill", children: t('today') || 'Today' }))] }), _jsxs("div", { className: "memori-chat-history-drawer--list-item--meta", children: [_jsx("time", { className: "memori-chat-history-drawer--list-item--meta--time", dateTime: new Date(lastMessageDate).toISOString(), children: formatDate(new Date(lastMessageDate).toISOString()) }), _jsx("span", { className: "memori-chat-history-drawer--list-item--meta-badge memori-chat-history-drawer--list-item--meta-badge-messages", children: formatCountLabel(stats.messageCount, t('write_and_speak.message') || 'message', t('write_and_speak.messages') || 'messages') }), stats.imageCount > 0 && (_jsx("span", { className: "memori-chat-history-drawer--list-item--meta-badge memori-chat-history-drawer--list-item--meta-badge-images", children: formatCountLabel(stats.imageCount, t('write_and_speak.image') || 'image', t('write_and_speak.images') || 'images') })), stats.fileCount > 0 && (_jsx("span", { className: "memori-chat-history-drawer--list-item--meta-badge memori-chat-history-drawer--list-item--meta-badge-files", children: formatCountLabel(stats.fileCount, t('write_and_speak.file') || 'file', t('write_and_speak.files') || 'files') })), chatLog.boardOfExperts && (_jsx("span", { className: "memori-chat-history-drawer--list-item--meta-badge memori-chat-history-drawer--list-item--meta-badge-boe", children: "boe" }))] })] }) }) }, chatLog.chatLogID));
+                }) }) }));
     };
-    const renderChatDetailView = () => {
-        if (!selectedChatLog)
+    const renderListPagination = () => {
+        if (totalPages <= 1)
             return null;
-        const lastMessageDate = Math.max(...selectedChatLog.lines.map(line => new Date(line.timestamp).getTime()));
-        const chatDate = formatDate(new Date(lastMessageDate).toISOString());
-        return (_jsxs("div", { className: "memori-chat-history-drawer--detail-view", children: [_jsxs("div", { className: "memori-chat-history-drawer--detail-view--header", children: [_jsx(Button, { className: "memori-chat-history-drawer--detail-view--back-button", onClick: () => {
-                                setIsViewingChatDetail(false);
-                                setSelectedChatLog(null);
-                            }, icon: _jsx(ChevronLeft, {}) }), _jsxs("div", { className: "memori-chat-history-drawer--detail-view--header--title-wrapper", children: [_jsx("div", { className: "memori-chat-history-drawer--detail-view--header--title", children: calculateTitle(selectedChatLog.lines) ||
-                                        'Chat-' + selectedChatLog.chatLogID.substring(0, 4) }), _jsx("div", { className: "memori-chat-history-drawer--detail-view--header--date", children: chatDate })] })] }), _jsxs("div", { className: "memori-chat-history-drawer--detail-view--content", children: [_jsx("div", { className: "memori-chat-history-drawer--detail-view--messages", children: _jsx(Chat, { 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,
-                                    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 }, `${selectedChatLog.chatLogID}-${selectedChatLog.lines.length}`) }), _jsx("div", { className: "memori-chat-history-drawer--detail-view--actions", children: _jsx(Button, { className: "memori-chat-history-drawer--detail-view--resume-button", primary: true, onClick: handleResumeChat, children: _jsx("div", { className: "memori-chat-history-drawer--detail-view--resume-button--content", children: _jsx("span", { className: "memori-chat-history-drawer--detail-view--resume-button--text", children: t('write_and_speak.resumeButton') || 'Resume chat' }) }) }) })] })] }));
+        return (_jsxs("nav", { className: "memori-chat-history-drawer--pagination", "aria-label": t('write_and_speak.chatHistory') || 'Chat history pagination', children: [_jsx(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: _jsx(ChevronLeft, {}), title: t('previous') || 'Previous' }), _jsx("span", { className: "memori-chat-history-drawer--pagination--info", children: t('write_and_speak.page', {
+                        current: currentPage,
+                        total: totalPages,
+                    }) }), _jsx(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: _jsx(ChevronRight, {}), title: t('next') || 'Next' })] }));
     };
-    return (_jsx(Drawer, { className: "memori-chat-history-drawer", open: open, onClose: onClose, titleWithClosable: {
-            title: t('write_and_speak.chatHistory') || 'Chat History',
-            actions: [
-                {
-                    icon: _jsx(Download, {}),
-                    visible: isViewingChatDetail,
-                    onClick: () => {
-                        const fileName = `${memori.name.replace(/\W+/g, '-')}-chat-${new Date().toISOString().split('T')[0]}.txt`;
-                        const text = (selectedChatLog === null || selectedChatLog === void 0 ? void 0 : 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: _jsx("div", { className: "memori-chat-history-drawer--title-wrapper", style: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                width: '100%',
-            }, children: _jsx("span", { children: t('write_and_speak.chatHistory') || 'Chat History' }) }), description: !isViewingChatDetail
-            ? t('write_and_speak.chatHistoryDescription')
-            : undefined, children: isViewingChatDetail ? (renderChatDetailView()) : (_jsxs("div", { className: "memori-chat-history-drawer--content", children: [_jsxs("div", { className: "memori-chat-history-drawer--toolbar", children: [_jsxs("div", { className: "memori-chat-history-drawer--toolbar--min-messages-filter", children: [_jsx(Select, { displayValue: minimumMessagesPerChat === 0
-                                        ? (_a = (t('chatLogs.customMinimumMessages') ||
-                                            'Customize the number of messages')) !== null && _a !== void 0 ? _a : 'Customize the number of messages'
-                                        : minimumMessagesPerChat === 1
-                                            ? (_b = (t('chatLogs.anyMessage') || 'Any message')) !== null && _b !== void 0 ? _b : 'Any message'
-                                            : (_c = t('chatLogs.atLeast', {
-                                                count: minimumMessagesPerChat,
-                                            })) !== null && _c !== void 0 ? _c : `At least ${minimumMessagesPerChat} messages`, placeholder: (_d = (t('chatLogs.customMinimumMessages') ||
-                                        'Customize the number of messages')) !== null && _d !== void 0 ? _d : '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 && (_jsx("input", { type: "number", min: 1, value: customMinimumMessages, onChange: (e) => {
-                                        const value = parseInt(e.target.value, 10);
-                                        setCustomMinimumMessages(value);
-                                    }, style: { minWidth: 50 }, className: "memori-chat-history-drawer--toolbar--min-messages-filter--input-number" }))] }), _jsx("div", { className: "memori-chat-history-drawer--toolbar--actions", children: _jsx(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) => {
-                                    setDateRange(value);
-                                    setCurrentPage(1);
-                                } }) })] }), renderContent()] })) }));
+    return (_jsx(Drawer, { className: "memori-chat-history-drawer", open: open, onClose: onClose, title: t('write_and_speak.chatHistory') || 'Chat History', closable: true, anchor: "left", size: "md", description: t('write_and_speak.chatHistoryDescription'), children: selectedChatSession && isViewingChatDetail ? (_jsx("div", { className: "memori-chat-history-drawer--content memori-chat-history-drawer--content-with-footer", children: _jsx(ChatResumeDrawer, { embedded: true, isOpen: true, session: selectedChatSession, onResume: handleResumeChat, onBack: handleCloseResumeDrawer, onClose: handleCloseResumeDrawer, onExportChat: handleExportSelectedChat }) })) : (_jsxs("div", { className: "memori-chat-history-drawer--content memori-chat-history-drawer--content-with-footer", children: [_jsxs("div", { className: "memori-chat-history-drawer--scrollable", children: [_jsxs("div", { className: "memori-chat-history-drawer--toolbar", children: [_jsxs("div", { className: "memori-chat-history-drawer--toolbar--min-messages-filter", children: [_jsx(SelectBox, { placeholder: (_a = (t('chatLogs.customMinimumMessages') ||
+                                                'Customize the number of messages')) !== null && _a !== void 0 ? _a : 'Customize the number of messages', value: String(minimumMessagesPerChat), onChange: value => {
+                                                setMinimumMessagesPerChat(value ? Number(value) : 0);
+                                            }, 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',
+                                                },
+                                            ] }), minimumMessagesPerChat === 0 && (_jsx("input", { type: "number", min: 1, value: customMinimumMessages, onChange: (e) => {
+                                                const value = parseInt(e.target.value, 10);
+                                                setCustomMinimumMessages(value);
+                                            }, style: { minWidth: 50 }, className: "memori-chat-history-drawer--toolbar--min-messages-filter--input-number" }))] }), _jsx("div", { className: "memori-chat-history-drawer--toolbar--actions", children: _jsx(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);
+                                                setCurrentPage(1);
+                                            }
+                                        } }) })] }), renderContent()] }), totalPages > 1 && (_jsx("div", { className: "memori-chat-history-drawer--pagination-footer", children: renderListPagination() }))] })) }));
 };
 export default ChatHistoryDrawer;
 //# sourceMappingURL=ChatHistory.js.map