From 197282d0bf78e5632a5b57862748b14c29a68738 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Tue, 5 Nov 2024 15:08:42 -0500
Subject: [PATCH 1/3] fix(Message): Truncate very long names

---
 .../virtual-assistant/examples/Messages/BotMessage.tsx   | 7 +++++++
 packages/module/src/Message/Message.scss                 | 9 +++++++++
 packages/module/src/Message/Message.tsx                  | 8 ++++++--
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/BotMessage.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/BotMessage.tsx
index 969e19c0..0045b476 100644
--- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/BotMessage.tsx
+++ b/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"
+      />
     </>
   );
 };
diff --git a/packages/module/src/Message/Message.scss b/packages/module/src/Message/Message.scss
index f53f6b8d..6b694c76 100644
--- a/packages/module/src/Message/Message.scss
+++ b/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);
     }
diff --git a/packages/module/src/Message/Message.tsx b/packages/module/src/Message/Message.tsx
index 6f8f07ff..9a962daa 100644
--- a/packages/module/src/Message/Message.tsx
+++ b/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}

From 04158d175cc05e280cb48a3aaa5708236a85ff47 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Wed, 6 Nov 2024 19:36:28 -0500
Subject: [PATCH 2/3] Address feedback

---
 .../virtual-assistant/examples/Messages/BotMessage.tsx   | 9 +++++----
 .../virtual-assistant/examples/Messages/Messages.md      | 2 +-
 .../virtual-assistant/examples/Messages/UserMessage.tsx  | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/BotMessage.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/BotMessage.tsx
index 0045b476..7d89b316 100644
--- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/BotMessage.tsx
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/BotMessage.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Message from '@patternfly/virtual-assistant/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 
-export const AttachmentMenuExample: React.FunctionComponent = () => {
+export const BotMessageExample: React.FunctionComponent = () => {
   const markdown = `
 Here is some YAML code:
 
@@ -62,11 +62,12 @@ export default MessageLoading;
 
   return (
     <>
+      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={`Text-based message from a bot named "Bot`} />
       <Message
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example content with updated timestamp text"
+        content={`Text-based message from a bot named "Bot," with updated timestamp`}
         timestamp="1 hour ago"
       />
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content={markdown} />
@@ -74,12 +75,12 @@ 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 role="bot" avatar={patternflyAvatar} content="Text-based message from a nameless bot" />
       <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"
+        content="Text-based message, where the bot's name is truncated"
       />
     </>
   );
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/Messages.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/Messages.md
index b78c0694..cf8a779e 100644
--- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/Messages.md
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/Messages.md
@@ -50,7 +50,7 @@ Messages from the chatbot will be marked with an "AI" label to clearly communica
 
 <br />
 
-By default, a date and timestamp is displayed with each message. You can update `timestamp` with a different [date and time format](/ux-writing/numerics) as needed.
+By default, a date and timestamp is displayed with each message. We recommend using the `timestamp` prop in real chatbots, since it will allow you to set persistent dates and times on messages, even if the messages re-render. You can update `timestamp` with a different [date and time format](/ux-writing/numerics) as needed.
 
 ```js file="./BotMessage.tsx"
 
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/UserMessage.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/UserMessage.tsx
index b5fde0be..afeca3c0 100644
--- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/UserMessage.tsx
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/UserMessage.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Message from '@patternfly/virtual-assistant/dist/dynamic/Message';
 import userAvatar from './user_avatar.jpg';
 
-export const AttachmentMenuExample: React.FunctionComponent = () => {
+export const UserMessageExample: React.FunctionComponent = () => {
   const markdown = `A paragraph with *emphasis* and **strong importance**.
 
 > A block quote with ~strikethrough~ and a URL: https://reactjs.org.

From b3a0b3d64ee5464c6330822a52b1c92ebac88d2b Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Thu, 7 Nov 2024 15:12:02 -0500
Subject: [PATCH 3/3] Fix typo

---
 .../virtual-assistant/examples/Messages/BotMessage.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/BotMessage.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/BotMessage.tsx
index 7d89b316..b644289d 100644
--- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/BotMessage.tsx
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/BotMessage.tsx
@@ -62,7 +62,7 @@ export default MessageLoading;
 
   return (
     <>
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={`Text-based message from a bot named "Bot`} />
+      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={`Text-based message from a bot named "Bot"`} />
       <Message
         name="Bot"
         role="bot"