@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/FilePreview/__snapshots__/FilePreview.test.tsx.snap

@@ -0,0 +1,275 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders FilePreview unchanged 1`] = `<div />`;
+
+exports[`renders FilePreview with one file 1`] = `
+<div>
+  <div
+    class="memori--preview-container  memori--absolute-preview"
+  >
+    <div
+      class="memori--preview-list"
+    >
+      <div
+        class="memori--preview-item memori--preview-item--document"
+      >
+        <svg
+          class="memori--preview-icon"
+          fill="none"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 2.5H6C5.60218 2.5 5.22064 2.65804 4.93934 2.93934C4.65804 3.22064 4.5 3.60218 4.5 4V20C4.5 20.3978 4.65804 20.7794 4.93934 21.0607C5.22064 21.342 5.60218 21.5 6 21.5H18C18.3978 21.5 18.7794 21.342 19.0607 21.0607C19.342 20.7794 19.5 20.3978 19.5 20V8L14 2.5Z"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M14 2.5V8H19.5"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M16 13H8"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M16 17H8"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M10 9H8"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+        </svg>
+        <div
+          class="memori--preview-file-info"
+        >
+          <span
+            class="memori--preview-filename"
+          >
+            test.pdf
+          </span>
+          <span
+            class="memori--preview-filetype"
+          >
+            PDF
+          </span>
+        </div>
+        <button
+          class="memori-button memori-button--rounded memori-button--padded memori-button--icon-only memori-button--danger memori--remove-button "
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                fill="currentColor"
+                stroke="none"
+                stroke-width="0"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders FilePreview with two files 1`] = `
+<div>
+  <div
+    class="memori--preview-container  memori--absolute-preview"
+  >
+    <div
+      class="memori--preview-list"
+    >
+      <div
+        class="memori--preview-item memori--preview-item--document"
+      >
+        <svg
+          class="memori--preview-icon"
+          fill="none"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 2.5H6C5.60218 2.5 5.22064 2.65804 4.93934 2.93934C4.65804 3.22064 4.5 3.60218 4.5 4V20C4.5 20.3978 4.65804 20.7794 4.93934 21.0607C5.22064 21.342 5.60218 21.5 6 21.5H18C18.3978 21.5 18.7794 21.342 19.0607 21.0607C19.342 20.7794 19.5 20.3978 19.5 20V8L14 2.5Z"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M14 2.5V8H19.5"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M16 13H8"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M16 17H8"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M10 9H8"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+        </svg>
+        <div
+          class="memori--preview-file-info"
+        >
+          <span
+            class="memori--preview-filename"
+          >
+            test.pdf
+          </span>
+          <span
+            class="memori--preview-filetype"
+          >
+            PDF
+          </span>
+        </div>
+        <button
+          class="memori-button memori-button--rounded memori-button--padded memori-button--icon-only memori-button--danger memori--remove-button "
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                fill="currentColor"
+                stroke="none"
+                stroke-width="0"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="memori--preview-item memori--preview-item--document"
+      >
+        <svg
+          class="memori--preview-icon"
+          fill="none"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 2.5H6C5.60218 2.5 5.22064 2.65804 4.93934 2.93934C4.65804 3.22064 4.5 3.60218 4.5 4V20C4.5 20.3978 4.65804 20.7794 4.93934 21.0607C5.22064 21.342 5.60218 21.5 6 21.5H18C18.3978 21.5 18.7794 21.342 19.0607 21.0607C19.342 20.7794 19.5 20.3978 19.5 20V8L14 2.5Z"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M14 2.5V8H19.5"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M16 13H8"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M16 17H8"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M10 9H8"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+        </svg>
+        <div
+          class="memori--preview-file-info"
+        >
+          <span
+            class="memori--preview-filename"
+          >
+            test.pdf
+          </span>
+          <span
+            class="memori--preview-filetype"
+          >
+            PDF
+          </span>
+        </div>
+        <button
+          class="memori-button memori-button--rounded memori-button--padded memori-button--icon-only memori-button--danger memori--remove-button "
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                fill="currentColor"
+                stroke="none"
+                stroke-width="0"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Header/Header.css

@@ -1,6 +1,6 @@
 .memori-header {
     position: relative;
-    z-index: 1000;
+    z-index: 999;
     width: calc(50% - 1rem);
     height: 50px;
     padding: calc(var(--memori-inner-content-pad) / 4) calc(var(--memori-inner-content-pad) / 2);
@@ -25,7 +25,7 @@
     justify-content: center;
 }
 
-.memori-header--button+.memori-header--button {
+.memori-header--button + .memori-header--button {
     margin-left: 0.25rem;
 }
 
@@ -44,7 +44,7 @@
 }
 
 .memori-header--button.memori-header--button--experts svg {
-    fill: #fff;
+    fill: currentColor;
 }
 
 .memori-header--position {

package/src/components/Header/Header.stories.tsx

@@ -58,6 +58,8 @@ const Template: Story<Props> = args => {
         setControlsPosition={() => {}}
         hideEmissions={false}
         setHideEmissions={() => {}}
+        setAvatarType={() => {}}
+        setEnablePositionControls={() => {}}
       />
       <LoginDrawer
         tenant={tenant}
@@ -68,7 +70,11 @@ const Template: Story<Props> = args => {
           setShowLoginDrawer(false);
         }}
         onLogout={() => setShowLoginDrawer(false)}
-        apiUrl="https://backend.memori.ai"
+        apiClient={
+          {
+            backend: {},
+          } as any
+        }
       />
     </I18nWrapper>
   );
@@ -123,6 +129,20 @@ SpeakerMuted.args = {
   showSettings: false,
 };
 
+export const WithoutAudio = Template.bind({});
+WithoutAudio.args = {
+  memori,
+  history,
+  setShowPositionDrawer: () => {},
+  setShowSettingsDrawer: () => {},
+  clearHistory: () => {},
+  speakerMuted: true,
+  enableAudio: false,
+  hasUserActivatedSpeak: false,
+  showShare: false,
+  showSettings: false,
+};
+
 export const WithShare = Template.bind({});
 WithShare.args = {
   memori,

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,30 @@ it('renders Header with speaker muted unchanged', () => {
       showSettings={false}
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Header with audio disabled unchanged', () => {
+  const { container } = render(
+    <Header
+      memori={memori}
+      history={history}
+      setShowPositionDrawer={jest.fn()}
+      setShowSettingsDrawer={jest.fn()}
+      setShowKnownFactsDrawer={jest.fn()}
+      setShowExpertsDrawer={jest.fn()}
+      speakerMuted={true}
+      setSpeakerMuted={jest.fn()}
+      enableAudio={false}
+      hasUserActivatedSpeak={false}
+      showShare={false}
+      showSettings={false}
+      clearHistory={jest.fn()}
+      setShowLoginDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -90,6 +116,7 @@ it('renders Header with share button unchanged', () => {
       showSettings={false}
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -111,6 +138,7 @@ it('renders Header with settings button unchanged', () => {
       showSettings={true}
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
+      setShowChatHistoryDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -130,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();
@@ -154,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();
@@ -171,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}
@@ -199,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()}
@@ -208,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();
@@ -237,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();
@@ -263,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();
@@ -288,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();
@@ -314,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

@@ -12,7 +12,6 @@ import MapMarker from '../icons/MapMarker';
 import SoundDeactivated from '../icons/SoundDeactivated';
 import Sound from '../icons/Sound';
 import { useTranslation } from 'react-i18next';
-import ExportHistoryButton from '../ExportHistoryButton/ExportHistoryButton';
 import Setting from '../icons/Setting';
 import ShareButton from '../ShareButton/ShareButton';
 import FullscreenExit from '../icons/FullscreenExit';
@@ -22,6 +21,7 @@ import Clear from '../icons/Clear';
 import DeepThought from '../icons/DeepThought';
 import Group from '../icons/Group';
 import UserIcon from '../icons/User';
+import MessageIcon from '../icons/Message';
 
 export interface Props {
   className?: string;
@@ -31,14 +31,16 @@ 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;
   speakerMuted: boolean;
   setSpeakerMuted: (mute: boolean) => void;
   hasUserActivatedSpeak?: boolean;
   showShare?: boolean;
   showSettings?: boolean;
-  showSpeaker?: boolean;
+  showChatHistory?: boolean;
   showReload?: boolean;
   showClear?: boolean;
   showLogin?: boolean;
@@ -47,24 +49,27 @@ export interface Props {
   loginToken?: string;
   user?: User;
   sessionID?: string;
+  baseUrl?: string;
+  fullScreenHandler?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const Header: React.FC<Props> = ({
   className,
   memori,
   tenant,
-  history,
+  // history,
   position,
   setShowPositionDrawer,
   setShowSettingsDrawer,
+  setShowChatHistoryDrawer,
   setShowKnownFactsDrawer,
   setShowExpertsDrawer,
+  enableAudio = true,
   speakerMuted,
   setSpeakerMuted,
   hasUserActivatedSpeak = false,
   showShare = true,
   showSettings = true,
-  showSpeaker = true,
   showReload = false,
   showClear = false,
   showLogin = true,
@@ -73,6 +78,9 @@ const Header: React.FC<Props> = ({
   loginToken,
   user,
   sessionID,
+  showChatHistory = true,
+  fullScreenHandler,
+  baseUrl,
 }) => {
   const { t } = useTranslation();
   const [fullScreenAvailable, setFullScreenAvailable] = useState(false);
@@ -124,6 +132,17 @@ const Header: React.FC<Props> = ({
           onClick={clearHistory}
         />
       )}
+      {showChatHistory && !!loginToken && (
+        <Button
+          primary
+          disabled={!loginToken}
+          shape="circle"
+          className="memori-header--button memori-header--button--chat-history"
+          title={t('write_and_speak.chatHistory') || 'Chat history'}
+          icon={<MessageIcon />}
+          onClick={() => setShowChatHistoryDrawer(true)}
+        />
+      )}
       {fullScreenAvailable && (
         <Button
           primary
@@ -135,15 +154,33 @@ const Header: React.FC<Props> = ({
               : t('fullscreenEnter') || 'Enter fullscreen'
           }
           icon={fullScreen ? <FullscreenExit /> : <Fullscreen />}
-          onClick={() => {
-            if (!document.fullscreenElement) {
-              document.documentElement.requestFullscreen();
-              setFullScreen(true);
-            } else if (document.exitFullscreen) {
-              document.exitFullscreen();
-              setFullScreen(false);
-            }
-          }}
+          onClick={
+            fullScreenHandler ||
+            (() => {
+              if (!document.fullscreenElement) {
+                const memoriWidget = document.querySelector('.memori-widget');
+                if (memoriWidget) {
+                  // Set white background before entering fullscreen
+                  (memoriWidget as HTMLElement).style.backgroundColor =
+                    '#FFFFFF';
+                  memoriWidget.requestFullscreen().catch(err => {
+                    console.warn('Error attempting to enable fullscreen:', err);
+                  });
+                }
+                setFullScreen(true);
+              } else if (document.exitFullscreen) {
+                const memoriWidget = document.querySelector('.memori-widget');
+                if (memoriWidget) {
+                  // Reset background on exit
+                  (memoriWidget as HTMLElement).style.backgroundColor = '';
+                }
+                document.exitFullscreen().catch(err => {
+                  console.warn('Error attempting to exit fullscreen:', err);
+                });
+                setFullScreen(false);
+              }
+            })
+          }
         />
       )}
       {memori.enableDeepThought && !!loginToken && user?.pAndCUAccepted && (
@@ -168,7 +205,7 @@ const Header: React.FC<Props> = ({
           title={t('widget.showExpertsInTheBoard') || 'Experts in this board'}
         />
       )}
-      {showSpeaker && (
+      {enableAudio && (
         <Button
           primary
           shape="circle"
@@ -178,12 +215,12 @@ const Header: React.FC<Props> = ({
           title={t('widget.sound') || 'Sound'}
         />
       )}
-      <ExportHistoryButton
+      {/* <ExportHistoryButton
         history={history}
         memori={memori}
         className="memori-header--button memori-header--button--export"
         disabled={!hasUserActivatedSpeak || history.length === 0}
-      />
+      /> */}
       {showSettings && (
         <Button
           primary
@@ -198,9 +235,12 @@ const Header: React.FC<Props> = ({
         <ShareButton
           className="memori-header--button memori-header--button-share"
           title={memori.name}
+          memori={memori}
+          sessionID={sessionID}
           tenant={tenant}
           showQrCode
           align="left"
+          baseUrl={baseUrl}
         />
       )}
       {showLogin && (