Skip to content

Commit

Permalink
feat: auto start prop, starts chat on load
Browse files Browse the repository at this point in the history
  • Loading branch information
@nzambello
nzambello committed Jan 3, 2025
1 parent 63b3f0f commit 773feae
Show file tree
Hide file tree
Showing 7 changed files with 80 additions and 70 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ const App = () => (
| `customMediaRenderer` | | `(mimeType: string) => JSX.Element \| null` | | Custom media renderer, see [below](#custom-media-renderer) |
| `additionalSettings` | | `JSX.Element` | | Custom JSX or component to render within the settings drawer |
| `userAvatar` | | `string` | | Custom URL or React element to use as user avatar |
| `autoStart` | | `boolean` | `false` | Automatically start the conversation when the component is mounted. |

\*: one of these pairs is required: `memoriName` + `ownerUserName`, `memoriID` + `ownerUserID`

Expand Down
14 changes: 10 additions & 4 deletions src/components/MemoriWidget/MemoriWidget.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
box-sizing: border-box;
}

.memori-widget>.memori-spin {
.memori-widget > .memori-spin {
height: calc(100vh - 50px);
}

Expand Down Expand Up @@ -180,7 +180,7 @@
font-size: 1rem;
}

.memori--conversation-button+.memori--conversation-button {
.memori--conversation-button + .memori--conversation-button {
margin-left: 0.33rem;
}

Expand All @@ -197,6 +197,12 @@
}

.memori.memori-widget.chat-focused .memori--powered-by,
.memori.memori-widget.chat-focused .memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
.memori.memori-widget.chat-focused
.memori-website_assistant--close-button-wrapper
button.memori-website_assistant--close-button {
display: none;
}
}

.memori.memori--auto-start .memori--start-panel {
display: none;
}
7 changes: 7 additions & 0 deletions src/components/MemoriWidget/MemoriWidget.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,13 @@ Default.args = {
tenant,
};

export const WithAutoStart = Template.bind({});
WithAutoStart.args = {
memori,
tenant,
autoStart: true,
};

export const WithPosition = Template.bind({});
WithPosition.args = {
memori: {
Expand Down
49 changes: 20 additions & 29 deletions src/components/MemoriWidget/MemoriWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -413,6 +413,7 @@ export interface Props {
additionalSettings?: JSX.Element | null;
userAvatar?: string | JSX.Element;
useMathFormatting?: boolean;
autoStart?: boolean;
}

const MemoriWidget = ({
Expand Down Expand Up @@ -463,6 +464,7 @@ const MemoriWidget = ({
customMediaRenderer,
userAvatar,
useMathFormatting = false,
autoStart = false,
}: Props) => {
const { t, i18n } = useTranslation();

Expand Down Expand Up @@ -579,7 +581,7 @@ const MemoriWidget = ({
const [showKnownFactsDrawer, setShowKnownFactsDrawer] = useState(false);
const [showExpertsDrawer, setShowExpertsDrawer] = useState(false);
const [muteSpeaker, setMuteSpeaker] = useState(
!defaultEnableAudio || !defaultSpeakerActive
!defaultEnableAudio || !defaultSpeakerActive || autoStart
);
const [continuousSpeech, setContinuousSpeech] = useState(false);
const [continuousSpeechTimeout, setContinuousSpeechTimeout] = useState(2);
Expand Down Expand Up @@ -632,15 +634,18 @@ const MemoriWidget = ({
}

setMuteSpeaker(
autoStart ||
getLocalConfig(
'muteSpeaker',
!defaultEnableAudio || !defaultSpeakerActive || autoStart
)
);
speakerMuted =
autoStart ||
getLocalConfig(
'muteSpeaker',
!defaultEnableAudio || !defaultSpeakerActive
)
);
speakerMuted = getLocalConfig(
'muteSpeaker',
!defaultEnableAudio || !defaultSpeakerActive
);
!defaultEnableAudio || !defaultSpeakerActive || autoStart
);
setContinuousSpeech(microphoneMode === 'CONTINUOUS');
setContinuousSpeechTimeout(getLocalConfig('continuousSpeechTimeout', 2));
setControlsPosition(
Expand Down Expand Up @@ -2014,24 +2019,6 @@ const MemoriWidget = ({
document.dispatchEvent(e);
};

const handleSpeechEnd = () => {
memoriSpeaking = false;
setMemoriTyping(false);
emitEndSpeakEvent();
};

const generateSSMLText = (text: string) => {
const textToSpeak = escapeHTML(
stripMarkdown(stripEmojis(stripHTML(stripOutputTags(text))))
);
return `<speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis" xmlns:mstts="https://www.w3.org/2001/mstts" xmlns:emo="http://www.w3.org/2009/10/emotionml" xml:lang="${getCultureCodeByLanguage(
userLang
)}"><voice name="${getTTSVoice(userLang)}"><s>${replaceTextWithPhonemes(
textToSpeak,
userLang.toLowerCase()
)}</s></voice></speak>`;
};

const speak = (text: string): void => {
if (!AZURE_COGNITIVE_SERVICES_TTS_KEY || preview) {
emitEndSpeakEvent();
Expand Down Expand Up @@ -2236,13 +2223,10 @@ const MemoriWidget = ({
let textarea = document.querySelector(
'#chat-fieldset textarea'
) as HTMLTextAreaElement | null;
// console.log('textarea', enableFocusChatInput);
if (textarea && enableFocusChatInput) {
textarea.focus();
// console.log('focused');
} else {
textarea?.blur();
// console.log('blurred');
}
};

Expand Down Expand Up @@ -3114,6 +3098,12 @@ const MemoriWidget = ({
},
[memoriPwd, memori, memoriTokens, birthDate, sessionId, userLang, position]
);
useEffect(() => {
if (!clickedStart && autoStart) {
onClickStart();
}
}, [clickedStart, autoStart]);

useEffect(() => {
const targetNode =
document.querySelector(`memori-client[memoriname="${memori.name}"]`) ||
Expand Down Expand Up @@ -3460,6 +3450,7 @@ const MemoriWidget = ({
`memori-controls-${controlsPosition.toLowerCase()}`,
`memori--avatar-${integrationConfig?.avatar || 'default'}`,
{
'memori--auto-start': autoStart,
'memori--preview': preview,
'memori--embed': embed,
'memori--with-integration': integration,
Expand Down
74 changes: 37 additions & 37 deletions src/components/layouts/layouts.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,43 +24,6 @@ const meta: Meta = {

export default meta;

export const CustomLayout: React.FC<LayoutProps> = ({
Header,
headerProps,
Avatar,
avatarProps,
Chat,
chatProps,
StartPanel,
startPanelProps,
integrationStyle,
integrationBackground,
ChangeMode,
changeModeProps,
sessionId,
hasUserActivatedSpeak,
showInstruct = false,
loading = false,
poweredBy,
}) => (
<>
{integrationStyle}
{integrationBackground}

<Spin spinning={loading} className="memori-mycustom-layout">
{poweredBy}

<div className="memori-mycustom-layout--controls">
{sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
<Chat {...chatProps} />
) : startPanelProps ? (
<StartPanel {...startPanelProps} />
) : null}
</div>
</Spin>
</>
);

const Template: Story<Props> = args => (
<I18nWrapper>
<VisemeProvider>
Expand Down Expand Up @@ -294,6 +257,43 @@ ChatOnly.args = {
layout: 'CHAT',
};

export const CustomLayout: React.FC<LayoutProps> = ({
Header,
headerProps,
Avatar,
avatarProps,
Chat,
chatProps,
StartPanel,
startPanelProps,
integrationStyle,
integrationBackground,
ChangeMode,
changeModeProps,
sessionId,
hasUserActivatedSpeak,
showInstruct = false,
loading = false,
poweredBy,
}) => (
<>
{integrationStyle}
{integrationBackground}

<Spin spinning={loading} className="memori-mycustom-layout">
{poweredBy}

<div className="memori-mycustom-layout--controls">
{sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
<Chat {...chatProps} />
) : startPanelProps ? (
<StartPanel {...startPanelProps} />
) : null}
</div>
</Spin>
</>
);

export const Custom = Template.bind({});
Custom.args = {
uiLang: 'it',
Expand Down
1 change: 1 addition & 0 deletions src/index.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ Anonymous.args = {
uiLang: 'IT',
spokenLang: 'IT',
enableAudio: true,
autoStart: true,
};

export const WithPreviousSession = Template.bind({});
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 @@ -68,6 +68,7 @@ export interface Props {
additionalSettings?: WidgetProps['additionalSettings'];
userAvatar?: WidgetProps['userAvatar'];
useMathFormatting?: boolean;
autoStart?: boolean;
}

const getPreferredLanguages = () => {
Expand Down Expand Up @@ -134,6 +135,7 @@ const Memori: React.FC<Props> = ({
additionalSettings,
userAvatar,
useMathFormatting = false,
autoStart = false,
}) => {
const [memori, setMemori] = useState<IMemori>();
const [tenant, setTenant] = useState<Tenant>();
Expand Down Expand Up @@ -285,6 +287,7 @@ const Memori: React.FC<Props> = ({
AZURE_COGNITIVE_SERVICES_TTS_KEY={
speechKey || AZURE_COGNITIVE_SERVICES_TTS_KEY
}
autoStart={autoStart}
enableAudio={enableAudio}
defaultSpeakerActive={defaultSpeakerActive}
disableTextEnteredEvents={disableTextEnteredEvents}
Expand Down Expand Up @@ -386,6 +389,7 @@ Memori.propTypes = {
additionalSettings: PropTypes.any,
userAvatar: PropTypes.oneOfType([PropTypes.string, PropTypes.any]),
useMathFormatting: PropTypes.bool,
autoStart: PropTypes.bool,
};

export default Memori;

0 comments on commit 773feae

Please sign in to comment.