Skip to content

Commit

Permalink
feat: add enableAudio prop, read also from config
Browse files Browse the repository at this point in the history
  • Loading branch information
@nzambello
nzambello committed Aug 29, 2024
1 parent e848145 commit 240c03c
Show file tree
Hide file tree
Showing 8 changed files with 140 additions and 14 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
14 changes: 14 additions & 0 deletions src/components/Header/Header.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
22 changes: 22 additions & 0 deletions src/components/Header/Header.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,28 @@ it('renders Header with speaker muted unchanged', () => {
expect(container).toMatchSnapshot();
});

it('renders Header with audio disabled unchanged', () => {
const { container } = render(
<Header
memori={memori}
history={history}
setShowPositionDrawer={jest.fn()}
setShowSettingsDrawer={jest.fn()}
setShowKnownFactsDrawer={jest.fn()}
setShowExpertsDrawer={jest.fn()}
speakerMuted={true}
setSpeakerMuted={jest.fn()}
enableAudio={false}
hasUserActivatedSpeak={false}
showShare={false}
showSettings={false}
clearHistory={jest.fn()}
setShowLoginDrawer={jest.fn()}
/>
);
expect(container).toMatchSnapshot();
});

it('renders Header with share button unchanged', () => {
const { container } = render(
<Header
Expand Down
4 changes: 3 additions & 1 deletion src/components/Header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export interface Props {
setShowSettingsDrawer: (show: boolean) => void;
setShowKnownFactsDrawer: (show: boolean) => void;
setShowExpertsDrawer: (show: boolean) => void;
enableAudio?: boolean;
speakerMuted: boolean;
setSpeakerMuted: (mute: boolean) => void;
hasUserActivatedSpeak?: boolean;
Expand All @@ -59,6 +60,7 @@ const Header: React.FC<Props> = ({
setShowSettingsDrawer,
setShowKnownFactsDrawer,
setShowExpertsDrawer,
enableAudio = true,
speakerMuted,
setSpeakerMuted,
hasUserActivatedSpeak = false,
Expand Down Expand Up @@ -168,7 +170,7 @@ const Header: React.FC<Props> = ({
title={t('widget.showExpertsInTheBoard') || 'Experts in this board'}
/>
)}
{showSpeaker && (
{enableAudio && showSpeaker && (
<Button
primary
shape="circle"
Expand Down
80 changes: 69 additions & 11 deletions src/components/Header/__snapshots__/Header.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ exports[`renders Header for board of experts unchanged 1`] = `
class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
data-headlessui-state=""
disabled=""
id="headlessui-popover-button-:r1p:"
id="headlessui-popover-button-:r1u:"
type="button"
>
<div
Expand Down Expand Up @@ -167,7 +167,7 @@ exports[`renders Header for board of experts with session open 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-:r1u:"
id="headlessui-popover-button-:r23:"
type="button"
>
<div
Expand Down Expand Up @@ -289,6 +289,64 @@ exports[`renders Header unchanged 1`] = `
</div>
`;

exports[`renders Header with audio disabled unchanged 1`] = `
<div>
<div
class="memori-header"
>
<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-: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>
<button
class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
title="login.login"
>
<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="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
/>
</svg>
</span>
</button>
</div>
</div>
`;

exports[`renders Header with clear button unchanged 1`] = `
<div>
<div
Expand Down Expand Up @@ -343,7 +401,7 @@ exports[`renders Header with clear button unchanged 1`] = `
class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
data-headlessui-state=""
disabled=""
id="headlessui-popover-button-:rr:"
id="headlessui-popover-button-:r10:"
type="button"
>
<div
Expand Down Expand Up @@ -421,7 +479,7 @@ exports[`renders Header with deep thought and session open 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-:r1k:"
id="headlessui-popover-button-:r1p:"
type="button"
>
<div
Expand Down Expand Up @@ -499,7 +557,7 @@ exports[`renders Header with deep thought logged but without permission flag unc
class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
data-headlessui-state=""
disabled=""
id="headlessui-popover-button-:r1a:"
id="headlessui-popover-button-:r1f:"
type="button"
>
<div
Expand Down Expand Up @@ -621,7 +679,7 @@ exports[`renders Header with deep thought logged with permission flag unchanged
class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
data-headlessui-state=""
disabled=""
id="headlessui-popover-button-:r1f:"
id="headlessui-popover-button-:r1k:"
type="button"
>
<div
Expand Down Expand Up @@ -699,7 +757,7 @@ exports[`renders Header with deep thought unlogged unchanged 1`] = `
class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
data-headlessui-state=""
disabled=""
id="headlessui-popover-button-:r15:"
id="headlessui-popover-button-:r1a:"
type="button"
>
<div
Expand Down Expand Up @@ -885,7 +943,7 @@ exports[`renders Header with settings button unchanged 1`] = `
class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
data-headlessui-state=""
disabled=""
id="headlessui-popover-button-:rm:"
id="headlessui-popover-button-:rr:"
type="button"
>
<div
Expand Down Expand Up @@ -983,7 +1041,7 @@ exports[`renders Header with share button unchanged 1`] = `
class="memori-button memori-button--circle memori-button--icon-only memori-button--disabled"
data-headlessui-state=""
disabled=""
id="headlessui-popover-button-:rf:"
id="headlessui-popover-button-:rk:"
type="button"
>
<div
Expand Down Expand Up @@ -1012,7 +1070,7 @@ exports[`renders Header with share button unchanged 1`] = `
aria-haspopup="true"
class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori-header--button memori-header--button-share memori-button--primary"
data-headlessui-state=""
id="headlessui-menu-button-:rk:"
id="headlessui-menu-button-:rp:"
title="widget.share"
type="button"
>
Expand Down Expand Up @@ -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"
>
<div
Expand Down
16 changes: 16 additions & 0 deletions src/components/MemoriWidget/MemoriWidget.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,22 @@ ShowClear.args = {
showClear: true,
};

export const WithoutAudio = Template.bind({});
WithoutAudio.args = {
memori,
tenant,
enableAudio: false,
AZURE_COGNITIVE_SERVICES_TTS_KEY: 'provide your key here',
};

export const DefautSpeakerDisabled = Template.bind({});
DefautSpeakerDisabled.args = {
memori,
tenant,
defaultSpeakerActive: false,
AZURE_COGNITIVE_SERVICES_TTS_KEY: 'provide your key here',
};

export const ShowOnlyLastMessages = Template.bind({});
ShowOnlyLastMessages.args = {
memori,
Expand Down
13 changes: 11 additions & 2 deletions src/components/MemoriWidget/MemoriWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -366,6 +366,7 @@ export interface Props {
};
authToken?: string;
AZURE_COGNITIVE_SERVICES_TTS_KEY?: string;
enableAudio?: boolean;
defaultSpeakerActive?: boolean;
disableTextEnteredEvents?: boolean;
onStateChange?: (state?: DialogState) => void;
Expand Down Expand Up @@ -412,6 +413,7 @@ const MemoriWidget = ({
personification,
authToken,
AZURE_COGNITIVE_SERVICES_TTS_KEY,
enableAudio,
defaultSpeakerActive = true,
disableTextEnteredEvents = false,
onStateChange,
Expand Down Expand Up @@ -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 ??
Expand All @@ -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);
Expand Down Expand Up @@ -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 => {
Expand Down
4 changes: 4 additions & 0 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -114,6 +115,7 @@ const Memori: React.FC<Props> = ({
multilingual,
authToken,
AZURE_COGNITIVE_SERVICES_TTS_KEY,
enableAudio,
defaultSpeakerActive = true,
disableTextEnteredEvents = false,
onStateChange,
Expand Down Expand Up @@ -265,6 +267,7 @@ const Memori: React.FC<Props> = ({
AZURE_COGNITIVE_SERVICES_TTS_KEY={
speechKey || AZURE_COGNITIVE_SERVICES_TTS_KEY
}
enableAudio={enableAudio}
defaultSpeakerActive={defaultSpeakerActive}
disableTextEnteredEvents={disableTextEnteredEvents}
onStateChange={onStateChange}
Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit 240c03c

Please sign in to comment.