@patternfly/chatbot 2.2.0-prerelease.20 → 2.2.0-prerelease.21

package/src/Message/Message.tsx

@@ -29,6 +29,13 @@ import { QuickStart, QuickstartAction } from './QuickStarts/types';
 import QuickResponse from './QuickResponse/QuickResponse';
 import UserFeedback, { UserFeedbackProps } from './UserFeedback/UserFeedback';
 import UserFeedbackComplete, { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
+import TableMessage from './TableMessage/TableMessage';
+import TrMessage from './TableMessage/TrMessage';
+import TdMessage from './TableMessage/TdMessage';
+import TbodyMessage from './TableMessage/TbodyMessage';
+import TheadMessage from './TableMessage/TheadMessage';
+import ThMessage from './TableMessage/ThMessage';
+import { TableProps } from '@patternfly/react-table';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -109,6 +116,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   isLiveRegion?: boolean;
   /** Ref applied to message  */
   innerRef?: React.Ref<HTMLDivElement>;
+  /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
+  tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
 }
 
 export const MessageBase: React.FunctionComponent<MessageProps> = ({
@@ -133,6 +142,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   userFeedbackComplete,
   isLiveRegion = true,
   innerRef,
+  tableProps,
   ...props
 }: MessageProps) => {
   let avatarClassName;
@@ -187,16 +197,27 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
                       {children}
                     </CodeBlockMessage>
                   ),
-                  ul: UnorderedListMessage,
-                  ol: (props) => <OrderedListMessage {...props} />,
-                  li: ListItemMessage,
                   h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
                   h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
                   h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
                   h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
                   h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
                   h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
-                  blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />
+                  blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
+                  ul: (props) => <UnorderedListMessage {...props} />,
+                  ol: (props) => <OrderedListMessage {...props} />,
+                  li: (props) => <ListItemMessage {...props} />,
+                  table: (props) => <TableMessage {...props} {...tableProps} />,
+                  tbody: (props) => <TbodyMessage {...props} />,
+                  thead: (props) => <TheadMessage {...props} />,
+                  tr: (props) => <TrMessage {...props} />,
+                  td: (props) => {
+                    // Conflicts with Td type
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { width, ...rest } = props;
+                    return <TdMessage {...rest} />;
+                  },
+                  th: (props) => <ThMessage {...props} />
                 }}
                 remarkPlugins={[remarkGfm]}
               >

package/src/Message/TableMessage/TableMessage.scss

@@ -0,0 +1,23 @@
+.pf-chatbot__message-table {
+  border-radius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-table--BackgroundColor: var(--pf-t--global--background--color--tertiary--default);
+  --pf-v6-c-table--BorderColor: var(--pf-t--global--border--color--default);
+  padding: 0 var(--pf-t--global--spacer--lg) 0 var(--pf-t--global--spacer--lg);
+
+  &.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
+    border-block-start: 0;
+  }
+
+  tbody {
+    border-radius: var(--pf-t--global--border--radius--small);
+  }
+
+  tr {
+    --pf-v6-c-table__tr--responsive--PaddingInlineEnd: 0;
+    --pf-v6-c-table__tr--responsive--PaddingInlineStart: 0;
+  }
+
+  .pf-v6-c-table__tr:last-of-type {
+    border-block-end: 0;
+  }
+}

package/src/Message/TableMessage/TableMessage.tsx

@@ -0,0 +1,83 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Table, TableProps } from '@patternfly/react-table';
+
+interface Properties {
+  line: number;
+  column: number;
+  offset: number;
+}
+export interface TableNode {
+  children?: TableNode[];
+  value?: string;
+  position: { start: Properties; end: Properties };
+  tagName: string;
+  type: string;
+}
+
+const TableMessage = ({ children, ...props }: TableProps & ExtraProps) => {
+  const { className, ...rest } = props;
+
+  // This allows us to parse the nested data we get back from the 3rd party Markdown parser
+  // Open to feedback here if there is a better way to do this
+  // This looks for ths and spits them all out so we can filter them later, looking for text values
+  const findHeaders = (array?: TableNode[]) => {
+    const headers: TableNode[] = [];
+    if (!array) {
+      return headers;
+    }
+    const traverse = (items: TableNode[]) => {
+      for (const item of items) {
+        if (item.tagName === 'th') {
+          headers.push(item);
+        }
+        if (item.children) {
+          traverse(item.children);
+        }
+      }
+    };
+
+    traverse(array);
+    return headers;
+  };
+
+  const headers = findHeaders(rest.node?.children as TableNode[] | undefined);
+  const headerTextValues = headers.map((header) => header?.children?.filter((c) => c?.type === 'text')[0]?.value);
+
+  // We are sending these header text values down to child tds by passing them through children, since mobile view for tables expects a dataLabel prop
+  // The data structure does not otherwise know this information at that level
+  // This is somewhat opinionated and may break if 3rd party library changes
+  // See Tr and Tbody for other usage
+  const modifyChildren = (children) =>
+    React.Children.map(children, (child) => {
+      if (child && headerTextValues?.length > 0) {
+        return React.cloneElement(child, { extraHeaders: headerTextValues });
+      }
+      return child;
+    });
+
+  if (!props['aria-label']) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'For accessibility reasons an aria-label should be specified for the Table via the <Message /> tableProps prop'
+    );
+  }
+
+  return (
+    // gridBreakPoint is so we show mobile-styled-PF table
+    <Table
+      aria-label={props['aria-label']}
+      gridBreakPoint="grid"
+      className={`pf-chatbot__message-table ${className ? className : ''}`}
+      {...rest}
+    >
+      {modifyChildren(children)}
+    </Table>
+  );
+};
+
+export default TableMessage;

package/src/Message/TableMessage/TbodyMessage.tsx

@@ -0,0 +1,20 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Tbody, TbodyProps } from '@patternfly/react-table';
+
+const TbodyProps = ({ children, ...props }: TbodyProps & ExtraProps & { extraHeaders?: string[] }) => {
+  // passthrough so we can place dataLabel on tds
+  const modifyChildren = (children) => {
+    if (children && props.extraHeaders) {
+      return React.Children.map(children, (child) => React.cloneElement(child, { extraHeaders: props.extraHeaders }));
+    }
+    return children;
+  };
+
+  return <Tbody {...props}>{modifyChildren(children)}</Tbody>;
+};
+export default TbodyProps;

package/src/Message/TableMessage/TdMessage.tsx

@@ -0,0 +1,11 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Td, TdProps } from '@patternfly/react-table';
+
+const TdMessage = ({ children, ...props }: TdProps & ExtraProps) => <Td {...props}>{children}</Td>;
+
+export default TdMessage;

package/src/Message/TableMessage/ThMessage.tsx

@@ -0,0 +1,11 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Th, ThProps } from '@patternfly/react-table';
+
+const ThMessage = ({ children, ...props }: ThProps & ExtraProps) => <Th {...props}>{children}</Th>;
+
+export default ThMessage;

package/src/Message/TableMessage/TheadMessage.tsx

@@ -0,0 +1,11 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Thead, TheadProps } from '@patternfly/react-table';
+
+const TheadMessage = ({ children, ...props }: TheadProps & ExtraProps) => <Thead {...props}>{children}</Thead>;
+
+export default TheadMessage;

package/src/Message/TableMessage/TrMessage.tsx

@@ -0,0 +1,27 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Tr, TrProps } from '@patternfly/react-table';
+
+const TrMessage = ({ children, ...props }: TrProps & ExtraProps & { extraHeaders?: string[] }) => {
+  let tdIndex = 0;
+
+  // passthrough so we can place dataLabel on tds
+  // places column name on correct child
+  const modifyChildren = (children) =>
+    React.Children.map(children, (child) => {
+      if (child.type.name === 'td' && props.extraHeaders) {
+        const clonedChild = React.cloneElement(child, { dataLabel: props.extraHeaders[tdIndex] });
+        tdIndex = tdIndex + 1;
+        return clonedChild;
+      }
+      return child;
+    });
+
+  return <Tr {...props}>{modifyChildren(children)}</Tr>;
+};
+
+export default TrMessage;

package/src/Message/TextMessage/TextMessage.scss

@@ -10,6 +10,11 @@
   }
 }
 
+// make it full width when there's a table, so the table can grow as needed
+.pf-chatbot__message-and-actions:has(.pf-chatbot__message-table) {
+  width: 100%;
+}
+
 // Need to inline shorter text
 .pf-chatbot__message-text {
   width: fit-content;

package/src/main.scss

@@ -18,6 +18,7 @@
 @import './Message/CodeBlockMessage/CodeBlockMessage';
 @import './Message/TextMessage/TextMessage';
 @import './Message/ListMessage/ListMessage';
+@import './Message/TableMessage/TableMessage';
 @import './Message/MessageLoading';
 @import './Message/QuickStarts/QuickStartTile';
 @import './Message/QuickResponse/QuickResponse';