From 2da230e45e39a7635243181e81822a2c6fcbf92b Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Fri, 31 Oct 2025 11:43:39 -0400
Subject: [PATCH 1/2] feat(AttachButton): Allow custom icon

---
 .../module/src/MessageBar/AttachButton.test.tsx    |  4 ++++
 packages/module/src/MessageBar/AttachButton.tsx    |  5 ++++-
 packages/module/src/MessageBar/MessageBar.test.tsx | 14 ++++++++++++++
 packages/module/src/MessageBar/MessageBar.tsx      | 12 ++++--------
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/packages/module/src/MessageBar/AttachButton.test.tsx b/packages/module/src/MessageBar/AttachButton.test.tsx
index 809f40504..e4682267e 100644
--- a/packages/module/src/MessageBar/AttachButton.test.tsx
+++ b/packages/module/src/MessageBar/AttachButton.test.tsx
@@ -173,4 +173,8 @@ describe('Attach button', () => {
     expect(validator).toHaveBeenCalledWith(file);
     expect(onAttachRejected).toHaveBeenCalled();
   });
+  it('should handle icon prop', () => {
+    render(<AttachButton icon={<img alt="test-icon" src="" data-testid="new-icon" />} />);
+    expect(screen.getByTestId('new-icon')).toBeTruthy();
+  });
 });
diff --git a/packages/module/src/MessageBar/AttachButton.tsx b/packages/module/src/MessageBar/AttachButton.tsx
index 016d1186c..f012cce67 100644
--- a/packages/module/src/MessageBar/AttachButton.tsx
+++ b/packages/module/src/MessageBar/AttachButton.tsx
@@ -51,6 +51,8 @@ export interface AttachButtonProps extends ButtonProps {
   validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
   /** Additional props passed to react-dropzone */
   dropzoneProps?: DropzoneOptions;
+  /** Icon displayed in attach button */
+  icon?: React.ReactNode;
 }
 
 const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
@@ -72,6 +74,7 @@ const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
   onAttachRejected,
   validator,
   dropzoneProps,
+  icon = <PaperclipIcon />,
   ...props
 }: AttachButtonProps) => {
   const { open, getInputProps } = useDropzone({
@@ -113,7 +116,7 @@ const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
           onClick={onClick ?? open}
           icon={
             <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
-              <PaperclipIcon />
+              {icon}
             </Icon>
           }
           size={isCompact ? 'sm' : undefined}
diff --git a/packages/module/src/MessageBar/MessageBar.test.tsx b/packages/module/src/MessageBar/MessageBar.test.tsx
index 66033f32c..b072974ae 100644
--- a/packages/module/src/MessageBar/MessageBar.test.tsx
+++ b/packages/module/src/MessageBar/MessageBar.test.tsx
@@ -325,6 +325,20 @@ describe('Message bar', () => {
     );
     await userEvent.click(screen.getByRole('button', { name: 'Test' }));
   });
+  it('can change attach button icon', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        hasAttachButton
+        buttonProps={{
+          attach: {
+            icon: <img alt="test-icon" src="" data-testid="new-icon" />
+          }
+        }}
+      />
+    );
+    expect(screen.getByTestId('new-icon')).toBeTruthy();
+  });
 
   // Stop button
   // --------------------------------------------------------------------------
diff --git a/packages/module/src/MessageBar/MessageBar.tsx b/packages/module/src/MessageBar/MessageBar.tsx
index 8b06a72fd..c206ba8e4 100644
--- a/packages/module/src/MessageBar/MessageBar.tsx
+++ b/packages/module/src/MessageBar/MessageBar.tsx
@@ -14,7 +14,7 @@ import {
 // Import Chatbot components
 import SendButton from './SendButton';
 import MicrophoneButton from './MicrophoneButton';
-import { AttachButton } from './AttachButton';
+import { AttachButton, AttachButtonProps } from './AttachButton';
 import AttachMenu from '../AttachMenu';
 import StopButton from './StopButton';
 import { ChatbotDisplayMode } from '../Chatbot';
@@ -95,12 +95,7 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   isSendButtonDisabled?: boolean;
   /** Prop to allow passage of additional props to buttons */
   buttonProps?: {
-    attach?: {
-      tooltipContent?: string;
-      props?: ButtonProps;
-      inputTestId?: string;
-      tooltipProps?: Omit<TooltipProps, 'content'>;
-    };
+    attach?: AttachButtonProps & { props?: ButtonProps };
     stop?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit<TooltipProps, 'content'> };
     send?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit<TooltipProps, 'content'> };
     microphone?: {
@@ -376,7 +371,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
             onAttachRejected={onAttachRejected}
             validator={validator}
             dropzoneProps={dropzoneProps}
-            {...buttonProps?.attach?.props}
+            {...buttonProps?.attach}
           />
         )}
         {!attachMenuProps && hasAttachButton && (
@@ -396,6 +391,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
             onAttachRejected={onAttachRejected}
             validator={validator}
             dropzoneProps={dropzoneProps}
+            {...buttonProps?.attach}
             {...buttonProps?.attach?.props}
           />
         )}

From 2fd94e34494f42924e1437bece66edc7da950775 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Fri, 31 Oct 2025 13:33:48 -0400
Subject: [PATCH 2/2] Adjust test

---
 packages/module/src/MessageBar/AttachButton.test.tsx | 4 ++--
 packages/module/src/MessageBar/MessageBar.test.tsx   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/module/src/MessageBar/AttachButton.test.tsx b/packages/module/src/MessageBar/AttachButton.test.tsx
index e4682267e..eee23c82d 100644
--- a/packages/module/src/MessageBar/AttachButton.test.tsx
+++ b/packages/module/src/MessageBar/AttachButton.test.tsx
@@ -174,7 +174,7 @@ describe('Attach button', () => {
     expect(onAttachRejected).toHaveBeenCalled();
   });
   it('should handle icon prop', () => {
-    render(<AttachButton icon={<img alt="test-icon" src="" data-testid="new-icon" />} />);
-    expect(screen.getByTestId('new-icon')).toBeTruthy();
+    render(<AttachButton icon={<img alt="" src="" />} />);
+    expect(screen.getByRole('img')).toBeVisible();
   });
 });
diff --git a/packages/module/src/MessageBar/MessageBar.test.tsx b/packages/module/src/MessageBar/MessageBar.test.tsx
index b072974ae..505055cfd 100644
--- a/packages/module/src/MessageBar/MessageBar.test.tsx
+++ b/packages/module/src/MessageBar/MessageBar.test.tsx
@@ -332,12 +332,12 @@ describe('Message bar', () => {
         hasAttachButton
         buttonProps={{
           attach: {
-            icon: <img alt="test-icon" src="" data-testid="new-icon" />
+            icon: <img alt="" src="" />
           }
         }}
       />
     );
-    expect(screen.getByTestId('new-icon')).toBeTruthy();
+    expect(screen.getByRole('img')).toBeVisible();
   });
 
   // Stop button