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

package/src/MessageBar/StopButton.tsx

@@ -32,6 +32,8 @@ export const StopButton: React.FunctionComponent<StopButtonProps> = ({
     exitDelay={tooltipProps?.exitDelay || 0}
     distance={tooltipProps?.distance || 8}
     animationDuration={tooltipProps?.animationDuration || 0}
+    // prevents VO announcements of both aria label and tooltip
+    aria="none"
     {...tooltipProps}
   >
     <Button

package/src/MessageBox/JumpButton.scss

@@ -16,13 +16,13 @@
   background-color: var(--pf-t--global--background--color--primary--default) !important;
   border: 1px solid var(--pf-t--chatbot--border) !important;
   box-shadow: var(--pf-t--global--box-shadow--sm);
-  color: var(--pf-t--chatbot--icon--fill) !important;
+  color: var(--pf-t--global--icon--color--subtle) !important;
   transform: translate3d(-50%, 0, 0) !important;
   transition:
-    background-color var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm),
-    box-shadow var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm),
-    transform var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--md),
-    opacity var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--md) !important;
+    background-color var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
+    box-shadow var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
+    transform var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md),
+    opacity var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md) !important;
   z-index: var(--pf-t--global--z-index--md) !important;
 
   .pf-v6-c-button__text {
@@ -33,7 +33,7 @@
   &:focus {
     background-color: var(--pf-t--global--background--color--primary--hover) !important;
     box-shadow: var(--pf-t--global--box-shadow--md) !important;
-    color: var(--pf-t--chatbot--icon--fill--hover) !important;
+    color: var(--pf-t--global--icon--color--regular) !important;
   }
 
   &--top {

package/src/MessageBox/MessageBox.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MessageBox } from './MessageBox';
+
+describe('MessageBox', () => {
+  it('should render Message box', () => {
+    render(
+      <MessageBox>
+        <>Chatbot Messages</>
+      </MessageBox>
+    );
+    expect(screen.getByText('Chatbot Messages')).toBeTruthy();
+  });
+
+  it('should assign ref to Message box', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(
+      <MessageBox ref={ref}>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    expect(ref.current).not.toBeNull();
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+});

package/src/PreviewAttachment/PreviewAttachment.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { PreviewAttachment } from './PreviewAttachment';
+
+describe('PreviewAttachment', () => {
+  it('should render PreviewAttachment', () => {
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={jest.fn()}
+      />
+    );
+    expect(screen.getByText('Preview attachment')).toBeTruthy();
+    expect(screen.getByText('greetings')).toBeTruthy();
+    expect(screen.getAllByText('TEXT')).toBeTruthy();
+  });
+
+  it('should call onEdit handler when edit button is pressed', () => {
+    const onEdit = jest.fn();
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={onEdit}
+        handleModalToggle={jest.fn()}
+      />
+    );
+    fireEvent.click(screen.getByText('Edit'));
+
+    expect(onEdit).toHaveBeenCalled();
+  });
+  it('should call onDismiss handler when dismiss button is pressed', () => {
+    const onDismiss = jest.fn();
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={onDismiss}
+      />
+    );
+    fireEvent.click(screen.getByText('Dismiss'));
+
+    expect(onDismiss).toHaveBeenCalled();
+  });
+});

package/src/ResponseActions/ResponseActionButton.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { DownloadIcon } from '@patternfly/react-icons';
+import ResponseActionButton from './ResponseActionButton';
+
+describe('ResponseActionButton', () => {
+  it('renders aria-label correctly if not clicked', () => {
+    render(<ResponseActionButton icon={<DownloadIcon />} ariaLabel="Download" clickedAriaLabel="Downloaded" />);
+    expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+  });
+  it('renders aria-label correctly if clicked', () => {
+    render(
+      <ResponseActionButton icon={<DownloadIcon />} ariaLabel="Download" clickedAriaLabel="Downloaded" isClicked />
+    );
+    expect(screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
+  });
+  it('renders tooltip correctly if not clicked', async () => {
+    render(
+      <ResponseActionButton icon={<DownloadIcon />} tooltipContent="Download" clickedTooltipContent="Downloaded" />
+    );
+    expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+    // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
+    await userEvent.click(screen.getByRole('button', { name: 'Download' }));
+    expect(screen.getByRole('tooltip', { name: 'Download' })).toBeTruthy();
+  });
+  it('renders tooltip correctly if clicked', async () => {
+    render(
+      <ResponseActionButton
+        icon={<DownloadIcon />}
+        tooltipContent="Download"
+        clickedTooltipContent="Downloaded"
+        isClicked
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
+    // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
+    await userEvent.click(screen.getByRole('button', { name: 'Downloaded' }));
+    expect(screen.getByRole('tooltip', { name: 'Downloaded' })).toBeTruthy();
+  });
+  it('if clicked variant for tooltip is not supplied, it uses the default', async () => {
+    render(<ResponseActionButton icon={<DownloadIcon />} tooltipContent="Download" isClicked />);
+    // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
+    await userEvent.click(screen.getByRole('button', { name: 'Download' }));
+    expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+  });
+  it('if clicked variant for aria label is not supplied, it uses the default', async () => {
+    render(<ResponseActionButton icon={<DownloadIcon />} ariaLabel="Download" isClicked />);
+    expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+  });
+});

package/src/ResponseActions/ResponseActionButton.tsx

@@ -4,6 +4,8 @@ import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 export interface ResponseActionButtonProps {
   /** Aria-label for the button. Defaults to the value of the tooltipContent if none provided */
   ariaLabel?: string;
+  /** Aria-label for the button, shown when the button is clicked. Defaults to the value of ariaLabel or tooltipContent if not provided. */
+  clickedAriaLabel?: string;
   /** Icon for the button */
   icon: React.ReactNode;
   /** On-click handler for the button */
@@ -14,43 +16,72 @@ export interface ResponseActionButtonProps {
   isDisabled?: boolean;
   /** Content shown in the tooltip */
   tooltipContent?: string;
+  /** Content shown in the tooltip when the button is clicked. Defaults to the value of tooltipContent if not provided. */
+  clickedTooltipContent?: string;
   /** Props to control the PF Tooltip component */
   tooltipProps?: TooltipProps;
+  /** Whether button is in clicked state */
+  isClicked?: boolean;
+  /** Ref applied to button  */
+  innerRef?: React.Ref<HTMLButtonElement>;
 }
 
-export const ResponseActionButton: React.FunctionComponent<ResponseActionButtonProps> = ({
+export const ResponseActionButtonBase: React.FunctionComponent<ResponseActionButtonProps> = ({
   ariaLabel,
+  clickedAriaLabel = ariaLabel,
   className,
   icon,
   isDisabled,
   onClick,
   tooltipContent,
-  tooltipProps
-}) => (
-  <Tooltip
-    id={`pf-chatbot__tooltip-response-action-${tooltipContent}`}
-    content={tooltipContent}
-    position="bottom"
-    entryDelay={tooltipProps?.entryDelay || 0}
-    exitDelay={tooltipProps?.exitDelay || 0}
-    distance={tooltipProps?.distance || 8}
-    animationDuration={tooltipProps?.animationDuration || 0}
-    {...tooltipProps}
-  >
-    <Button
-      variant="plain"
-      className={`pf-chatbot__button--response-action ${className ?? ''}`}
-      aria-label={ariaLabel ?? tooltipContent}
-      icon={
-        <Icon isInline size="lg">
-          {icon}
-        </Icon>
-      }
-      isDisabled={isDisabled}
-      onClick={onClick}
-      size="sm"
-    ></Button>
-  </Tooltip>
-);
+  clickedTooltipContent = tooltipContent,
+  tooltipProps,
+  isClicked = false,
+  innerRef,
+  ...props
+}) => {
+  const generateAriaLabel = () => {
+    if (ariaLabel) {
+      return isClicked ? clickedAriaLabel : ariaLabel;
+    }
+    return isClicked ? clickedTooltipContent : tooltipContent;
+  };
+
+  return (
+    <Tooltip
+      id={`pf-chatbot__tooltip-response-action-${tooltipContent}`}
+      content={isClicked ? clickedTooltipContent : tooltipContent}
+      aria-live="polite"
+      position="bottom"
+      entryDelay={tooltipProps?.entryDelay || 0}
+      exitDelay={tooltipProps?.exitDelay || 0}
+      distance={tooltipProps?.distance || 8}
+      animationDuration={tooltipProps?.animationDuration || 0}
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
+      <Button
+        variant="plain"
+        className={`pf-chatbot__button--response-action ${isClicked ? 'pf-chatbot__button--response-action-clicked' : ''} ${className ?? ''}`}
+        aria-label={generateAriaLabel()}
+        icon={
+          <Icon isInline size="lg">
+            {icon}
+          </Icon>
+        }
+        isDisabled={isDisabled}
+        onClick={onClick}
+        size="sm"
+        ref={innerRef}
+        {...props}
+      ></Button>
+    </Tooltip>
+  );
+};
+
+const ResponseActionButton = React.forwardRef((props: ResponseActionButtonProps, ref: React.Ref<HTMLButtonElement>) => (
+  <ResponseActionButtonBase innerRef={ref} {...props} />
+));
 
 export default ResponseActionButton;

package/src/ResponseActions/ResponseActions.scss

@@ -3,7 +3,8 @@
   gap: var(--pf-t--global--spacer--xs);
   grid-template-columns: repeat(auto-fit, minmax(0, max-content));
 
-  .pf-v6-c-button {
+  .pf-chatbot__button--response-action.pf-v6-c-button.pf-m-plain.pf-m-small {
+    --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
     border-radius: var(--pf-t--global--border--radius--pill);
     width: 2.3125rem;
     height: 2.3125rem;
@@ -11,16 +12,17 @@
     align-items: center;
     justify-content: center;
 
-    .pf-v6-c-button__icon {
-      color: var(--pf-t--global--icon--color--subtle);
+    &:hover {
+      --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
     }
-
-    // Interactive states
-    &:hover,
     &:focus {
-      .pf-v6-c-button__icon {
-        color: var(--pf-t--global--icon--color--subtle);
-      }
+      --pf-v6-c-button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
+      --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
     }
   }
 }
+
+.pf-v6-c-button.pf-chatbot__button--response-action-clicked.pf-v6-c-button.pf-m-plain.pf-m-small {
+  --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
+}

package/src/ResponseActions/ResponseActions.test.tsx

@@ -4,27 +4,32 @@ import '@testing-library/jest-dom';
 import ResponseActions from './ResponseActions';
 import userEvent from '@testing-library/user-event';
 import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons';
+import Message from '../Message';
 
 const ALL_ACTIONS = [
-  { type: 'positive', label: 'Good response' },
-  { type: 'negative', label: 'Bad response' },
-  { type: 'copy', label: 'Copy' },
-  { type: 'share', label: 'Share' },
-  { type: 'listen', label: 'Listen' }
+  { type: 'positive', label: 'Good response', clickedLabel: 'Response recorded' },
+  { type: 'negative', label: 'Bad response', clickedLabel: 'Response recorded' },
+  { type: 'copy', label: 'Copy', clickedLabel: 'Copied' },
+  { type: 'share', label: 'Share', clickedLabel: 'Shared' },
+  { type: 'listen', label: 'Listen', clickedLabel: 'Listening' }
 ];
 
 const CUSTOM_ACTIONS = [
   {
     regenerate: {
       ariaLabel: 'Regenerate',
+      clickedAriaLabel: 'Regenerated',
       onClick: jest.fn(),
       tooltipContent: 'Regenerate',
+      clickedTooltipContent: 'Regenerated',
       icon: <RedoIcon />
     },
     download: {
       ariaLabel: 'Download',
+      clickedAriaLabel: 'Downloaded',
       onClick: jest.fn(),
       tooltipContent: 'Download',
+      clickedTooltipContent: 'Downloaded',
       icon: <DownloadIcon />
     },
     info: {
@@ -37,6 +42,81 @@ const CUSTOM_ACTIONS = [
 ];
 
 describe('ResponseActions', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should handle click within group of buttons correctly', async () => {
+    render(
+      <ResponseActions
+        actions={{
+          positive: { onClick: jest.fn() },
+          negative: { onClick: jest.fn() },
+          copy: { onClick: jest.fn() },
+          share: { onClick: jest.fn() },
+          listen: { onClick: jest.fn() }
+        }}
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: 'Good response' });
+    const badBtn = screen.getByRole('button', { name: 'Bad response' });
+    const copyBtn = screen.getByRole('button', { name: 'Copy' });
+    const shareBtn = screen.getByRole('button', { name: 'Share' });
+    const listenBtn = screen.getByRole('button', { name: 'Listen' });
+    const buttons = [goodBtn, badBtn, copyBtn, shareBtn, listenBtn];
+    buttons.forEach((button) => {
+      expect(button).toBeTruthy();
+    });
+    await userEvent.click(goodBtn);
+    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+    let unclickedButtons = buttons.filter((button) => button !== goodBtn);
+    unclickedButtons.forEach((button) => {
+      expect(button).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    });
+    await userEvent.click(badBtn);
+    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+    unclickedButtons = buttons.filter((button) => button !== badBtn);
+    unclickedButtons.forEach((button) => {
+      expect(button).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    });
+  });
+  it('should handle click outside of group of buttons correctly', async () => {
+    // using message just so we have something outside the group that's rendered
+    render(
+      <Message
+        name="Bot"
+        role="bot"
+        avatar=""
+        content="Example with all prebuilt actions"
+        actions={{
+          positive: {},
+          negative: {}
+        }}
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: 'Good response' });
+    const badBtn = screen.getByRole('button', { name: 'Bad response' });
+    expect(goodBtn).toBeTruthy();
+    expect(badBtn).toBeTruthy();
+
+    await userEvent.click(goodBtn);
+    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+    expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(badBtn);
+    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+    expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    await userEvent.click(screen.getByText('Example with all prebuilt actions'));
+    expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
   it('should render buttons correctly', () => {
     ALL_ACTIONS.forEach(({ type, label }) => {
       render(<ResponseActions actions={{ [type]: { onClick: jest.fn() } }} />);
@@ -53,6 +133,24 @@ describe('ResponseActions', () => {
     });
   });
 
+  it('should swap clicked and non-clicked aria labels on click', async () => {
+    ALL_ACTIONS.forEach(async ({ type, label, clickedLabel }) => {
+      render(<ResponseActions actions={{ [type]: { onClick: jest.fn() } }} />);
+      expect(screen.getByRole('button', { name: label })).toBeTruthy();
+      await userEvent.click(screen.getByRole('button', { name: label }));
+      expect(screen.getByRole('button', { name: clickedLabel })).toBeTruthy();
+    });
+  });
+
+  it('should swap clicked and non-clicked tooltips on click', async () => {
+    ALL_ACTIONS.forEach(async ({ type, label, clickedLabel }) => {
+      render(<ResponseActions actions={{ [type]: { onClick: jest.fn() } }} />);
+      expect(screen.getByRole('button', { name: label })).toBeTruthy();
+      await userEvent.click(screen.getByRole('button', { name: label }));
+      expect(screen.getByRole('tooltip', { name: clickedLabel })).toBeTruthy();
+    });
+  });
+
   it('should be able to change aria labels', () => {
     const actions = [
       { type: 'positive', ariaLabel: 'Thumbs up' },

package/src/ResponseActions/ResponseActions.tsx

@@ -7,11 +7,13 @@ import {
   OutlinedCopyIcon
 } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
-import { TooltipProps } from '@patternfly/react-core';
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
 
-export interface ActionProps {
+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 */
@@ -20,10 +22,18 @@ 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 */
   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;
 }
 
 export interface ResponseActionProps {
@@ -38,74 +48,135 @@ 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'}
+          ref={positive.ref}
+          aria-expanded={positive['aria-expanded']}
+          aria-controls={positive['aria-controls']}
         ></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'}
+          ref={negative.ref}
+          aria-expanded={negative['aria-expanded']}
+          aria-controls={negative['aria-controls']}
         ></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'}
+          ref={copy.ref}
+          aria-expanded={copy['aria-expanded']}
+          aria-controls={copy['aria-controls']}
         ></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'}
+          ref={share.ref}
+          aria-expanded={share['aria-expanded']}
+          aria-controls={share['aria-controls']}
         ></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'}
+          ref={listen.ref}
+          aria-expanded={listen['aria-expanded']}
+          aria-controls={listen['aria-controls']}
         ></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}
+          ref={additionalActions[action]?.ref}
+          aria-expanded={additionalActions[action]?.['aria-expanded']}
+          aria-controls={additionalActions[action]?.['aria-controls']}
         />
       ))}
     </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: 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;
+}