@memori.ai/memori-react 7.3.0 → 7.4.0

package/esm/styles.css

@@ -97,6 +97,7 @@ body.sb-show-main #root,
     --memori-modal--width--md: 80%;
     --memori-error-color: #ff4d4f;
     --memori-warning-color: #faad14;
+    --memori-button-disabled-bg: #f9f9f9;
 
     font-family: var(--memori-font-family, 'Lexend Deca Variable', 'Lexend Deca', sans-serif);
     font-size: 16px;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.3.0",
+  "version": "7.4.0",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",

package/src/components/ChatBubble/ChatBubble.stories.tsx

@@ -272,6 +272,19 @@ WithMarkdownAndBreakLine.args = {
   },
 };
 
+export const WithMarkdownAndMultipleBreakLine = Template.bind({});
+WithMarkdownAndMultipleBreakLine.args = {
+  memori,
+  apiUrl: 'https://backend.memori.ai',
+  tenant,
+  message: {
+    fromUser: false,
+    initial: false,
+    generatedByAI: true,
+    text: `Ah, ottima domanda! Stavo giusto riflettendo su come spiegare al meglio le funzionalità di questo sistema. \n\nDa qui puoi fare diverse cose interessanti:\n\n1. Puoi conversare con me, Nunzio Fiore, e io risponderò basandomi sulle mie conoscenze ed esperienze.\n\n2. Puoi aggiungere nuove "memorie" o informazioni al mio database. Questo significa che puoi insegnarmi cose nuove o aggiornare le mie conoscenze esistenti.\n\n3. Puoi creare, modificare o eliminare "ricevitori". Questi sono come utenti specifici che possono interagire con me in modo personalizzato.\n\n4. Puoi associare determinate memorie a ricevitori specifici, creando così contenuti personalizzati per diverse persone.\n\n5. Puoi cercare tra le memorie esistenti, visualizzare le ultime aggiunte, o modificare quelle già presenti.\n\nIn pratica, stai interagendo con un sistema che permette di creare e gestire un "gemello digitale" - in questo caso, me stesso. È un po' come scrivere un libro interattivo sulla mia vita e le mie conoscenze.\n\nC'è qualcosa in particolare che ti interessa esplorare o su cui vorresti saperne di più?`,
+  },
+};
+
 export const WithMarkdownCode = Template.bind({});
 WithMarkdownCode.args = {
   memori,

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

@@ -123,6 +123,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

@@ -74,6 +74,28 @@ it('renders Header with speaker muted unchanged', () => {
   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()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
 it('renders Header with share button unchanged', () => {
   const { container } = render(
     <Header

package/src/components/Header/Header.tsx

@@ -33,6 +33,7 @@ export interface Props {
   setShowSettingsDrawer: (show: boolean) => void;
   setShowKnownFactsDrawer: (show: boolean) => void;
   setShowExpertsDrawer: (show: boolean) => void;
+  enableAudio?: boolean;
   speakerMuted: boolean;
   setSpeakerMuted: (mute: boolean) => void;
   hasUserActivatedSpeak?: boolean;
@@ -59,6 +60,7 @@ const Header: React.FC<Props> = ({
   setShowSettingsDrawer,
   setShowKnownFactsDrawer,
   setShowExpertsDrawer,
+  enableAudio = true,
   speakerMuted,
   setSpeakerMuted,
   hasUserActivatedSpeak = false,
@@ -168,7 +170,7 @@ const Header: React.FC<Props> = ({
           title={t('widget.showExpertsInTheBoard') || 'Experts in this board'}
         />
       )}
-      {showSpeaker && (
+      {enableAudio && showSpeaker && (
         <Button
           primary
           shape="circle"

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

@@ -62,7 +62,7 @@ exports[`renders Header for board of experts unchanged 1`] = `
         class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
         data-headlessui-state=""
         disabled=""
-        id="headlessui-popover-button-:r1p:"
+        id="headlessui-popover-button-:r1u:"
         type="button"
       >
         <div
@@ -167,7 +167,7 @@ exports[`renders Header for board of experts with session open unchanged 1`] = `
         aria-expanded="false"
         class="memori-button memori-button--circle memori-button--icon-only memori-button--primary"
         data-headlessui-state=""
-        id="headlessui-popover-button-:r1u:"
+        id="headlessui-popover-button-:r23:"
         type="button"
       >
         <div
@@ -289,6 +289,64 @@ exports[`renders Header unchanged 1`] = `
 </div>
 `;
 
+exports[`renders Header with audio disabled unchanged 1`] = `
+<div>
+  <div
+    class="memori-header"
+  >
+    <div
+      class="memori-export-history-button memori-header--button memori-header--button--export"
+      data-headlessui-state=""
+      title="write_and_speak.exportChatHistoryMessage"
+    >
+      <button
+        class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
+        data-headlessui-state=""
+        disabled=""
+        id="headlessui-popover-button-:rf:"
+        type="button"
+      >
+        <div
+          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="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+      title="login.login"
+    >
+      <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="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`renders Header with clear button unchanged 1`] = `
 <div>
   <div
@@ -343,7 +401,7 @@ exports[`renders Header with clear button unchanged 1`] = `
         class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
         data-headlessui-state=""
         disabled=""
-        id="headlessui-popover-button-:rr:"
+        id="headlessui-popover-button-:r10:"
         type="button"
       >
         <div
@@ -421,7 +479,7 @@ exports[`renders Header with deep thought and session open unchanged 1`] = `
         aria-expanded="false"
         class="memori-button memori-button--circle memori-button--icon-only memori-button--primary"
         data-headlessui-state=""
-        id="headlessui-popover-button-:r1k:"
+        id="headlessui-popover-button-:r1p:"
         type="button"
       >
         <div
@@ -499,7 +557,7 @@ exports[`renders Header with deep thought logged but without permission flag unc
         class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
         data-headlessui-state=""
         disabled=""
-        id="headlessui-popover-button-:r1a:"
+        id="headlessui-popover-button-:r1f:"
         type="button"
       >
         <div
@@ -621,7 +679,7 @@ exports[`renders Header with deep thought logged with permission flag unchanged
         class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
         data-headlessui-state=""
         disabled=""
-        id="headlessui-popover-button-:r1f:"
+        id="headlessui-popover-button-:r1k:"
         type="button"
       >
         <div
@@ -699,7 +757,7 @@ exports[`renders Header with deep thought unlogged unchanged 1`] = `
         class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
         data-headlessui-state=""
         disabled=""
-        id="headlessui-popover-button-:r15:"
+        id="headlessui-popover-button-:r1a:"
         type="button"
       >
         <div
@@ -885,7 +943,7 @@ exports[`renders Header with settings button unchanged 1`] = `
         class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
         data-headlessui-state=""
         disabled=""
-        id="headlessui-popover-button-:rm:"
+        id="headlessui-popover-button-:rr:"
         type="button"
       >
         <div
@@ -983,7 +1041,7 @@ exports[`renders Header with share button unchanged 1`] = `
         class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
         data-headlessui-state=""
         disabled=""
-        id="headlessui-popover-button-:rf:"
+        id="headlessui-popover-button-:rk:"
         type="button"
       >
         <div
@@ -1012,7 +1070,7 @@ exports[`renders Header with share button unchanged 1`] = `
         aria-haspopup="true"
         class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori-header--button memori-header--button-share memori-button--primary"
         data-headlessui-state=""
-        id="headlessui-menu-button-:rk:"
+        id="headlessui-menu-button-:rp:"
         title="widget.share"
         type="button"
       >
@@ -1171,7 +1229,7 @@ exports[`renders Header with user activated speak unchanged 1`] = `
         aria-expanded="false"
         class="memori-button memori-button--circle memori-button--icon-only memori-button--primary"
         data-headlessui-state=""
-        id="headlessui-popover-button-:r10:"
+        id="headlessui-popover-button-:r15:"
         type="button"
       >
         <div

package/src/components/MemoriWidget/MemoriWidget.stories.tsx

@@ -141,6 +141,22 @@ ShowClear.args = {
   showClear: true,
 };
 
+export const WithoutAudio = Template.bind({});
+WithoutAudio.args = {
+  memori,
+  tenant,
+  enableAudio: false,
+  AZURE_COGNITIVE_SERVICES_TTS_KEY: 'provide your key here',
+};
+
+export const DefautSpeakerDisabled = Template.bind({});
+DefautSpeakerDisabled.args = {
+  memori,
+  tenant,
+  defaultSpeakerActive: false,
+  AZURE_COGNITIVE_SERVICES_TTS_KEY: 'provide your key here',
+};
+
 export const ShowOnlyLastMessages = Template.bind({});
 ShowOnlyLastMessages.args = {
   memori,

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -10,7 +10,6 @@ import {
   MemoriConfig,
   TranslatedHint,
   Invitation,
-  GamificationLevel,
   Tenant,
   MemoriSession,
   User,
@@ -76,7 +75,6 @@ import {
 } from '../../helpers/utils';
 import { anonTag } from '../../helpers/constants';
 import { getErrori18nKey } from '../../helpers/error';
-import { getGamificationLevel } from '../../helpers/statistics';
 import { getCredits } from '../../helpers/credits';
 
 // Widget utilities and helpers
@@ -366,6 +364,7 @@ export interface Props {
   };
   authToken?: string;
   AZURE_COGNITIVE_SERVICES_TTS_KEY?: string;
+  enableAudio?: boolean;
   defaultSpeakerActive?: boolean;
   disableTextEnteredEvents?: boolean;
   onStateChange?: (state?: DialogState) => void;
@@ -412,6 +411,7 @@ const MemoriWidget = ({
   personification,
   authToken,
   AZURE_COGNITIVE_SERVICES_TTS_KEY,
+  enableAudio,
   defaultSpeakerActive = true,
   disableTextEnteredEvents = false,
   onStateChange,
@@ -475,6 +475,7 @@ const MemoriWidget = ({
   const integrationConfig = integration?.customData
     ? JSON.parse(integration.customData)
     : null;
+
   const isMultilanguageEnabled =
     multilingual !== undefined
       ? multilingual
@@ -502,7 +503,10 @@ const MemoriWidget = ({
   const [showSettingsDrawer, setShowSettingsDrawer] = useState(false);
   const [showKnownFactsDrawer, setShowKnownFactsDrawer] = useState(false);
   const [showExpertsDrawer, setShowExpertsDrawer] = useState(false);
-  const [muteSpeaker, setMuteSpeaker] = useState(!defaultSpeakerActive);
+  const [muteSpeaker, setMuteSpeaker] = useState(
+    !(enableAudio ?? integrationConfig?.enableAudio ?? true) ||
+      !defaultSpeakerActive
+  );
   const [continuousSpeech, setContinuousSpeech] = useState(false);
   const [continuousSpeechTimeout, setContinuousSpeechTimeout] = useState(2);
   const [isPlayingAudio, setIsPlayingAudio] = useState(false);
@@ -2324,48 +2328,6 @@ const MemoriWidget = ({
     }
   }, []);
 
-  const [gamificationLevel, setGamificationLevel] =
-    useState<GamificationLevel>();
-  const getGamificationPoints = async (
-    memoriID: string
-  ): Promise<{
-    points: number;
-    unansweredQuestions: number;
-  }> => {
-    let gamificationPoints: number | undefined;
-    let unansQuestions: number | undefined;
-    try {
-      const {
-        contentQualityIndex,
-        answerQualityIndex,
-        unansweredQuestions,
-        ...cqResp
-      } = await getContentQualityIndexes(memoriID);
-      if (cqResp.resultCode === 0) {
-        gamificationPoints = contentQualityIndex;
-        unansQuestions = unansweredQuestions;
-      }
-    } catch (_e) {
-      let err = _e as Error;
-      console.debug('[APPCONTEXT/QUERYGAMIFICATIONPOINTS]', err);
-    }
-
-    return {
-      points: gamificationPoints ?? 0,
-      unansweredQuestions: unansQuestions ?? 0,
-    };
-  };
-  useEffect(() => {
-    if (memori.engineMemoriID) {
-      getGamificationPoints(memori.engineMemoriID)
-        .then(value => {
-          setGamificationLevel(getGamificationLevel(value.points));
-        })
-        .catch(console.debug);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [memori.engineMemoriID]);
-
   // Put SEO tags in head
   useEffect(() => {
     if (integrationConfig?.seoTitle) {
@@ -2973,6 +2935,7 @@ const MemoriWidget = ({
     setShowSettingsDrawer,
     setShowKnownFactsDrawer,
     setShowExpertsDrawer,
+    enableAudio: enableAudio ?? integrationConfig?.enableAudio ?? true,
     showSpeaker: !!AZURE_COGNITIVE_SERVICES_TTS_KEY,
     speakerMuted: muteSpeaker || speakerMuted,
     setSpeakerMuted: mute => {
@@ -3019,7 +2982,6 @@ const MemoriWidget = ({
   const startPanelProps: StartPanelProps = {
     memori,
     tenant: tenant,
-    gamificationLevel: gamificationLevel,
     language: language,
     userLang: userLang,
     setUserLang: setUserLang,
@@ -3031,6 +2993,7 @@ const MemoriWidget = ({
     instruct: instruct,
     sessionId: sessionId,
     clickedStart: clickedStart,
+    isMultilanguageEnabled: isMultilanguageEnabled,
     onClickStart: onClickStart,
     initializeTTS: initializeTTS,
     isUserLoggedIn: !!loginToken && !!user?.userID,

package/src/components/StartPanel/StartPanel.css

@@ -136,7 +136,7 @@
 .memori--board-of-experts,
 .memori--nsfw {
     position: absolute;
-    right: 2.5rem;
+    right: 0.25rem;
     bottom: -1.25rem;
     display: flex;
     width: 2rem;
@@ -160,12 +160,9 @@
     height: 1rem;
 }
 
-.memori--completions-enabled+.memori--nsfw {
-    right: 4.75rem;
-}
-
-.memori--board-of-experts {
-    right: 0.25rem;
+.memori--board-of-experts + .memori--nsfw,
+.memori--completions-enabled + .memori--nsfw {
+    right: 2.5rem;
 }
 
 .memori--board-of-experts svg {
@@ -220,4 +217,4 @@
 .memori--deep-thought-disclaimer a {
     color: inherit;
     text-decoration: underline;
-}
+}

package/src/components/StartPanel/StartPanel.stories.tsx

@@ -110,28 +110,6 @@ Default.args = {
   onClickStart: () => {},
 };
 
-export const WithGamificationLevel = Template.bind({});
-WithGamificationLevel.args = {
-  memori: {
-    ...memori,
-    enableCompletions: false,
-  },
-  tenant,
-  gamificationLevel: {
-    points: 61,
-    pointsForCurrentBadge: 60,
-    badge: '🌍',
-  },
-  language: 'it',
-  userLang: 'en',
-  setUserLang: () => {},
-  openPositionDrawer: () => {},
-  instruct: false,
-  sessionId: sessionID,
-  clickedStart: false,
-  onClickStart: () => {},
-};
-
 export const WithCompletionsEnabled = Template.bind({});
 WithCompletionsEnabled.args = {
   memori: {
@@ -167,18 +145,13 @@ WithNSFWFlag.args = {
   onClickStart: () => {},
 };
 
-export const WithAllTheBadges = Template.bind({});
-WithAllTheBadges.args = {
+export const WithCompletionsAndNSFW = Template.bind({});
+WithCompletionsAndNSFW.args = {
   memori: {
     ...memori,
     enableCompletions: true,
     nsfw: true,
   },
-  gamificationLevel: {
-    points: 61,
-    pointsForCurrentBadge: 60,
-    badge: '🌍',
-  },
   tenant,
   language: 'it',
   userLang: 'en',
@@ -261,10 +234,24 @@ BoardOfExpert.args = {
     enableBoardOfExperts: true,
     enableCompletions: true,
   },
-  gamificationLevel: {
-    points: 61,
-    pointsForCurrentBadge: 60,
-    badge: '🌍',
+  tenant,
+  language: 'it',
+  userLang: 'en',
+  setUserLang: () => {},
+  openPositionDrawer: () => {},
+  instruct: false,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+};
+
+export const BoardOfExpertNSFW = Template.bind({});
+BoardOfExpertNSFW.args = {
+  memori: {
+    ...memori,
+    enableBoardOfExperts: true,
+    enableCompletions: true,
+    nsfw: true,
   },
   tenant,
   language: 'it',
@@ -281,11 +268,6 @@ export const Instruct = Template.bind({});
 Instruct.args = {
   memori,
   tenant,
-  gamificationLevel: {
-    points: 61,
-    pointsForCurrentBadge: 60,
-    badge: '🌍',
-  },
   language: 'it',
   userLang: 'en',
   setUserLang: () => {},

package/src/components/StartPanel/StartPanel.test.tsx

@@ -22,30 +22,6 @@ it('renders StartPanel unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
-it('renders StartPanel with gamification level unchanged', () => {
-  const { container } = render(
-    <StartPanel
-      memori={memori}
-      tenant={tenant}
-      gamificationLevel={{
-        points: 61,
-        pointsForCurrentBadge: 60,
-        badge: '🌍',
-      }}
-      language="it"
-      userLang="en"
-      setUserLang={() => {}}
-      openPositionDrawer={() => {}}
-      instruct={false}
-      sessionId={sessionID}
-      clickedStart={false}
-      onClickStart={() => {}}
-      setShowLoginDrawer={jest.fn()}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
 it('renders StartPanel with completions enabled unchanged', () => {
   const { container } = render(
     <StartPanel
@@ -172,11 +148,6 @@ it('renders StartPanel on instruct unchanged', () => {
     <StartPanel
       memori={memori}
       tenant={tenant}
-      gamificationLevel={{
-        points: 61,
-        pointsForCurrentBadge: 60,
-        badge: '🌍',
-      }}
       language="it"
       userLang="en"
       setUserLang={() => {}}
@@ -199,11 +170,6 @@ it('renders StartPanel with position required unchanged', () => {
         needsPosition: true,
       }}
       tenant={tenant}
-      gamificationLevel={{
-        points: 61,
-        pointsForCurrentBadge: 60,
-        badge: '🌍',
-      }}
       language="it"
       userLang="en"
       setUserLang={() => {}}
@@ -238,6 +204,26 @@ it('renders StartPanel with integrationConfig unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders StartPanel with multilangual unchanged', () => {
+  const { container } = render(
+    <StartPanel
+      memori={memori}
+      tenant={tenant}
+      isMultilanguageEnabled
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      openPositionDrawer={() => {}}
+      instruct={false}
+      sessionId={sessionID}
+      clickedStart={false}
+      onClickStart={() => {}}
+      setShowLoginDrawer={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
 it('renders StartPanel with completion provider down unchanged', () => {
   const { container } = render(
     <StartPanel