@patternfly/chatbot 2.2.0-prerelease.4 → 2.2.0-prerelease.6

package/patternfly-docs/content/extensions/chatbot/examples/UI/Settings.tsx

@@ -0,0 +1,289 @@
+import React from 'react';
+
+import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
+import {
+  Button,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+  Switch,
+  Title
+} from '@patternfly/react-core';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotHeader, {
+  ChatbotHeaderActions,
+  ChatbotHeaderCloseButton,
+  ChatbotHeaderMain,
+  ChatbotHeaderOptionsDropdown,
+  ChatbotHeaderTitle
+} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
+import { CogIcon, ExpandIcon, OpenDrawerRightIcon, OutlinedWindowRestoreIcon } from '@patternfly/react-icons';
+
+export const SettingsDemo: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+  const [isThemeOpen, setIsThemeOpen] = React.useState(false);
+  const [isLanguageOpen, setIsLanguageOpen] = React.useState(false);
+  const [isVoiceOpen, setIsVoiceOpen] = React.useState(false);
+  const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
+  const [areSettingsOpen, setAreSettingsOpen] = React.useState(true);
+  const chatbotVisible = true;
+
+  const onFocus = (id: string) => {
+    const element = document.getElementById(id);
+    (element as HTMLElement).focus();
+  };
+
+  const onThemeToggleClick = () => {
+    setIsThemeOpen(!isThemeOpen);
+  };
+
+  const onThemeSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', value);
+    onFocus('theme');
+    setIsThemeOpen(false);
+  };
+
+  const onLanguageToggleClick = () => {
+    setIsLanguageOpen(!isLanguageOpen);
+  };
+
+  const onLanguageSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', value);
+    onFocus('language');
+    setIsLanguageOpen(false);
+  };
+
+  const onVoiceToggleClick = () => {
+    onFocus('voice');
+    setIsVoiceOpen(!isVoiceOpen);
+  };
+
+  const onVoiceSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', value);
+    setIsVoiceOpen(false);
+  };
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const themeDropdown = (
+    <Dropdown
+      isOpen={isThemeOpen}
+      onSelect={onThemeSelect}
+      onOpenChange={(isOpen: boolean) => setIsThemeOpen(isOpen)}
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
+      shouldPreventScrollOnItemFocus
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <MenuToggle id="theme" ref={toggleRef} onClick={onThemeToggleClick} isExpanded={isThemeOpen}>
+          System
+        </MenuToggle>
+      )}
+      ouiaId="ThemeDropdown"
+    >
+      <DropdownList>
+        <DropdownItem value="System" key="system">
+          System
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+
+  const languageDropdown = (
+    <Dropdown
+      isOpen={isLanguageOpen}
+      onSelect={onLanguageSelect}
+      onOpenChange={(isOpen: boolean) => setIsLanguageOpen(isOpen)}
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
+      shouldPreventScrollOnItemFocus
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <MenuToggle id="language" ref={toggleRef} onClick={onLanguageToggleClick} isExpanded={isLanguageOpen}>
+          Auto-detect
+        </MenuToggle>
+      )}
+      ouiaId="LanguageDropdown"
+    >
+      <DropdownList>
+        <DropdownItem value="Auto-detect" key="auto-detect">
+          Auto-detect
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+  const voiceDropdown = (
+    <Dropdown
+      isOpen={isVoiceOpen}
+      onSelect={onVoiceSelect}
+      onOpenChange={(isOpen: boolean) => setIsVoiceOpen(isOpen)}
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
+      shouldPreventScrollOnItemFocus
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <MenuToggle id="voice" ref={toggleRef} onClick={onVoiceToggleClick} isExpanded={isVoiceOpen}>
+          Bot
+        </MenuToggle>
+      )}
+      ouiaId="VoiceDropdown"
+    >
+      <DropdownList>
+        <DropdownItem value="Bot" key="bot">
+          Bot
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+  const children = [
+    { id: 'theme', label: 'Theme', field: themeDropdown },
+    { id: 'language', label: 'Language', field: languageDropdown },
+    { id: 'voice', label: 'Voice', field: voiceDropdown },
+    {
+      id: 'analytics',
+      label: 'Share analytics',
+      field: (
+        <Switch
+          // We want to add the id property here as well so the label is coupled
+          // with the button on screen readers.
+          id="analytics"
+          aria-label="Togglable option for whether to share analytics"
+          isChecked={isChecked}
+          onChange={handleChange}
+        />
+      )
+    },
+    {
+      id: 'archived-chat',
+      label: 'Archive chat',
+      field: (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <Button id="archived-chat" variant="secondary">
+          Manage
+        </Button>
+      )
+    },
+    {
+      id: 'archive-all',
+      label: 'Archive all chat',
+      field: (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <Button id="archive-all" variant="secondary">
+          Archive all
+        </Button>
+      )
+    },
+    {
+      id: 'delete-all',
+      label: 'Delete all chats',
+      field: (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <Button id="delete-all" variant="danger">
+          Delete all
+        </Button>
+      )
+    }
+  ];
+
+  const onSelectDropdownItem = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    if (value === 'Settings') {
+      setAreSettingsOpen(true);
+    } else {
+      setDisplayMode(value as ChatbotDisplayMode);
+    }
+  };
+
+  const regularChatbot = (
+    <ChatbotHeader>
+      <ChatbotHeaderActions>
+        <ChatbotHeaderOptionsDropdown onSelect={onSelectDropdownItem}>
+          <DropdownGroup label="Display mode">
+            <DropdownList>
+              <DropdownItem
+                value={ChatbotDisplayMode.default}
+                key="switchDisplayOverlay"
+                icon={<OutlinedWindowRestoreIcon aria-hidden />}
+                isSelected={displayMode === ChatbotDisplayMode.default}
+              >
+                <span>Overlay</span>
+              </DropdownItem>
+              <DropdownItem
+                value={ChatbotDisplayMode.docked}
+                key="switchDisplayDock"
+                icon={<OpenDrawerRightIcon aria-hidden />}
+                isSelected={displayMode === ChatbotDisplayMode.docked}
+              >
+                <span>Dock to window</span>
+              </DropdownItem>
+              <DropdownItem
+                value={ChatbotDisplayMode.fullscreen}
+                key="switchDisplayFullscreen"
+                icon={<ExpandIcon aria-hidden />}
+                isSelected={displayMode === ChatbotDisplayMode.fullscreen}
+              >
+                <span>Fullscreen</span>
+              </DropdownItem>
+            </DropdownList>
+          </DropdownGroup>
+          <Divider />
+          <DropdownList>
+            <DropdownItem value="Settings" key="switchSettings" icon={<CogIcon aria-hidden />}>
+              <span>Settings</span>
+            </DropdownItem>
+          </DropdownList>
+        </ChatbotHeaderOptionsDropdown>
+      </ChatbotHeaderActions>
+    </ChatbotHeader>
+  );
+
+  return (
+    <>
+      <Chatbot isVisible={chatbotVisible} displayMode={displayMode}>
+        {areSettingsOpen ? (
+          <>
+            <ChatbotHeader>
+              <ChatbotHeaderMain>
+                <ChatbotHeaderTitle>
+                  <Title headingLevel="h1" size="2xl">
+                    Settings
+                  </Title>
+                </ChatbotHeaderTitle>
+              </ChatbotHeaderMain>
+              <ChatbotHeaderCloseButton onClick={() => setAreSettingsOpen(false)} />
+            </ChatbotHeader>
+            <SettingsForm fields={children} />
+          </>
+        ) : (
+          <>{regularChatbot}</>
+        )}
+      </Chatbot>
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -55,6 +55,7 @@ import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
 import TermsOfUse from '@patternfly/chatbot/dist/dynamic/TermsOfUse';
 import {
 ChatbotHeader,
+ChatbotHeaderCloseButton,
 ChatbotHeaderMain,
 ChatbotHeaderMenu,
 ChatbotHeaderActions,
@@ -66,6 +67,7 @@ import { ChatbotFooter, ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic
 import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
 import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
 import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
+import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
 import { useDropzone } from 'react-dropzone';
 
@@ -75,11 +77,13 @@ import { DropdownItem, DropdownList, Checkbox } from '@patternfly/react-core';
 import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
 import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import termsAndConditionsHeader from './PF-TermsAndConditionsHeader.svg';
+import { CloseIcon } from '@patternfly/react-icons';
 
 ## Structure
 
@@ -377,6 +381,16 @@ This example also includes an example of how to use [skip to content](/patternfl
 
 ```
 
+### Settings
+
+To contain user preference controls and other ChatBot setting options, you can create a separate settings page that can accept any number of buttons, dropdown menus, toggles, labels, and so on. This settings page will render all components appropriately within all 4 display modes.
+
+In this demo, you can toggle the settings page by clicking the "Settings" button in the display mode menu.
+
+```js file="./Settings.tsx" isFullscreen
+
+```
+
 ## Modals
 
 ### Modal

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -66,7 +66,7 @@ This demo displays a basic ChatBot, which includes:
 4. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
 
 - A `<ChatbotWelcomePrompt>`
-- An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages#messages-actions)
+- An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages#message-actions)
 - Logic for enabling auto-scrolling to the most recent message whenever a new message is sent or received using a `scrollToBottomRef`
 
 5. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>` that contains the abilities of:
@@ -92,7 +92,7 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
 3. A [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) with all built sub-components laid out, including a `<ChatbotHeaderTitle>`
 4. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
    - A `<ChatbotWelcomePrompt>`
-   - An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages/#messages-actions)
+   - An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages/#message-actions)
    - Logic for enabling auto-scrolling to the most recent message whenever a new message is sent or received using a `scrollToBottomRef`
 5. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>` that contains the abilities of:
    - [Speech to text.](/patternfly-ai/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)

package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { CloseIcon } from '@patternfly/react-icons';
+
+export interface ChatbotHeaderCloseButtonProps {
+  /** Callback function for when button is clicked */
+  onClick: () => void;
+  /** Custom classname for the header component */
+  className?: string;
+  /** Props spread to the PF Tooltip component wrapping the display mode dropdown */
+  tooltipProps?: TooltipProps;
+  /** Aria label for menu */
+  menuAriaLabel?: string;
+  /** Ref applied to menu */
+  innerRef?: React.Ref<HTMLButtonElement>;
+  /** Content used in tooltip */
+  tooltipContent?: string;
+}
+
+const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseButtonProps> = ({
+  className,
+  onClick,
+  tooltipProps,
+  menuAriaLabel = 'Close',
+  innerRef,
+  tooltipContent = 'Close'
+}: ChatbotHeaderCloseButtonProps) => (
+  <div className={`pf-chatbot__menu ${className}`}>
+    <Tooltip content={tooltipContent} position="bottom" {...tooltipProps}>
+      <Button
+        className="pf-chatbot__button--toggle-menu"
+        variant="plain"
+        onClick={onClick}
+        aria-label={menuAriaLabel}
+        ref={innerRef}
+        icon={
+          <Icon size="xl" isInline>
+            <CloseIcon />
+          </Icon>
+        }
+      />
+    </Tooltip>
+  </div>
+);
+
+export const ChatbotHeaderCloseButton = React.forwardRef(
+  (props: ChatbotHeaderCloseButtonProps, ref: React.Ref<HTMLButtonElement>) => (
+    <ChatbotHeaderCloseButtonBase innerRef={ref} {...props} />
+  )
+);

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -14,6 +14,8 @@ export interface ChatbotHeaderMenuProps {
   menuAriaLabel?: string;
   /** Ref applied to menu */
   innerRef?: React.Ref<HTMLButtonElement>;
+  /** Content used in tooltip */
+  tooltipContent?: string;
 }
 
 const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = ({
@@ -21,10 +23,11 @@ const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = (
   onMenuToggle,
   tooltipProps,
   menuAriaLabel = 'Toggle menu',
-  innerRef
+  innerRef,
+  tooltipContent = 'Menu'
 }: ChatbotHeaderMenuProps) => (
   <div className={`pf-chatbot__menu ${className}`}>
-    <Tooltip content="Menu" position="bottom" {...tooltipProps}>
+    <Tooltip content={tooltipContent} position="bottom" {...tooltipProps}>
       <Button
         className="pf-chatbot__button--toggle-menu"
         variant="plain"

package/src/ChatbotHeader/index.ts

@@ -7,3 +7,4 @@ export * from './ChatbotHeaderMenu';
 export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
+export * from './ChatbotHeaderCloseButton';

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,60 @@ 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;
 }
 
 export const ResponseActionButton: 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
+}) => {
+  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}
+      {...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"
+      ></Button>
+    </Tooltip>
+  );
+};
 
 export default ResponseActionButton;

package/src/ResponseActions/ResponseActions.scss

@@ -4,6 +4,7 @@
   grid-template-columns: repeat(auto-fit, minmax(0, max-content));
 
   .pf-v6-c-button {
+    --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--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);
+}