diff --git a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.scss b/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.scss
index 8d92fefb0..376f60fdb 100644
--- a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.scss
+++ b/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;
@@ -39,7 +40,7 @@
font-weight: var(--pf-t--global--font--weight--body--bold);
}
- .pf-chatbot__button--copy.pf-v6-c-button {
+ .pf-v6-c-code-block__actions-item > .pf-v6-c-button.pf-m-plain {
color: var(--pf-t--color--white); // same in light + dark theme
&:hover,
diff --git a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx b/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx
index 674ef9962..9578af9fc 100644
--- a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx
+++ b/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, after any default actions such as the "copy" action. */
+ 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 = (
<>
-
+
{language && {language}
}
+ {customActions}
>
);
diff --git a/packages/module/src/Message/Message.test.tsx b/packages/module/src/Message/Message.test.tsx
index a4c99f5b3..79db8ec01 100644
--- a/packages/module/src/Message/Message.test.tsx
+++ b/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(
+
+
+
+ )
+ }}
+ />
+ );
+ expect(screen.getByRole('button', { name: /New custom action/i })).toBeTruthy();
+ });
it('should handle hasRoundAvatar correctly when it is true', () => {
render();
expect(screen.getByRole('img')).toBeTruthy();
diff --git a/packages/module/src/Message/Message.tsx b/packages/module/src/Message/Message.tsx
index ad6810156..6cccedf01 100644
--- a/packages/module/src/Message/Message.tsx
+++ b/packages/module/src/Message/Message.tsx
@@ -11,8 +11,6 @@ import {
AvatarProps,
ButtonProps,
ContentVariants,
- ExpandableSectionProps,
- ExpandableSectionToggleProps,
FormProps,
Label,
LabelGroupProps,
@@ -20,7 +18,7 @@ import {
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, '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;
- /** 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 */