diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index f2f5b545..1334e75b 100644 --- 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 index 3156a046..53469d3a 100644 --- a/src/components/Header/Header.stories.tsx +++ b/src/components/Header/Header.stories.tsx @@ -27,6 +27,7 @@ export default meta; const Template: Story = 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 = args => { setSpeakerMuted={setSpeakerMuted} showSettings setShowSettingsDrawer={() => setShowSettingsDrawer(true)} + setShowKnownFactsDrawer={() => setShowKnownFactsDrawer(true)} /> {}, + 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 index 4bd81b03..1519f17d 100644 --- 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( +
+ ); + expect(container).toMatchSnapshot(); +}); + +it('renders Header with deep thought and session open unchanged', () => { + const { container } = render( +
+ ); + expect(container).toMatchSnapshot(); +}); diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 2bf2a168..c58384f7 100644 --- 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 = ({ @@ -46,6 +50,7 @@ const Header: React.FC = ({ position, setShowPositionDrawer, setShowSettingsDrawer, + setShowKnownFactsDrawer, speakerMuted, setSpeakerMuted, hasUserActivatedSpeak = false, @@ -55,6 +60,8 @@ const Header: React.FC = ({ showReload = false, showClear = false, clearHistory, + loginToken, + sessionID, }) => { const { t } = useTranslation(); const [fullScreenAvailable, setFullScreenAvailable] = useState(false); @@ -124,6 +131,17 @@ const Header: React.FC = ({ }} /> )} + {memori.enableDeepThought && !!loginToken && ( + + +
+ +
+ + +`; + +exports[`renders Header with deep thought unchanged 1`] = ` +
+
+ + +
+ +
+
+
+`; + exports[`renders Header with position unchanged 1`] = `
{ @@ -453,6 +454,7 @@ const MemoriWidget = ({ useState(false); const [showPositionDrawer, setShowPositionDrawer] = useState(false); const [showSettingsDrawer, setShowSettingsDrawer] = useState(false); + const [showKnownFactsDrawer, setShowKnownFactsDrawer] = useState(false); const [muteSpeaker, setMuteSpeaker] = useState(false); const [continuousSpeech, setContinuousSpeech] = useState(false); const [continuousSpeechTimeout, setContinuousSpeechTimeout] = useState(2); @@ -2592,6 +2594,7 @@ const MemoriWidget = ({ position, setShowPositionDrawer, setShowSettingsDrawer, + setShowKnownFactsDrawer, showSpeaker: !!AZURE_COGNITIVE_SERVICES_TTS_KEY, speakerMuted: muteSpeaker || speakerMuted, setSpeakerMuted: mute => { @@ -2613,6 +2616,8 @@ const MemoriWidget = ({ showReload: selectedLayout === 'TOTEM', showClear, clearHistory: () => setHistory(h => h.slice(-1)), + loginToken, + sessionID: sessionId, }; const avatarProps: AvatarProps = { @@ -2905,6 +2910,16 @@ const MemoriWidget = ({ additionalSettings={additionalSettings} /> )} + + {showKnownFactsDrawer && sessionId && ( + setShowKnownFactsDrawer(false)} + /> + )}
); }; diff --git a/src/components/StartPanel/StartPanel.css b/src/components/StartPanel/StartPanel.css index 6f5396f5..42b13155 100644 --- a/src/components/StartPanel/StartPanel.css +++ b/src/components/StartPanel/StartPanel.css @@ -209,8 +209,8 @@ } .memori--deep-thought-disclaimer .memori-tooltip .memori-tooltip--trigger svg { - width: 1.25em; - height: 1.25em; + width: 1.5rem; + height: 1.5rem; padding: 5px; border: 1px solid #666; border-radius: 50%;