@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

package/src/Message/QuickStarts/types.ts

@@ -0,0 +1,154 @@
+import { ButtonProps } from '@patternfly/react-core';
+
+// These types are all from the QuickStart extension.
+// We want to ensure parity, so be careful when adjusting these.
+export interface AccessReviewResourceAttributes {
+  group?: string;
+  resource?: string;
+  subresource?: string;
+  verb?: K8sVerb;
+  name?: string;
+  namespace?: string;
+}
+
+export type K8sVerb = 'create' | 'get' | 'list' | 'update' | 'patch' | 'delete' | 'deletecollection' | 'watch';
+
+export interface QuickStart {
+  apiVersion?: string;
+  kind?: string;
+  metadata: ObjectMetadata;
+  spec: QuickStartSpec;
+}
+
+export interface ObjectMetadata {
+  name: string;
+  annotations?: { [key: string]: string };
+  clusterName?: string;
+  creationTimestamp?: string;
+  deletionGracePeriodSeconds?: number;
+  deletionTimestamp?: string;
+  finalizers?: string[];
+  generateName?: string;
+  generation?: number;
+  labels?: { [key: string]: string };
+  managedFields?: any[];
+  namespace?: string;
+  ownerReferences?: OwnerReference[];
+  resourceVersion?: string;
+  uid?: string;
+  // language can be: en
+  language?: string;
+  // country can be: US
+  country?: string;
+  // locale is a combination of language and country, for example: en_US
+  locale?: string;
+  // anything else to custom define
+  [key: string]: any;
+}
+
+export interface OwnerReference {
+  name: string;
+  kind: string;
+  uid: string;
+  apiVersion: string;
+  controller?: boolean;
+  blockOwnerDeletion?: boolean;
+}
+
+export interface QuickStartTask {
+  title?: string;
+  description?: string;
+  review?: QuickStartTaskReview;
+  summary?: QuickStartTaskSummary;
+  proc?: string;
+}
+
+export interface QuickStartTaskReview {
+  instructions?: string;
+  failedTaskHelp?: string;
+}
+
+export interface QuickStartTaskSummary {
+  success?: string;
+  failed?: string;
+}
+
+export interface QuickstartAction {
+  /** Screen reader aria label. */
+  'aria-label': string;
+  /** Icon to be rendered as a plain button, by default Bookmark outlined will be used. */
+  icon?: React.ComponentType<unknown>;
+  /** Callback with synthetic event parameter. */
+  onClick?: (e: React.SyntheticEvent) => void;
+  /** Additional button props to be rendered as extra props. */
+  buttonProps?: ButtonProps;
+}
+
+export interface QuickStart {
+  apiVersion?: string;
+  kind?: string;
+  metadata: ObjectMetadata;
+  spec: QuickStartSpec;
+}
+
+export interface QuickStartSpec {
+  version?: number;
+  displayName: string;
+  durationMinutes?: number;
+  icon: React.ReactNode;
+  description: string;
+  prerequisites?: string[];
+  introduction?: string;
+  tasks?: QuickStartTask[];
+  conclusion?: string;
+  nextQuickStart?: string[];
+  accessReviewResources?: AccessReviewResourceAttributes[];
+  link?: QuickStartExternal;
+  type?: QuickStartType;
+}
+
+export interface QuickStartTask {
+  title?: string;
+  description?: string;
+  review?: QuickStartTaskReview;
+  summary?: QuickStartTaskSummary;
+  proc?: string;
+}
+
+export interface QuickStartTaskReview {
+  instructions?: string;
+  failedTaskHelp?: string;
+}
+
+export interface QuickStartTaskSummary {
+  success?: string;
+  failed?: string;
+}
+
+export type AllQuickStartStates = Record<string, QuickStartState>;
+
+export type QuickStartState = Record<string, string | number | QuickStartStatus>;
+
+export enum QuickStartStatus {
+  COMPLETE = 'Complete',
+  IN_PROGRESS = 'In Progress',
+  NOT_STARTED = 'Not started'
+}
+
+export enum QuickStartTaskStatus {
+  INIT = 'Initial',
+  VISITED = 'Visited',
+  REVIEW = 'Review',
+  SUCCESS = 'Success',
+  FAILED = 'Failed'
+}
+
+export interface QuickStartExternal {
+  href: string;
+  text?: string;
+}
+
+export interface QuickStartType {
+  text: string;
+  color?: 'green' | 'purple' | 'grey' | 'blue' | 'orange' | 'red' | 'teal' | 'orangered' | 'yellow';
+}

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) !important;
+  --pf-v6-c-table--BorderColor: var(--pf-t--global--border--color--default) !important;
+  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,42 +10,51 @@
   }
 }
 
+// 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;
-  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);
+  padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
+  border-radius: var(--pf-t--global--border--radius--small);
+
+  .pf-v6-c-button.pf-m-link {
+    font-size: var(--pf-t--global--font--size--md);
+  }
 
   .pf-v6-c-content,
   .pf-v6-c-content--small,
   .pf-v6-c-content--blockquote,
   p,
   a {
-    --pf-v6-c-content--FontSize: var(--pf-t--chatbot--font-size);
+    --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--md);
   }
 
   code {
-    background-color: var(--pf-t--chatbot-message--type--background--color--default);
+    background-color: var(--pf-t--global--background--color--tertiary--default);
     font-size: var(--pf-t--global--font--size--body--default);
   }
 }
 
 .pf-chatbot__message--user {
   .pf-chatbot__message-text {
-    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);
+    background-color: var(--pf-t--global--color--brand--default);
+    color: var(--pf-t--global--text--color--on-brand--default);
+    --pf-v6-c-content--Color: var(--pf-t--global--text--color--on-brand--default);
+    padding: var(--pf-t--global--spacer--sm);
+    .pf-v6-c-button__icon {
+      --pf-v6-c-button__icon--Color: var(--pf-t--global--text--color--on-brand--default);
+    }
 
     .pf-v6-c-content,
     .pf-v6-c-content--small,
     .pf-v6-c-content--blockquote,
     p,
     a {
-      color: var(--pf-t--chatbot-message--type--text--color--primary);
-    }
-
-    code {
-      background-color: initial;
+      color: var(--pf-t--global--text--color--on-brand--default);
     }
   }
 }

package/src/Message/TextMessage/TextMessage.tsx

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

package/src/Message/UserFeedback/CloseButton.tsx

@@ -0,0 +1,21 @@
+// ============================================================================
+// Chatbot Main - Messages - Close Button
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import { Button, ButtonProps } from '@patternfly/react-core';
+import { CloseIcon } from '@patternfly/react-icons';
+
+export interface CloseButtonProps extends ButtonProps {
+  /** Callback function for when close button is clicked */
+  onClose?: () => void;
+  /** Aria-label for button */
+  ariaLabel?: string;
+}
+
+const CloseButton: React.FunctionComponent<CloseButtonProps> = ({ onClose, ariaLabel }: CloseButtonProps) => (
+  <Button variant="plain" onClick={onClose} icon={<CloseIcon />} aria-label={ariaLabel} />
+);
+
+export default CloseButton;

package/src/Message/UserFeedback/UserFeedback.scss

@@ -0,0 +1,53 @@
+// shared
+.pf-chatbot__feedback-card {
+  box-shadow: var(--pf-t--global--box-shadow--sm);
+  --pf-v6-c-card--BorderWidth: 0;
+  max-width: 27.5rem; // fixme address mobile vs desktop
+}
+
+// complete card
+.pf-chatbot__feedback-complete-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--lg);
+  align-items: center;
+}
+.pf-chatbot__feedback-complete-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-card--first-child--PaddingBlockStart: 0;
+  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: 0;
+}
+.pf-chatbot__feedback-complete-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pf-chatbot__feedback-complete-body {
+  text-align: center;
+}
+.pf-chatbot__feedback-complete-title {
+  font-family: var(--pf-t--global--font--family--heading);
+  font-size: var(--pf-t--global--font--size--lg);
+  font-weight: var(--pf-t--global--font--weight--body--bold);
+  line-height: var(--pf-t--global--font--line-height--heading);
+}
+
+// feedback card
+.pf-chatbot__feedback-card-title {
+  font-family: var(--pf-t--global--font--family--heading);
+  font-size: var(--pf-t--global--font--size--md);
+  font-weight: var(--pf-t--global--font--weight--body--bold);
+  line-height: var(--pf-t--global--font--line-height--heading);
+}
+
+.pf-chatbot__feedback-card-form {
+  --pf-v6-c-form__group--m-action--MarginBlockStart: 0 !important;
+}
+
+.pf-chatbot__feedback-card-optional {
+  font-weight: initial;
+}