From 9e35f655f28439a51c6abc0ef597a5016db0ee55 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Thu, 17 Oct 2024 15:14:55 -0400
Subject: [PATCH] feat(ListMessage): Add component to render lists
 appropriately

React-Markdown renders lists for us, but we weren't getting PatternFly styles applied. This will render the appropriate components.
---
 .../examples/ChatbotMessage/BotMessage.tsx    | 17 +++++++++++++
 .../examples/ChatbotMessage/UserMessage.tsx   | 14 ++++++++++-
 .../Message/ListMessage/ListItemMessage.tsx   | 11 ++++++++
 .../src/Message/ListMessage/ListMessage.scss  | 25 +++++++++++++++++++
 .../ListMessage/OrderedListMessage.tsx        | 17 +++++++++++++
 .../ListMessage/UnorderedListMessage.tsx      | 15 +++++++++++
 packages/module/src/Message/Message.tsx       | 14 ++++++++++-
 packages/module/src/main.scss                 | 21 ++++++++--------
 8 files changed, 122 insertions(+), 12 deletions(-)
 create mode 100644 packages/module/src/Message/ListMessage/ListItemMessage.tsx
 create mode 100644 packages/module/src/Message/ListMessage/ListMessage.scss
 create mode 100644 packages/module/src/Message/ListMessage/OrderedListMessage.tsx
 create mode 100644 packages/module/src/Message/ListMessage/UnorderedListMessage.tsx

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 (
     <>
       <Message
@@ -43,6 +58,8 @@ export default MessageLoading;
         timestamp="1 hour ago"
       />
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content={markdown} />
+      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={orderedList} />
+      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={unorderedList} />
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
     </>
   );
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) => <ListItem>{children}</ListItem>;
+
+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) => (
+  <div className="pf-chatbot__message-ordered-list">
+    <List component={ListComponent.ol} type={OrderType.number}>
+      {children}
+    </List>
+  </div>
+);
+
+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) => (
+  <div className="pf-chatbot__message-unordered-list">
+    <List>{children}</List>
+  </div>
+);
+
+export default UnorderedListMessage;
diff --git a/packages/module/src/Message/Message.tsx b/packages/module/src/Message/Message.tsx
index 6079a8d3..70d4172b 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<React.HTMLProps<HTMLDivElement>, 'role'> {
   /** Unique id for message */
@@ -108,7 +111,16 @@ export const Message: React.FunctionComponent<MessageProps> = ({
             {isLoading ? (
               <MessageLoading />
             ) : (
-              <Markdown components={{ p: TextMessage, code: CodeBlockMessage }} remarkPlugins={[remarkGfm]}>
+              <Markdown
+                components={{
+                  p: TextMessage,
+                  code: CodeBlockMessage,
+                  ul: UnorderedListMessage,
+                  ol: OrderedListMessage,
+                  li: ListItemMessage
+                }}
+                remarkPlugins={[remarkGfm]}
+              >
                 {content}
               </Markdown>
             )}
diff --git a/packages/module/src/main.scss b/packages/module/src/main.scss
index 6c4ccf8c..20ffe372 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) {
   // ============================================================================