fix(TextMessage): Allow for more complex list output

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotMessage/BotMessage.tsx

@@ -48,6 +48,18 @@ export default MessageLoading;
   * Item 2
   * Item 3`;
 
+  const moreComplexList = `You may be wondering whether you can display more complex lists with formatting. In response to your question, I will explain how to butter toast.
+
+1. **Using a \`toaster\`:**
+
+   - Place \`bread\` in a \`toaster\`
+   - Once \`bread\` is lightly browned, remove from \`toaster\`
+
+2. **Using a \`knife\`:**
+
+     Acquire 1 tablespoon of room temperature \`butter\`. Use \`knife\` to spread butter on \`toast\`. Bon appetit!
+ `;
+
   return (
     <>
       <Message
@@ -60,6 +72,7 @@ export default MessageLoading;
       <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={moreComplexList} />
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
     </>
   );

packages/module/src/Message/TextMessage/TextMessage.scss

@@ -2,6 +2,14 @@
 // Chatbot Main - Message - Content - Text
 // ============================================================================
 
+.pf-chatbot__message-and-actions {
+  blockquote {
+    .pf-chatbot__message-text {
+      display: inline-block;
+    }
+  }
+}
+
 // Need to inline shorter text
 .pf-chatbot__message-text {
   width: fit-content;
@@ -16,10 +24,6 @@
     --pf-v6-c-content--FontSize: var(--pf-t--chatbot--font-size);
   }
 
-  p {
-    display: inline-block;
-  }
-
   code {
     background-color: var(--pf-t--chatbot-message--type--background--color--default);
     font-size: var(--pf-t--global--font--size--body--default);

packages/module/src/Message/TextMessage/TextMessage.tsx

@@ -7,11 +7,11 @@ import { ExtraProps } from 'react-markdown';
 import { Content, ContentVariants } from '@patternfly/react-core';
 
 const TextMessage = ({ children, ...props }: JSX.IntrinsicElements['p'] & ExtraProps) => (
-  <div className="pf-chatbot__message-text">
+  <span className="pf-chatbot__message-text">
     <Content component={ContentVariants.p} {...props}>
       {children}
     </Content>
-  </div>
+  </span>
 );
 
 export default TextMessage;