fix(Message): Deprecate default avatar

Author: rebeccaalpert

packages/module/src/Message/Message.test.tsx

@@ -64,34 +64,35 @@ const checkListItemsRendered = () => {
 
 describe('Message', () => {
   it('should render user messages correctly', () => {
-    render(<Message role="user" name="User" content="Hi" />);
+    render(<Message avatar="./img" role="user" name="User" content="Hi" />);
     expect(screen.getByText('User')).toBeTruthy();
     expect(screen.getByText('Hi')).toBeTruthy();
     const date = new Date();
     expect(screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
     expect(screen.queryByText('Loading message')).toBeFalsy();
+    expect(screen.getByRole('img')).toHaveAttribute('src', './img');
   });
   it('should render bot messages correctly', () => {
-    render(<Message role="bot" name="Bot" content="Hi" />);
+    render(<Message avatar="./img" role="bot" name="Bot" content="Hi" />);
     expect(screen.getByText('Bot')).toBeTruthy();
     expect(screen.getByText('AI')).toBeTruthy();
     expect(screen.getByText('Hi')).toBeTruthy();
     const date = new Date();
     expect(screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
   });
   it('should render avatar correctly', () => {
-    render(<Message role="bot" name="Bot" content="Hi" avatar="./testImg" />);
+    render(<Message avatar="./testImg" role="bot" name="Bot" content="Hi" />);
     expect(screen.getByRole('img')).toHaveAttribute('src', './testImg');
   });
   it('should render botWord correctly', () => {
-    render(<Message role="bot" name="Bot" content="Hi" botWord="人工知能" />);
+    render(<Message avatar="./img" role="bot" name="Bot" content="Hi" botWord="人工知能" />);
     expect(screen.getByText('Bot')).toBeTruthy();
     expect(screen.getByText('人工知能')).toBeTruthy();
     expect(screen.queryByText('AI')).toBeFalsy();
     expect(screen.getByText('Hi')).toBeTruthy();
   });
   it('should render timestamps', () => {
-    render(<Message role="bot" name="Bot" content="Hi" timestamp="2 hours ago" />);
+    render(<Message avatar="./img" role="bot" name="Bot" content="Hi" timestamp="2 hours ago" />);
     expect(screen.getByText('Bot')).toBeTruthy();
     expect(screen.getByText('AI')).toBeTruthy();
     expect(screen.getByText('Hi')).toBeTruthy();
@@ -100,13 +101,13 @@ describe('Message', () => {
     expect(screen.queryByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeFalsy();
   });
   it('should render attachments', () => {
-    render(<Message role="user" content="Hi" attachmentName="testAttachment" />);
+    render(<Message avatar="./img" role="user" content="Hi" attachmentName="testAttachment" />);
     expect(screen.getByText('Hi')).toBeTruthy();
     expect(screen.getByText('testAttachment')).toBeTruthy();
   });
   it('should be able to click attachments', async () => {
     const spy = jest.fn();
-    render(<Message role="user" content="Hi" attachmentName="testAttachment" onAttachmentClick={spy} />);
+    render(<Message avatar="./img" role="user" content="Hi" attachmentName="testAttachment" onAttachmentClick={spy} />);
     expect(screen.getByText('Hi')).toBeTruthy();
     expect(screen.getByText('testAttachment')).toBeTruthy();
     await userEvent.click(screen.getByRole('button', { name: /testAttachment/i }));
@@ -115,7 +116,14 @@ describe('Message', () => {
   it('should be able to close attachments', async () => {
     const spy = jest.fn();
     render(
-      <Message role="user" content="Hi" attachmentId="001" attachmentName="testAttachment" onAttachmentClose={spy} />
+      <Message
+        avatar="./img"
+        role="user"
+        content="Hi"
+        attachmentId="001"
+        attachmentName="testAttachment"
+        onAttachmentClose={spy}
+      />
     );
     expect(screen.getByText('Hi')).toBeTruthy();
     expect(screen.getByText('testAttachment')).toBeTruthy();
@@ -124,7 +132,7 @@ describe('Message', () => {
     expect(spy).toHaveBeenCalledWith('001');
   });
   it('should render loading state', () => {
-    render(<Message role="bot" name="Bot" content="Hi" isLoading />);
+    render(<Message avatar="./img" role="bot" name="Bot" content="Hi" isLoading />);
     expect(screen.getByText('Bot')).toBeTruthy();
     expect(screen.getByText('AI')).toBeTruthy();
     expect(screen.queryByText('Hi')).toBeFalsy();
@@ -135,6 +143,7 @@ describe('Message', () => {
   it('should be able to show sources', async () => {
     render(
       <Message
+        avatar="./img"
         role="bot"
         name="Bot"
         content="Hi"
@@ -154,6 +163,7 @@ describe('Message', () => {
   it('should not show sources if loading', () => {
     render(
       <Message
+        avatar="./img"
         role="bot"
         name="Bot"
         content="Hi"
@@ -175,6 +185,7 @@ describe('Message', () => {
   it('should be able to show actions', async () => {
     render(
       <Message
+        avatar="./img"
         role="bot"
         name="Bot"
         content="Hi"
@@ -199,6 +210,7 @@ describe('Message', () => {
   it('should not show actions if loading', async () => {
     render(
       <Message
+        avatar="./img"
         role="bot"
         name="Bot"
         content="Hi"

packages/module/src/Message/Message.tsx

@@ -28,11 +28,11 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   /** Role of the user sending the message */
   role: 'user' | 'bot';
   /** Message content */
-  content: string;
+  content?: string;
   /** Name of the user */
   name?: string;
   /** Avatar src for the user */
-  avatar?: string;
+  avatar: string;
   /** Timestamp for the message */
   timestamp?: string;
   /** Set this to true if message is being loaded */
@@ -85,19 +85,6 @@ export const Message: React.FunctionComponent<MessageProps> = ({
   quickResponseContainerProps = { numLabels: 5 },
   ...props
 }: MessageProps) => {
-  // Configure default values
-  const DEFAULTS = {
-    user: {
-      name: 'User',
-      avatar: 'https://img.freepik.com/premium-photo/graphic-designer-digital-avatar-generative-ai_934475-9292.jpg'
-    },
-    bot: {
-      name: 'Bot',
-      avatar:
-        'https://yt3.googleusercontent.com/ej8uvIe1AIFiJQXBwY9cfJmt0kO1cAeWxpBqG_cJndGHx95mFq1F8WakSoXIjtcprTbMQJoqH5M=s900-c-k-c0x00ffffff-no-rj'
-    }
-  };
-
   const onClose = () => {
     onAttachmentClose && attachmentId && onAttachmentClose(attachmentId);
   };
@@ -113,7 +100,7 @@ export const Message: React.FunctionComponent<MessageProps> = ({
       {...props}
     >
       {/* We are using an empty alt tag intentionally in order to reduce noise on screen readers */}
-      <Avatar src={avatar ?? DEFAULTS[role].avatar} alt="" />
+      <Avatar src={avatar} alt="" />
       <div className="pf-chatbot__message-contents">
         <div className="pf-chatbot__message-meta">
           <span className="pf-chatbot__message-name">{name}</span>