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..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
@@ -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 (
<>
+
@@ -74,6 +75,13 @@ export default MessageLoading;
+
+
>
);
};
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
-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.
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 = ({