feat: use known facts ui, add action in header, add deep thought disc…

…laimer
memori-ai · Jan 5, 2024 · b516184 · b516184
1 parent 02180ea
commit b516184
Show file tree

Hide file tree

Showing 7 changed files with 332 additions and 5 deletions.
diff --git a/src/components/Header/Header.css b/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;

diff --git a/src/components/Header/Header.stories.tsx b/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',
+};
diff --git a/src/components/Header/Header.test.tsx b/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();
+});
diff --git a/src/components/Header/Header.tsx b/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