diff --git a/README.md b/README.md index 13bf4511..444b27f8 100644 --- a/README.md +++ b/README.md @@ -85,6 +85,7 @@ const App = () => ( | `multilingual` | | `bool` | `false` | Enable multilingual mode, if enabled the user can switch between spoken languages | | `spokenLang` | | `string` | | Language of the spoken text, as defaults to user selection. Example: "en" or "it" | | `onStateChange` | | `function` | | Callback function called when the state of the Memori changes | +| `enableAudio` | | `boolean` | `true` | Enable audio output. Defaults to true if otherwise indicated by props or integration config. | | `defaultSpeakerActive` | | `boolean` | `true` | Default value for the speaker activation | | `disableTextEnteredEvents` | | `boolean` | `false` | Disable MemoriTextEntered events listeners for `typeMessage` functions, useful to avoid issues with multiple widgets in page. | | `AZURE_COGNITIVE_SERVICES_TTS_KEY` | | `string` | | Azure Cognitive Services TTS key, used to generate the audio of the Memori and for STT recognition | diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx index 60def34f..7d6f03cb 100644 --- a/src/components/Header/Header.stories.tsx +++ b/src/components/Header/Header.stories.tsx @@ -123,6 +123,20 @@ SpeakerMuted.args = { showSettings: false, }; +export const WithoutAudio = Template.bind({}); +WithoutAudio.args = { + memori, + history, + setShowPositionDrawer: () => {}, + setShowSettingsDrawer: () => {}, + clearHistory: () => {}, + speakerMuted: true, + enableAudio: false, + hasUserActivatedSpeak: false, + showShare: false, + showSettings: false, +}; + export const WithShare = Template.bind({}); WithShare.args = { memori, diff --git a/src/components/Header/Header.test.tsx b/src/components/Header/Header.test.tsx index 104e9a33..0ee7a9e6 100644 --- a/src/components/Header/Header.test.tsx +++ b/src/components/Header/Header.test.tsx @@ -74,6 +74,28 @@ it('renders Header with speaker muted unchanged', () => { expect(container).toMatchSnapshot(); }); +it('renders Header with audio disabled unchanged', () => { + const { container } = render( + + ); + expect(container).toMatchSnapshot(); +}); + it('renders Header with share button unchanged', () => { const { container } = render( void; setShowKnownFactsDrawer: (show: boolean) => void; setShowExpertsDrawer: (show: boolean) => void; + enableAudio?: boolean; speakerMuted: boolean; setSpeakerMuted: (mute: boolean) => void; hasUserActivatedSpeak?: boolean; @@ -59,6 +60,7 @@ const Header: React.FC = ({ setShowSettingsDrawer, setShowKnownFactsDrawer, setShowExpertsDrawer, + enableAudio = true, speakerMuted, setSpeakerMuted, hasUserActivatedSpeak = false, @@ -168,7 +170,7 @@ const Header: React.FC = ({ title={t('widget.showExpertsInTheBoard') || 'Experts in this board'} /> )} - {showSpeaker && ( + {enableAudio && showSpeaker && ( `; +exports[`renders Header with audio disabled unchanged 1`] = ` + + + + + + + + + + + + + + + + + + + + +`; + exports[`renders Header with clear button unchanged 1`] = ` @@ -1171,7 +1229,7 @@ exports[`renders Header with user activated speak unchanged 1`] = ` aria-expanded="false" class="memori-button memori-button--circle memori-button--icon-only memori-button--primary" data-headlessui-state="" - id="headlessui-popover-button-:r10:" + id="headlessui-popover-button-:r15:" type="button" > void; @@ -412,6 +413,7 @@ const MemoriWidget = ({ personification, authToken, AZURE_COGNITIVE_SERVICES_TTS_KEY, + enableAudio, defaultSpeakerActive = true, disableTextEnteredEvents = false, onStateChange, @@ -476,7 +478,10 @@ const MemoriWidget = ({ ? JSON.parse(integration.customData) : null; - const isMultilanguageEnabled = multilingual !== undefined ? multilingual : !!integrationConfig?.multilanguage; + const isMultilanguageEnabled = + multilingual !== undefined + ? multilingual + : !!integrationConfig?.multilanguage; const forcedTimeout = integrationConfig?.forcedTimeout as number | undefined; const [userLang, setUserLang] = useState( memoriLang ?? @@ -500,7 +505,10 @@ const MemoriWidget = ({ const [showSettingsDrawer, setShowSettingsDrawer] = useState(false); const [showKnownFactsDrawer, setShowKnownFactsDrawer] = useState(false); const [showExpertsDrawer, setShowExpertsDrawer] = useState(false); - const [muteSpeaker, setMuteSpeaker] = useState(!defaultSpeakerActive); + const [muteSpeaker, setMuteSpeaker] = useState( + !(enableAudio ?? integrationConfig?.enableAudio ?? true) || + !defaultSpeakerActive + ); const [continuousSpeech, setContinuousSpeech] = useState(false); const [continuousSpeechTimeout, setContinuousSpeechTimeout] = useState(2); const [isPlayingAudio, setIsPlayingAudio] = useState(false); @@ -2971,6 +2979,7 @@ const MemoriWidget = ({ setShowSettingsDrawer, setShowKnownFactsDrawer, setShowExpertsDrawer, + enableAudio: enableAudio ?? integrationConfig?.enableAudio ?? true, showSpeaker: !!AZURE_COGNITIVE_SERVICES_TTS_KEY, speakerMuted: muteSpeaker || speakerMuted, setSpeakerMuted: mute => { diff --git a/src/index.tsx b/src/index.tsx index dfb6f0f6..bafa37c4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -51,6 +51,7 @@ export interface Props { spokenLang?: string; multilingual?: boolean; authToken?: string; + enableAudio?: boolean; defaultSpeakerActive?: boolean; disableTextEnteredEvents?: boolean; AZURE_COGNITIVE_SERVICES_TTS_KEY?: string; @@ -114,6 +115,7 @@ const Memori: React.FC = ({ multilingual, authToken, AZURE_COGNITIVE_SERVICES_TTS_KEY, + enableAudio, defaultSpeakerActive = true, disableTextEnteredEvents = false, onStateChange, @@ -265,6 +267,7 @@ const Memori: React.FC = ({ AZURE_COGNITIVE_SERVICES_TTS_KEY={ speechKey || AZURE_COGNITIVE_SERVICES_TTS_KEY } + enableAudio={enableAudio} defaultSpeakerActive={defaultSpeakerActive} disableTextEnteredEvents={disableTextEnteredEvents} onStateChange={onStateChange} @@ -343,6 +346,7 @@ Memori.propTypes = { spokenLang: PropTypes.string, multilingual: PropTypes.bool, authToken: PropTypes.string, + enableAudio: PropTypes.bool, defaultSpeakerActive: PropTypes.bool, disableTextEnteredEvents: PropTypes.bool, AZURE_COGNITIVE_SERVICES_TTS_KEY: PropTypes.string,