fix(OrderedListMessage): List should pick up where it left off

packages/module/src/Message/ListMessage/OrderedListMessage.tsx

@@ -6,9 +6,9 @@ import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
 
-const OrderedListMessage = ({ children }: JSX.IntrinsicElements['ol'] & ExtraProps) => (
+const OrderedListMessage = ({ children, start }: JSX.IntrinsicElements['ol'] & ExtraProps) => (
   <div className="pf-chatbot__message-ordered-list">
-    <List component={ListComponent.ol} type={OrderType.number}>
+    <List component={ListComponent.ol} type={OrderType.number} start={start}>
       {children}
     </List>
   </div>

packages/module/src/Message/Message.test.tsx

@@ -53,6 +53,22 @@ spec:
 
 const INLINE_CODE = `Here is an inline code - \`() => void\``;
 
+const ORDERED_LIST_WITH_CODE = `
+1. Item 1
+2. Item 2
+
+\`\`\`yaml
+- name: Hello World Playbook
+  hosts: localhost
+  tasks:
+    - name: Print Hello World
+      ansible.builtin.debug:
+        msg: "Hello, World!"
+\`\`\`
+
+3. Item 3
+`;
+
 const checkListItemsRendered = () => {
   const items = ['Item 1', 'Item 2', 'Item 3'];
   expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -344,6 +360,12 @@ describe('Message', () => {
     expect(screen.getByText('Here is an ordered list:')).toBeTruthy();
     checkListItemsRendered();
   });
+  it('should render ordered lists correctly if there is interstitial content', () => {
+    render(<Message avatar="./img" role="user" name="User" content={ORDERED_LIST_WITH_CODE} />);
+    checkListItemsRendered();
+    const list = screen.getAllByRole('list')[1];
+    expect(list).toHaveAttribute('start', '3');
+  });
   it('should render inline code', () => {
     render(<Message avatar="./img" role="user" name="User" content={INLINE_CODE} />);
     expect(screen.getByText(/() => void/i)).toBeTruthy();

packages/module/src/Message/Message.tsx

@@ -156,7 +156,7 @@ export const Message: React.FunctionComponent<MessageProps> = ({
                   p: TextMessage,
                   code: ({ children }) => <CodeBlockMessage {...codeBlockProps}>{children}</CodeBlockMessage>,
                   ul: UnorderedListMessage,
-                  ol: OrderedListMessage,
+                  ol: (props) => <OrderedListMessage {...props} />,
                   li: ListItemMessage
                 }}
                 remarkPlugins={[remarkGfm]}