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

package/src/Message/Message.test.tsx

@@ -9,6 +9,23 @@ import rehypeExternalLinks from '../__mocks__/rehype-external-links';
 import { AlertActionLink, Button, CodeBlockAction } from '@patternfly/react-core';
 import { DeepThinkingProps } from '../DeepThinking';
 
+// Mock the icon components
+jest.mock('@patternfly/react-icons', () => ({
+  OutlinedThumbsUpIcon: () => <div>OutlinedThumbsUpIcon</div>,
+  ThumbsUpIcon: () => <div>ThumbsUpIcon</div>,
+  OutlinedThumbsDownIcon: () => <div>OutlinedThumbsDownIcon</div>,
+  ThumbsDownIcon: () => <div>ThumbsDownIcon</div>,
+  OutlinedCopyIcon: () => <div>OutlinedCopyIcon</div>,
+  DownloadIcon: () => <div>DownloadIcon</div>,
+  ExternalLinkAltIcon: () => <div>ExternalLinkAltIcon</div>,
+  VolumeUpIcon: () => <div>VolumeUpIcon</div>,
+  PencilAltIcon: () => <div>PencilAltIcon</div>,
+  CheckIcon: () => <div>CheckIcon</div>,
+  CloseIcon: () => <div>CloseIcon</div>,
+  ExternalLinkSquareAltIcon: () => <div>ExternalLinkSquareAltIcon</div>,
+  TimesIcon: () => <div>TimesIcon</div>
+}));
+
 const ALL_ACTIONS = [
   { label: /Good response/i },
   { label: /Bad response/i },
@@ -1351,4 +1368,187 @@ describe('Message', () => {
     render(<Message alignment="end" avatar="./img" role="user" name="User" content="" />);
     expect(screen.getByRole('region')).toHaveClass('pf-m-end');
   });
+
+  // We're just testing the positive action here to ensure logic passes through as needed, the other actions are
+  // tested in ResponseActions.test.tsx along with other aspects of this functionality
+  it('should not swap icons when useFilledIconsOnClick is omitted', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        actions={{
+          positive: { onClick: jest.fn() }
+        }}
+      />
+    );
+
+    expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: /Good response/i }));
+
+    expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+    expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
+  });
+
+  it('should swap icons when useFilledIconsOnClick is true', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        actions={{
+          positive: { onClick: jest.fn() }
+        }}
+        useFilledIconsOnClick
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: /Good response/i }));
+
+    expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+    expect(screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
+  });
+
+  it('should apply pf-m-visible-interaction class to response actions when showActionsOnInteraction is true', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        showActionsOnInteraction
+        actions={{
+          positive: { onClick: jest.fn() }
+        }}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions');
+    expect(responseContainer).toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class to response actions when showActionsOnInteraction is false', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        showActionsOnInteraction={false}
+        actions={{
+          positive: { onClick: jest.fn() }
+        }}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions');
+    expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class to response actions by default', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        actions={{
+          positive: { onClick: jest.fn() }
+        }}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions');
+    expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should apply pf-m-visible-interaction class to grouped actions container when showActionsOnInteraction is true', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        showActionsOnInteraction
+        actions={[
+          {
+            positive: { onClick: jest.fn() },
+            negative: { onClick: jest.fn() }
+          },
+          {
+            copy: { onClick: jest.fn() }
+          }
+        ]}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions-groups');
+    expect(responseContainer).toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class to grouped actions container when showActionsOnInteraction is false', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        showActionsOnInteraction={false}
+        actions={[
+          {
+            positive: { onClick: jest.fn() },
+            negative: { onClick: jest.fn() }
+          },
+          {
+            copy: { onClick: jest.fn() }
+          }
+        ]}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions-groups');
+    expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class to grouped actions container by default', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        actions={[
+          {
+            positive: { onClick: jest.fn() },
+            negative: { onClick: jest.fn() }
+          },
+          {
+            copy: { onClick: jest.fn() }
+          }
+        ]}
+      />
+    );
+
+    const responseContainer = screen
+      .getByRole('button', { name: 'Good response' })
+      .closest('.pf-chatbot__response-actions-groups');
+    expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+  });
 });

package/src/Message/Message.tsx

@@ -114,6 +114,10 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
    * For finer control of multiple action groups, use persistActionSelection on each group.
    */
   persistActionSelection?: 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;
   /** Sources for message */
   sources?: SourcesCardProps;
   /** Label for the English word "AI," used to tag messages with role "bot" */
@@ -197,6 +201,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   hasNoImagesInUserMessages?: boolean;
   /** Sets background colors to be appropriate on primary chatbot background */
   isPrimary?: boolean;
+  /** When true, automatically swaps to filled icon variants when predefined actions are clicked. */
+  useFilledIconsOnClick?: boolean;
 }
 
 export const MessageBase: FunctionComponent<MessageProps> = ({
@@ -212,6 +218,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   isLoading,
   actions,
   persistActionSelection,
+  showActionsOnInteraction = false,
   sources,
   botWord = 'AI',
   loadingWord = 'Loading message',
@@ -249,6 +256,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   toolCall,
   hasNoImagesInUserMessages = true,
   isPrimary,
+  useFilledIconsOnClick,
   ...props
 }: MessageProps) => {
   const [messageText, setMessageText] = useState(content);
@@ -379,17 +387,28 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
                 {!isLoading && !isEditable && actions && (
                   <>
                     {Array.isArray(actions) ? (
-                      <div className="pf-chatbot__response-actions-groups">
+                      <div
+                        className={css(
+                          'pf-chatbot__response-actions-groups',
+                          showActionsOnInteraction && 'pf-m-visible-interaction'
+                        )}
+                      >
                         {actions.map((actionGroup, index) => (
                           <ResponseActions
                             key={index}
                             actions={actionGroup.actions || actionGroup}
                             persistActionSelection={persistActionSelection || actionGroup.persistActionSelection}
+                            useFilledIconsOnClick={useFilledIconsOnClick}
                           />
                         ))}
                       </div>
                     ) : (
-                      <ResponseActions actions={actions} persistActionSelection={persistActionSelection} />
+                      <ResponseActions
+                        actions={actions}
+                        persistActionSelection={persistActionSelection}
+                        useFilledIconsOnClick={useFilledIconsOnClick}
+                        showActionsOnInteraction={showActionsOnInteraction}
+                      />
                     )}
                   </>
                 )}

package/src/ResponseActions/ResponseActions.test.tsx

@@ -5,6 +5,21 @@ import userEvent from '@testing-library/user-event';
 import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons';
 import Message from '../Message';
 
+// Mock the icon components
+jest.mock('@patternfly/react-icons', () => ({
+  OutlinedThumbsUpIcon: () => <div>OutlinedThumbsUpIcon</div>,
+  ThumbsUpIcon: () => <div>ThumbsUpIcon</div>,
+  OutlinedThumbsDownIcon: () => <div>OutlinedThumbsDownIcon</div>,
+  ThumbsDownIcon: () => <div>ThumbsDownIcon</div>,
+  OutlinedCopyIcon: () => <div>OutlinedCopyIcon</div>,
+  DownloadIcon: () => <div>DownloadIcon</div>,
+  InfoCircleIcon: () => <div>InfoCircleIcon</div>,
+  RedoIcon: () => <div>RedoIcon</div>,
+  ExternalLinkAltIcon: () => <div>ExternalLinkAltIcon</div>,
+  VolumeUpIcon: () => <div>VolumeUpIcon</div>,
+  PencilAltIcon: () => <div>PencilAltIcon</div>
+}));
+
 const ALL_ACTIONS = [
   { type: 'positive', label: 'Good response', clickedLabel: 'Good response recorded' },
   { type: 'negative', label: 'Bad response', clickedLabel: 'Bad response recorded' },
@@ -421,4 +436,248 @@ describe('ResponseActions', () => {
     await userEvent.click(customBtn);
     expect(customBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
   });
+
+  it('should apply pf-m-visible-interaction class when showActionsOnInteraction is true', () => {
+    render(
+      <ResponseActions
+        data-testid="test-id"
+        actions={{
+          positive: { onClick: jest.fn() },
+          negative: { onClick: jest.fn() }
+        }}
+        showActionsOnInteraction
+      />
+    );
+
+    expect(screen.getByTestId('test-id')).toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class when showActionsOnInteraction is false', () => {
+    render(
+      <ResponseActions
+        data-testid="test-id"
+        actions={{
+          positive: { onClick: jest.fn() },
+          negative: { onClick: jest.fn() }
+        }}
+        showActionsOnInteraction={false}
+      />
+    );
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should not apply pf-m-visible-interaction class by default', () => {
+    render(
+      <ResponseActions
+        data-testid="test-id"
+        actions={{
+          positive: { onClick: jest.fn() },
+          negative: { onClick: jest.fn() }
+        }}
+      />
+    );
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass('pf-m-visible-interaction');
+  });
+
+  it('should render with custom className', () => {
+    render(
+      <ResponseActions
+        data-testid="test-id"
+        actions={{
+          positive: { onClick: jest.fn() },
+          negative: { onClick: jest.fn() }
+        }}
+        className="custom-class"
+      />
+    );
+
+    expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
+  });
+
+  describe('icon swapping with useFilledIconsOnClick', () => {
+    it('should render outline icons by default', () => {
+      render(
+        <ResponseActions
+          actions={{
+            positive: { onClick: jest.fn() },
+            negative: { onClick: jest.fn() }
+          }}
+        />
+      );
+
+      expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+      expect(screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
+
+      expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
+      expect(screen.queryByText('ThumbsDownIcon')).not.toBeInTheDocument();
+    });
+
+    describe('positive actions', () => {
+      it('should not swap positive icon when clicked and useFilledIconsOnClick is false', async () => {
+        const user = userEvent.setup();
+
+        render(
+          <ResponseActions
+            actions={{
+              positive: { onClick: jest.fn() }
+            }}
+            useFilledIconsOnClick={false}
+          />
+        );
+
+        await user.click(screen.getByRole('button', { name: 'Good response' }));
+
+        expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+        expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
+      });
+
+      it('should swap positive icon from outline to filled when clicked with useFilledIconsOnClick', async () => {
+        const user = userEvent.setup();
+
+        render(
+          <ResponseActions
+            actions={{
+              positive: { onClick: jest.fn() }
+            }}
+            useFilledIconsOnClick
+          />
+        );
+
+        await user.click(screen.getByRole('button', { name: 'Good response' }));
+
+        expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+        expect(screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
+      });
+
+      it('should revert positive icon to outline icon when clicking outside', async () => {
+        const user = userEvent.setup();
+
+        render(
+          <div>
+            <ResponseActions
+              actions={{
+                positive: { onClick: jest.fn() }
+              }}
+              useFilledIconsOnClick
+            />
+            <div data-testid="outside">Outside</div>
+          </div>
+        );
+
+        await user.click(screen.getByRole('button', { name: 'Good response' }));
+        expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+
+        await user.click(screen.getByTestId('outside'));
+        expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+      });
+
+      it('should not revert positive icon to outline icon when clicking outside if persistActionSelection is true', async () => {
+        const user = userEvent.setup();
+
+        render(
+          <div>
+            <ResponseActions
+              actions={{
+                positive: { onClick: jest.fn() }
+              }}
+              persistActionSelection
+              useFilledIconsOnClick
+            />
+            <div data-testid="outside">Outside</div>
+          </div>
+        );
+
+        await user.click(screen.getByRole('button', { name: 'Good response' }));
+        expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+
+        await user.click(screen.getByTestId('outside'));
+        expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+      });
+
+      describe('negative actions', () => {
+        it('should not swap negative icon when clicked and useFilledIconsOnClick is false', async () => {
+          const user = userEvent.setup();
+
+          render(
+            <ResponseActions
+              actions={{
+                negative: { onClick: jest.fn() }
+              }}
+              useFilledIconsOnClick={false}
+            />
+          );
+
+          await user.click(screen.getByRole('button', { name: 'Bad response' }));
+
+          expect(screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
+          expect(screen.queryByText('ThumbsDownIcon')).not.toBeInTheDocument();
+        });
+
+        it('should swap negative icon from outline to filled when clicked with useFilledIconsOnClick', async () => {
+          const user = userEvent.setup();
+
+          render(
+            <ResponseActions
+              actions={{
+                negative: { onClick: jest.fn() }
+              }}
+              useFilledIconsOnClick
+            />
+          );
+
+          await user.click(screen.getByRole('button', { name: 'Bad response' }));
+
+          expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
+          expect(screen.queryByText('OutlinedThumbsDownIcon')).not.toBeInTheDocument();
+        });
+
+        it('should revert negative icon to outline when clicking outside', async () => {
+          const user = userEvent.setup();
+
+          render(
+            <div>
+              <ResponseActions
+                actions={{
+                  negative: { onClick: jest.fn() }
+                }}
+                useFilledIconsOnClick
+              />
+              <div data-testid="outside">Outside</div>
+            </div>
+          );
+
+          await user.click(screen.getByRole('button', { name: 'Bad response' }));
+          expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
+
+          await user.click(screen.getByTestId('outside'));
+          expect(screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
+        });
+
+        it('should not revert negative icon to outline icon when clicking outside if persistActionSelection is true', async () => {
+          const user = userEvent.setup();
+
+          render(
+            <div>
+              <ResponseActions
+                actions={{
+                  negative: { onClick: jest.fn() }
+                }}
+                persistActionSelection
+                useFilledIconsOnClick
+              />
+              <div data-testid="outside">Outside</div>
+            </div>
+          );
+
+          await user.click(screen.getByRole('button', { name: 'Bad response' }));
+          expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
+
+          await user.click(screen.getByTestId('outside'));
+          expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
+        });
+      });
+    });
+  });
 });