@patternfly/chatbot 2.1.0 → 2.2.0-prerelease.10

package/src/ResponseActions/ResponseActions.tsx

@@ -12,6 +12,8 @@ import { TooltipProps } from '@patternfly/react-core';
 export interface ActionProps {
   /** 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 */
@@ -20,6 +22,8 @@ export interface ActionProps {
   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 */
@@ -38,74 +42,117 @@ export interface ResponseActionProps {
 }
 
 export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({ actions }) => {
+  const [activeButton, setActiveButton] = React.useState<string>();
   const { positive, negative, copy, share, listen, ...additionalActions } = actions;
+  const responseActions = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (responseActions.current && !responseActions.current.contains(e.target)) {
+        setActiveButton(undefined);
+      }
+    };
+    window.addEventListener('click', handleClickOutside);
+
+    return () => {
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
+  const handleClick = (
+    e: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent,
+    id: string,
+    onClick?: (event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void
+  ) => {
+    setActiveButton(id);
+    onClick && onClick(e);
+  };
+
   return (
-    <div className="pf-chatbot__response-actions">
+    <div ref={responseActions} className="pf-chatbot__response-actions">
       {positive && (
         <ResponseActionButton
           ariaLabel={positive.ariaLabel ?? 'Good response'}
-          onClick={positive.onClick}
+          clickedAriaLabel={positive.ariaLabel ?? 'Response recorded'}
+          onClick={(e) => handleClick(e, 'positive', positive.onClick)}
           className={positive.className}
           isDisabled={positive.isDisabled}
           tooltipContent={positive.tooltipContent ?? 'Good response'}
+          clickedTooltipContent={positive.clickedTooltipContent ?? 'Response recorded'}
           tooltipProps={positive.tooltipProps}
           icon={<OutlinedThumbsUpIcon />}
+          isClicked={activeButton === 'positive'}
         ></ResponseActionButton>
       )}
       {negative && (
         <ResponseActionButton
           ariaLabel={negative.ariaLabel ?? 'Bad response'}
-          onClick={negative.onClick}
+          clickedAriaLabel={negative.ariaLabel ?? 'Response recorded'}
+          onClick={(e) => handleClick(e, 'negative', negative.onClick)}
           className={negative.className}
           isDisabled={negative.isDisabled}
           tooltipContent={negative.tooltipContent ?? 'Bad response'}
+          clickedTooltipContent={negative.clickedTooltipContent ?? 'Response recorded'}
           tooltipProps={negative.tooltipProps}
           icon={<OutlinedThumbsDownIcon />}
+          isClicked={activeButton === 'negative'}
         ></ResponseActionButton>
       )}
       {copy && (
         <ResponseActionButton
           ariaLabel={copy.ariaLabel ?? 'Copy'}
-          onClick={copy.onClick}
+          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={copy.tooltipProps}
           icon={<OutlinedCopyIcon />}
+          isClicked={activeButton === 'copy'}
         ></ResponseActionButton>
       )}
       {share && (
         <ResponseActionButton
           ariaLabel={share.ariaLabel ?? 'Share'}
-          onClick={share.onClick}
+          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={share.tooltipProps}
           icon={<ExternalLinkAltIcon />}
+          isClicked={activeButton === 'share'}
         ></ResponseActionButton>
       )}
       {listen && (
         <ResponseActionButton
           ariaLabel={listen.ariaLabel ?? 'Listen'}
-          onClick={listen.onClick}
+          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={listen.tooltipProps}
           icon={<VolumeUpIcon />}
+          isClicked={activeButton === 'listen'}
         ></ResponseActionButton>
       )}
       {Object.keys(additionalActions).map((action) => (
         <ResponseActionButton
           key={action}
           ariaLabel={additionalActions[action]?.ariaLabel}
-          onClick={additionalActions[action]?.onClick}
+          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={additionalActions[action]?.tooltipProps}
+          clickedTooltipContent={additionalActions[action]?.clickedTooltipContent}
           icon={additionalActions[action]?.icon}
+          isClicked={activeButton === action}
         />
       ))}
     </div>

package/src/Settings/Settings.scss

@@ -0,0 +1,34 @@
+.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: 500;
+}
+
+.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: 500;
+  text-align: center;
+}

package/src/Settings/SettingsForm.tsx

@@ -0,0 +1,25 @@
+import React 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 }[];
+}
+
+export const SettingsForm: React.FunctionComponent<SettingsFormProps> = ({ className, fields = [], ...props }) => (
+  <div className={`pf-chatbot__settings-form-container ${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/TermsOfUse/TermsOfUse.scss

@@ -0,0 +1,66 @@
+.pf-chatbot__terms-of-use-modal {
+  .pf-v6-c-content {
+    font-size: var(--pf-t--global--font--size--body--lg);
+
+    h2 {
+      font-size: var(--pf-t--global--icon--size--font--heading--h2);
+      font-family: var(--pf-t--global--font--family--heading);
+      margin-bottom: var(--pf-t--global--spacer--md);
+      margin-top: var(--pf-t--global--spacer--md);
+      font-weight: var(--pf-t--global--font--weight--heading--default);
+    }
+    h2:first-of-type {
+      margin-top: 0;
+    }
+  }
+
+  .pf-chatbot__terms-of-use--header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: var(--pf-t--global--spacer--xl);
+    margin-block-start: var(--pf-t--global--spacer--xl);
+  }
+
+  .pf-chatbot__terms-of-use--title {
+    font-size: var(--pf-t--global--font--size--heading--h1);
+    font-family: var(--pf-t--global--font--family--heading);
+    font-weight: var(--pf-t--global--font--weight--heading--bold);
+  }
+
+  .pf-chatbot__terms-of-use--footer {
+    margin-block-start: var(--pf-t--global--spacer--md);
+  }
+
+  .pf-chatbot__terms-of-use--section {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+  }
+
+  // for handling zoom conditions; zoom to 125% or higher to see this
+  @media screen and (max-height: 620px) {
+    .pf-v6-c-modal-box__body {
+      --pf-v6-c-modal-box__body--MinHeight: auto;
+      overflow: visible;
+    }
+  }
+}
+
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--fullscreen,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--embedded {
+  // override parent modal style
+  height: inherit;
+
+  .pf-v6-c-content {
+    h2 {
+      font-size: var(--pf-t--global--icon--size--font--heading--h1);
+    }
+  }
+
+  .pf-chatbot__terms-of-use--title {
+    font-size: var(--pf-t--global--font--size--heading--2xl);
+  }
+}

package/src/TermsOfUse/TermsOfUse.test.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import TermsOfUse from './TermsOfUse';
+import { Content } from '@patternfly/react-core';
+
+const handleModalToggle = jest.fn();
+const onPrimaryAction = jest.fn();
+const onSecondaryAction = jest.fn();
+
+const body = (
+  <Content>
+    <h1>Heading 1</h1>
+    <p>Legal text</p>
+  </Content>
+);
+describe('TermsOfUse', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render modal correctly', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        ouiaId="Terms"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('heading', { name: /Terms of use/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Accept/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Decline/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /Heading 1/i })).toBeTruthy();
+    expect(screen.getByText(/Legal text/i)).toBeTruthy();
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
+  });
+  it('should handle image and altText props', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        image="./image.png"
+        altText="Test image"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('img')).toBeTruthy();
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
+  });
+  it('should handle className prop', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        className="test"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
+    expect(screen.getByRole('dialog')).toHaveClass('test');
+  });
+  it('should handle title prop', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        title="Updated title"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('heading', { name: /Updated title/i })).toBeTruthy();
+    expect(screen.queryByRole('heading', { name: /Terms of use/i })).toBeFalsy();
+  });
+  it('should handle primary button prop', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        primaryActionBtn="First"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('button', { name: /First/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Accept/i })).toBeFalsy();
+  });
+  it('should handle secondary button prop', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        secondaryActionBtn="Second"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('button', { name: /Second/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Deny/i })).toBeFalsy();
+  });
+  it('should handle primary button click', async () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onPrimaryAction={onPrimaryAction}
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+      >
+        {body}
+      </TermsOfUse>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Accept/i }));
+    expect(onPrimaryAction).toHaveBeenCalledTimes(1);
+    expect(handleModalToggle).toHaveBeenCalledTimes(1);
+  });
+  it('should handle secondary button click', async () => {
+    render(
+      <TermsOfUse isModalOpen onSecondaryAction={onSecondaryAction} handleModalToggle={handleModalToggle}>
+        {body}
+      </TermsOfUse>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Decline/i }));
+    expect(onSecondaryAction).toHaveBeenCalledTimes(1);
+    expect(handleModalToggle).not.toHaveBeenCalled();
+  });
+});

package/src/TermsOfUse/TermsOfUse.tsx

@@ -0,0 +1,117 @@
+// ============================================================================
+// Terms of Use Modal - Chatbot Modal Extension
+// ============================================================================
+import React from 'react';
+import { Button, Content, ModalBody, ModalFooter, ModalHeader, ModalProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal/ChatbotModal';
+
+export interface TermsOfUseProps extends ModalProps {
+  /** Class applied to modal */
+  className?: string;
+  /** Action assigned to primary modal button */
+  onPrimaryAction?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Action assigned to secondary modal button */
+  onSecondaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Name of primary modal button */
+  primaryActionBtn?: string;
+  /** Name of secondary modal button */
+  secondaryActionBtn?: string;
+  /** Function that handles modal toggle */
+  handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Whether modal is open */
+  isModalOpen: boolean;
+  /** Title of modal */
+  title?: string;
+  /** Display mode for the Chatbot parent; this influences the styles applied */
+  displayMode?: ChatbotDisplayMode;
+  /** Optional image displayed in header */
+  image?: string;
+  /** Alt text for optional image displayed in header */
+  altText?: string;
+  /** Ref applied to modal */
+  innerRef?: React.Ref<HTMLDivElement>;
+  /** OuiaID applied to modal */
+  ouiaId?: string;
+}
+
+export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
+  handleModalToggle,
+  isModalOpen,
+  onPrimaryAction,
+  onSecondaryAction,
+  primaryActionBtn = 'Accept',
+  secondaryActionBtn = 'Decline',
+  title = 'Terms of use',
+  image,
+  altText,
+  displayMode = ChatbotDisplayMode.default,
+  className,
+  children,
+  innerRef,
+  ouiaId = 'TermsOfUse',
+  ...props
+}: TermsOfUseProps) => {
+  const handlePrimaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onPrimaryAction && onPrimaryAction(_event);
+  };
+
+  const handleSecondaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    onSecondaryAction(_event);
+  };
+
+  const modal = (
+    <ChatbotModal
+      isOpen={isModalOpen}
+      ouiaId={ouiaId}
+      aria-labelledby="terms-of-use-title"
+      aria-describedby="terms-of-use-modal"
+      className={`pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${className ? className : ''}`}
+      displayMode={displayMode}
+      {...props}
+    >
+      {/* This is a workaround since the PatternFly modal doesn't have ref forwarding */}
+      <section className={`pf-chatbot__terms-of-use--section`} aria-label={title} tabIndex={-1} ref={innerRef}>
+        <ModalHeader>
+          <div className="pf-chatbot__terms-of-use--header">
+            {image && altText && <img src={image} className="pf-chatbot__terms-of-use--image" alt={altText} />}
+            <h1 className="pf-chatbot__terms-of-use--title">{title}</h1>
+          </div>
+        </ModalHeader>
+        <ModalBody>
+          <Content>{children}</Content>
+        </ModalBody>
+        <ModalFooter className="pf-chatbot__terms-of-use--footer">
+          <Button
+            isBlock
+            key="terms-of-use-modal-primary"
+            variant="primary"
+            onClick={handlePrimaryAction}
+            form="terms-of-use-form"
+            size="lg"
+          >
+            {primaryActionBtn}
+          </Button>
+          <Button
+            isBlock
+            key="terms-of-use-modal-secondary"
+            variant="secondary"
+            onClick={handleSecondaryAction}
+            size="lg"
+          >
+            {secondaryActionBtn}
+          </Button>
+        </ModalFooter>
+      </section>
+    </ChatbotModal>
+  );
+
+  return modal;
+};
+
+const TermsOfUse = React.forwardRef((props: TermsOfUseProps, ref: React.Ref<HTMLDivElement>) => (
+  <TermsOfUseBase innerRef={ref} {...props} />
+));
+
+export default TermsOfUse;

package/src/TermsOfUse/index.ts

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

package/src/index.ts

@@ -66,8 +66,14 @@ export * from './PreviewAttachment';
 export { default as ResponseActions } from './ResponseActions';
 export * from './ResponseActions';
 
+export { default as Settings } from './Settings';
+export * from './Settings';
+
 export { default as SourceDetailsMenuItem } from './SourceDetailsMenuItem';
 export * from './SourceDetailsMenuItem';
 
 export { default as SourcesCard } from './SourcesCard';
 export * from './SourcesCard';
+
+export { default as TermsOfUse } from './TermsOfUse';
+export * from './TermsOfUse';

package/src/main.scss

@@ -18,12 +18,16 @@
 @import './Message/TextMessage/TextMessage';
 @import './Message/ListMessage/ListMessage';
 @import './Message/MessageLoading';
+@import './Message/QuickStarts/QuickStartTile';
+@import './Message/QuickResponse/QuickResponse';
 @import './MessageBar/MessageBar';
 @import './MessageBox/MessageBox';
 @import './MessageBox/JumpButton';
 @import './ResponseActions/ResponseActions';
+@import './Settings/Settings';
 @import './SourcesCard/SourcesCard.scss';
 @import './SourceDetailsMenuItem/SourceDetailsMenuItem';
+@import './TermsOfUse/TermsOfUse';
 
 :where(:root) {
   // ============================================================================
@@ -47,9 +51,9 @@
   --pf-t--chatbot--timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 
   --pf-t--chatbot--blue-icon--background--color--hover: rgba(
-    185,
-    218,
-    252,
+    146,
+    197,
+    249,
     0.25
   ); // --pf-t--global--color--nonstatus--blue--default @ 25%
   --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);