feat(Message): Add support for code block custom actions

Allow for props passage down to code blocks so users can add custom message content. This was a request from OpenShift Lightspeed.

Author: rebeccaalpert

packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.scss

@@ -30,7 +30,8 @@
       font-family: var(--pf-t--global--font--family--body);
     }
 
-    .pf-v6-c-code-block__actions-item {
+    // we are overriding some default PatternFly positioning here - it's only necessary for the first two items
+    .pf-chatbot__message-code-block-default-action {
       display: flex;
       align-items: center;
       justify-content: space-between;

packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -37,6 +37,8 @@ export interface CodeBlockMessageProps {
   expandedText?: string;
   /** Link text applied to expandable toggle when collapsed */
   collapsedText?: string;
+  /** Custom actions added to header of code block */
+  customActions?: React.ReactNode;
 }
 
 const DEFAULT_EXPANDED_TEXT = 'Show less';
@@ -51,6 +53,7 @@ const CodeBlockMessage = ({
   expandableSectionToggleProps,
   expandedText = DEFAULT_EXPANDED_TEXT,
   collapsedText = DEFAULT_COLLAPSED_TEXT,
+  customActions,
   ...props
 }: CodeBlockMessageProps) => {
   const [copied, setCopied] = useState(false);
@@ -114,7 +117,7 @@ const CodeBlockMessage = ({
   // Setup code block header
   const actions = (
     <>
-      <CodeBlockAction>
+      <CodeBlockAction className="pf-chatbot__message-code-block-default-action">
         {language && <div className="pf-chatbot__message-code-block-language">{language}</div>}
         <Button
           ref={buttonRef}
@@ -127,6 +130,7 @@ const CodeBlockMessage = ({
         </Button>
         <Tooltip id={tooltipID} content="Copy" position="top" triggerRef={buttonRef} />
       </CodeBlockAction>
+      {customActions}
     </>
   );
 

packages/module/src/Message/Message.test.tsx

@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quickstart';
 import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image';
 import rehypeExternalLinks from '../__mocks__/rehype-external-links';
-import { AlertActionLink } from '@patternfly/react-core';
+import { AlertActionLink, Button, CodeBlockAction } from '@patternfly/react-core';
 import { DeepThinkingProps } from '../DeepThinking';
 
 const ALL_ACTIONS = [
@@ -612,6 +612,24 @@ describe('Message', () => {
     );
     expect(screen.getByRole('button', { name: 'test' })).toBeTruthy();
   });
+  it('should be able to add custom actions to CodeMessage', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={CODE_MESSAGE}
+        codeBlockProps={{
+          customActions: (
+            <CodeBlockAction>
+              <Button>New custom action</Button>
+            </CodeBlockAction>
+          )
+        }}
+      />
+    );
+    expect(screen.getByRole('button', { name: /New custom action/i })).toBeTruthy();
+  });
   it('should handle hasRoundAvatar correctly when it is true', () => {
     render(<Message avatar="./img" role="user" name="User" content="Hi" hasRoundAvatar />);
     expect(screen.getByRole('img')).toBeTruthy();

packages/module/src/Message/Message.tsx

@@ -11,16 +11,14 @@ import {
   AvatarProps,
   ButtonProps,
   ContentVariants,
-  ExpandableSectionProps,
-  ExpandableSectionToggleProps,
   FormProps,
   Label,
   LabelGroupProps,
   Timestamp,
   Truncate
 } from '@patternfly/react-core';
 import MessageLoading from './MessageLoading';
-import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
+import CodeBlockMessage, { CodeBlockMessageProps } from './CodeBlockMessage/CodeBlockMessage';
 import TextMessage from './TextMessage/TextMessage';
 import FileDetailsLabel from '../FileDetailsLabel/FileDetailsLabel';
 import ResponseActions, { ActionProps } from '../ResponseActions/ResponseActions';
@@ -114,24 +112,7 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   /** Label for the English "Loading message," displayed to screenreaders when loading a message */
   loadingWord?: string;
   /** Props for code blocks */
-  codeBlockProps?: {
-    /** Aria label applied to code blocks */
-    'aria-label'?: string;
-    /** Class name applied to code blocks */
-    className?: string;
-    /** Whether code blocks are expandable */
-    isExpandable?: boolean;
-    /** Length of text initially shown in expandable code blocks; defaults to 10 characters */
-    maxLength?: number;
-    /** Additional props passed to expandable section if isExpandable is applied */
-    expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
-    /** Additional props passed to expandable toggle if isExpandable is applied */
-    expandableSectionToggleProps?: ExpandableSectionToggleProps;
-    /** Link text applied to expandable toggle when expanded */
-    expandedText?: string;
-    /** Link text applied to expandable toggle when collapsed */
-    collapsedText?: string;
-  };
+  codeBlockProps?: CodeBlockMessageProps;
   /** Props for quick responses */
   quickResponses?: QuickResponse[];
   /** Props for quick responses container */