@memori.ai/memori-react 4.1.0 → 4.2.0

package/esm/components/ui/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/ui/Select.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAa7C,MAAM,MAAM,GAAG,CAAC,EACd,SAAS,EACT,KAAK,EACL,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,WAAW,GACL,EAAE,EAAE;IACV,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,YAC5C,MAAC,OAAO,IACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,CAAC,EAAE;gBAChB,QAAQ,CAAC,KAAK,CAAC,CAAC;YAClB,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,KAAK,aAEV,MAAC,OAAO,CAAC,KAAK,IAAC,SAAS,EAAC,sBAAsB,aAAE,KAAK,SAAkB,EACxE,MAAC,OAAO,CAAC,MAAM,kBAAa,KAAK,EAAE,SAAS,EAAC,uBAAuB,aAClE,eACE,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE;gCACpC,kCAAkC,EAAE,CAAC,KAAK;6BAC3C,CAAC,YAED,KAAK,CAAC,CAAC,CAAC,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,WAAW,GACvC,EACP,eAAM,SAAS,EAAC,qBAAqB,YACnC,KAAC,UAAU,KAAG,GACT,IACQ,EACjB,KAAC,UAAU,IACT,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAC,iCAAiC,EACvC,SAAS,EAAC,aAAa,EACvB,OAAO,EAAC,WAAW,YAEnB,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,wBAAwB,YAChD,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAClB,KAAC,OAAO,CAAC,MAAM,IAEb,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,SAAS,EAAC,uBAAuB,YAEhC,GAAG,CAAC,KAAK,IAJL,GAAG,CAAC,KAAK,CAKC,CAClB,CAAC,GACc,GACP,IACL,GACN,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/ui/Select.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAa7C,MAAM,MAAM,GAAG,CAAC,EACd,SAAS,EACT,KAAK,EACL,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,WAAW,GACL,EAAE,EAAE;IACV,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,YAC5C,MAAC,OAAO,IACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,CAAC,EAAE;gBAChB,QAAQ,CAAC,KAAK,CAAC,CAAC;YAClB,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,KAAK,aAET,KAAK,IAAI,CACR,MAAC,OAAO,CAAC,KAAK,IAAC,SAAS,EAAC,sBAAsB,aAC5C,KAAK,SACQ,CACjB,EACD,MAAC,OAAO,CAAC,MAAM,kBAAa,KAAK,EAAE,SAAS,EAAC,uBAAuB,aAClE,eACE,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE;gCACpC,kCAAkC,EAAE,CAAC,KAAK;6BAC3C,CAAC,YAED,KAAK,CAAC,CAAC,CAAC,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,WAAW,GACvC,EACP,eAAM,SAAS,EAAC,qBAAqB,YACnC,KAAC,UAAU,KAAG,GACT,IACQ,EACjB,KAAC,UAAU,IACT,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAC,iCAAiC,EACvC,SAAS,EAAC,aAAa,EACvB,OAAO,EAAC,WAAW,YAEnB,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,wBAAwB,YAChD,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAClB,KAAC,OAAO,CAAC,MAAM,IAEb,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,SAAS,EAAC,uBAAuB,YAEhC,GAAG,CAAC,KAAK,IAJL,GAAG,CAAC,KAAK,CAKC,CAClB,CAAC,GACc,GACP,IACL,GACN,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/components/ui/Table.css

@@ -0,0 +1,113 @@
+table.memori--table {
+    --memori-table-spacing: 1rem;
+    --memori-table-border-color: hsl(205, 20%, 94%);
+    --memori-table-bg-color: rgb(246, 248, 249);
+
+    margin: 1rem 0;
+    font-size: 1rem;
+}
+
+@media (max-width: 767px) {
+    table.memori--table {
+        --memori-table-spacing: 0.5rem;
+
+        font-size: 0.875rem;
+    }
+}
+
+:where(table) {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    text-indent: 0;
+}
+
+table.memori--table th,
+table.memori--table td {
+    padding: calc(var(--memori-table-spacing) / 2) var(--memori-table-spacing);
+    border-bottom: 1px solid var(--memori-table-border-color);
+    text-align: left;
+    text-align: start;
+}
+
+table.memori--table thead th {
+    padding: var(--memori-table-spacing) var(--memori-table-spacing);
+    background-color: var(--memori-table-bg-color);
+}
+
+table.memori--table tfoot th,
+table.memori--table tfoot td {
+    border-top: 1px solid var(--memori-table-border-color);
+    border-bottom: 0;
+}
+
+table.memori--table[role="grid"] tbody tr:nth-child(odd) {
+    background-color: var(--memori-table-bg-color);
+}
+
+.memori--table--pagination {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-bottom: 1rem;
+}
+
+.memori--table--pagination--pages {
+    display: flex;
+    align-items: center;
+    margin-right: 1rem;
+}
+
+.memori--table--pagination--pages--current {
+    padding: 0 0.5rem;
+    font-variant-numeric: tabular-nums;
+}
+
+.memori--table--pagination--pages button.memori-button.memori-button--circle {
+    padding: 0.25rem;
+}
+
+.memori--table--pagination--pages button.memori-button[disabled] {
+    opacity: 0.3;
+}
+
+.memori--table--pagination ul.memori-select--options {
+    right: 0;
+}
+
+@media (max-width: 600px) {
+    .memori--table--pagination--pages {
+        margin-right: auto;
+    }
+
+    .memori--table--pagination--pages--current {
+        padding: 0 0.25rem;
+    }
+
+    .memori--table--pagination .memori-select button.memori-select--button {
+        padding-top: 0.25rem;
+        padding-right: 2rem;
+        padding-bottom: 0.25rem;
+        padding-left: 0.5rem;
+        font-size: 0.875rem;
+    }
+
+    .memori--table--pagination .memori-select ul.memori-select--options {
+        min-width: fit-content;
+    }
+}
+
+table.memori--table th.memori--table--column-centered,
+table.memori--table td.memori--table--column-centered {
+    text-align: center;
+}
+
+table.memori--table th.memori--table--column-right,
+table.memori--table td.memori--table--column-right {
+    text-align: right;
+    text-align: end;
+}
+
+.memori--table--date {
+    white-space: nowrap;
+}

package/esm/locales/en.json

@@ -21,6 +21,12 @@
     "day": "Day",
     "month": "Month",
     "year": "Year",
+    "createdAt": "Creation date",
+    "selected": "Selected",
+    "page": "page",
+    "actions": "Actions",
+    "next": "Next",
+    "previous": "Previous",
     "copy": "Copy",
     "copyToClipboard": "Copy to clipboard",
     "showOriginalText": "Show original",
@@ -47,6 +53,20 @@
     "deepThoughtHelper": "Allows to establish a unique relationship between the AI and the person who interrogates it, allowing the AI to remember this relationship and therefore supporting people with questions targeted to their experiences. Once people start their relationships, the creator of the AI will see their community grow with Followers and will be able to observe the known facts collected during the conversations.",
     "deepThoughtDisclaimerTitle": "Deep Thought enabled",
     "deepThoughtDisclaimer": "By continuing the conversation I authorize the processing of my personal data as specified in the information notice which I declare to have read.",
+    "knownFacts": {
+        "title": "Known facts",
+        "description": "Details of the information shared between you and {{memoriName}}",
+        "type": "Type",
+        "typeShortTerm": "Short term",
+        "typeLongTerm": "Long term",
+        "typeHelper": "Types:\n- Short Term: this Known Fact is always used during conversations\n- Long Term: this Known Fact is used during conversations only if relevant to the current question",
+        "text": "Text",
+        "deleteSuccess": "Known fact deleted",
+        "deleteConfirmTitle": "Delete known fact",
+        "deleteConfirmMessage": "Are you sure you want to delete this known fact?",
+        "deleteSelectedConfirmTitle": "Delete selected known facts",
+        "deleteSelectedConfirmMessage": "Are you sure you want to delete the selected known facts?"
+    },
     "auth": {
         "title": "Authentication",
         "useRecoveryTokens": "Use recovery tokens",

package/esm/locales/it.json

@@ -21,6 +21,12 @@
     "day": "Giorno",
     "month": "Mese",
     "year": "Anno",
+    "createdAt": "Data creazione",
+    "selected": "Selezionati",
+    "page": "pagina",
+    "actions": "Azioni",
+    "next": "Successivo",
+    "previous": "Precedente",
     "copy": "Copia",
     "copyToClipboard": "Copia negli appunti",
     "showOriginalText": "Mostra originale",
@@ -47,6 +53,20 @@
     "deepThoughtHelper": "Permette di stabilire una relazione univoca tra l'IA e la persona che la interroga, permettendo all'IA memoria di questa relazione supportando quindi le persone con domande mirate alle loro esperienze. Una volta che le persone avvieranno le loro relazioni, il creatore delle AI vedrà la propria community crescere di Follower e potrà osservare i fatti noti raccolti durante le conversazioni.",
     "deepThoughtDisclaimerTitle": "Pensiero profondo abilitato",
     "deepThoughtDisclaimer": "Proseguendo nella conversazione autorizzo il trattamento dei miei dati personali così come specificato nell'informativa di cui dichiaro di aver preso visione.",
+    "knownFacts": {
+        "title": "Fatti noti",
+        "description": "Dettagli delle informazioni condivise tra te e {{memoriName}}",
+        "type": "Tipo",
+        "typeShortTerm": "Breve termine",
+        "typeLongTerm": "Lungo termine",
+        "typeHelper": "Tipi:\n- Breve termine: questo fatto noto è sempre utilizzato durante le conversazioni\n- Lungo termine: questo fatto noto è utilizzato durante le conversazioni solo se rilevante per la domanda corrente",
+        "text": "Testo",
+        "deleteSuccess": "Fatto noto eliminato",
+        "deleteConfirmTitle": "Elimina il fatto noto",
+        "deleteConfirmMessage": "Confermi di voler eliminare questo fatto noto?",
+        "deleteSelectedConfirmTitle": "Elimina i fatti noti selezionati",
+        "deleteSelectedConfirmMessage": "Confermi di voler eliminare i fatti noti selezionati?"
+    },
     "auth": {
         "title": "Autenticazione",
         "useRecoveryTokens": "Utilizza i token di recupero",

package/esm/styles.css

@@ -6,6 +6,7 @@
 @import url('./components/ui/Spin.css');
 @import url('./components/ui/Tooltip.css');
 @import url('./components/ui/Select.css');
+@import url('./components/ui/Table.css');
 
 @import url('./components/CompletionProviderStatus/CompletionProviderStatus.css');
 @import url('./components/PoweredBy/PoweredBy.css');
@@ -36,6 +37,7 @@
 @import url('./components/UploadMenu/UploadMenu.css');
 @import url('./components/DateSelector/DateSelector.css');
 @import url('./components/AgeVerificationModal/AgeVerificationModal.css');
+@import url('./components/KnownFacts/KnownFacts.css');
 @import url('./components/MemoriWidget/MemoriWidget.css');
 
 @import url('https://fonts.bunny.net/css?family=exo-2:200,400,700');
@@ -87,4 +89,10 @@ body.sb-show-main #root,
     --memori-modal--width--md: 80%;
     --memori-error-color: #ff4d4f;
     --memori-warning-color: #faad14;
+}
+
+@media (max-width: 768px) {
+    .mobile-hidden {
+        display: none;
+    }
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.1.0",
+  "version": "4.2.0",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",
@@ -291,7 +291,7 @@
   "dependencies": {
     "@fontsource/exo-2": "^4.5.10",
     "@headlessui/react": "1.7.4",
-    "@memori.ai/memori-api-client": "^2.6.2",
+    "@memori.ai/memori-api-client": "^2.7.0",
     "@react-three/drei": "8.20.2",
     "@react-three/fiber": "7.0.25",
     "classnames": "2.3.2",

package/src/components/AgeVerificationModal/AgeVerificationModal.tsx

@@ -17,11 +17,15 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
 
   const [birthDate, setBirthDate] = useState<DateTime>();
   const [error, setError] = useState<string>();
+  const [submitting, setSubmitting] = useState<boolean>(false);
 
   const onSubmit = useCallback(() => {
+    setSubmitting(true);
+
     if (!birthDate) {
       toast.error(t('requiredField'));
       setError(t('requiredField') || 'Required field');
+      setSubmitting(false);
       return;
     }
 
@@ -32,6 +36,7 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
         t('underageTwinSession', { age: minAge }) ||
           `You must be at least ${minAge} years old to interact with this Twin`
       );
+      setSubmitting(false);
       return;
     }
 
@@ -76,6 +81,7 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
             primary
             htmlType="submit"
             className="age-verification-submit"
+            loading={submitting}
             disabled={!birthDate}
           >
             {t('confirm')}

package/src/components/Header/Header.css

@@ -29,7 +29,7 @@
     margin-left: 0.25rem;
 }
 
-.memori-header--button[disabled] {
+.memori-header--button[disabled]:not(.memori-header--button--knownfacts) {
     border: 0;
     cursor: not-allowed;
     opacity: 0.5;

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

@@ -27,6 +27,7 @@ export default meta;
 const Template: Story<Props> = args => {
   const [speakerMuted, setSpeakerMuted] = React.useState(args.speakerMuted);
   const [showSettingsDrawer, setShowSettingsDrawer] = React.useState(false);
+  const [showKnownFactsDrawer, setShowKnownFactsDrawer] = React.useState(false);
   const [continuousSpeech, setContinuousSpeech] = React.useState(true);
   const [continuousSpeechTimeout, setContinuousSpeechTimeout] =
     React.useState(2);
@@ -39,6 +40,7 @@ const Template: Story<Props> = args => {
         setSpeakerMuted={setSpeakerMuted}
         showSettings
         setShowSettingsDrawer={() => setShowSettingsDrawer(true)}
+        setShowKnownFactsDrawer={() => setShowKnownFactsDrawer(true)}
       />
       <SettingsDrawer
         open={!!showSettingsDrawer}
@@ -157,3 +159,38 @@ WithOngoingChat.args = {
   showShare: false,
   showSettings: false,
 };
+
+export const WithDeepThoughtEnabled = Template.bind({});
+WithDeepThoughtEnabled.args = {
+  memori: {
+    ...memori,
+    enableDeepThought: true,
+  },
+  history,
+  setShowPositionDrawer: () => {},
+  setShowSettingsDrawer: () => {},
+  clearHistory: () => {},
+  speakerMuted: false,
+  hasUserActivatedSpeak: false,
+  showShare: false,
+  showSettings: false,
+  loginToken: 'abcd',
+};
+
+export const WithDeepThoughtEnabledAndOngoingChat = Template.bind({});
+WithDeepThoughtEnabledAndOngoingChat.args = {
+  memori: {
+    ...memori,
+    enableDeepThought: true,
+  },
+  history,
+  setShowPositionDrawer: () => {},
+  setShowSettingsDrawer: () => {},
+  clearHistory: () => {},
+  speakerMuted: false,
+  hasUserActivatedSpeak: true,
+  showShare: false,
+  showSettings: false,
+  sessionID: '1234',
+  loginToken: 'abcd',
+};

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

@@ -10,6 +10,7 @@ it('renders Header unchanged', () => {
       history={history}
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
+      setShowKnownFactsDrawer={jest.fn()}
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
@@ -36,6 +37,7 @@ it('renders Header with position unchanged', () => {
       history={history}
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
+      setShowKnownFactsDrawer={jest.fn()}
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
@@ -54,6 +56,7 @@ it('renders Header with speaker muted unchanged', () => {
       history={history}
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
+      setShowKnownFactsDrawer={jest.fn()}
       speakerMuted={true}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
@@ -72,6 +75,7 @@ it('renders Header with share button unchanged', () => {
       history={history}
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
+      setShowKnownFactsDrawer={jest.fn()}
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
@@ -90,6 +94,7 @@ it('renders Header with settings button unchanged', () => {
       history={history}
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
+      setShowKnownFactsDrawer={jest.fn()}
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
@@ -108,6 +113,7 @@ it('renders Header with clear button unchanged', () => {
       history={history}
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
+      setShowKnownFactsDrawer={jest.fn()}
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
@@ -127,6 +133,7 @@ it('renders Header with user activated speak unchanged', () => {
       history={history}
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
+      setShowKnownFactsDrawer={jest.fn()}
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={true}
@@ -137,3 +144,50 @@ it('renders Header with user activated speak unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders Header with deep thought unchanged', () => {
+  const { container } = render(
+    <Header
+      memori={{
+        ...memori,
+        enableDeepThought: true,
+      }}
+      history={history}
+      setShowPositionDrawer={jest.fn()}
+      setShowSettingsDrawer={jest.fn()}
+      setShowKnownFactsDrawer={jest.fn()}
+      speakerMuted={false}
+      setSpeakerMuted={jest.fn()}
+      hasUserActivatedSpeak={false}
+      showShare={false}
+      showSettings={false}
+      clearHistory={jest.fn()}
+      loginToken="abcd"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Header with deep thought and session open unchanged', () => {
+  const { container } = render(
+    <Header
+      memori={{
+        ...memori,
+        enableDeepThought: true,
+      }}
+      history={history}
+      setShowPositionDrawer={jest.fn()}
+      setShowSettingsDrawer={jest.fn()}
+      setShowKnownFactsDrawer={jest.fn()}
+      speakerMuted={false}
+      setSpeakerMuted={jest.fn()}
+      hasUserActivatedSpeak={true}
+      showShare={false}
+      showSettings={false}
+      clearHistory={jest.fn()}
+      sessionID="1234"
+      loginToken="abcd"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/Header/Header.tsx

@@ -18,6 +18,7 @@ import FullscreenExit from '../icons/FullscreenExit';
 import Fullscreen from '../icons/Fullscreen';
 import Refresh from '../icons/Refresh';
 import Clear from '../icons/Clear';
+import DeepThought from '../icons/DeepThought';
 
 export interface Props {
   className?: string;
@@ -27,6 +28,7 @@ export interface Props {
   position?: Venue;
   setShowPositionDrawer: (show: boolean) => void;
   setShowSettingsDrawer: (show: boolean) => void;
+  setShowKnownFactsDrawer: (show: boolean) => void;
   speakerMuted: boolean;
   setSpeakerMuted: (mute: boolean) => void;
   hasUserActivatedSpeak?: boolean;
@@ -36,6 +38,8 @@ export interface Props {
   showReload?: boolean;
   showClear?: boolean;
   clearHistory: () => void;
+  loginToken?: string;
+  sessionID?: string;
 }
 
 const Header: React.FC<Props> = ({
@@ -46,6 +50,7 @@ const Header: React.FC<Props> = ({
   position,
   setShowPositionDrawer,
   setShowSettingsDrawer,
+  setShowKnownFactsDrawer,
   speakerMuted,
   setSpeakerMuted,
   hasUserActivatedSpeak = false,
@@ -55,6 +60,8 @@ const Header: React.FC<Props> = ({
   showReload = false,
   showClear = false,
   clearHistory,
+  loginToken,
+  sessionID,
 }) => {
   const { t } = useTranslation();
   const [fullScreenAvailable, setFullScreenAvailable] = useState(false);
@@ -124,6 +131,17 @@ const Header: React.FC<Props> = ({
           }}
         />
       )}
+      {memori.enableDeepThought && !!loginToken && (
+        <Button
+          primary={!!sessionID && !!hasUserActivatedSpeak}
+          shape="circle"
+          icon={<DeepThought />}
+          className="memori-header--button memori-header--button--knownfacts"
+          disabled={!hasUserActivatedSpeak || !sessionID}
+          onClick={() => setShowKnownFactsDrawer(true)}
+          title={t('knownFacts.title') || 'Known facts'}
+        />
+      )}
       {showSpeaker && (
         <Button
           primary