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}
} +
+ ) + }} + /> + ); + 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 */