Merge pull request #569 from rebeccaalpert/download

nicolethoen · web-flow · commit 582356777fa7 · 2025-06-09T16:42:59.000-04:00
feat(ResponseActions): Add built-in response action for download
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx
@@ -3,7 +3,6 @@ import { FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
 
 export const CustomActionExample: FunctionComponent = () => (
@@ -22,15 +21,6 @@ export const CustomActionExample: FunctionComponent = () => (
         clickedTooltipContent: 'Regenerated',
         icon: <RedoIcon />
       },
-      download: {
-        ariaLabel: 'Download',
-        clickedAriaLabel: 'Downloaded',
-        // eslint-disable-next-line no-console
-        onClick: () => console.log('Clicked download'),
-        tooltipContent: 'Download',
-        clickedTooltipContent: 'Downloaded',
-        icon: <DownloadIcon />
-      },
       info: {
         ariaLabel: 'Info',
         // eslint-disable-next-line no-console
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithResponseActions.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithResponseActions.tsx
@@ -17,7 +17,7 @@ export const ResponseActionExample: FunctionComponent = () => (
       // eslint-disable-next-line no-console
       copy: { onClick: () => console.log('Copy') },
       // eslint-disable-next-line no-console
-      share: { onClick: () => console.log('Share') },
+      download: { onClick: () => console.log('Download') },
       // eslint-disable-next-line no-console
       listen: { onClick: () => console.log('Listen') }
     }}
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithActions.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithActions.tsx
@@ -7,8 +7,8 @@ import { Checkbox, DropdownItem, DropdownList } from '@patternfly/react-core';
 
 const menuItems = [
   <DropdownList key="list-1">
-    <DropdownItem value="Share" id="Share">
-      Share
+    <DropdownItem value="Download" id="Download">
+      Download
     </DropdownItem>
     <DropdownItem value="Rename" id="Rename">
       Rename
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx
@@ -7,8 +7,8 @@ import { Checkbox, DropdownItem, DropdownList } from '@patternfly/react-core';
 
 const menuItems = [
   <DropdownList key="list-1">
-    <DropdownItem value="Share" id="Share">
-      Share
+    <DropdownItem value="Download" id="Download">
+      Download
     </DropdownItem>
     <DropdownItem value="Rename" id="Rename">
       Rename
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotWelcomeInteraction.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotWelcomeInteraction.tsx
@@ -80,7 +80,7 @@ export const ChatbotWelcomeInteractionDemo: FunctionComponent = () => {
           // eslint-disable-next-line no-console
           copy: { onClick: () => console.log('Copy') },
           // eslint-disable-next-line no-console
-          share: { onClick: () => console.log('Share') },
+          download: { onClick: () => console.log('Download') },
           // eslint-disable-next-line no-console
           listen: { onClick: () => console.log('Listen') }
         }
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx
@@ -132,7 +132,7 @@ const initialMessages: MessageProps[] = [
       positive: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Good response' }) },
       negative: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Bad response' }) },
       copy: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Copy' }) },
-      share: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Share' }) },
+      download: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Download' }) },
       listen: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Listen' }) }
     }
   }
@@ -269,7 +269,7 @@ export const ChatbotDemo: FunctionComponent = () => {
           positive: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Good response' }) },
           negative: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Bad response' }) },
           copy: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Copy' }) },
-          share: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Share' }) },
+          download: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Download' }) },
           listen: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Listen' }) }
         }
       });
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotCompact.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotCompact.tsx
@@ -117,7 +117,7 @@ const initialMessages: MessageProps[] = [
       // eslint-disable-next-line no-console
       copy: { onClick: () => console.log('Copy') },
       // eslint-disable-next-line no-console
-      share: { onClick: () => console.log('Share') },
+      download: { onClick: () => console.log('Download') },
       // eslint-disable-next-line no-console
       listen: { onClick: () => console.log('Listen') }
     }
@@ -256,7 +256,7 @@ export const ChatbotDemo: FunctionComponent = () => {
           // eslint-disable-next-line no-console
           copy: { onClick: () => console.log('Copy') },
           // eslint-disable-next-line no-console
-          share: { onClick: () => console.log('Share') },
+          download: { onClick: () => console.log('Download') },
           // eslint-disable-next-line no-console
           listen: { onClick: () => console.log('Listen') }
         }
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx
@@ -130,7 +130,7 @@ const initialMessages: MessageProps[] = [
       // eslint-disable-next-line no-console
       copy: { onClick: () => console.log('Copy') },
       // eslint-disable-next-line no-console
-      share: { onClick: () => console.log('Share') },
+      download: { onClick: () => console.log('Download') },
       // eslint-disable-next-line no-console
       listen: { onClick: () => console.log('Listen') }
     }
@@ -266,7 +266,7 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
           // eslint-disable-next-line no-console
           copy: { onClick: () => console.log('Copy') },
           // eslint-disable-next-line no-console
-          share: { onClick: () => console.log('Share') },
+          download: { onClick: () => console.log('Download') },
           // eslint-disable-next-line no-console
           listen: { onClick: () => console.log('Listen') }
         },
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotScrolling.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotScrolling.tsx
@@ -122,7 +122,7 @@ const initialMessages: MessageProps[] = [
       // eslint-disable-next-line no-console
       copy: { onClick: () => console.log('Copy') },
       // eslint-disable-next-line no-console
-      share: { onClick: () => console.log('Share') },
+      download: { onClick: () => console.log('Download') },
       // eslint-disable-next-line no-console
       listen: { onClick: () => console.log('Listen') }
     }
@@ -283,7 +283,7 @@ export const ChatbotScrollingDemo: React.FunctionComponent = () => {
           // eslint-disable-next-line no-console
           copy: { onClick: () => console.log('Copy') },
           // eslint-disable-next-line no-console
-          share: { onClick: () => console.log('Share') },
+          download: { onClick: () => console.log('Download') },
           // eslint-disable-next-line no-console
           listen: { onClick: () => console.log('Listen') }
         }
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx
@@ -128,7 +128,7 @@ const initialMessages: MessageProps[] = [
       // eslint-disable-next-line no-console
       copy: { onClick: () => console.log('Copy') },
       // eslint-disable-next-line no-console
-      share: { onClick: () => console.log('Share') },
+      download: { onClick: () => console.log('Download') },
       // eslint-disable-next-line no-console
       listen: { onClick: () => console.log('Listen') }
     }
@@ -257,7 +257,7 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
           // eslint-disable-next-line no-console
           copy: { onClick: () => console.log('Copy') },
           // eslint-disable-next-line no-console
-          share: { onClick: () => console.log('Share') },
+          download: { onClick: () => console.log('Download') },
           // eslint-disable-next-line no-console
           listen: { onClick: () => console.log('Listen') }
         },
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx
@@ -86,7 +86,7 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
             // eslint-disable-next-line no-console
             copy: { onClick: () => console.log('Copy') },
             // eslint-disable-next-line no-console
-            share: { onClick: () => console.log('Share') },
+            download: { onClick: () => console.log('Download') },
             // eslint-disable-next-line no-console
             listen: { onClick: () => console.log('Listen') }
           },
diff --git a/packages/module/src/Message/Message.test.tsx b/packages/module/src/Message/Message.test.tsx
@@ -428,6 +428,8 @@ describe('Message', () => {
           // eslint-disable-next-line no-console
           share: { onClick: () => console.log('Share') },
           // eslint-disable-next-line no-console
+          download: { onClick: () => console.log('Download') },
+          // eslint-disable-next-line no-console
           listen: { onClick: () => console.log('Listen') }
         }}
       />
@@ -454,6 +456,8 @@ describe('Message', () => {
           // eslint-disable-next-line no-console
           share: { onClick: () => console.log('Share') },
           // eslint-disable-next-line no-console
+          download: { onClick: () => console.log('Download') },
+          // eslint-disable-next-line no-console
           listen: { onClick: () => console.log('Listen') }
         }}
       />
diff --git a/packages/module/src/ResponseActions/ResponseActions.test.tsx b/packages/module/src/ResponseActions/ResponseActions.test.tsx
@@ -45,6 +45,7 @@ const ALL_ACTIONS_DATA_TEST = [
   { type: 'negative', label: 'Bad response', dataTestId: 'negative' },
   { type: 'copy', label: 'Copy', dataTestId: 'copy' },
   { type: 'share', label: 'Share', dataTestId: 'share' },
+  { type: 'download', label: 'Download', dataTestId: 'download' },
   { type: 'listen', label: 'Listen', dataTestId: 'listen' }
 ];
 
@@ -60,6 +61,7 @@ describe('ResponseActions', () => {
           negative: { onClick: jest.fn() },
           copy: { onClick: jest.fn() },
           share: { onClick: jest.fn() },
+          download: { onClick: jest.fn() },
           listen: { onClick: jest.fn() }
         }}
       />
@@ -68,8 +70,9 @@ describe('ResponseActions', () => {
     const badBtn = screen.getByRole('button', { name: 'Bad response' });
     const copyBtn = screen.getByRole('button', { name: 'Copy' });
     const shareBtn = screen.getByRole('button', { name: 'Share' });
+    const downloadBtn = screen.getByRole('button', { name: 'Download' });
     const listenBtn = screen.getByRole('button', { name: 'Listen' });
-    const buttons = [goodBtn, badBtn, copyBtn, shareBtn, listenBtn];
+    const buttons = [goodBtn, badBtn, copyBtn, shareBtn, downloadBtn, listenBtn];
     buttons.forEach((button) => {
       expect(button).toBeTruthy();
     });
@@ -166,6 +169,7 @@ describe('ResponseActions', () => {
       { type: 'negative', ariaLabel: 'Thumbs down' },
       { type: 'copy', ariaLabel: 'Copy the message' },
       { type: 'share', ariaLabel: 'Share it with friends' },
+      { type: 'download', ariaLabel: 'Download your cool message' },
       { type: 'listen', ariaLabel: 'Listen up' }
     ];
     actions.forEach(({ type, ariaLabel }) => {
diff --git a/packages/module/src/ResponseActions/ResponseActions.tsx b/packages/module/src/ResponseActions/ResponseActions.tsx
@@ -5,7 +5,8 @@ import {
   VolumeUpIcon,
   OutlinedThumbsUpIcon,
   OutlinedThumbsDownIcon,
-  OutlinedCopyIcon
+  OutlinedCopyIcon,
+  DownloadIcon
 } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
 import { ButtonProps, TooltipProps } from '@patternfly/react-core';
@@ -47,13 +48,14 @@ export interface ResponseActionProps {
     negative?: ActionProps;
     copy?: ActionProps;
     share?: ActionProps;
+    download?: ActionProps;
     listen?: ActionProps;
   };
 }
 
 export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ actions }) => {
   const [activeButton, setActiveButton] = useState<string>();
-  const { positive, negative, copy, share, listen, ...additionalActions } = actions;
+  const { positive, negative, copy, share, download, listen, ...additionalActions } = actions;
   const responseActions = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -152,6 +154,24 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
           aria-controls={share['aria-controls']}
         ></ResponseActionButton>
       )}
+      {download && (
+        <ResponseActionButton
+          {...download}
+          ariaLabel={download.ariaLabel ?? 'Download'}
+          clickedAriaLabel={download.ariaLabel ?? 'Downloaded'}
+          onClick={(e) => handleClick(e, 'download', download.onClick)}
+          className={download.className}
+          isDisabled={download.isDisabled}
+          tooltipContent={download.tooltipContent ?? 'Download'}
+          clickedTooltipContent={download.clickedTooltipContent ?? 'Downloaded'}
+          tooltipProps={download.tooltipProps}
+          icon={<DownloadIcon />}
+          isClicked={activeButton === 'download'}
+          ref={download.ref}
+          aria-expanded={download['aria-expanded']}
+          aria-controls={download['aria-controls']}
+        ></ResponseActionButton>
+      )}
       {listen && (
         <ResponseActionButton
           {...listen}

Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,7 @@ export const ChatbotWelcomeInteractionDemo: FunctionComponent = () => {`
`80`	`80`	`// eslint-disable-next-line no-console`
`81`	`81`	`copy: { onClick: () => console.log('Copy') },`
`82`	`82`	`// eslint-disable-next-line no-console`
`83`		`- share: { onClick: () => console.log('Share') },`
	`83`	`+ download: { onClick: () => console.log('Download') },`
`84`	`84`	`// eslint-disable-next-line no-console`
`85`	`85`	`listen: { onClick: () => console.log('Listen') }`
`86`	`86`	`}`
Original file line number	Diff line number	Diff line change
`@@ -132,7 +132,7 @@ const initialMessages: MessageProps[] = [`
`132`	`132`	`positive: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Good response' }) },`
`133`	`133`	`negative: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Bad response' }) },`
`134`	`134`	`copy: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Copy' }) },`
`135`		`- share: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Share' }) },`
	`135`	`+ download: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Download' }) },`
`136`	`136`	`listen: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Listen' }) }`
`137`	`137`	`}`
`138`	`138`	`}`
`@@ -269,7 +269,7 @@ export const ChatbotDemo: FunctionComponent = () => {`
`269`	`269`	`positive: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Good response' }) },`
`270`	`270`	`negative: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Bad response' }) },`
`271`	`271`	`copy: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Copy' }) },`
`272`		`- share: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Share' }) },`
	`272`	`+ download: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Download' }) },`
`273`	`273`	`listen: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Listen' }) }`
`274`	`274`	`}`
`275`	`275`	`});`