fix(Message): Truncate very long names

Author: rebeccaalpert

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

@@ -74,6 +74,13 @@ export default MessageLoading;
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content={unorderedList} />
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content={moreComplexList} />
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
+      <Message role="bot" avatar={patternflyAvatar} content="Message with no name" />
+      <Message
+        name="Default Openshift Container Platform Assistant That Can Help With Any Query You Might Need Help With"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="Message with very long name"
+      />
     </>
   );
 };

packages/module/src/Message/Message.scss

@@ -15,6 +15,12 @@
   gap: var(--pf-t--global--spacer--lg);
   padding-bottom: var(--pf-t--global--spacer--2xl);
 
+  // Name
+  // --------------------------------------------------------------------------
+  .pf-v6-c-truncate {
+    --pf-v6-c-truncate--MinWidth: 0ch;
+    --pf-v6-c-truncate__start--MinWidth: 0ch;
+  }
   // Avatar
   // --------------------------------------------------------------------------
   .pf-v6-c-avatar {
@@ -61,6 +67,9 @@
     }
 
     // Timestamp
+    .pf-v6-c-timestamp {
+      flex: 1 0 max-content;
+    }
     time {
       font-size: var(--pf-t--global--font--size--xs);
     }

packages/module/src/Message/Message.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Avatar, Label, LabelGroup, LabelGroupProps, LabelProps, Timestamp } from '@patternfly/react-core';
+import { Avatar, Label, LabelGroup, LabelGroupProps, LabelProps, Timestamp, Truncate } from '@patternfly/react-core';
 import MessageLoading from './MessageLoading';
 import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
 import TextMessage from './TextMessage/TextMessage';
@@ -116,7 +116,11 @@ export const Message: React.FunctionComponent<MessageProps> = ({
       <Avatar src={avatar ?? DEFAULTS[role].avatar} alt="" />
       <div className="pf-chatbot__message-contents">
         <div className="pf-chatbot__message-meta">
-          <span className="pf-chatbot__message-name">{name}</span>
+          {name && (
+            <span className="pf-chatbot__message-name">
+              <Truncate content={name} />
+            </span>
+          )}
           {role === 'bot' && (
             <Label variant="outline" isCompact>
               {botWord}