@patternfly/chatbot 6.5.0-prerelease.2 → 6.5.0-prerelease.21

package/src/ResponseActions/ResponseActions.test.tsx

@@ -6,8 +6,8 @@ import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons'
 import Message from '../Message';
 
 const ALL_ACTIONS = [
-  { type: 'positive', label: 'Good response', clickedLabel: 'Response recorded' },
-  { type: 'negative', label: 'Bad response', clickedLabel: 'Response recorded' },
+  { type: 'positive', label: 'Good response', clickedLabel: 'Good response recorded' },
+  { type: 'negative', label: 'Bad response', clickedLabel: 'Bad response recorded' },
   { type: 'copy', label: 'Copy', clickedLabel: 'Copied' },
   { type: 'edit', label: 'Edit', clickedLabel: 'Editing' },
   { type: 'share', label: 'Share', clickedLabel: 'Shared' },
@@ -81,7 +81,7 @@ describe('ResponseActions', () => {
       expect(button).toBeTruthy();
     });
     await userEvent.click(goodBtn);
-    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+    expect(screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass(
       'pf-chatbot__button--response-action-clicked'
     );
     let unclickedButtons = buttons.filter((button) => button !== goodBtn);
@@ -89,7 +89,7 @@ describe('ResponseActions', () => {
       expect(button).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     });
     await userEvent.click(badBtn);
-    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+    expect(screen.getByRole('button', { name: 'Bad response recorded' })).toHaveClass(
       'pf-chatbot__button--response-action-clicked'
     );
     unclickedButtons = buttons.filter((button) => button !== badBtn);
@@ -117,13 +117,13 @@ describe('ResponseActions', () => {
     expect(badBtn).toBeTruthy();
 
     await userEvent.click(goodBtn);
-    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+    expect(screen.getByRole('button', { name: 'Good 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(
+    expect(screen.getByRole('button', { name: 'Bad response recorded' })).toHaveClass(
       'pf-chatbot__button--response-action-clicked'
     );
     expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
@@ -238,30 +238,30 @@ describe('ResponseActions', () => {
   });
 
   it('should be able to call onClick correctly', async () => {
-    ALL_ACTIONS.forEach(async ({ type, label }) => {
+    for (const { type, label } of ALL_ACTIONS) {
       const spy = jest.fn();
       render(<ResponseActions actions={{ [type]: { onClick: spy } }} />);
       await userEvent.click(screen.getByRole('button', { name: label }));
       expect(spy).toHaveBeenCalledTimes(1);
-    });
+    }
   });
 
   it('should swap clicked and non-clicked aria labels on click', async () => {
-    ALL_ACTIONS.forEach(async ({ type, label, clickedLabel }) => {
+    for (const { type, label, clickedLabel } of ALL_ACTIONS) {
       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 }) => {
+    for (const { type, label, clickedLabel } of ALL_ACTIONS) {
       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', () => {
@@ -322,4 +322,103 @@ describe('ResponseActions', () => {
       expect(screen.getByTestId(action[key])).toBeTruthy();
     });
   });
+
+  // we are testing for the reverse case already above
+  it('should not deselect when clicking outside when persistActionSelection is true', async () => {
+    render(
+      <Message
+        name="Bot"
+        role="bot"
+        avatar=""
+        content="Test content"
+        actions={{
+          positive: {},
+          negative: {}
+        }}
+        persistActionSelection
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: 'Good response' });
+
+    await userEvent.click(goodBtn);
+    expect(screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+
+    await userEvent.click(screen.getByText('Test content'));
+
+    expect(screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+  });
+
+  it('should switch selection to another button when persistActionSelection is true', async () => {
+    render(
+      <Message
+        name="Bot"
+        role="bot"
+        avatar=""
+        content="Test content"
+        actions={{
+          positive: {},
+          negative: {}
+        }}
+        persistActionSelection
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: 'Good response' });
+    const badBtn = screen.getByRole('button', { name: 'Bad response' });
+
+    await userEvent.click(goodBtn);
+    expect(goodBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(badBtn);
+    expect(badBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should toggle off when clicking the same button when persistActionSelection is true', async () => {
+    render(
+      <Message
+        name="Bot"
+        role="bot"
+        avatar=""
+        content="Test content"
+        actions={{
+          positive: {},
+          negative: {}
+        }}
+        persistActionSelection
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: 'Good response' });
+
+    await userEvent.click(goodBtn);
+    expect(goodBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(goodBtn);
+    expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should work with custom actions when persistActionSelection is true', async () => {
+    const actions = {
+      positive: { 'data-testid': 'positive', onClick: jest.fn() },
+      negative: { 'data-testid': 'negative', onClick: jest.fn() },
+      custom: {
+        'data-testid': 'custom',
+        onClick: jest.fn(),
+        ariaLabel: 'Custom',
+        tooltipContent: 'Custom action',
+        icon: <DownloadIcon />
+      }
+    };
+    render(<ResponseActions actions={actions} persistActionSelection />);
+
+    const customBtn = screen.getByTestId('custom');
+    await userEvent.click(customBtn);
+    expect(customBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(customBtn);
+    expect(customBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
 });

package/src/ResponseActions/ResponseActions.tsx

@@ -53,11 +53,20 @@ export interface ResponseActionProps {
     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;
 }
 
-export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ actions }) => {
+export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
+  actions,
+  persistActionSelection = false
+}) => {
   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'];
@@ -82,13 +91,21 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
       // Click state is explicitly controlled by consumer.
       setClickStatePersisted(true);
     }
+    // If persistActionSelection is true, all selections are persisted
+    if (persistActionSelection) {
+      setClickStatePersisted(true);
+    }
     setActiveButton(initialActive);
-  }, [actions]);
+  }, [actions, persistActionSelection]);
 
-  const { positive, negative, copy, edit, share, download, listen, ...additionalActions } = actions;
   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);
@@ -99,15 +116,26 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
     return () => {
       window.removeEventListener('click', handleClickOutside);
     };
-  }, [clickStatePersisted]);
+  }, [clickStatePersisted, persistActionSelection]);
 
   const handleClick = (
     e: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent,
     id: string,
     onClick?: (event: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent) => void
   ) => {
-    setClickStatePersisted(false);
-    setActiveButton(id);
+    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);
   };
 
@@ -117,12 +145,12 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
         <ResponseActionButton
           {...positive}
           ariaLabel={positive.ariaLabel ?? 'Good response'}
-          clickedAriaLabel={positive.ariaLabel ?? 'Response recorded'}
+          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 ?? 'Response recorded'}
+          clickedTooltipContent={positive.clickedTooltipContent ?? 'Good response recorded'}
           tooltipProps={positive.tooltipProps}
           icon={<OutlinedThumbsUpIcon />}
           isClicked={activeButton === 'positive'}
@@ -135,12 +163,12 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
         <ResponseActionButton
           {...negative}
           ariaLabel={negative.ariaLabel ?? 'Bad response'}
-          clickedAriaLabel={negative.ariaLabel ?? 'Response recorded'}
+          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 ?? 'Response recorded'}
+          clickedTooltipContent={negative.clickedTooltipContent ?? 'Bad response recorded'}
           tooltipProps={negative.tooltipProps}
           icon={<OutlinedThumbsDownIcon />}
           isClicked={activeButton === 'negative'}

package/src/ToolCall/ToolCall.scss

@@ -1,6 +1,6 @@
 .pf-chatbot__tool-call {
-  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
   --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
 
   overflow: unset;
   row-gap: var(--pf-t--global--spacer--sm);

package/src/ToolResponse/ToolResponse.scss

@@ -1,5 +1,5 @@
 .pf-chatbot__tool-response {
-  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
   overflow: unset;
 }
 
@@ -25,12 +25,12 @@
 }
 
 .pf-chatbot__tool-response-card {
-  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-card--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
 
   .pf-v6-c-divider {
-    --pf-v6-c-divider--Color: var(--pf-t--global--border--color--control--read-only);
+    --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
   }
 }

package/src/__mocks__/monaco-editor.ts

@@ -0,0 +1,19 @@
+const mockEditor = {
+  layout: jest.fn(),
+  focus: jest.fn(),
+  dispose: jest.fn(),
+  getModel: jest.fn(),
+  updateOptions: jest.fn()
+};
+
+const mockModel = {
+  updateOptions: jest.fn(),
+  dispose: jest.fn()
+};
+
+module.exports = {
+  editor: {
+    create: jest.fn(() => mockEditor),
+    getModels: jest.fn(() => [mockModel])
+  }
+};

package/src/__mocks__/rehype-highlight.ts

@@ -0,0 +1,3 @@
+const rehypeHighlight = () => (tree) => tree;
+
+export default rehypeHighlight;

package/src/index.ts

@@ -75,6 +75,9 @@ export * from './MessageBox';
 export { default as MessageDivider } from './MessageDivider';
 export * from './MessageDivider';
 
+export { default as Onboarding } from './Onboarding';
+export * from './Onboarding';
+
 export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 

package/src/main.scss

@@ -31,6 +31,7 @@
 @import './MessageBox/MessageBox';
 @import './MessageDivider/MessageDivider';
 @import './MessageBox/JumpButton';
+@import './Onboarding/Onboarding';
 @import './ResponseActions/ResponseActions';
 @import './Settings/Settings';
 @import './SourcesCard/SourcesCard.scss';

package/tsconfig.json

@@ -5,7 +5,7 @@
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
     "target": "es2015" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
-    "module": "es2015" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "module": "es2020" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */

package/patternfly-docs/content/extensions/chatbot/about-chatbot.md

@@ -1,44 +0,0 @@
----
-section: PatternFly-AI
-subsection: ChatBot
-id: Overview
-sortValue: 1
-source: About
----
-
-**Note:** The PatternFly ChatBot extension lives in its own package [`@patternfly/chatbot`](https://www.npmjs.com/package/@patternfly/chatbot)
-
-It is important to leverage AI in a way that improves the experiences of your users. In alignment with our [AI principles](/patternfly-ai/about-ai#ai-principles) and [ethical design guidelines,](/patternfly-ai/ai-guidelines) we've created this ChatBot extension. The PatternFly ChatBot contains a React implementation of an AI ChatBot, to provide your users with access to convenient and persistent help.
-
-_Only use this ChatBot when it adds value to your users' experiences._ Don't use it simply for the sake of novelty—your users will only be excited to interact with a new ChatBot feature if it directly helps them reach their goals.
-
-## ChatBot demos
-
-To illustrate the capabilities of the ChatBot, including more complex interaction patterns, we've created these demos: 
-- [Basic ChatBot](/patternfly-ai/chatbot/overview/demo#basic-chatbot)
-- [Embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot)
-- [Comparing ChatBots](/patternfly-ai/chatbot/overview/demo/#comparing-chatbots)
-- [Message feedback](/patternfly-ai/chatbot/messages/demo#message-feedback)
-- [ChatBot attachments via file upload](/patternfly-ai/chatbot/messages/demo#attach-via-upload-button-in-message-bar)
-- [ChatBot attachments via built-in menu](/patternfly-ai/chatbot/messages/demo#attach-via-menu-of-options-in-message-bar)
-
-To learn how to write for ChatBot experiences, refer to our [conversation design guidelines](/patternfly-ai/conversation-design/#writing-for-chatbots).
-
-To learn how to design ChatBot experiences, [refer to the design guidelines](/patternfly-ai/chatbot/overview/design-guidelines).
-
-Explore our documentation, which covers both ChatBot UI components and message-related components:
-- UI
-    - [Structural elements](/patternfly-ai/chatbot/ui#structure)
-    - [Toggle](/patternfly-ai/chatbot/ui#toggle)
-    - [Header](/patternfly-ai/chatbot/ui#header)
-    - [Footer](/patternfly-ai/chatbot/ui#footer)
-    - [Navigation](/patternfly-ai/chatbot/ui#navigation)
-    - [Modals](/patternfly-ai/chatbot/ui#modals)
-- Messages
-    - [Bot and user messages](/patternfly-ai/chatbot/messages)
-    - [File attachments](/patternfly-ai/chatbot/messages#attachments)
-- Analytics support
-    - [Overview](/patternfly-ai/chatbot/analytics)
-  
-
-We will continue to grow and evolve our ChatBot. If you notice a bug or have any suggestions, feel free to file an issue in our [GitHub repository!](https://github.com/patternfly/chatbot/issues) Make sure to check if there is already a pre-existing issue before creating a new one.