@memori.ai/memori-react 1.0.0-alpha.1

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

@@ -0,0 +1,239 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ExportHistoryButton unchanged 1`] = `
+<div>
+  <div
+    class="memori-export-history-button"
+    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-:r0:"
+      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>
+`;
+
+exports[`renders ExportHistoryButton unchanged disabled 1`] = `
+<div>
+  <div
+    class="memori-export-history-button"
+    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>
+</div>
+`;
+
+exports[`renders ExportHistoryButton unchanged with className 1`] = `
+<div>
+  <div
+    class="memori-export-history-button test"
+    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-:ra:"
+      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>
+`;
+
+exports[`renders ExportHistoryButton unchanged with custom button props 1`] = `
+<div>
+  <div
+    class="memori-export-history-button"
+    data-headlessui-state=""
+    title="write_and_speak.exportChatHistoryMessage"
+  >
+    <button
+      aria-expanded="false"
+      class="memori-button memori-button--circle memori-button--icon-only test memori-button--primary"
+      data-headlessui-state=""
+      id="headlessui-popover-button-:rp:"
+      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="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders ExportHistoryButton unchanged with custom filename 1`] = `
+<div>
+  <div
+    class="memori-export-history-button"
+    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-:ru:"
+      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>
+`;
+
+exports[`renders ExportHistoryButton unchanged with custom icon 1`] = `
+<div>
+  <div
+    class="memori-export-history-button"
+    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-:rk:"
+      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="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders ExportHistoryButton unchanged with history 1`] = `
+<div>
+  <div
+    class="memori-export-history-button"
+    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-:r5:"
+      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>
+`;

package/src/components/Header/Header.css

@@ -0,0 +1,58 @@
+.memori-header {
+    position: relative;
+    z-index: 1;
+    width: calc(50% - 1rem);
+    padding: calc(var(--memori-inner-content-pad) / 4) calc(var(--memori-inner-content-pad) / 2);
+    border-radius: 10px;
+    margin-left: auto;
+    background-color: var(--memori-inner-bg, #fff);
+    text-align: right;
+}
+
+@media (max-width: 870px) {
+    .memori-header {
+        width: 100%;
+        margin-left: 0;
+    }
+}
+
+.memori-header--button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-header--button+.memori-header--button {
+    margin-left: 0.25rem;
+}
+
+.memori-header--button[disabled] {
+    border: 0;
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.memori-header--button svg {
+    width: 1em;
+    height: 1em;
+    font-size: 1em;
+    line-height: 1;
+}
+
+.memori-header--position {
+    display: inline-block;
+}
+
+.memori-header--position .memori-header--position-placeName {
+    font-style: italic;
+}
+
+.memori-header--position .memori-header--button {
+    margin-right: 0.5rem;
+    margin-left: 0.5rem;
+}
+
+.memori-header .memori-share-button {
+    margin-left: 0.25rem;
+}

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { memori, history } from '../../mocks/data';
+import Header, { Props } from './Header';
+
+const meta: Meta = {
+  title: 'Widget/Header',
+  component: Header,
+  argTypes: {
+    showShare: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => {
+  const [speakerMuted, setSpeakerMuted] = React.useState(args.speakerMuted);
+  return (
+    <Header
+      {...args}
+      speakerMuted={speakerMuted}
+      setSpeakerMuted={setSpeakerMuted}
+    />
+  );
+};
+
+// 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 = {
+  memori,
+  history,
+  setShowPositionDrawer: () => {},
+  setShowSettingsDrawer: () => {},
+  speakerMuted: false,
+  hasUserActivatedSpeak: false,
+  showShare: false,
+  showSettings: false,
+};
+
+export const WithPosition = Template.bind({});
+WithPosition.args = {
+  memori: {
+    ...memori,
+    needsPosition: true,
+  },
+  history,
+  position: {
+    placeName: 'Berlin',
+    latitude: 52.520008,
+    longitude: 13.404954,
+  },
+  setShowPositionDrawer: () => {},
+  setShowSettingsDrawer: () => {},
+  speakerMuted: false,
+  hasUserActivatedSpeak: false,
+  showShare: false,
+  showSettings: false,
+};
+
+export const SpeakerMuted = Template.bind({});
+SpeakerMuted.args = {
+  memori,
+  history,
+  setShowPositionDrawer: () => {},
+  setShowSettingsDrawer: () => {},
+  speakerMuted: true,
+  hasUserActivatedSpeak: false,
+  showShare: false,
+  showSettings: false,
+};
+
+export const WithShare = Template.bind({});
+WithShare.args = {
+  memori,
+  history,
+  setShowPositionDrawer: () => {},
+  setShowSettingsDrawer: () => {},
+  speakerMuted: false,
+  hasUserActivatedSpeak: false,
+  showShare: true,
+  showSettings: false,
+};
+
+export const WithSettings = Template.bind({});
+WithSettings.args = {
+  memori,
+  history,
+  setShowPositionDrawer: () => {},
+  setShowSettingsDrawer: () => {},
+  speakerMuted: false,
+  hasUserActivatedSpeak: false,
+  showShare: false,
+  showSettings: true,
+};
+
+export const WithOngoingChat = Template.bind({});
+WithOngoingChat.args = {
+  memori,
+  history,
+  setShowPositionDrawer: () => {},
+  setShowSettingsDrawer: () => {},
+  speakerMuted: false,
+  hasUserActivatedSpeak: true,
+  showShare: false,
+  showSettings: false,
+};

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { memori, history } from '../../mocks/data';
+import Header from './Header';
+
+it('renders Header unchanged', () => {
+  const { container } = render(
+    <Header
+      memori={memori}
+      history={history}
+      setShowPositionDrawer={jest.fn()}
+      setShowSettingsDrawer={jest.fn()}
+      speakerMuted={false}
+      setSpeakerMuted={jest.fn()}
+      hasUserActivatedSpeak={false}
+      showShare={false}
+      showSettings={false}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Header with position unchanged', () => {
+  const { container } = render(
+    <Header
+      memori={{
+        ...memori,
+        needsPosition: true,
+      }}
+      position={{
+        placeName: 'Berlin',
+        latitude: 52.520008,
+        longitude: 13.404954,
+      }}
+      history={history}
+      setShowPositionDrawer={jest.fn()}
+      setShowSettingsDrawer={jest.fn()}
+      speakerMuted={false}
+      setSpeakerMuted={jest.fn()}
+      hasUserActivatedSpeak={false}
+      showShare={false}
+      showSettings={false}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Header with speaker muted unchanged', () => {
+  const { container } = render(
+    <Header
+      memori={memori}
+      history={history}
+      setShowPositionDrawer={jest.fn()}
+      setShowSettingsDrawer={jest.fn()}
+      speakerMuted={true}
+      setSpeakerMuted={jest.fn()}
+      hasUserActivatedSpeak={false}
+      showShare={false}
+      showSettings={false}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Header with share button unchanged', () => {
+  const { container } = render(
+    <Header
+      memori={memori}
+      history={history}
+      setShowPositionDrawer={jest.fn()}
+      setShowSettingsDrawer={jest.fn()}
+      speakerMuted={false}
+      setSpeakerMuted={jest.fn()}
+      hasUserActivatedSpeak={false}
+      showShare={true}
+      showSettings={false}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Header with settings button unchanged', () => {
+  const { container } = render(
+    <Header
+      memori={memori}
+      history={history}
+      setShowPositionDrawer={jest.fn()}
+      setShowSettingsDrawer={jest.fn()}
+      speakerMuted={false}
+      setSpeakerMuted={jest.fn()}
+      hasUserActivatedSpeak={false}
+      showShare={false}
+      showSettings={true}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Header with user activated speak unchanged', () => {
+  const { container } = render(
+    <Header
+      memori={memori}
+      history={history}
+      setShowPositionDrawer={jest.fn()}
+      setShowSettingsDrawer={jest.fn()}
+      speakerMuted={false}
+      setSpeakerMuted={jest.fn()}
+      hasUserActivatedSpeak={true}
+      showShare={false}
+      showSettings={false}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/Header/Header.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import cx from 'classnames';
+import {
+  Memori,
+  Message,
+  Venue,
+} from '@memori.ai/memori-api-client/dist/types';
+import Button from '../ui/Button';
+import MapMarker from '../icons/MapMarker';
+import SoundDeactivated from '../icons/SoundDeactivated';
+import Sound from '../icons/Sound';
+import { useTranslation } from 'react-i18next';
+import ExportHistoryButton from '../ExportHistoryButton/ExportHistoryButton';
+import Setting from '../icons/Setting';
+import ShareButton from '../ShareButton/ShareButton';
+
+import './Header.css';
+
+export interface Props {
+  className?: string;
+  memori: Memori;
+  history: Message[];
+  position?: Venue;
+  setShowPositionDrawer: (show: boolean) => void;
+  setShowSettingsDrawer: (show: boolean) => void;
+  speakerMuted: boolean;
+  setSpeakerMuted: (mute: boolean) => void;
+  hasUserActivatedSpeak?: boolean;
+  showShare?: boolean;
+  showSettings?: boolean;
+}
+
+const Header: React.FC<Props> = ({
+  className,
+  memori,
+  history,
+  position,
+  setShowPositionDrawer,
+  setShowSettingsDrawer,
+  speakerMuted,
+  setSpeakerMuted,
+  hasUserActivatedSpeak = false,
+  showShare = true,
+  showSettings = true,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={cx('memori-header', className)}>
+      {memori.needsPosition && position && (
+        <div className="memori-header--position">
+          <span className="memori-header--position-placeName">
+            {position.placeName}
+          </span>
+          <Button
+            icon={<MapMarker />}
+            shape="circle"
+            className="memori-header--button"
+            onClick={() => setShowPositionDrawer(true)}
+          />
+        </div>
+      )}
+      <Button
+        primary
+        shape="circle"
+        className="memori-header--button"
+        icon={speakerMuted ? <SoundDeactivated /> : <Sound />}
+        onClick={() => setSpeakerMuted(!speakerMuted)}
+        title={t('widget.sound') || 'Sound'}
+      />
+      <ExportHistoryButton
+        history={history}
+        memori={memori}
+        className="memori-header--button"
+        disabled={!hasUserActivatedSpeak || history.length === 0}
+      />
+      {showSettings && (
+        <Button
+          primary
+          shape="circle"
+          className="memori-header--button"
+          icon={<Setting />}
+          onClick={() => setShowSettingsDrawer(true)}
+          title={t('widget.settings') || 'Settings'}
+        />
+      )}
+      {showShare && (
+        <ShareButton
+          className="memori-header--button"
+          title={memori.name}
+          showQrCode
+          align="left"
+        />
+      )}
+    </div>
+  );
+};
+
+export default Header;