@memori.ai/memori-react 4.2.0 → 4.3.0

package/src/components/ExpertsDrawer/ExpertsDrawer.css

@@ -0,0 +1,67 @@
+.memori--experts-drawer {
+    z-index: 1000;
+}
+
+.memori--experts-drawer .memori-drawer--panel {
+    --memori-drawer--width: 100%;
+    --memori-drawer--width--md: 60%;
+    --memori-drawer--width--lg: 40%;
+}
+
+h2.memori--experts-drawer--title {
+    margin: 0;
+    font-size: inherit;
+    font-weight: 400;
+    line-height: inherit;
+}
+
+ul.memori--experts-drawer--list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+li.memori--experts-drawer--item {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+figure.memori--experts-drawer--avatar {
+    display: flex;
+    overflow: hidden;
+    width: 1.5rem;
+    height: 1.5rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    margin: 0 0.5rem 0 0;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+
+figure.memori--experts-drawer--avatar img {
+    min-width: 100%;
+    min-height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.memori--experts-drawer--content {
+    flex: 1;
+}
+
+h3.memori--experts-drawer--name {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.25rem;
+}
+
+p.memori--experts-drawer--description {
+    margin: 0;
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1rem;
+}

package/src/components/ExpertsDrawer/ExpertsDrawer.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
+import ExpertsDrawer, { Props } from './ExpertsDrawer';
+import { tenant, expertReference } from '../../mocks/data';
+import './ExpertsDrawer.css';
+
+const meta: Meta = {
+  title: 'Widget/ExpertsDrawer',
+  component: ExpertsDrawer,
+  argTypes: {
+    open: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => {
+  return (
+    <I18nWrapper>
+      <ExpertsDrawer
+        {...args}
+        baseUrl="https://app.twincreator.com"
+        apiUrl="https://backend.memori.ai"
+        tenant={tenant}
+        experts={[
+          expertReference,
+          {
+            ...expertReference,
+            expertID: '2',
+            name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+            description:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+          },
+        ]}
+      />
+    </I18nWrapper>
+  );
+};
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+Default.args = {
+  open: true,
+  onClose: () => {},
+};

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