Merge pull request #248 from rebeccaalpert/list-message

feat(ListMessage): Add component to render lists appropriately

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 />
     </>
   );

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 (
     <>

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;

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);
+  }
+}

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;

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;

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 */
@@ -114,7 +117,16 @@ export const Message: React.FunctionComponent<MessageProps> = ({
             {isLoading ? (
               <MessageLoading loadingWord={loadingWord} />
             ) : (
-              <Markdown components={{ p: TextMessage, code: CodeBlockMessage }} remarkPlugins={[remarkGfm]}>
+              <Markdown
+                components={{
+                  p: TextMessage,
+                  code: CodeBlockMessage,
+                  ul: UnorderedListMessage,
+                  ol: OrderedListMessage,
+                  li: ListItemMessage
+                }}
+                remarkPlugins={[remarkGfm]}
+              >
                 {content}
               </Markdown>
             )}

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) {
   // ============================================================================