From b762b14205b1b5b4fd71af7f1679a588e9f47094 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Sun, 27 Oct 2024 12:09:19 -0400
Subject: [PATCH] fix(Message): Allow additional props on CodeMessage

Exposes API to consumers, which allows direct passage of props to CodeMessage.
---
 .../src/Message/CodeBlockMessage/CodeBlockMessage.tsx    | 9 +++++++--
 packages/module/src/Message/Message.tsx                  | 7 ++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx b/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx
index 6c6d714a..de10ff87 100644
--- a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx
+++ b/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx
@@ -11,7 +11,12 @@ import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import { ExtraProps } from 'react-markdown';
 
-const CodeBlockMessage = ({ children, className, ...props }: JSX.IntrinsicElements['code'] & ExtraProps) => {
+const CodeBlockMessage = ({
+  children,
+  className,
+  'aria-label': ariaLabel,
+  ...props
+}: JSX.IntrinsicElements['code'] & ExtraProps) => {
   const [copied, setCopied] = React.useState(false);
 
   const buttonRef = React.useRef();
@@ -51,7 +56,7 @@ const CodeBlockMessage = ({ children, className, ...props }: JSX.IntrinsicElemen
         {language && <div className="pf-chatbot__message-code-block-language">{language}</div>}
         <Button
           ref={buttonRef}
-          aria-label="Copy code button"
+          aria-label={ariaLabel ?? 'Copy code button'}
           variant="plain"
           className="pf-chatbot__button--copy"
           onClick={(event) => handleCopy(event, children)}
diff --git a/packages/module/src/Message/Message.tsx b/packages/module/src/Message/Message.tsx
index 397a9c3c..5037ce9e 100644
--- a/packages/module/src/Message/Message.tsx
+++ b/packages/module/src/Message/Message.tsx
@@ -54,6 +54,10 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   botWord?: string;
   /** Label for the English "Loading message," displayed to screenreaders when loading a message */
   loadingWord?: string;
+  codeBlockProps?: {
+    'aria-label'?: string;
+    className?: string;
+  };
 }
 
 export const Message: React.FunctionComponent<MessageProps> = ({
@@ -71,6 +75,7 @@ export const Message: React.FunctionComponent<MessageProps> = ({
   sources,
   botWord = 'AI',
   loadingWord = 'Loading message',
+  codeBlockProps,
   ...props
 }: MessageProps) => {
   // Configure default values
@@ -120,7 +125,7 @@ export const Message: React.FunctionComponent<MessageProps> = ({
               <Markdown
                 components={{
                   p: TextMessage,
-                  code: CodeBlockMessage,
+                  code: ({ children }) => <CodeBlockMessage {...codeBlockProps}>{children}</CodeBlockMessage>,
                   ul: UnorderedListMessage,
                   ol: OrderedListMessage,
                   li: ListItemMessage