diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/BotMessage.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/BotMessage.tsx
index a54bb897..a68d0e82 100644
--- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/BotMessage.tsx
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/BotMessage.tsx
@@ -33,6 +33,21 @@ export default MessageLoading;
~~~
`;
+
+ const orderedList = `
+ Here is an ordered list:
+
+ 1. Item 1
+ 2. Item 2
+ 3. Item 3`;
+
+ const unorderedList = `
+ Here is an unordered list:
+
+ * Item 1
+ * Item 2
+ * Item 3`;
+
return (
<>
+
+
>
);
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/UserMessage.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/UserMessage.tsx
index 248f6afb..b5fde0be 100644
--- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/UserMessage.tsx
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/UserMessage.tsx
@@ -8,7 +8,19 @@ export const AttachmentMenuExample: React.FunctionComponent = () => {
> A block quote with ~strikethrough~ and a URL: https://reactjs.org.
-Here is an inline code - \`() => void\``;
+Here is an inline code - \`() => void\`
+
+Here is an ordered list:
+
+1. Item 1
+2. Item 3
+3. Item 4
+
+Here is an unordered list:
+
+* Item 1
+* Item 2
+* Item 3`;
return (
<>
diff --git a/packages/module/src/Message/ListMessage/ListItemMessage.tsx b/packages/module/src/Message/ListMessage/ListItemMessage.tsx
new file mode 100644
index 00000000..5808c660
--- /dev/null
+++ b/packages/module/src/Message/ListMessage/ListItemMessage.tsx
@@ -0,0 +1,11 @@
+// ============================================================================
+// Chatbot Main - Message - Content - List
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { ListItem } from '@patternfly/react-core';
+
+const ListItemMessage = ({ children }: JSX.IntrinsicElements['li'] & ExtraProps) => {children};
+
+export default ListItemMessage;
diff --git a/packages/module/src/Message/ListMessage/ListMessage.scss b/packages/module/src/Message/ListMessage/ListMessage.scss
new file mode 100644
index 00000000..5b11cbf0
--- /dev/null
+++ b/packages/module/src/Message/ListMessage/ListMessage.scss
@@ -0,0 +1,25 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Text
+// ============================================================================
+
+.pf-chatbot__message-ordered-list,
+.pf-chatbot__message-unordered-list {
+ width: fit-content;
+ padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
+ border-radius: var(--pf-t--chatbot-message--type--border--radius);
+
+ .pf-v6-c-list,
+ ul,
+ li {
+ font-size: var(--pf-t--chatbot--font-size);
+ }
+}
+
+.pf-chatbot__message--user {
+ .pf-chatbot__message-ordered-list,
+ .pf-chatbot__message-unordered-list {
+ background-color: var(--pf-t--chatbot-message--type--background--color--primary);
+ color: var(--pf-t--chatbot-message--type--text--color--primary);
+ padding: var(--pf-t--chatbot-message--type--padding);
+ }
+}
diff --git a/packages/module/src/Message/ListMessage/OrderedListMessage.tsx b/packages/module/src/Message/ListMessage/OrderedListMessage.tsx
new file mode 100644
index 00000000..6384186e
--- /dev/null
+++ b/packages/module/src/Message/ListMessage/OrderedListMessage.tsx
@@ -0,0 +1,17 @@
+// ============================================================================
+// Chatbot Main - Message - Content - List
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { List, ListComponent, OrderType } from '@patternfly/react-core';
+
+const OrderedListMessage = ({ children }: JSX.IntrinsicElements['ol'] & ExtraProps) => (
+
+
+ {children}
+
+
+);
+
+export default OrderedListMessage;
diff --git a/packages/module/src/Message/ListMessage/UnorderedListMessage.tsx b/packages/module/src/Message/ListMessage/UnorderedListMessage.tsx
new file mode 100644
index 00000000..e2003ee7
--- /dev/null
+++ b/packages/module/src/Message/ListMessage/UnorderedListMessage.tsx
@@ -0,0 +1,15 @@
+// ============================================================================
+// Chatbot Main - Message - Content - List
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { List } from '@patternfly/react-core';
+
+const UnorderedListMessage = ({ children }: JSX.IntrinsicElements['ul'] & ExtraProps) => (
+
+ {children}
+
+);
+
+export default UnorderedListMessage;
diff --git a/packages/module/src/Message/Message.tsx b/packages/module/src/Message/Message.tsx
index 4ce99e43..397a9c3c 100644
--- a/packages/module/src/Message/Message.tsx
+++ b/packages/module/src/Message/Message.tsx
@@ -13,6 +13,9 @@ import TextMessage from './TextMessage/TextMessage';
import FileDetailsLabel from '../FileDetailsLabel/FileDetailsLabel';
import ResponseActions, { ActionProps } from '../ResponseActions/ResponseActions';
import SourcesCard, { SourcesCardProps } from '../SourcesCard';
+import ListItemMessage from './ListMessage/ListItemMessage';
+import UnorderedListMessage from './ListMessage/UnorderedListMessage';
+import OrderedListMessage from './ListMessage/OrderedListMessage';
export interface MessageProps extends Omit, 'role'> {
/** Unique id for message */
@@ -114,7 +117,16 @@ export const Message: React.FunctionComponent = ({
{isLoading ? (
) : (
-
+
{content}
)}
diff --git a/packages/module/src/main.scss b/packages/module/src/main.scss
index d1d4038b..bb4c8d6c 100644
--- a/packages/module/src/main.scss
+++ b/packages/module/src/main.scss
@@ -1,27 +1,28 @@
@import './AttachMenu/AttachMenu';
-@import './ChatbotConversationHistoryNav/ChatbotConversationHistoryNav';
@import './Chatbot/Chatbot';
-@import './ChatbotToggle/ChatbotToggle';
+@import './ChatbotAlert/ChatbotAlert';
@import './ChatbotContent/ChatbotContent';
-@import './ChatbotHeader/ChatbotHeader';
+@import './ChatbotConversationHistoryNav/ChatbotConversationHistoryNav';
@import './ChatbotFooter/ChatbotFooter';
+@import './ChatbotHeader/ChatbotHeader';
+@import './ChatbotPopover/ChatbotPopover';
+@import './ChatbotToggle/ChatbotToggle';
@import './ChatbotWelcomePrompt/ChatbotWelcomePrompt';
@import './CodeModal/CodeModal';
@import './FileDetails/FileDetails';
@import './FileDetailsLabel/FileDetailsLabel';
@import './FileDropZone/FileDropZone';
-@import './MessageBar/MessageBar';
-@import './MessageBox/MessageBox';
-@import './MessageBox/JumpButton';
@import './Message/Message';
-@import './ChatbotPopover/ChatbotPopover';
-@import './SourceDetailsMenuItem/SourceDetailsMenuItem';
-@import './ResponseActions/ResponseActions';
-@import './ChatbotAlert/ChatbotAlert';
@import './Message/CodeBlockMessage/CodeBlockMessage';
@import './Message/TextMessage/TextMessage';
+@import './Message/ListMessage/ListMessage';
@import './Message/MessageLoading';
+@import './MessageBar/MessageBar';
+@import './MessageBox/MessageBox';
+@import './MessageBox/JumpButton';
+@import './ResponseActions/ResponseActions';
@import './SourcesCard/SourcesCard.scss';
+@import './SourceDetailsMenuItem/SourceDetailsMenuItem';
:where(:root) {
// ============================================================================