feat: add user avatar

memori-ai · Nov 13, 2023 · 36abed9 · 36abed9
1 parent 6e28622
commit 36abed9
Show file tree

Hide file tree

Showing 15 changed files with 1,781 additions and 275 deletions.
diff --git a/README.md b/README.md
@@ -87,6 +87,7 @@ const App = () => (
 | `customLayout`                     |                | `React.FC<LayoutProps>`                     |                             | Custom layout component, see [below](#custom-layout)                                                                                                                                                                                                                                                                                                                                                                                    |
 | `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                                                                                                                                                                                                                                                                                                                                                                                       |
 
 \*: one of these pairs is required: `memoriName` + `ownerUserName`, `memoriID` + `ownerUserID`
 

diff --git a/package.json b/package.json
@@ -283,7 +283,7 @@
   "dependencies": {
     "@fontsource/exo-2": "^4.5.10",
     "@headlessui/react": "1.7.4",
-    "@memori.ai/memori-api-client": "^2.2.2",
+    "@memori.ai/memori-api-client": "^2.4.0",
     "@react-three/drei": "8.20.2",
     "@react-three/fiber": "7.0.25",
     "antd": "4.18.9",

diff --git a/src/components/Chat/Chat.stories.tsx b/src/components/Chat/Chat.stories.tsx
@@ -232,3 +232,54 @@ WithAIGeneratedMessages.args = {
   setAttachmentsMenuOpen: () => {},
   setSendOnEnter: () => {},
 };
+
+export const WithUser = Template.bind({});
+WithUser.args = {
+  user: { avatarURL: 'https://picsum.photos/200' },
+  memori,
+  tenant,
+  sessionID,
+  history,
+  dialogState,
+  layout: 'DEFAULT',
+  simulateUserPrompt: () => {},
+  sendMessage: (msg: string) => console.log(msg),
+  stopListening: () => {},
+  resetTranscript: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};
+
+export const WithCustomUserAvatar = Template.bind({});
+WithCustomUserAvatar.args = {
+  userAvatar: 'https://picsum.photos/200',
+  memori,
+  tenant,
+  sessionID,
+  history,
+  dialogState,
+  layout: 'DEFAULT',
+  simulateUserPrompt: () => {},
+  sendMessage: (msg: string) => console.log(msg),
+  stopListening: () => {},
+  resetTranscript: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};
+
+export const WithCustomUserAvatarAsElement = Template.bind({});
+WithCustomUserAvatarAsElement.args = {
+  userAvatar: <span>USER</span>,
+  memori,
+  tenant,
+  sessionID,
+  history,
+  dialogState,
+  layout: 'DEFAULT',
+  simulateUserPrompt: () => {},
+  sendMessage: (msg: string) => console.log(msg),
+  stopListening: () => {},
+  resetTranscript: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};
diff --git a/src/components/Chat/Chat.test.tsx b/src/components/Chat/Chat.test.tsx
@@ -287,3 +287,99 @@ it('renders Chat on X2a state unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders Chat with user unchanged', () => {
+  const { container } = render(
+    <Chat
+      user={{ avatarURL: 'https://picsum.photos/200' }}
+      memori={memori}
+      tenant={tenant}
+      dialogState={dialogState}
+      layout="DEFAULT"
+      setDialogState={jest.fn()}
+      client={client}
+      history={history}
+      pushMessage={jest.fn()}
+      sessionID={sessionID}
+      simulateUserPrompt={jest.fn()}
+      selectReceiverTag={jest.fn()}
+      setAttachmentsMenuOpen={jest.fn()}
+      setSendOnEnter={jest.fn()}
+      userMessage=""
+      onChangeUserMessage={jest.fn()}
+      sendMessage={jest.fn()}
+      isPlayingAudio={false}
+      stopAudio={jest.fn()}
+      showMicrophone={false}
+      listening={false}
+      startListening={jest.fn()}
+      stopListening={jest.fn()}
+      resetTranscript={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Chat with custom user avatar unchanged', () => {
+  const { container } = render(
+    <Chat
+      userAvatar="https://picsum.photos/200"
+      memori={memori}
+      tenant={tenant}
+      dialogState={dialogState}
+      layout="DEFAULT"
+      setDialogState={jest.fn()}
+      client={client}
+      history={history}
+      pushMessage={jest.fn()}
+      sessionID={sessionID}
+      simulateUserPrompt={jest.fn()}
+      selectReceiverTag={jest.fn()}
+      setAttachmentsMenuOpen={jest.fn()}
+      setSendOnEnter={jest.fn()}
+      userMessage=""
+      onChangeUserMessage={jest.fn()}
+      sendMessage={jest.fn()}
+      isPlayingAudio={false}
+      stopAudio={jest.fn()}
+      showMicrophone={false}
+      listening={false}
+      startListening={jest.fn()}
+      stopListening={jest.fn()}
+      resetTranscript={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Chat with custom user avatar as react element unchanged', () => {
+  const { container } = render(
+    <Chat
+      userAvatar={<span>USER</span>}
+      memori={memori}
+      tenant={tenant}
+      dialogState={dialogState}
+      layout="DEFAULT"
+      setDialogState={jest.fn()}
+      client={client}
+      history={history}
+      pushMessage={jest.fn()}
+      sessionID={sessionID}
+      simulateUserPrompt={jest.fn()}
+      selectReceiverTag={jest.fn()}
+      setAttachmentsMenuOpen={jest.fn()}
+      setSendOnEnter={jest.fn()}
+      userMessage=""
+      onChangeUserMessage={jest.fn()}
+      sendMessage={jest.fn()}
+      isPlayingAudio={false}
+      stopAudio={jest.fn()}
+      showMicrophone={false}
+      listening={false}
+      startListening={jest.fn()}
+      stopListening={jest.fn()}
+      resetTranscript={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
@@ -5,6 +5,7 @@ import {
   Memori,
   Message,
   Tenant,
+  User,
 } from '@memori.ai/memori-api-client/dist/types';
 import { hasTouchscreen } from '../../helpers/utils';
 import { getResourceUrl } from '../../helpers/media';
@@ -59,6 +60,8 @@ export interface Props {
   resetTranscript: () => void;
   customMediaRenderer?: MediaWidgetProps['customMediaRenderer'];
   layout: MemoriProps['layout'];
+  userAvatar?: MemoriProps['userAvatar'];
+  user?: User;
 }
 
 const Chat: React.FC<Props> = ({
@@ -98,6 +101,8 @@ const Chat: React.FC<Props> = ({
   stopListening,
   resetTranscript,
   customMediaRenderer,
+  user,
+  userAvatar,
 }) => {
   const scrollToBottom = () => {
     setTimeout(() => {
@@ -194,6 +199,8 @@ const Chat: React.FC<Props> = ({
                   !message.fromUser &&
                   dialogState?.acceptsFeedback
                 }
+                user={user}
+                userAvatar={userAvatar}
               />
               {showDates && !!message.timestamp && (
                 <small