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}}
+
+ )}