@memori.ai/memori-react 4.2.0 → 4.3.1

package/src/components/ExpertsDrawer/ExpertsDrawer.test.tsx

@@ -0,0 +1,53 @@
+import { render } from '@testing-library/react';
+import ExpertsDrawer from './ExpertsDrawer';
+import React from 'react';
+import { tenant, expertReference } from '../../mocks/data';
+
+beforeEach(() => {
+  // @ts-ignore
+  window.IntersectionObserver = jest.fn(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+    takeRecords: jest.fn(),
+  }));
+});
+
+it('renders ExpertsDrawer unchanged', () => {
+  const { container } = render(
+    <ExpertsDrawer
+      onClose={jest.fn()}
+      baseUrl="https://app.twincreator.com"
+      apiUrl="https://backend.memori.ai"
+      tenant={tenant}
+      experts={[
+        expertReference,
+        {
+          ...expertReference,
+          expertID: '2',
+        },
+      ]}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ExpertsDrawer open unchanged', () => {
+  const { container } = render(
+    <ExpertsDrawer
+      open
+      onClose={jest.fn()}
+      baseUrl="https://app.twincreator.com"
+      apiUrl="https://backend.memori.ai"
+      tenant={tenant}
+      experts={[
+        expertReference,
+        {
+          ...expertReference,
+          expertID: '2',
+        },
+      ]}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ExpertsDrawer/ExpertsDrawer.tsx

@@ -0,0 +1,70 @@
+import {
+  ExpertReference,
+  Tenant,
+} from '@memori.ai/memori-api-client/dist/types';
+import Drawer from '../ui/Drawer';
+import { useTranslation } from 'react-i18next';
+import { getResourceUrl } from '../../helpers/media';
+
+export interface Props {
+  experts: ExpertReference[];
+  baseUrl: string;
+  apiUrl: string;
+  tenant?: Tenant;
+  open?: boolean;
+  onClose: () => void;
+}
+
+const ExpertsDrawer = ({
+  open = false,
+  baseUrl,
+  apiUrl,
+  tenant,
+  experts,
+  onClose,
+}: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <Drawer
+      open={open}
+      onClose={onClose}
+      className="memori--experts-drawer"
+      title={
+        <h2 className="memori--experts-drawer--title">
+          {t('widget.expertsInTheBoard')}
+        </h2>
+      }
+    >
+      <ul className="memori--experts-drawer--list">
+        {experts.map(expert => (
+          <li key={expert.expertID} className="memori--experts-drawer--item">
+            <figure className="memori--experts-drawer--avatar">
+              <img
+                src={`${apiUrl}/api/v1/memoriai/memori/avatar/${expert.expertMemoriID}`}
+                alt={expert.name}
+                onError={e => {
+                  e.currentTarget.src = getResourceUrl({
+                    tenantID: tenant?.id,
+                    type: 'avatar',
+                    baseURL: baseUrl,
+                  });
+
+                  e.currentTarget.onerror = null;
+                }}
+              />
+            </figure>
+            <div className="memori--experts-drawer--content">
+              <h3 className="memori--experts-drawer--name">{expert.name}</h3>
+              <p className="memori--experts-drawer--description">
+                {expert.description}
+              </p>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </Drawer>
+  );
+};
+
+export default ExpertsDrawer;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ExpertsDrawer open 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 ExpertsDrawer unchanged 1`] = `<div />`;

package/src/components/Header/Header.css

@@ -43,6 +43,10 @@
     line-height: 1;
 }
 
+.memori-header--button.memori-header--button--experts svg {
+    fill: #fff;
+}
+
 .memori-header--position {
     display: inline-block;
 }

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

@@ -28,6 +28,7 @@ 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 [showExpertsDrawer, setShowExpertsDrawer] = React.useState(false);
   const [continuousSpeech, setContinuousSpeech] = React.useState(true);
   const [continuousSpeechTimeout, setContinuousSpeechTimeout] =
     React.useState(2);
@@ -41,6 +42,7 @@ const Template: Story<Props> = args => {
         showSettings
         setShowSettingsDrawer={() => setShowSettingsDrawer(true)}
         setShowKnownFactsDrawer={() => setShowKnownFactsDrawer(true)}
+        setShowExpertsDrawer={() => setShowExpertsDrawer(true)}
       />
       <SettingsDrawer
         open={!!showSettingsDrawer}
@@ -194,3 +196,40 @@ WithDeepThoughtEnabledAndOngoingChat.args = {
   sessionID: '1234',
   loginToken: 'abcd',
 };
+
+export const ForBoardOfExperts = Template.bind({});
+ForBoardOfExperts.args = {
+  memori: {
+    ...memori,
+    enableBoardOfExperts: true,
+  },
+  history,
+  setShowPositionDrawer: () => {},
+  setShowSettingsDrawer: () => {},
+  showExperts: true,
+  clearHistory: () => {},
+  speakerMuted: false,
+  hasUserActivatedSpeak: false,
+  showShare: false,
+  showSettings: false,
+  loginToken: 'abcd',
+};
+
+export const ForBoardOfExpertsAndOngoingChat = Template.bind({});
+ForBoardOfExpertsAndOngoingChat.args = {
+  memori: {
+    ...memori,
+    enableBoardOfExperts: true,
+  },
+  history,
+  setShowPositionDrawer: () => {},
+  setShowSettingsDrawer: () => {},
+  showExperts: true,
+  clearHistory: () => {},
+  speakerMuted: false,
+  hasUserActivatedSpeak: true,
+  showShare: false,
+  showSettings: false,
+  sessionID: '1234',
+  loginToken: 'abcd',
+};

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

@@ -11,6 +11,7 @@ it('renders Header unchanged', () => {
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
       setShowKnownFactsDrawer={jest.fn()}
+      setShowExpertsDrawer={jest.fn()}
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
@@ -38,6 +39,7 @@ it('renders Header with position unchanged', () => {
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
       setShowKnownFactsDrawer={jest.fn()}
+      setShowExpertsDrawer={jest.fn()}
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
@@ -57,6 +59,7 @@ it('renders Header with speaker muted unchanged', () => {
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
       setShowKnownFactsDrawer={jest.fn()}
+      setShowExpertsDrawer={jest.fn()}
       speakerMuted={true}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
@@ -76,6 +79,7 @@ it('renders Header with share button unchanged', () => {
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
       setShowKnownFactsDrawer={jest.fn()}
+      setShowExpertsDrawer={jest.fn()}
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
@@ -95,6 +99,7 @@ it('renders Header with settings button unchanged', () => {
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
       setShowKnownFactsDrawer={jest.fn()}
+      setShowExpertsDrawer={jest.fn()}
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
@@ -114,6 +119,7 @@ it('renders Header with clear button unchanged', () => {
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
       setShowKnownFactsDrawer={jest.fn()}
+      setShowExpertsDrawer={jest.fn()}
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
@@ -134,6 +140,7 @@ it('renders Header with user activated speak unchanged', () => {
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
       setShowKnownFactsDrawer={jest.fn()}
+      setShowExpertsDrawer={jest.fn()}
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={true}
@@ -156,6 +163,7 @@ it('renders Header with deep thought unchanged', () => {
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
       setShowKnownFactsDrawer={jest.fn()}
+      setShowExpertsDrawer={jest.fn()}
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
@@ -179,6 +187,56 @@ it('renders Header with deep thought and session open unchanged', () => {
       setShowPositionDrawer={jest.fn()}
       setShowSettingsDrawer={jest.fn()}
       setShowKnownFactsDrawer={jest.fn()}
+      setShowExpertsDrawer={jest.fn()}
+      speakerMuted={false}
+      setSpeakerMuted={jest.fn()}
+      hasUserActivatedSpeak={true}
+      showShare={false}
+      showSettings={false}
+      clearHistory={jest.fn()}
+      sessionID="1234"
+      loginToken="abcd"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Header for board of experts unchanged', () => {
+  const { container } = render(
+    <Header
+      memori={{
+        ...memori,
+        enableBoardOfExperts: true,
+      }}
+      history={history}
+      setShowPositionDrawer={jest.fn()}
+      setShowSettingsDrawer={jest.fn()}
+      setShowKnownFactsDrawer={jest.fn()}
+      setShowExpertsDrawer={jest.fn()}
+      speakerMuted={false}
+      setSpeakerMuted={jest.fn()}
+      hasUserActivatedSpeak={false}
+      showShare={false}
+      showSettings={false}
+      clearHistory={jest.fn()}
+      loginToken="abcd"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Header for board of experts with session open unchanged', () => {
+  const { container } = render(
+    <Header
+      memori={{
+        ...memori,
+        enableBoardOfExperts: true,
+      }}
+      history={history}
+      setShowPositionDrawer={jest.fn()}
+      setShowSettingsDrawer={jest.fn()}
+      setShowKnownFactsDrawer={jest.fn()}
+      setShowExpertsDrawer={jest.fn()}
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={true}

package/src/components/Header/Header.tsx

@@ -19,6 +19,7 @@ import Fullscreen from '../icons/Fullscreen';
 import Refresh from '../icons/Refresh';
 import Clear from '../icons/Clear';
 import DeepThought from '../icons/DeepThought';
+import Group from '../icons/Group';
 
 export interface Props {
   className?: string;
@@ -29,6 +30,7 @@ export interface Props {
   setShowPositionDrawer: (show: boolean) => void;
   setShowSettingsDrawer: (show: boolean) => void;
   setShowKnownFactsDrawer: (show: boolean) => void;
+  setShowExpertsDrawer: (show: boolean) => void;
   speakerMuted: boolean;
   setSpeakerMuted: (mute: boolean) => void;
   hasUserActivatedSpeak?: boolean;
@@ -51,6 +53,7 @@ const Header: React.FC<Props> = ({
   setShowPositionDrawer,
   setShowSettingsDrawer,
   setShowKnownFactsDrawer,
+  setShowExpertsDrawer,
   speakerMuted,
   setSpeakerMuted,
   hasUserActivatedSpeak = false,
@@ -142,6 +145,17 @@ const Header: React.FC<Props> = ({
           title={t('knownFacts.title') || 'Known facts'}
         />
       )}
+      {memori.enableBoardOfExperts && (
+        <Button
+          primary
+          shape="circle"
+          icon={<Group />}
+          className="memori-header--button memori-header--button--experts"
+          disabled={!hasUserActivatedSpeak || !sessionID}
+          onClick={() => setShowExpertsDrawer(true)}
+          title={t('widget.showExpertsInTheBoard') || 'Experts in this board'}
+        />
+      )}
       {showSpeaker && (
         <Button
           primary

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

@@ -1,5 +1,176 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders Header for board of experts unchanged 1`] = `
+<div>
+  <div
+    class="memori-header"
+  >
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--experts"
+      disabled=""
+      title="widget.showExpertsInTheBoard"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="none"
+          focusable="false"
+          height="16"
+          role="img"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 640 512"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M211.2 96a64 64 0 10-128 0 64 64 0 10128 0zM32 256c0 17.7 14.3 32 32 32h85.6c10.1-39.4 38.6-71.5 75.8-86.6-9.7-6-21.2-9.4-33.4-9.4H96c-35.3 0-64 28.7-64 64zm461.6 32H576c17.7 0 32-14.3 32-32 0-35.3-28.7-64-64-64h-96c-11.7 0-22.7 3.1-32.1 8.6 38.1 14.8 67.4 47.3 77.7 87.4zm-102.4-61.6c-6.9-1.6-14.2-2.4-21.6-2.4h-96c-8.5 0-16.7 1.1-24.5 3.1-30.8 8.1-55.6 31.1-66.1 60.9-3.5 10-5.5 20.8-5.5 32 0 17.7 14.3 32 32 32h224c17.7 0 32-14.3 32-32 0-11.2-1.9-22-5.5-32-10.8-30.7-36.8-54.2-68.9-61.6zM563.2 96a64 64 0 10-128 0 64 64 0 10128 0zm-241.6 96a80 80 0 100-160 80 80 0 100 160zM32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32h576c17.7 0 32-14.3 32-32s-14.3-32-32-32H32z"
+          />
+        </svg>
+      </span>
+    </button>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
+      title="widget.sound"
+    >
+      <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="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"
+          />
+        </svg>
+      </span>
+    </button>
+    <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-:r1f:"
+        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>
+  </div>
+</div>
+`;
+
+exports[`renders Header for board of experts with session open unchanged 1`] = `
+<div>
+  <div
+    class="memori-header"
+  >
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--experts"
+      title="widget.showExpertsInTheBoard"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="none"
+          focusable="false"
+          height="16"
+          role="img"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 640 512"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M211.2 96a64 64 0 10-128 0 64 64 0 10128 0zM32 256c0 17.7 14.3 32 32 32h85.6c10.1-39.4 38.6-71.5 75.8-86.6-9.7-6-21.2-9.4-33.4-9.4H96c-35.3 0-64 28.7-64 64zm461.6 32H576c17.7 0 32-14.3 32-32 0-35.3-28.7-64-64-64h-96c-11.7 0-22.7 3.1-32.1 8.6 38.1 14.8 67.4 47.3 77.7 87.4zm-102.4-61.6c-6.9-1.6-14.2-2.4-21.6-2.4h-96c-8.5 0-16.7 1.1-24.5 3.1-30.8 8.1-55.6 31.1-66.1 60.9-3.5 10-5.5 20.8-5.5 32 0 17.7 14.3 32 32 32h224c17.7 0 32-14.3 32-32 0-11.2-1.9-22-5.5-32-10.8-30.7-36.8-54.2-68.9-61.6zM563.2 96a64 64 0 10-128 0 64 64 0 10128 0zm-241.6 96a80 80 0 100-160 80 80 0 100 160zM32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32h576c17.7 0 32-14.3 32-32s-14.3-32-32-32H32z"
+          />
+        </svg>
+      </span>
+    </button>
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
+      title="widget.sound"
+    >
+      <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="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"
+          />
+        </svg>
+      </span>
+    </button>
+    <div
+      class="memori-export-history-button memori-header--button memori-header--button--export"
+      data-headlessui-state=""
+      title="write_and_speak.exportChatHistoryMessage"
+    >
+      <button
+        aria-expanded="false"
+        class="memori-button memori-button--circle memori-button--icon-only memori-button--primary"
+        data-headlessui-state=""
+        id="headlessui-popover-button-:r1k:"
+        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>
+  </div>
+</div>
+`;
+
 exports[`renders Header unchanged 1`] = `
 <div>
   <div

package/src/components/KnownFacts/KnownFacts.tsx

@@ -267,17 +267,19 @@ const KnownFacts = ({
               <div className="memori--table--pagination--pages">
                 <Button
                   shape="circle"
-                  disabled={pageIndex === 0}
+                  disabled={pageIndex === 0 || pageIndex < numberOfResults}
                   padded={false}
                   title={t('previous') || 'Previous'}
                   icon={<ChevronLeft />}
                   onClick={() => {
-                    setPageIndex(pageIndex - 1);
-                    fetchKnownFacts(undefined, pageIndex - 1, numberOfResults);
+                    let from =
+                      (pageIndex / numberOfResults - 1) * numberOfResults;
+                    setPageIndex(from);
+                    fetchKnownFacts(undefined, from, numberOfResults);
                   }}
                 />
                 <span className="memori--table--pagination--pages--current">
-                  {pageIndex + 1} /{' '}
+                  {Math.ceil(pageIndex / numberOfResults) + 1} /{' '}
                   {Math.ceil(knownFactsCount / numberOfResults)}
                 </span>
                 <Button
@@ -286,11 +288,14 @@ const KnownFacts = ({
                   title={t('next') || 'Next'}
                   icon={<ChevronRight />}
                   disabled={
-                    (pageIndex + 1) * numberOfResults >= knownFactsCount
+                    (pageIndex / numberOfResults + 1) * numberOfResults >=
+                    knownFactsCount
                   }
                   onClick={() => {
-                    setPageIndex(pageIndex + 1);
-                    fetchKnownFacts(undefined, 1, numberOfResults);
+                    let from =
+                      (pageIndex / numberOfResults + 1) * numberOfResults;
+                    setPageIndex(from);
+                    fetchKnownFacts(undefined, from, numberOfResults);
                   }}
                 />
               </div>
@@ -306,7 +311,8 @@ const KnownFacts = ({
               displayValue={`${numberOfResults} / ${t('page') || 'page'}`}
               onChange={value => {
                 setNumberOfResults(value);
-                fetchKnownFacts(undefined, undefined, value);
+                setPageIndex(0);
+                fetchKnownFacts(undefined, 0, value);
               }}
             />
           </nav>

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -52,6 +52,7 @@ import PoweredBy from '../PoweredBy/PoweredBy';
 import AgeVerificationModal from '../AgeVerificationModal/AgeVerificationModal';
 import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
 import KnownFacts from '../KnownFacts/KnownFacts';
+import ExpertsDrawer from '../ExpertsDrawer/ExpertsDrawer';
 
 // Layout
 import FullPageLayout from '../layouts/FullPage';
@@ -455,6 +456,7 @@ const MemoriWidget = ({
   const [showPositionDrawer, setShowPositionDrawer] = useState(false);
   const [showSettingsDrawer, setShowSettingsDrawer] = useState(false);
   const [showKnownFactsDrawer, setShowKnownFactsDrawer] = useState(false);
+  const [showExpertsDrawer, setShowExpertsDrawer] = useState(false);
   const [muteSpeaker, setMuteSpeaker] = useState(false);
   const [continuousSpeech, setContinuousSpeech] = useState(false);
   const [continuousSpeechTimeout, setContinuousSpeechTimeout] = useState(2);
@@ -2595,6 +2597,7 @@ const MemoriWidget = ({
     setShowPositionDrawer,
     setShowSettingsDrawer,
     setShowKnownFactsDrawer,
+    setShowExpertsDrawer,
     showSpeaker: !!AZURE_COGNITIVE_SERVICES_TTS_KEY,
     speakerMuted: muteSpeaker || speakerMuted,
     setSpeakerMuted: mute => {
@@ -2920,6 +2923,17 @@ const MemoriWidget = ({
           closeDrawer={() => setShowKnownFactsDrawer(false)}
         />
       )}
+
+      {showExpertsDrawer && !!experts && (
+        <ExpertsDrawer
+          apiUrl={apiUrl}
+          baseUrl={baseUrl}
+          tenant={tenant}
+          experts={experts}
+          open={showExpertsDrawer}
+          onClose={() => setShowExpertsDrawer(false)}
+        />
+      )}
     </div>
   );
 };

package/src/components/StartPanel/StartPanel.css

@@ -214,4 +214,9 @@
     padding: 5px;
     border: 1px solid #666;
     border-radius: 50%;
+}
+
+.memori--deep-thought-disclaimer a {
+    color: inherit;
+    text-decoration: underline;
 }