feat(Message): Allow for no avatar (#752)

Author: rebeccaalpert

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx

@@ -318,6 +318,7 @@ _Italic text, formatted with single underscores_
         content="This bot has a square avatar. You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `<Message>` component via `avatarProps`."
         hasRoundAvatar={false}
       />
+      <Message name="Bot" role="bot" content="This is a message from a bot with no avatar." />
       <Select
         id="single-select"
         isOpen={isOpen}

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx

@@ -333,6 +333,7 @@ _Italic text, formatted with single underscores_
         avatar={userAvatar}
         avatarProps={{ isBordered: true }}
       />
+      <Message name="User" role="user" content="This is a user message with no avatar" />
       <Message
         name="User"
         role="user"

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

@@ -228,6 +228,10 @@ describe('Message', () => {
     render(<Message avatar="./testImg" role="bot" name="Bot" content="Hi" />);
     expect(screen.getByRole('img')).toHaveAttribute('src', './testImg');
   });
+  it('should not render avatar if no avatar prop is passed', () => {
+    render(<Message role="bot" name="Bot" content="Hi" />);
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
   it('should render botWord correctly', () => {
     render(<Message avatar="./img" role="bot" name="Bot" content="Hi" botWord="人工知能" />);
     expect(screen.getByText('Bot')).toBeTruthy();

packages/module/src/Message/Message.tsx

@@ -97,7 +97,7 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   /** 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 */
@@ -459,12 +459,14 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
       {...props}
     >
       {/* We are using an empty alt tag intentionally in order to reduce noise on screen readers */}
-      <Avatar
-        className={`pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`}
-        src={avatar}
-        alt=""
-        {...avatarProps}
-      />
+      {avatar && (
+        <Avatar
+          className={`pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`}
+          src={avatar}
+          alt=""
+          {...avatarProps}
+        />
+      )}
       <div className="pf-chatbot__message-contents">
         <div className="pf-chatbot__message-meta">
           {name && (