@patternfly/chatbot 1.0.0

package/src/ResponseActions/ResponseActions.tsx

@@ -0,0 +1,353 @@
+import type { FunctionComponent, MouseEvent } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import {
+  ExternalLinkAltIcon,
+  VolumeUpIcon,
+  OutlinedThumbsUpIcon,
+  ThumbsUpIcon,
+  OutlinedThumbsDownIcon,
+  ThumbsDownIcon,
+  OutlinedCopyIcon,
+  DownloadIcon,
+  PencilAltIcon
+} from '@patternfly/react-icons';
+import ResponseActionButton from './ResponseActionButton';
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+
+export interface ActionProps extends Omit<ButtonProps, 'ref'> {
+  /** Aria-label for the button */
+  ariaLabel?: string;
+  /** Aria-label for the button, shown when the button is clicked. */
+  clickedAriaLabel?: string;
+  /** On-click handler for the button */
+  onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
+  /** Class name for the button */
+  className?: string;
+  /** Props to control if the attach button should be disabled */
+  isDisabled?: boolean;
+  /** Content shown in the tooltip */
+  tooltipContent?: string;
+  /** Content shown in the tooltip when the button is clicked. */
+  clickedTooltipContent?: string;
+  /** Props to control the PF Tooltip component */
+  tooltipProps?: TooltipProps;
+  /** Icon for custom response action */
+  icon?: React.ReactNode;
+  /** Ref for response action button */
+  ref?: React.Ref<HTMLButtonElement>;
+  /** Whether content launched by button, such as the feedback form, is expanded */
+  'aria-expanded'?: boolean;
+  /** Id for content controlled by the button, such as the feedback form */
+  'aria-controls'?: string;
+}
+
+type ExtendedActionProps = ActionProps & {
+  [key: string]: any;
+};
+
+/**
+ * The various actions that can be attached to a bot message for users to interact with.
+ * Use this component when passing children to Message to customize its structure.
+ */
+
+export interface ResponseActionProps {
+  /** Additional classes for the response actions container. */
+  className?: string;
+  /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
+  actions: Record<string, ExtendedActionProps | undefined> & {
+    positive?: ActionProps;
+    negative?: ActionProps;
+    copy?: ActionProps;
+    share?: ActionProps;
+    download?: ActionProps;
+    listen?: ActionProps;
+    edit?: ActionProps;
+  };
+  /** When true, the selected action will persist even when clicking outside the component.
+   * When false (default), clicking outside or clicking another action will deselect the current selection. */
+  persistActionSelection?: boolean;
+  /** When true, automatically swaps to filled icon variants when predefined actions are clicked.
+   * Predefined actions will use filled variants (e.g., ThumbsUpIcon) when clicked and outline variants (e.g., OutlinedThumbsUpIcon) when not clicked. */
+  useFilledIconsOnClick?: boolean;
+  /** Flag indicating whether the actions container is only visible when a message is hovered or an action would receive focus. Note
+   * that setting this to true will append tooltips inline instead of the document.body.
+   */
+  showActionsOnInteraction?: boolean;
+}
+
+export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
+  className,
+  actions,
+  persistActionSelection = false,
+  useFilledIconsOnClick = false,
+  showActionsOnInteraction = false,
+  ...props
+}) => {
+  const [activeButton, setActiveButton] = useState<string>();
+  const [clickStatePersisted, setClickStatePersisted] = useState<boolean>(false);
+
+  const { positive, negative, copy, edit, share, download, listen, ...additionalActions } = actions;
+
+  useEffect(() => {
+    // Define the order of precedence for checking initial `isClicked`
+    const actionPrecedence = ['positive', 'negative', 'copy', 'edit', 'share', 'download', 'listen'];
+    let initialActive: string | undefined;
+
+    // Check predefined actions first based on precedence
+    for (const actionName of actionPrecedence) {
+      const actionProp = actions[actionName as keyof typeof actions];
+      if (actionProp?.isClicked) {
+        initialActive = actionName;
+        break;
+      }
+    }
+    // If no predefined action was initially clicked, check additionalActions
+    if (!initialActive) {
+      const clickedActionName = Object.keys(additionalActions).find(
+        (actionName) => !actionPrecedence.includes(actionName) && additionalActions[actionName]?.isClicked
+      );
+      initialActive = clickedActionName;
+    }
+    if (initialActive) {
+      // Click state is explicitly controlled by consumer.
+      setClickStatePersisted(true);
+    }
+    // If persistActionSelection is true, all selections are persisted
+    if (persistActionSelection) {
+      setClickStatePersisted(true);
+    }
+    setActiveButton(initialActive);
+  }, [actions, persistActionSelection]);
+
+  const responseActions = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Only add click outside listener if not persisting selection
+    if (persistActionSelection) {
+      return;
+    }
+
+    const handleClickOutside = (e) => {
+      if (responseActions.current && !responseActions.current.contains(e.target) && !clickStatePersisted) {
+        setActiveButton(undefined);
+      }
+    };
+    window.addEventListener('click', handleClickOutside);
+
+    return () => {
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [clickStatePersisted, persistActionSelection]);
+
+  const handleClick = (
+    e: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent,
+    id: string,
+    onClick?: (event: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent) => void
+  ) => {
+    e.stopPropagation();
+    if (persistActionSelection) {
+      if (activeButton === id) {
+        // Toggle off if clicking the same button
+        setActiveButton(undefined);
+      } else {
+        // Set new active button
+        setActiveButton(id);
+      }
+      setClickStatePersisted(true);
+    } else {
+      setClickStatePersisted(false);
+      setActiveButton(id);
+    }
+    onClick && onClick(e);
+  };
+
+  const iconMap = {
+    positive: {
+      filled: <ThumbsUpIcon />,
+      outlined: <OutlinedThumbsUpIcon />
+    },
+    negative: {
+      filled: <ThumbsDownIcon />,
+      outlined: <OutlinedThumbsDownIcon />
+    }
+  };
+
+  const getIcon = (actionName: string) => {
+    const isClicked = activeButton === actionName;
+
+    if (isClicked && useFilledIconsOnClick) {
+      return iconMap[actionName].filled;
+    }
+
+    return iconMap[actionName].outlined;
+  };
+
+  // We want to append the tooltip inline so that hovering the tooltip keeps the actions container visible
+  // when showActionsOnInteraction is true. Otherwise hovering the tooltip causes the actions container
+  // to disappear but the tooltip will remain visible.
+  const getTooltipContainer = (): HTMLElement => responseActions.current || document.body;
+
+  const getTooltipProps = (tooltipProps?: TooltipProps) =>
+    ({
+      ...(showActionsOnInteraction && { appendTo: getTooltipContainer }),
+      ...tooltipProps
+    }) as TooltipProps;
+
+  return (
+    <div
+      ref={responseActions}
+      className={css('pf-chatbot__response-actions', showActionsOnInteraction && 'pf-m-visible-interaction', className)}
+      {...props}
+    >
+      {positive && (
+        <ResponseActionButton
+          {...positive}
+          ariaLabel={positive.ariaLabel ?? 'Good response'}
+          clickedAriaLabel={positive.ariaLabel ?? 'Good response recorded'}
+          onClick={(e) => handleClick(e, 'positive', positive.onClick)}
+          className={positive.className}
+          isDisabled={positive.isDisabled}
+          tooltipContent={positive.tooltipContent ?? 'Good response'}
+          clickedTooltipContent={positive.clickedTooltipContent ?? 'Good response recorded'}
+          tooltipProps={getTooltipProps(positive.tooltipProps)}
+          icon={getIcon('positive')}
+          isClicked={activeButton === 'positive'}
+          ref={positive.ref}
+          aria-expanded={positive['aria-expanded']}
+          aria-controls={positive['aria-controls']}
+        ></ResponseActionButton>
+      )}
+      {negative && (
+        <ResponseActionButton
+          {...negative}
+          ariaLabel={negative.ariaLabel ?? 'Bad response'}
+          clickedAriaLabel={negative.ariaLabel ?? 'Bad response recorded'}
+          onClick={(e) => handleClick(e, 'negative', negative.onClick)}
+          className={negative.className}
+          isDisabled={negative.isDisabled}
+          tooltipContent={negative.tooltipContent ?? 'Bad response'}
+          clickedTooltipContent={negative.clickedTooltipContent ?? 'Bad response recorded'}
+          tooltipProps={getTooltipProps(negative.tooltipProps)}
+          icon={getIcon('negative')}
+          isClicked={activeButton === 'negative'}
+          ref={negative.ref}
+          aria-expanded={negative['aria-expanded']}
+          aria-controls={negative['aria-controls']}
+        ></ResponseActionButton>
+      )}
+      {copy && (
+        <ResponseActionButton
+          {...copy}
+          ariaLabel={copy.ariaLabel ?? 'Copy'}
+          clickedAriaLabel={copy.ariaLabel ?? 'Copied'}
+          onClick={(e) => handleClick(e, 'copy', copy.onClick)}
+          className={copy.className}
+          isDisabled={copy.isDisabled}
+          tooltipContent={copy.tooltipContent ?? 'Copy'}
+          clickedTooltipContent={copy.clickedTooltipContent ?? 'Copied'}
+          tooltipProps={getTooltipProps(copy.tooltipProps)}
+          icon={<OutlinedCopyIcon />}
+          isClicked={activeButton === 'copy'}
+          ref={copy.ref}
+          aria-expanded={copy['aria-expanded']}
+          aria-controls={copy['aria-controls']}
+        ></ResponseActionButton>
+      )}
+      {edit && (
+        <ResponseActionButton
+          {...edit}
+          ariaLabel={edit.ariaLabel ?? 'Edit'}
+          clickedAriaLabel={edit.ariaLabel ?? 'Editing'}
+          onClick={(e) => handleClick(e, 'edit', edit.onClick)}
+          className={edit.className}
+          isDisabled={edit.isDisabled}
+          tooltipContent={edit.tooltipContent ?? 'Edit '}
+          clickedTooltipContent={edit.clickedTooltipContent ?? 'Editing'}
+          tooltipProps={getTooltipProps(edit.tooltipProps)}
+          icon={<PencilAltIcon />}
+          isClicked={activeButton === 'edit'}
+          ref={edit.ref}
+          aria-expanded={edit['aria-expanded']}
+          aria-controls={edit['aria-controls']}
+        ></ResponseActionButton>
+      )}
+      {share && (
+        <ResponseActionButton
+          {...share}
+          ariaLabel={share.ariaLabel ?? 'Share'}
+          clickedAriaLabel={share.ariaLabel ?? 'Shared'}
+          onClick={(e) => handleClick(e, 'share', share.onClick)}
+          className={share.className}
+          isDisabled={share.isDisabled}
+          tooltipContent={share.tooltipContent ?? 'Share'}
+          clickedTooltipContent={share.clickedTooltipContent ?? 'Shared'}
+          tooltipProps={getTooltipProps(share.tooltipProps)}
+          icon={<ExternalLinkAltIcon />}
+          isClicked={activeButton === 'share'}
+          ref={share.ref}
+          aria-expanded={share['aria-expanded']}
+          aria-controls={share['aria-controls']}
+        ></ResponseActionButton>
+      )}
+      {download && (
+        <ResponseActionButton
+          {...download}
+          ariaLabel={download.ariaLabel ?? 'Download'}
+          clickedAriaLabel={download.ariaLabel ?? 'Downloaded'}
+          onClick={(e) => handleClick(e, 'download', download.onClick)}
+          className={download.className}
+          isDisabled={download.isDisabled}
+          tooltipContent={download.tooltipContent ?? 'Download'}
+          clickedTooltipContent={download.clickedTooltipContent ?? 'Downloaded'}
+          tooltipProps={getTooltipProps(download.tooltipProps)}
+          icon={<DownloadIcon />}
+          isClicked={activeButton === 'download'}
+          ref={download.ref}
+          aria-expanded={download['aria-expanded']}
+          aria-controls={download['aria-controls']}
+        ></ResponseActionButton>
+      )}
+      {listen && (
+        <ResponseActionButton
+          {...listen}
+          ariaLabel={listen.ariaLabel ?? 'Listen'}
+          clickedAriaLabel={listen.ariaLabel ?? 'Listening'}
+          onClick={(e) => handleClick(e, 'listen', listen.onClick)}
+          className={listen.className}
+          isDisabled={listen.isDisabled}
+          tooltipContent={listen.tooltipContent ?? 'Listen'}
+          clickedTooltipContent={listen.clickedTooltipContent ?? 'Listening'}
+          tooltipProps={getTooltipProps(listen.tooltipProps)}
+          icon={<VolumeUpIcon />}
+          isClicked={activeButton === 'listen'}
+          ref={listen.ref}
+          aria-expanded={listen['aria-expanded']}
+          aria-controls={listen['aria-controls']}
+        ></ResponseActionButton>
+      )}
+
+      {Object.keys(additionalActions).map((action) => (
+        <ResponseActionButton
+          {...additionalActions[action]}
+          key={action}
+          ariaLabel={additionalActions[action]?.ariaLabel}
+          clickedAriaLabel={additionalActions[action]?.clickedAriaLabel}
+          onClick={(e) => handleClick(e, action, additionalActions[action]?.onClick)}
+          className={additionalActions[action]?.className}
+          isDisabled={additionalActions[action]?.isDisabled}
+          tooltipContent={additionalActions[action]?.tooltipContent}
+          tooltipProps={getTooltipProps(additionalActions[action]?.tooltipProps)}
+          clickedTooltipContent={additionalActions[action]?.clickedTooltipContent}
+          icon={additionalActions[action]?.icon}
+          isClicked={activeButton === action}
+          ref={additionalActions[action]?.ref}
+          aria-expanded={additionalActions[action]?.['aria-expanded']}
+          aria-controls={additionalActions[action]?.['aria-controls']}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ResponseActions;

package/src/ResponseActions/ResponseActionsGroups.test.tsx

@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import ResponseActionsGroups from './ResponseActionsGroups';
+
+test('Renders with children', () => {
+  render(<ResponseActionsGroups>Test content</ResponseActionsGroups>);
+  expect(screen.getByText('Test content')).toBeInTheDocument();
+});
+
+test('Renders with pf-chatbot__response-actions-groups class by default', () => {
+  render(<ResponseActionsGroups>Test content</ResponseActionsGroups>);
+  expect(screen.getByText('Test content')).toHaveClass('pf-chatbot__response-actions-groups', { exact: true });
+});
+
+test('Renders with custom className', () => {
+  render(<ResponseActionsGroups className="custom-class">Test content</ResponseActionsGroups>);
+  expect(screen.getByText('Test content')).toHaveClass('custom-class');
+});
+
+test('Spreads additional props', () => {
+  render(<ResponseActionsGroups id="test-id">Test content</ResponseActionsGroups>);
+  expect(screen.getByText('Test content')).toHaveAttribute('id', 'test-id');
+});

package/src/ResponseActions/ResponseActionsGroups.tsx

@@ -0,0 +1,28 @@
+// ============================================================================
+// Response Actions Groups - Container for multiple action groups
+// ============================================================================
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+import { css } from '@patternfly/react-styles';
+
+/**
+ * The container for grouping multiple related ResponseActions components, typically used for having different persistence states amongst groups.
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface ResponseActionsGroupsProps extends HTMLProps<HTMLDivElement> {
+  /** Content to render inside the response actions groups container */
+  children: ReactNode;
+  /** Additional classes applied to the response actions groups container. */
+  className?: string;
+}
+
+export const ResponseActionsGroups: FunctionComponent<ResponseActionsGroupsProps> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <div className={css('pf-chatbot__response-actions-groups', className)} {...props}>
+    {children}
+  </div>
+);
+
+export default ResponseActionsGroups;

package/src/ResponseActions/index.ts

@@ -0,0 +1,4 @@
+export { default } from './ResponseActions';
+
+export * from './ResponseActions';
+export * from './ResponseActionsGroups';

package/src/Settings/Settings.scss

@@ -0,0 +1,45 @@
+.pf-chatbot__settings-form-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  overflow: scroll;
+}
+
+.pf-chatbot__settings-form {
+  display: flex;
+  flex-direction: column;
+  max-width: 60rem;
+  flex: 1;
+}
+
+.pf-chatbot__settings-form-row {
+  font-size: var(--pf-t--global--font--size--body--lg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--pf-t--global--border--color--default);
+  padding: var(--pf-t--global--spacer--lg);
+  font-weight: var(--pf-t--global--font--weight--body--bold);
+}
+
+.pf-chatbot__settings-form-row:last-of-type {
+  border-bottom: 0px;
+}
+
+.pf-chatbot__settings--title {
+  font-family: var(--pf-t--global--font--family--heading);
+  font-size: var(--pf-t--global--font--size--xl);
+  font-weight: var(--pf-t--global--font--weight--body--bold);
+  text-align: center;
+}
+
+.pf-chatbot__settings-form-container.pf-m-compact {
+  .pf-chatbot__settings-form-row {
+    padding: var(--pf-t--global--spacer--md);
+    font-size: var(--pf-t--global--font--size--body--md);
+  }
+}
+
+.pf-chatbot__header.pf-m-compact {
+  padding-inline-start: var(--pf-t--global--spacer--md);
+}

package/src/Settings/SettingsForm.test.tsx

@@ -0,0 +1,44 @@
+import { Button } from '@patternfly/react-core';
+import { render, screen } from '@testing-library/react';
+import { SettingsForm } from './SettingsForm';
+import '@testing-library/jest-dom';
+
+describe('SettingsForm', () => {
+  it('should render settingsForm with custom classname', () => {
+    const { container } = render(<SettingsForm className="custom-settings" />);
+    expect(container.querySelector('.custom-settings')).toBeTruthy();
+  });
+
+  it('should render settingsForm with fields', () => {
+    const fields = [
+      {
+        id: 'archived-chat',
+        label: 'Archive chat',
+        field: (
+          <Button id="archived-chat" variant="secondary">
+            Archive chat
+          </Button>
+        )
+      }
+    ];
+    render(<SettingsForm fields={fields} />);
+
+    expect(screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
+  });
+
+  it('should render settingsForm with isCompact', () => {
+    const fields = [
+      {
+        id: 'archived-chat',
+        label: 'Archive chat',
+        field: (
+          <Button id="archived-chat" variant="secondary">
+            Archive chat
+          </Button>
+        )
+      }
+    ];
+    render(<SettingsForm data-testid="settings-form" fields={fields} isCompact />);
+    expect(screen.getByTestId('settings-form')).toHaveClass('pf-m-compact');
+  });
+});

package/src/Settings/SettingsForm.tsx

@@ -0,0 +1,30 @@
+import type { FunctionComponent } from 'react';
+
+export interface SettingsFormProps {
+  /** Class applied to form container */
+  className?: string;
+  /** Array of fields to display in the settings layout */
+  fields?: { id: string; label: string; field: React.ReactElement }[];
+  /** Sets form to compact styling. */
+  isCompact?: boolean;
+}
+
+export const SettingsForm: FunctionComponent<SettingsFormProps> = ({ className, fields = [], isCompact, ...props }) => (
+  <div
+    className={`pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}`}
+    {...props}
+  >
+    <form className="pf-chatbot__settings-form">
+      {fields.map((field) => (
+        <div className="pf-chatbot__settings-form-row" key={field.label}>
+          <label className="pf-chatbot__settings-label" htmlFor={field.id}>
+            {field.label}
+          </label>
+          {field.field}
+        </div>
+      ))}
+    </form>
+  </div>
+);
+
+export default SettingsForm;

package/src/Settings/index.ts

@@ -0,0 +1,3 @@
+export { default } from './SettingsForm';
+
+export * from './SettingsForm';

package/src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss

@@ -0,0 +1,33 @@
+.pf-chatbot__source-details-subhead {
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: var(--pf-t--global--icon--size--font--xs);
+  font-weight: var(--pf-t--global--font--weight--body--bold);
+}
+
+.pf-chatbot__source-details-heading {
+  font-size: var(--pf-t--global--font--size--body--default);
+  word-wrap: break-word;
+}
+
+.pf-chatbot__source-details-icon {
+  width: 100% !important;
+}
+
+// this is only used in demo code
+.pf-chatbot__source-details-icon > .pf-v6-c-icon__content > svg {
+  width: 24px;
+  color: var(--pf-t--global--icon--color--status--custom--default);
+}
+.pf-chatbot-source-details-dropdown-item:hover {
+  .pf-chatbot__source-details-icon > .pf-v6-c-icon__content > svg {
+    color: var(--pf-t--global--icon--color--status--custom--hover);
+  }
+}
+
+.pf-chatbot__source-details {
+  flex-direction: row;
+}
+
+.pf-chatbot__source-details-text {
+  max-width: 20rem;
+}

package/src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx

@@ -0,0 +1,36 @@
+import type { FunctionComponent } from 'react';
+import { Icon, Flex, Stack, StackItem } from '@patternfly/react-core';
+
+export interface SourceDetailsMenuItemProps extends React.HTMLProps<HTMLDivElement> {
+  /** Icon */
+  icon: React.ReactNode;
+  /** Name of source */
+  name: string;
+  /** Description of source */
+  type?: string;
+}
+
+export const SourceDetailsMenuItem: FunctionComponent<SourceDetailsMenuItemProps> = ({
+  icon,
+  name,
+  type,
+  ...props
+}: SourceDetailsMenuItemProps) => (
+  <Flex className="pf-chatbot__source-details" gap={{ default: 'gapSm' }} {...props}>
+    <Flex
+      justifyContent={{ default: 'justifyContentCenter' }}
+      alignItems={{ default: 'alignItemsCenter' }}
+      alignSelf={{ default: 'alignSelfCenter' }}
+    >
+      <Icon className="pf-chatbot__source-details-icon">{icon}</Icon>
+    </Flex>
+    <Stack className="pf-chatbot__source-details-text">
+      <StackItem>
+        <span className="pf-chatbot__source-details-heading">{name}</span>
+      </StackItem>
+      {type && <StackItem className="pf-chatbot__source-details-subhead">{type}</StackItem>}
+    </Stack>
+  </Flex>
+);
+
+export default SourceDetailsMenuItem;

package/src/SourceDetailsMenuItem/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SourceDetailsMenuItem';
+export * from './SourceDetailsMenuItem';