From ddc9e0c31ba6be3ecfdc438a47abb761b64bae2e Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Thu, 16 Oct 2025 10:35:56 -0400 Subject: [PATCH 1/3] 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. --- .../CodeBlockMessage/CodeBlockMessage.scss | 5 ++-- .../CodeBlockMessage/CodeBlockMessage.tsx | 6 ++++- packages/module/src/Message/Message.test.tsx | 20 +++++++++++++++- packages/module/src/Message/Message.tsx | 23 ++----------------- 4 files changed, 29 insertions(+), 25 deletions(-) diff --git a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.scss b/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.scss index 8d92fefb0..a13c16f2f 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-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..9365d458d 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 */ + 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}
} + + ) + }} + /> + ); + 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 */ From f32a0b7c703c03f633f90a68edeeab7e2c926a97 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Thu, 16 Oct 2025 14:06:23 -0400 Subject: [PATCH 2/3] Update packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.scss Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> --- .../module/src/Message/CodeBlockMessage/CodeBlockMessage.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.scss b/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.scss index a13c16f2f..376f60fdb 100644 --- a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.scss +++ b/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.scss @@ -40,7 +40,7 @@ font-weight: var(--pf-t--global--font--weight--body--bold); } - .pf-v6-c-code-block__actions-item > .pf-v6-c-button.pf-v6-c-button.pf-m-plain { + .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, From b4eb61077d13d12a08b7f0c4a076aece3bdcbab1 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Thu, 16 Oct 2025 14:06:34 -0400 Subject: [PATCH 3/3] Update packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> --- .../module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx b/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx index 9365d458d..9578af9fc 100644 --- a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx +++ b/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx @@ -37,7 +37,7 @@ export interface CodeBlockMessageProps { expandedText?: string; /** Link text applied to expandable toggle when collapsed */ collapsedText?: string; - /** Custom actions added to header of code block */ + /** Custom actions added to header of code block, after any default actions such as the "copy" action. */ customActions?: React.ReactNode; }