@memori.ai/memori-react 7.28.1 → 7.29.1

package/src/components/ChatHistoryDrawer/ChatHistory.test.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ChatHistoryDrawer from './ChatHistory';
+import memoriApiClient from '@memori.ai/memori-api-client';
+import { memori } from '../../mocks/data';
+
+// Mock IntersectionObserver
+beforeEach(() => {
+  window.IntersectionObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+    takeRecords: jest.fn(),
+    root: null,
+    rootMargin: '',
+    thresholds: [],
+  }));
+});
+
+// Mock the translation hook
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+const client = memoriApiClient();
+
+it('renders ChatHistoryDrawer unchanged', () => {
+  const { container } = render(
+    <ChatHistoryDrawer
+      open={true}
+      onClose={jest.fn()}
+      apiClient={client}
+      sessionId="test-session"
+      memori={memori}
+      resumeSession={jest.fn()}
+      baseUrl="https://www.aisuru.com"
+      apiUrl="https://backend.memori.ai"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ChatHistoryDrawer with chat logs unchanged', () => {
+  const { container } = render(
+    <ChatHistoryDrawer
+      open={true}
+      onClose={jest.fn()}
+      apiClient={client}
+      sessionId="test-session"
+      memori={memori}
+      resumeSession={jest.fn()}
+      baseUrl="https://www.aisuru.com"
+      apiUrl="https://backend.memori.ai"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ChatHistoryDrawer with selected chat log unchanged', () => {
+  const { container } = render(
+    <ChatHistoryDrawer
+      open={true}
+      onClose={jest.fn()}
+      apiClient={client}
+      sessionId="test-session"
+      memori={memori}
+      resumeSession={jest.fn()}
+      baseUrl="https://www.aisuru.com"
+      apiUrl="https://backend.memori.ai"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ChatHistoryDrawer closed unchanged', () => {
+  const { container } = render(
+    <ChatHistoryDrawer
+      open={false}
+      onClose={jest.fn()}
+      apiClient={client}
+      sessionId="test-session"
+      memori={memori}
+      resumeSession={jest.fn()}
+      baseUrl="https://www.aisuru.com"
+      apiUrl="https://backend.memori.ai"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ChatHistoryDrawer/ChatHistory.tsx

@@ -0,0 +1,393 @@
+import Drawer from '../ui/Drawer';
+import { useTranslation } from 'react-i18next';
+import { Props as WidgetProps } from '../MemoriWidget/MemoriWidget';
+import memoriApiClient from '@memori.ai/memori-api-client';
+import { useEffect, useMemo, useState, useCallback, ChangeEvent } from 'react';
+import {
+  ChatLog,
+  ChatLogLine,
+  User,
+  Memori,
+  Medium,
+  DialogState,
+  EventLog,
+} from '@memori.ai/memori-api-client/dist/types';
+import Card from '../ui/Card';
+import ChatBubble from '../ChatBubble/ChatBubble';
+import Button from '../ui/Button';
+import ChatRound from '../icons/Chat';
+import { truncateMessage } from '../../helpers/utils';
+import { Dialog, Transition } from '@headlessui/react';
+import debounce from 'lodash/debounce';
+import Chat from '../Chat/Chat';
+import Spin from '../ui/Spin';
+
+export interface Props {
+  open: boolean;
+  onClose: () => void;
+  apiClient: ReturnType<typeof memoriApiClient>;
+  sessionId: string;
+  memori: Memori;
+  resumeSession: (chatLog: ChatLog) => void;
+  baseUrl: string;
+  apiUrl: string;
+}
+
+const ITEMS_PER_PAGE = 8;
+const DEBOUNCE_DELAY = 300;
+
+const ChatHistoryDrawer = ({
+  open,
+  onClose,
+  apiClient,
+  sessionId,
+  memori,
+  resumeSession,
+  baseUrl,
+  apiUrl,
+}: Props) => {
+  const { t } = useTranslation();
+  const { getChatLogsByUser, getSessionChatLogs } = apiClient.chatLogs;
+
+  const [chatLogs, setChatLogs] = useState<ChatLog[]>([]);
+  const [selectedChatLog, setSelectedChatLog] = useState<ChatLog | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [searchText, setSearchText] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
+
+  const fetchChatLogs = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await getChatLogsByUser(sessionId);
+      setChatLogs(res.chatLogs.sort((a, b) => {
+        const dateA = Math.max(...a.lines.map(l => new Date(l.timestamp).getTime()));
+        const dateB = Math.max(...b.lines.map(l => new Date(l.timestamp).getTime()));
+        return sortOrder === 'desc' ? dateB - dateA : dateA - dateB;
+      }));
+    } catch (err) {
+      setError(t('errorFetchingSession') || 'Error loading chat history');
+      console.error('Error fetching chat logs:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sessionId, sortOrder]);
+
+  useEffect(() => {
+    if (open) fetchChatLogs();
+  }, [open, fetchChatLogs]);
+
+  const debouncedSearch = useMemo(
+    () => debounce((value: string) => setSearchText(value), DEBOUNCE_DELAY),
+    []
+  );
+
+  const filteredChatLogs = useMemo(() => {
+    return chatLogs.filter(c => 
+      c.lines.some(l => l.text.toLowerCase().includes(searchText.toLowerCase())) && 
+      c.lines.length > 1
+    );
+  }, [chatLogs, searchText]);
+
+  const totalPages = Math.ceil(filteredChatLogs.length / ITEMS_PER_PAGE);
+  
+  const paginatedChatLogs = useMemo(() => {
+    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+    return filteredChatLogs.slice(startIndex, startIndex + ITEMS_PER_PAGE);
+  }, [filteredChatLogs, currentPage]);
+
+  const handleResumeChat = async () => {
+    if (selectedChatLog) {
+      resumeSession(selectedChatLog);
+      onClose();
+    }
+  };
+
+  const formatDate = (timestamp: string) => {
+    return new Intl.DateTimeFormat(navigator.language, {
+      dateStyle: 'medium',
+      timeStyle: 'short',
+    }).format(new Date(timestamp));
+  };
+
+  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 (filteredChatLogs.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
+                onClick={async () => {
+                  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' : ''
+                }`}
+              >
+                <>
+                  <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">
+                        <ChatRound 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">
+                            {'Chat-' + chatLog.chatLogID.substring(0, 4)}
+                          </Dialog.Title>
+                          {chatLog.boardOfExperts && (
+                            <div className="memori-chat-history-drawer--card--header--badge">
+                              BOE
+                            </div>
+                          )}
+                        </div>
+                        <div className="memori-chat-history-drawer--card--header--meta">
+                          {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>
+                          <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>
+                        </div>
+                      </div>
+                    </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.lines[0].text}-${chatLog.lines[0].timestamp}`}
+                            baseUrl={baseUrl}
+                            apiUrl={apiUrl}
+                            memoriTyping={false}
+                            showTypingText={false}
+                            showAIicon={true}
+                            showTranslationOriginal={false}
+                            showWhyThisAnswer={false}
+                            showCopyButton={false}
+                            showInputs={false}
+                            history={chatLog.lines.map(line => ({
+                              text: truncateMessage(line.text),
+                              contextVars: line.contextVars,
+                              media: line.media as Medium[],
+                              fromUser: line.inbound,
+                              timestamp: line.timestamp,
+                            }))}
+                            memori={memori}
+                            sessionID={sessionId}
+                            setDialogState={() => {}}
+                            pushMessage={() => {}}
+                            simulateUserPrompt={() => {}}
+                            setSendOnEnter={() => {}}
+                            attachmentsMenuOpen={undefined}
+                            setAttachmentsMenuOpen={() => {}}
+                            userMessage={''}
+                            onChangeUserMessage={() => {}}
+                            sendMessage={() => {}}
+                            startListening={() => {}}
+                            stopListening={() => {}}
+                            resetTranscript={() => {}}
+                            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))}
+              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))}
+              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={t('write_and_speak.chatHistory') || 'Chat History'} 
+      description={t('write_and_speak.chatHistoryDescription')}
+    >
+      <div className="memori-chat-history-drawer--content">
+        <div className="memori-chat-history-drawer--toolbar">
+          <div className="memori-chat-history-drawer--toolbar--search">
+            <input
+              type="search"
+              className="memori-chat-history-drawer--toolbar--search--input"
+              placeholder={t('write_and_speak.searchInChatHistory') || 'Search in chat history...'}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => debouncedSearch(e.target.value)}
+            />
+            <span className="memori-chat-history-drawer--toolbar--search--icon">
+              <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+            </span>
+          </div>
+          <div className="memori-chat-history-drawer--toolbar--actions">
+            <Button
+              onClick={() => {
+                setSortOrder(order => order === 'asc' ? 'desc' : 'asc');
+                setCurrentPage(1);
+              }}
+              className="memori-chat-history-drawer--toolbar--sort-button"
+            >
+              {sortOrder === 'desc' ? t('write_and_speak.latestFirst') : t('write_and_speak.oldestFirst')}
+            </Button>
+            {/* <Button
+              onClick={() => {
+                if (selectedChatLog) {
+                  const chatText = selectedChatLog.lines
+                    .map(line => `${line.inbound ? 'User' : 'AI'}: ${line.text}`)
+                    .join('\n\n');
+                  const blob = new Blob([chatText], { type: 'text/plain' });
+                  const url = URL.createObjectURL(blob);
+                  const a = document.createElement('a');
+                  a.href = url;
+                  a.download = `chat-${selectedChatLog.chatLogID.substring(0, 4)}.txt`;
+                  document.body.appendChild(a);
+                  a.click();
+                  document.body.removeChild(a);
+                  URL.revokeObjectURL(url);
+                }
+              }}
+              disabled={!selectedChatLog}
+              className="memori-chat-history-drawer--toolbar--export-button"
+            >
+              {t('write_and_speak.exportChat') || 'Export Chat'}
+            </Button> */}
+          </div>
+        </div>
+        {renderContent()}
+      </div>
+    </Drawer>
+  );
+};
+
+export default ChatHistoryDrawer;

package/src/components/ChatHistoryDrawer/__snapshots__/ChatHistory.test.tsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ChatHistoryDrawer closed unchanged 1`] = `<div />`;
+
+exports[`renders ChatHistoryDrawer unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders ChatHistoryDrawer with chat logs unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders ChatHistoryDrawer with selected chat log unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;

package/src/components/Header/Header.test.tsx

@@ -8,6 +8,7 @@ it('renders Header unchanged', () => {
     <Header
       memori={memori}
       history={history}
+      setShowChatHistoryDrawer={jest.fn()}
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
       setShowKnownFactsDrawer={jest.fn()}
@@ -37,6 +38,7 @@ it('renders Header with position unchanged', () => {
         longitude: 13.404954,
       }}
       history={history}
+      setShowChatHistoryDrawer={jest.fn()}
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
       setShowKnownFactsDrawer={jest.fn()}
@@ -69,6 +71,7 @@ it('renders Header with speaker muted unchanged', () => {
       showSettings={false}
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -91,6 +94,7 @@ it('renders Header with audio disabled unchanged', () => {
       showSettings={false}
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -112,6 +116,7 @@ it('renders Header with share button unchanged', () => {
       showSettings={false}
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -133,6 +138,7 @@ it('renders Header with settings button unchanged', () => {
       showSettings={true}
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -152,9 +158,10 @@ it('renders Header with clear button unchanged', () => {
       hasUserActivatedSpeak={false}
       showShare={false}
       showSettings={false}
-      showClear
+      showClear={true}
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -176,6 +183,7 @@ it('renders Header with user activated speak unchanged', () => {
       showSettings={false}
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -193,6 +201,7 @@ it('renders Header with deep thought unlogged unchanged', () => {
       setShowSettingsDrawer={jest.fn()}
       setShowKnownFactsDrawer={jest.fn()}
       setShowExpertsDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
@@ -221,6 +230,7 @@ it('renders Header with deep thought logged but without permission flag unchange
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
+
       showShare={false}
       showSettings={false}
       clearHistory={jest.fn()}
@@ -230,6 +240,7 @@ it('renders Header with deep thought logged but without permission flag unchange
         pAndCUAccepted: false,
       }}
       setShowLoginDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -259,6 +270,7 @@ it('renders Header with deep thought logged with permission flag unchanged', ()
         pAndCUAccepted: true,
       }}
       setShowLoginDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -285,6 +297,7 @@ it('renders Header with deep thought and session open unchanged', () => {
       sessionID="1234"
       loginToken="abcd"
       setShowLoginDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -310,6 +323,7 @@ it('renders Header for board of experts unchanged', () => {
       clearHistory={jest.fn()}
       loginToken="abcd"
       setShowLoginDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -336,6 +350,7 @@ it('renders Header for board of experts with session open unchanged', () => {
       sessionID="1234"
       loginToken="abcd"
       setShowLoginDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();

package/src/components/Header/Header.tsx

@@ -22,6 +22,9 @@ import Clear from '../icons/Clear';
 import DeepThought from '../icons/DeepThought';
 import Group from '../icons/Group';
 import UserIcon from '../icons/User';
+import History from '../icons/History';
+import Tooltip from '../ui/Tooltip';
+import { Popover } from '@headlessui/react';
 
 export interface Props {
   className?: string;
@@ -31,6 +34,7 @@ export interface Props {
   position?: Venue;
   setShowPositionDrawer: (show: boolean) => void;
   setShowSettingsDrawer: (show: boolean) => void;
+  setShowChatHistoryDrawer: (show: boolean) => void;
   setShowKnownFactsDrawer: (show: boolean) => void;
   setShowExpertsDrawer: (show: boolean) => void;
   enableAudio?: boolean;
@@ -39,6 +43,7 @@ export interface Props {
   hasUserActivatedSpeak?: boolean;
   showShare?: boolean;
   showSettings?: boolean;
+  showChatHistory?: boolean;
   showSpeaker?: boolean;
   showReload?: boolean;
   showClear?: boolean;
@@ -59,6 +64,7 @@ const Header: React.FC<Props> = ({
   position,
   setShowPositionDrawer,
   setShowSettingsDrawer,
+  setShowChatHistoryDrawer,
   setShowKnownFactsDrawer,
   setShowExpertsDrawer,
   enableAudio = true,
@@ -76,6 +82,7 @@ const Header: React.FC<Props> = ({
   loginToken,
   user,
   sessionID,
+  showChatHistory = true,
   fullScreenHandler,
 }) => {
   const { t } = useTranslation();
@@ -128,6 +135,17 @@ const Header: React.FC<Props> = ({
           onClick={clearHistory}
         />
       )}
+      {showChatHistory && !!loginToken && (
+        <Button
+          primary
+          disabled={!loginToken || history.length === 0}
+          shape="circle"
+          className="memori-header--button memori-header--button--chat-history"
+          title={t('write_and_speak.chatHistory') || 'Chat history'}
+          icon={<History disabled={!loginToken || history.length === 0} />}
+            onClick={() => setShowChatHistoryDrawer(true)}
+          />
+      )}
       {fullScreenAvailable && (
         <Button
           primary