diff --git a/packages/module/src/ToolResponse/ToolResponse.test.tsx b/packages/module/src/ToolResponse/ToolResponse.test.tsx index ef65873e8..91cdd6950 100644 --- a/packages/module/src/ToolResponse/ToolResponse.test.tsx +++ b/packages/module/src/ToolResponse/ToolResponse.test.tsx @@ -75,4 +75,34 @@ describe('ToolResponse', () => { const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading'); expect(subheadingContainer).toBeFalsy(); }); + + it('should not render card when cardTitle and cardBody are not provided', () => { + const { container } = render(); + expect(container.querySelector('.pf-chatbot__tool-response-card')).toBeFalsy(); + }); + + it('should render card when only cardTitle is provided', () => { + const { container } = render(); + expect(container.querySelector('.pf-chatbot__tool-response-card')).toBeTruthy(); + }); + + it('should render card when only cardBody is provided', () => { + const { container } = render(); + expect(container.querySelector('.pf-chatbot__tool-response-card')).toBeTruthy(); + }); + + it('should render divider when cardBody and cardTitle are provided', () => { + const { container } = render(); + expect(container.querySelector('.pf-v6-c-divider')).toBeTruthy(); + }); + + it('should not render divider when only cardBody is provided', () => { + const { container } = render(); + expect(container.querySelector('.pf-v6-c-divider')).toBeFalsy(); + }); + + it('should not render divider when only cardTitle is provided', () => { + const { container } = render(); + expect(container.querySelector('.pf-v6-c-divider')).toBeFalsy(); + }); }); diff --git a/packages/module/src/ToolResponse/ToolResponse.tsx b/packages/module/src/ToolResponse/ToolResponse.tsx index 62eb8bd3e..d7dc7d608 100644 --- a/packages/module/src/ToolResponse/ToolResponse.tsx +++ b/packages/module/src/ToolResponse/ToolResponse.tsx @@ -25,9 +25,9 @@ export interface ToolResponseProps { /** Body text rendered inside expandable section */ body?: React.ReactNode | string; /** Content passed into tool response card body */ - cardBody: React.ReactNode; + cardBody?: React.ReactNode; /** Content passed into tool response card title */ - cardTitle: React.ReactNode; + cardTitle?: React.ReactNode; /** Additional props passed to main card */ cardProps?: CardProps; /** Additional props passed to main card body */ @@ -80,11 +80,13 @@ export const ToolResponse: FunctionComponent = ({ )} {body &&
{body}
} - - {cardTitle} - - {cardBody} - + {(cardTitle || cardBody) && ( + + {cardTitle && {cardTitle}} + {cardTitle && cardBody && } + {cardBody && {cardBody}} + + )}