@patternfly/chatbot 6.5.0-prerelease.8 → 6.5.0

package/src/ResponseActions/ResponseActions.test.tsx

@@ -6,8 +6,8 @@ import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons'
 import Message from '../Message';
 
 const ALL_ACTIONS = [
-  { type: 'positive', label: 'Good response', clickedLabel: 'Response recorded' },
-  { type: 'negative', label: 'Bad response', clickedLabel: 'Response recorded' },
+  { type: 'positive', label: 'Good response', clickedLabel: 'Good response recorded' },
+  { type: 'negative', label: 'Bad response', clickedLabel: 'Bad response recorded' },
   { type: 'copy', label: 'Copy', clickedLabel: 'Copied' },
   { type: 'edit', label: 'Edit', clickedLabel: 'Editing' },
   { type: 'share', label: 'Share', clickedLabel: 'Shared' },
@@ -81,7 +81,7 @@ describe('ResponseActions', () => {
       expect(button).toBeTruthy();
     });
     await userEvent.click(goodBtn);
-    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+    expect(screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass(
       'pf-chatbot__button--response-action-clicked'
     );
     let unclickedButtons = buttons.filter((button) => button !== goodBtn);
@@ -89,7 +89,7 @@ describe('ResponseActions', () => {
       expect(button).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     });
     await userEvent.click(badBtn);
-    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+    expect(screen.getByRole('button', { name: 'Bad response recorded' })).toHaveClass(
       'pf-chatbot__button--response-action-clicked'
     );
     unclickedButtons = buttons.filter((button) => button !== badBtn);
@@ -117,13 +117,13 @@ describe('ResponseActions', () => {
     expect(badBtn).toBeTruthy();
 
     await userEvent.click(goodBtn);
-    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+    expect(screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass(
       'pf-chatbot__button--response-action-clicked'
     );
     expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
 
     await userEvent.click(badBtn);
-    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+    expect(screen.getByRole('button', { name: 'Bad response recorded' })).toHaveClass(
       'pf-chatbot__button--response-action-clicked'
     );
     expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
@@ -238,30 +238,30 @@ describe('ResponseActions', () => {
   });
 
   it('should be able to call onClick correctly', async () => {
-    ALL_ACTIONS.forEach(async ({ type, label }) => {
+    for (const { type, label } of ALL_ACTIONS) {
       const spy = jest.fn();
       render(<ResponseActions actions={{ [type]: { onClick: spy } }} />);
       await userEvent.click(screen.getByRole('button', { name: label }));
       expect(spy).toHaveBeenCalledTimes(1);
-    });
+    }
   });
 
   it('should swap clicked and non-clicked aria labels on click', async () => {
-    ALL_ACTIONS.forEach(async ({ type, label, clickedLabel }) => {
+    for (const { type, label, clickedLabel } of ALL_ACTIONS) {
       render(<ResponseActions actions={{ [type]: { onClick: jest.fn() } }} />);
       expect(screen.getByRole('button', { name: label })).toBeTruthy();
       await userEvent.click(screen.getByRole('button', { name: label }));
       expect(screen.getByRole('button', { name: clickedLabel })).toBeTruthy();
-    });
+    }
   });
 
   it('should swap clicked and non-clicked tooltips on click', async () => {
-    ALL_ACTIONS.forEach(async ({ type, label, clickedLabel }) => {
+    for (const { type, label, clickedLabel } of ALL_ACTIONS) {
       render(<ResponseActions actions={{ [type]: { onClick: jest.fn() } }} />);
       expect(screen.getByRole('button', { name: label })).toBeTruthy();
       await userEvent.click(screen.getByRole('button', { name: label }));
       expect(screen.getByRole('tooltip', { name: clickedLabel })).toBeTruthy();
-    });
+    }
   });
 
   it('should be able to change aria labels', () => {
@@ -322,4 +322,103 @@ describe('ResponseActions', () => {
       expect(screen.getByTestId(action[key])).toBeTruthy();
     });
   });
+
+  // we are testing for the reverse case already above
+  it('should not deselect when clicking outside when persistActionSelection is true', async () => {
+    render(
+      <Message
+        name="Bot"
+        role="bot"
+        avatar=""
+        content="Test content"
+        actions={{
+          positive: {},
+          negative: {}
+        }}
+        persistActionSelection
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: 'Good response' });
+
+    await userEvent.click(goodBtn);
+    expect(screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+
+    await userEvent.click(screen.getByText('Test content'));
+
+    expect(screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+  });
+
+  it('should switch selection to another button when persistActionSelection is true', async () => {
+    render(
+      <Message
+        name="Bot"
+        role="bot"
+        avatar=""
+        content="Test content"
+        actions={{
+          positive: {},
+          negative: {}
+        }}
+        persistActionSelection
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: 'Good response' });
+    const badBtn = screen.getByRole('button', { name: 'Bad response' });
+
+    await userEvent.click(goodBtn);
+    expect(goodBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(badBtn);
+    expect(badBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should toggle off when clicking the same button when persistActionSelection is true', async () => {
+    render(
+      <Message
+        name="Bot"
+        role="bot"
+        avatar=""
+        content="Test content"
+        actions={{
+          positive: {},
+          negative: {}
+        }}
+        persistActionSelection
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: 'Good response' });
+
+    await userEvent.click(goodBtn);
+    expect(goodBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(goodBtn);
+    expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should work with custom actions when persistActionSelection is true', async () => {
+    const actions = {
+      positive: { 'data-testid': 'positive', onClick: jest.fn() },
+      negative: { 'data-testid': 'negative', onClick: jest.fn() },
+      custom: {
+        'data-testid': 'custom',
+        onClick: jest.fn(),
+        ariaLabel: 'Custom',
+        tooltipContent: 'Custom action',
+        icon: <DownloadIcon />
+      }
+    };
+    render(<ResponseActions actions={actions} persistActionSelection />);
+
+    const customBtn = screen.getByTestId('custom');
+    await userEvent.click(customBtn);
+    expect(customBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(customBtn);
+    expect(customBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
 });

package/src/ResponseActions/ResponseActions.tsx

@@ -42,6 +42,12 @@ export interface ActionProps extends Omit<ButtonProps, 'ref'> {
 type ExtendedActionProps = ActionProps & {
   [key: string]: any;
 };
+
+/**
+ * The various actions that can be attached to a bot message for users to interact with.
+ * Use this component when passing children to Message to customize its structure.
+ */
+
 export interface ResponseActionProps {
   /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
   actions: Record<string, ExtendedActionProps | undefined> & {
@@ -53,11 +59,20 @@ export interface ResponseActionProps {
     listen?: ActionProps;
     edit?: ActionProps;
   };
+  /** When true, the selected action will persist even when clicking outside the component.
+   * When false (default), clicking outside or clicking another action will deselect the current selection. */
+  persistActionSelection?: boolean;
 }
 
-export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ actions }) => {
+export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
+  actions,
+  persistActionSelection = false
+}) => {
   const [activeButton, setActiveButton] = useState<string>();
   const [clickStatePersisted, setClickStatePersisted] = useState<boolean>(false);
+
+  const { positive, negative, copy, edit, share, download, listen, ...additionalActions } = actions;
+
   useEffect(() => {
     // Define the order of precedence for checking initial `isClicked`
     const actionPrecedence = ['positive', 'negative', 'copy', 'edit', 'share', 'download', 'listen'];
@@ -82,13 +97,21 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
       // Click state is explicitly controlled by consumer.
       setClickStatePersisted(true);
     }
+    // If persistActionSelection is true, all selections are persisted
+    if (persistActionSelection) {
+      setClickStatePersisted(true);
+    }
     setActiveButton(initialActive);
-  }, [actions]);
+  }, [actions, persistActionSelection]);
 
-  const { positive, negative, copy, edit, share, download, listen, ...additionalActions } = actions;
   const responseActions = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    // Only add click outside listener if not persisting selection
+    if (persistActionSelection) {
+      return;
+    }
+
     const handleClickOutside = (e) => {
       if (responseActions.current && !responseActions.current.contains(e.target) && !clickStatePersisted) {
         setActiveButton(undefined);
@@ -99,15 +122,26 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
     return () => {
       window.removeEventListener('click', handleClickOutside);
     };
-  }, [clickStatePersisted]);
+  }, [clickStatePersisted, persistActionSelection]);
 
   const handleClick = (
     e: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent,
     id: string,
     onClick?: (event: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent) => void
   ) => {
-    setClickStatePersisted(false);
-    setActiveButton(id);
+    if (persistActionSelection) {
+      if (activeButton === id) {
+        // Toggle off if clicking the same button
+        setActiveButton(undefined);
+      } else {
+        // Set new active button
+        setActiveButton(id);
+      }
+      setClickStatePersisted(true);
+    } else {
+      setClickStatePersisted(false);
+      setActiveButton(id);
+    }
     onClick && onClick(e);
   };
 
@@ -117,12 +151,12 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
         <ResponseActionButton
           {...positive}
           ariaLabel={positive.ariaLabel ?? 'Good response'}
-          clickedAriaLabel={positive.ariaLabel ?? 'Response recorded'}
+          clickedAriaLabel={positive.ariaLabel ?? 'Good response recorded'}
           onClick={(e) => handleClick(e, 'positive', positive.onClick)}
           className={positive.className}
           isDisabled={positive.isDisabled}
           tooltipContent={positive.tooltipContent ?? 'Good response'}
-          clickedTooltipContent={positive.clickedTooltipContent ?? 'Response recorded'}
+          clickedTooltipContent={positive.clickedTooltipContent ?? 'Good response recorded'}
           tooltipProps={positive.tooltipProps}
           icon={<OutlinedThumbsUpIcon />}
           isClicked={activeButton === 'positive'}
@@ -135,12 +169,12 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
         <ResponseActionButton
           {...negative}
           ariaLabel={negative.ariaLabel ?? 'Bad response'}
-          clickedAriaLabel={negative.ariaLabel ?? 'Response recorded'}
+          clickedAriaLabel={negative.ariaLabel ?? 'Bad response recorded'}
           onClick={(e) => handleClick(e, 'negative', negative.onClick)}
           className={negative.className}
           isDisabled={negative.isDisabled}
           tooltipContent={negative.tooltipContent ?? 'Bad response'}
-          clickedTooltipContent={negative.clickedTooltipContent ?? 'Response recorded'}
+          clickedTooltipContent={negative.clickedTooltipContent ?? 'Bad response recorded'}
           tooltipProps={negative.tooltipProps}
           icon={<OutlinedThumbsDownIcon />}
           isClicked={activeButton === 'negative'}

package/src/ResponseActions/ResponseActionsGroups.test.tsx

@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import ResponseActionsGroups from './ResponseActionsGroups';
+
+test('Renders with children', () => {
+  render(<ResponseActionsGroups>Test content</ResponseActionsGroups>);
+  expect(screen.getByText('Test content')).toBeInTheDocument();
+});
+
+test('Renders with pf-chatbot__response-actions-groups class by default', () => {
+  render(<ResponseActionsGroups>Test content</ResponseActionsGroups>);
+  expect(screen.getByText('Test content')).toHaveClass('pf-chatbot__response-actions-groups', { exact: true });
+});
+
+test('Renders with custom className', () => {
+  render(<ResponseActionsGroups className="custom-class">Test content</ResponseActionsGroups>);
+  expect(screen.getByText('Test content')).toHaveClass('custom-class');
+});
+
+test('Spreads additional props', () => {
+  render(<ResponseActionsGroups id="test-id">Test content</ResponseActionsGroups>);
+  expect(screen.getByText('Test content')).toHaveAttribute('id', 'test-id');
+});

package/src/ResponseActions/ResponseActionsGroups.tsx

@@ -0,0 +1,28 @@
+// ============================================================================
+// Response Actions Groups - Container for multiple action groups
+// ============================================================================
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+import { css } from '@patternfly/react-styles';
+
+/**
+ * The container for grouping multiple related ResponseActions components, typically used for having different persistence states amongst groups.
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface ResponseActionsGroupsProps extends HTMLProps<HTMLDivElement> {
+  /** Content to render inside the response actions groups container */
+  children: ReactNode;
+  /** Additional classes applied to the response actions groups container. */
+  className?: string;
+}
+
+export const ResponseActionsGroups: FunctionComponent<ResponseActionsGroupsProps> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <div className={css('pf-chatbot__response-actions-groups', className)} {...props}>
+    {children}
+  </div>
+);
+
+export default ResponseActionsGroups;

package/src/ResponseActions/index.ts

@@ -1,3 +1,4 @@
 export { default } from './ResponseActions';
 
 export * from './ResponseActions';
+export * from './ResponseActionsGroups';

package/src/ToolCall/ToolCall.scss

@@ -1,6 +1,6 @@
 .pf-chatbot__tool-call {
-  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
   --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
 
   overflow: unset;
   row-gap: var(--pf-t--global--spacer--sm);

package/src/ToolCall/ToolCall.test.tsx

@@ -181,4 +181,95 @@ describe('ToolCall', () => {
     render(<ToolCall {...defaultProps} cardFooterProps={{ id: 'card-footer-test-id' }} />);
     expect(screen.getByRole('button', { name: 'Run tool' }).closest('#card-footer-test-id')).toBeVisible();
   });
+
+  it('Renders collapsed by default when expandableContent is provided', () => {
+    render(<ToolCall {...defaultProps} expandableContent="Expandable Content" />);
+
+    expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByText('Expandable Content')).not.toBeVisible();
+  });
+
+  it('Renders expanded when isDefaultExpanded is true', () => {
+    render(<ToolCall {...defaultProps} isDefaultExpanded expandableContent="Expandable Content" />);
+
+    expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Expandable Content')).toBeVisible();
+  });
+
+  it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+    render(
+      <ToolCall
+        {...defaultProps}
+        isDefaultExpanded={false}
+        expandableContent="Expandable Content"
+        expandableSectionProps={{ isExpanded: true }}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Expandable Content')).toBeVisible();
+  });
+
+  it('expandableSectionProps.onToggle overrides internal onToggle behavior', async () => {
+    const user = userEvent.setup();
+    const customOnToggle = jest.fn();
+
+    render(
+      <ToolCall
+        {...defaultProps}
+        isDefaultExpanded={false}
+        expandableContent="Expandable Content"
+        expandableSectionProps={{ onToggle: customOnToggle }}
+      />
+    );
+
+    const toggleButton = screen.getByRole('button', { name: defaultProps.titleText });
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(toggleButton);
+
+    expect(customOnToggle).toHaveBeenCalledTimes(1);
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByText('Expandable Content')).not.toBeVisible();
+  });
+
+  it('should render titleText as markdown when isTitleMarkdown is true', () => {
+    const titleText = '**Bold title**';
+    const { container } = render(<ToolCall titleText={titleText} isTitleMarkdown />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold title')).toBeTruthy();
+  });
+
+  it('should not render titleText as markdown when isTitleMarkdown is false', () => {
+    const titleText = '**Bold title**';
+    render(<ToolCall titleText={titleText} />);
+    expect(screen.getByText('**Bold title**')).toBeTruthy();
+  });
+
+  it('should render expandableContent as markdown when isExpandableContentMarkdown is true', async () => {
+    const user = userEvent.setup();
+    const expandableContent = '**Bold expandable content**';
+    const { container } = render(
+      <ToolCall {...defaultProps} expandableContent={expandableContent} isExpandableContentMarkdown />
+    );
+    await user.click(screen.getByRole('button', { name: defaultProps.titleText }));
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold expandable content')).toBeTruthy();
+  });
+
+  it('should not render expandableContent as markdown when isExpandableContentMarkdown is false', async () => {
+    const user = userEvent.setup();
+    const expandableContent = '**Bold expandable content**';
+    render(<ToolCall {...defaultProps} expandableContent={expandableContent} />);
+    await user.click(screen.getByRole('button', { name: defaultProps.titleText }));
+    expect(screen.getByText('**Bold expandable content**')).toBeTruthy();
+  });
+
+  it('should pass markdownContentProps to MarkdownContent component', () => {
+    const titleText = '**Bold title**';
+    const { container } = render(
+      <ToolCall titleText={titleText} isTitleMarkdown markdownContentProps={{ isPrimary: true }} />
+    );
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
 });

package/src/ToolCall/ToolCall.tsx

@@ -1,4 +1,4 @@
-import { type FunctionComponent } from 'react';
+import { useState, type FunctionComponent } from 'react';
 import {
   ActionList,
   ActionListProps,
@@ -19,6 +19,8 @@ import {
   Spinner,
   SpinnerProps
 } from '@patternfly/react-core';
+import MarkdownContent from '../MarkdownContent';
+import type { MarkdownContentProps } from '../MarkdownContent';
 
 export interface ToolCallProps {
   /** Title text for the tool call. */
@@ -31,6 +33,8 @@ export interface ToolCallProps {
   spinnerProps?: SpinnerProps;
   /** Content to render within an expandable section. */
   expandableContent?: React.ReactNode;
+  /** Flag indicating whether the expandable content is expanded by default. */
+  isDefaultExpanded?: boolean;
   /** Text content for the "run" action button. */
   runButtonText?: string;
   /** Additional props for the "run" action button. */
@@ -59,6 +63,14 @@ export interface ToolCallProps {
   cardFooterProps?: CardFooterProps;
   /** Additional props for the expandable section when expandableContent is passed. */
   expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+  /** Whether to enable markdown rendering for titleText. When true, titleText will be parsed as markdown. */
+  isTitleMarkdown?: boolean;
+  /** Whether to enable markdown rendering for expandableContent. When true and expandableContent is a string, it will be parsed as markdown. */
+  isExpandableContentMarkdown?: boolean;
+  /** Props passed to MarkdownContent component when markdown is enabled */
+  markdownContentProps?: Omit<MarkdownContentProps, 'content'>;
+  /** Whether to retain styles in the MarkdownContent component. Defaults to false. */
+  shouldRetainStyles?: boolean;
 }
 
 export const ToolCall: FunctionComponent<ToolCallProps> = ({
@@ -66,6 +78,7 @@ export const ToolCall: FunctionComponent<ToolCallProps> = ({
   loadingText,
   isLoading,
   expandableContent,
+  isDefaultExpanded = false,
   runButtonText = 'Run tool',
   runButtonProps,
   runActionItemProps,
@@ -80,8 +93,25 @@ export const ToolCall: FunctionComponent<ToolCallProps> = ({
   cardBodyProps,
   cardFooterProps,
   expandableSectionProps,
-  spinnerProps
+  spinnerProps,
+  isTitleMarkdown,
+  isExpandableContentMarkdown,
+  markdownContentProps,
+  shouldRetainStyles = false
 }: ToolCallProps) => {
+  const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const renderTitle = () => {
+    if (isTitleMarkdown) {
+      return <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={titleText} {...markdownContentProps} />;
+    }
+    return titleText;
+  };
+
   const titleContent = (
     <span className={`pf-chatbot__tool-call-title-content`}>
       {isLoading ? (
@@ -90,10 +120,23 @@ export const ToolCall: FunctionComponent<ToolCallProps> = ({
           {<span className="pf-chatbot__tool-call-title-text">{loadingText}</span>}
         </>
       ) : (
-        <span className="pf-chatbot__tool-call-title-text">{titleText}</span>
+        <span className="pf-chatbot__tool-call-title-text">{renderTitle()}</span>
       )}
     </span>
   );
+
+  const renderExpandableContent = () => {
+    if (isExpandableContentMarkdown && typeof expandableContent === 'string') {
+      return (
+        <MarkdownContent
+          shouldRetainStyles={shouldRetainStyles}
+          content={expandableContent}
+          {...markdownContentProps}
+        />
+      );
+    }
+    return expandableContent;
+  };
   const defaultActions = (
     <>
       <ActionListItem {...actionListItemProps} {...cancelActionItemProps}>
@@ -124,10 +167,12 @@ export const ToolCall: FunctionComponent<ToolCallProps> = ({
           <ExpandableSection
             className="pf-chatbot__tool-call-expandable-section"
             toggleContent={titleContent}
+            onToggle={onToggle}
+            isExpanded={isExpanded}
             isIndented
             {...expandableSectionProps}
           >
-            {expandableContent}
+            {renderExpandableContent()}
           </ExpandableSection>
         ) : (
           titleContent

package/src/ToolResponse/ToolResponse.scss

@@ -1,5 +1,5 @@
 .pf-chatbot__tool-response {
-  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
   overflow: unset;
 }
 
@@ -25,12 +25,22 @@
 }
 
 .pf-chatbot__tool-response-card {
-  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-card--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
 
   .pf-v6-c-divider {
-    --pf-v6-c-divider--Color: var(--pf-t--global--border--color--control--read-only);
+    --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
+  }
+}
+
+.pf-chatbot__tool-response-expandable-section .pf-v6-c-expandable-section__toggle .pf-m-markdown {
+  padding: inherit;
+}
+
+.pf-chatbot__tool-response {
+  .pf-chatbot__message-image {
+    max-width: 100%;
   }
 }