@patternfly/chatbot 6.4.0-prerelease.16 → 6.4.0-prerelease.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/cjs/Message/Message.d.ts +3 -0
  2. package/dist/cjs/Message/Message.js +3 -2
  3. package/dist/cjs/Message/Message.test.js +14 -0
  4. package/dist/cjs/ToolResponse/ToolResponse.d.ts +30 -0
  5. package/dist/cjs/ToolResponse/ToolResponse.js +18 -0
  6. package/dist/cjs/ToolResponse/ToolResponse.test.d.ts +1 -0
  7. package/dist/cjs/ToolResponse/ToolResponse.test.js +60 -0
  8. package/dist/cjs/ToolResponse/index.d.ts +2 -0
  9. package/dist/cjs/ToolResponse/index.js +23 -0
  10. package/dist/cjs/index.d.ts +2 -0
  11. package/dist/cjs/index.js +4 -1
  12. package/dist/css/main.css +36 -0
  13. package/dist/css/main.css.map +1 -1
  14. package/dist/dynamic/ToolResponse/package.json +1 -0
  15. package/dist/esm/Message/Message.d.ts +3 -0
  16. package/dist/esm/Message/Message.js +3 -2
  17. package/dist/esm/Message/Message.test.js +14 -0
  18. package/dist/esm/ToolResponse/ToolResponse.d.ts +30 -0
  19. package/dist/esm/ToolResponse/ToolResponse.js +14 -0
  20. package/dist/esm/ToolResponse/ToolResponse.test.d.ts +1 -0
  21. package/dist/esm/ToolResponse/ToolResponse.test.js +55 -0
  22. package/dist/esm/ToolResponse/index.d.ts +2 -0
  23. package/dist/esm/ToolResponse/index.js +2 -0
  24. package/dist/esm/index.d.ts +2 -0
  25. package/dist/esm/index.js +2 -0
  26. package/dist/tsconfig.tsbuildinfo +1 -1
  27. package/package.json +1 -1
  28. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithToolResponse.tsx +135 -0
  29. package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +9 -1
  30. package/src/Message/Message.test.tsx +22 -0
  31. package/src/Message/Message.tsx +5 -0
  32. package/src/ToolResponse/ToolResponse.scss +36 -0
  33. package/src/ToolResponse/ToolResponse.test.tsx +78 -0
  34. package/src/ToolResponse/ToolResponse.tsx +95 -0
  35. package/src/ToolResponse/index.ts +3 -0
  36. package/src/index.ts +3 -0
  37. package/src/main.scss +1 -0
@@ -10,6 +10,7 @@ import { UserFeedbackProps } from './UserFeedback/UserFeedback';
10
10
  import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
11
11
  import { TableProps } from '@patternfly/react-table';
12
12
  import { PluggableList } from 'unified';
13
+ import { ToolResponseProps } from '../ToolResponse';
13
14
  export interface MessageAttachment {
14
15
  /** Name of file attached to the message */
15
16
  name: string;
@@ -145,6 +146,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
145
146
  isMarkdownDisabled?: boolean;
146
147
  /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
147
148
  reactMarkdownProps?: Options;
149
+ /** Props for tool response card */
150
+ toolResponse?: ToolResponseProps;
148
151
  }
149
152
  export declare const MessageBase: FunctionComponent<MessageProps>;
150
153
  declare const Message: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -50,8 +50,9 @@ const LinkMessage_1 = __importDefault(require("./LinkMessage/LinkMessage"));
50
50
  const ErrorMessage_1 = __importDefault(require("./ErrorMessage/ErrorMessage"));
51
51
  const MessageInput_1 = __importDefault(require("./MessageInput"));
52
52
  const rehypeMoveImagesOutOfParagraphs_1 = require("./Plugins/rehypeMoveImagesOutOfParagraphs");
53
+ const ToolResponse_1 = __importDefault(require("../ToolResponse"));
53
54
  const MessageBase = (_a) => {
54
- var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps"]);
55
+ var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse"]);
55
56
  const [messageText, setMessageText] = (0, react_1.useState)(content);
56
57
  (0, react_1.useEffect)(() => {
57
58
  setMessageText(content);
@@ -120,7 +121,7 @@ const MessageBase = (_a) => {
120
121
  }
121
122
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [beforeMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: beforeMainContent }), error ? (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, Object.assign({}, error)) : handleMarkdown()] }));
122
123
  };
123
- return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-contents", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-meta", children: [name && ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__message-name", children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: name }) })), role === 'bot' && ((0, jsx_runtime_1.jsx)(react_core_1.Label, { variant: "outline", isCompact: true, children: botWord })), (0, jsx_runtime_1.jsx)(react_core_1.Timestamp, { date: date, children: timestamp })] }), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-response", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: afterMainContent }), !isLoading && sources && (0, jsx_runtime_1.jsx)(SourcesCard_1.default, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && ((0, jsx_runtime_1.jsx)(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && (0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: actions }), userFeedbackForm && (0, jsx_runtime_1.jsx)(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && ((0, jsx_runtime_1.jsx)(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && ((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
124
+ return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-contents", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-meta", children: [name && ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__message-name", children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: name }) })), role === 'bot' && ((0, jsx_runtime_1.jsx)(react_core_1.Label, { variant: "outline", isCompact: true, children: botWord })), (0, jsx_runtime_1.jsx)(react_core_1.Timestamp, { date: date, children: timestamp })] }), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-response", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: afterMainContent }), toolResponse && (0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, toolResponse)), !isLoading && sources && (0, jsx_runtime_1.jsx)(SourcesCard_1.default, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && ((0, jsx_runtime_1.jsx)(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && (0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: actions }), userFeedbackForm && (0, jsx_runtime_1.jsx)(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && ((0, jsx_runtime_1.jsx)(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && ((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
124
125
  var _a;
125
126
  return ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-attachment", children: (0, jsx_runtime_1.jsx)(FileDetailsLabel_1.default, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId }) }, (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name));
126
127
  }) })), !isLoading && endContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: endContent })] })] })] })));
@@ -526,6 +526,20 @@ describe('Message', () => {
526
526
  } }));
527
527
  expect(react_2.screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
528
528
  }));
529
+ it('should handle tool response correctly', () => __awaiter(void 0, void 0, void 0, function* () {
530
+ (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", toolResponse: {
531
+ toggleContent: 'Tool response: Name',
532
+ subheading: 'Thought for 3 seconds',
533
+ body: 'Lorem ipsum dolor sit amet',
534
+ cardTitle: 'Card title',
535
+ cardBody: 'Card body'
536
+ } }));
537
+ expect(react_2.screen.getByRole('button', { name: /Tool response: Name/i })).toBeTruthy();
538
+ expect(react_2.screen.getByText('Thought for 3 seconds')).toBeTruthy();
539
+ expect(react_2.screen.getByText('Lorem ipsum dolor sit amet')).toBeTruthy();
540
+ expect(react_2.screen.getByText('Card title')).toBeTruthy();
541
+ expect(react_2.screen.getByText('Card body')).toBeTruthy();
542
+ }));
529
543
  it('should handle block quote correctly', () => {
530
544
  (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: BLOCK_QUOTES }));
531
545
  expect(react_2.screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
@@ -0,0 +1,30 @@
1
+ import { CardBodyProps, CardProps, CardTitleProps, DividerProps, ExpandableSectionProps } from '@patternfly/react-core';
2
+ import { type FunctionComponent } from 'react';
3
+ export interface ToolResponseProps {
4
+ /** Toggle content shown for expandable section */
5
+ toggleContent: React.ReactNode;
6
+ /** Additional props passed to expandable section */
7
+ expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
8
+ /** Subheading rendered inside expandable section */
9
+ subheading?: string;
10
+ /** Body text rendered inside expandable section */
11
+ body?: React.ReactNode | string;
12
+ /** Content passed into tool response card body */
13
+ cardBody: React.ReactNode;
14
+ /** Content passed into tool response card title */
15
+ cardTitle: React.ReactNode;
16
+ /** Additional props passed to main card */
17
+ cardProps?: CardProps;
18
+ /** Additional props passed to main card body */
19
+ cardBodyProps?: CardBodyProps;
20
+ /** Additional props passed to tool response card */
21
+ toolResponseCardProps?: CardProps;
22
+ /** Additional props passed to tool response card body */
23
+ toolResponseCardBodyProps?: CardBodyProps;
24
+ /** Additional props passed to tool response card divider */
25
+ toolResponseCardDividerProps?: DividerProps;
26
+ /** Additional props passed to tool response card title */
27
+ toolResponseCardTitleProps?: CardTitleProps;
28
+ }
29
+ export declare const ToolResponse: FunctionComponent<ToolResponseProps>;
30
+ export default ToolResponse;
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ToolResponse = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ // ============================================================================
6
+ // Tool Response Card
7
+ // ============================================================================
8
+ const react_core_1 = require("@patternfly/react-core");
9
+ const react_1 = require("react");
10
+ const ToolResponse = ({ body, cardProps, expandableSectionProps, subheading, cardBody, cardTitle, cardBodyProps, toggleContent, toolResponseCardBodyProps, toolResponseCardDividerProps, toolResponseCardProps, toolResponseCardTitleProps }) => {
11
+ const [isExpanded, setIsExpanded] = (0, react_1.useState)(true);
12
+ const onToggle = (_event, isExpanded) => {
13
+ setIsExpanded(isExpanded);
14
+ };
15
+ return ((0, jsx_runtime_1.jsx)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response" }, cardProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({}, cardBodyProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ toggleContent: toggleContent, onToggle: onToggle, isExpanded: isExpanded, isIndented: true, className: "pf-chatbot__tool-response-expandable-section" }, expandableSectionProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__tool-response-section", children: [subheading && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__tool-response-subheading", children: (0, jsx_runtime_1.jsx)("span", { children: subheading }) })), body && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__tool-response-body", children: body }), (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response-card" }, toolResponseCardProps, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, Object.assign({}, toolResponseCardTitleProps, { children: cardTitle })), (0, jsx_runtime_1.jsx)(react_core_1.Divider, Object.assign({}, toolResponseCardDividerProps)), (0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({}, toolResponseCardBodyProps, { children: cardBody }))] }))] }) })) })) })));
16
+ };
17
+ exports.ToolResponse = ToolResponse;
18
+ exports.default = exports.ToolResponse;
@@ -0,0 +1 @@
1
+ import '@testing-library/jest-dom';
@@ -0,0 +1,60 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const jsx_runtime_1 = require("react/jsx-runtime");
7
+ const react_1 = require("@testing-library/react");
8
+ require("@testing-library/jest-dom");
9
+ const ToolResponse_1 = __importDefault(require("./ToolResponse"));
10
+ describe('ToolResponse', () => {
11
+ const defaultProps = {
12
+ toggleContent: 'Tool response: toolName',
13
+ cardTitle: 'Title',
14
+ cardBody: 'Body'
15
+ };
16
+ it('should render with required props only', () => {
17
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps)));
18
+ expect(react_1.screen.getByText('Title')).toBeTruthy();
19
+ expect(react_1.screen.getByText('Body')).toBeTruthy();
20
+ expect(react_1.screen.getByText('Tool response: toolName')).toBeTruthy();
21
+ });
22
+ it('should render subheading when provided', () => {
23
+ const subheading = 'Tool execution result';
24
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { subheading: subheading })));
25
+ expect(react_1.screen.getByText(subheading)).toBeTruthy();
26
+ });
27
+ it('should render body content when provided', () => {
28
+ const body = 'This is the tool response body content';
29
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { body: body })));
30
+ expect(react_1.screen.getByText(body)).toBeTruthy();
31
+ });
32
+ it('should render with complex content including React elements', () => {
33
+ const body = ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { children: "Complex body content" }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: "Item 1" }), (0, jsx_runtime_1.jsx)("li", { children: "Item 2" })] })] }));
34
+ const cardTitle = (0, jsx_runtime_1.jsx)("strong", { children: "API Response" });
35
+ const cardBody = ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("code", { children: "{ status: 'success' }" }) }));
36
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { body: body, cardTitle: cardTitle, cardBody: cardBody })));
37
+ expect(react_1.screen.getByText('Complex body content')).toBeTruthy();
38
+ expect(react_1.screen.getByText('Item 1')).toBeTruthy();
39
+ expect(react_1.screen.getByText('Item 2')).toBeTruthy();
40
+ expect(react_1.screen.getByText('API Response')).toBeTruthy();
41
+ expect(react_1.screen.getByText("{ status: 'success' }")).toBeTruthy();
42
+ });
43
+ it('should apply custom className from cardProps', () => {
44
+ const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { cardProps: { className: 'custom-tool-response-class' } })));
45
+ expect(container.querySelector('.custom-tool-response-class')).toBeTruthy();
46
+ });
47
+ it('should pass through expandableSectionProps', () => {
48
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { expandableSectionProps: { className: 'custom-expandable-class' } })));
49
+ expect(document.querySelector('.custom-expandable-class')).toBeTruthy();
50
+ });
51
+ it('should pass through toolResponseCardProps', () => {
52
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { toolResponseCardProps: { className: 'custom-card-class' } })));
53
+ expect(document.querySelector('.custom-card-class')).toBeTruthy();
54
+ });
55
+ it('should not render subheading span when subheading is not provided', () => {
56
+ const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps)));
57
+ const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
58
+ expect(subheadingContainer).toBeFalsy();
59
+ });
60
+ });
@@ -0,0 +1,2 @@
1
+ export { default } from './ToolResponse';
2
+ export * from './ToolResponse';
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ var __importDefault = (this && this.__importDefault) || function (mod) {
17
+ return (mod && mod.__esModule) ? mod : { "default": mod };
18
+ };
19
+ Object.defineProperty(exports, "__esModule", { value: true });
20
+ exports.default = void 0;
21
+ var ToolResponse_1 = require("./ToolResponse");
22
+ Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ToolResponse_1).default; } });
23
+ __exportStar(require("./ToolResponse"), exports);
@@ -54,5 +54,7 @@ export { default as SourcesCard } from './SourcesCard';
54
54
  export * from './SourcesCard';
55
55
  export { default as TermsOfUse } from './TermsOfUse';
56
56
  export * from './TermsOfUse';
57
+ export { default as ToolResponse } from './ToolResponse';
58
+ export * from './ToolResponse';
57
59
  export { default as tracking } from './tracking';
58
60
  export * from './tracking';
package/dist/cjs/index.js CHANGED
@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
18
18
  return (mod && mod.__esModule) ? mod : { "default": mod };
19
19
  };
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
- exports.tracking = exports.TermsOfUse = exports.SourcesCard = exports.SourceDetailsMenuItem = exports.Settings = exports.ResponseActions = exports.PreviewAttachment = exports.MessageDivider = exports.MessageBox = exports.MessageBar = exports.Message = exports.LoadingMessage = exports.FileDropZone = exports.FileDetailsLabel = exports.FileDetails = exports.Compare = exports.CodeModal = exports.ChatbotWelcomePrompt = exports.ChatbotToggle = exports.ChatbotPopover = exports.ChatbotModal = exports.ChatbotHeader = exports.ChatbotFooter = exports.ChatbotConversationHistoryNav = exports.ChatbotContent = exports.ChatbotAlert = exports.Chatbot = exports.AttachMenu = exports.AttachmentEdit = void 0;
21
+ exports.tracking = exports.ToolResponse = exports.TermsOfUse = exports.SourcesCard = exports.SourceDetailsMenuItem = exports.Settings = exports.ResponseActions = exports.PreviewAttachment = exports.MessageDivider = exports.MessageBox = exports.MessageBar = exports.Message = exports.LoadingMessage = exports.FileDropZone = exports.FileDetailsLabel = exports.FileDetails = exports.Compare = exports.CodeModal = exports.ChatbotWelcomePrompt = exports.ChatbotToggle = exports.ChatbotPopover = exports.ChatbotModal = exports.ChatbotHeader = exports.ChatbotFooter = exports.ChatbotConversationHistoryNav = exports.ChatbotContent = exports.ChatbotAlert = exports.Chatbot = exports.AttachMenu = exports.AttachmentEdit = void 0;
22
22
  var AttachmentEdit_1 = require("./AttachmentEdit");
23
23
  Object.defineProperty(exports, "AttachmentEdit", { enumerable: true, get: function () { return __importDefault(AttachmentEdit_1).default; } });
24
24
  __exportStar(require("./AttachmentEdit"), exports);
@@ -103,6 +103,9 @@ __exportStar(require("./SourcesCard"), exports);
103
103
  var TermsOfUse_1 = require("./TermsOfUse");
104
104
  Object.defineProperty(exports, "TermsOfUse", { enumerable: true, get: function () { return __importDefault(TermsOfUse_1).default; } });
105
105
  __exportStar(require("./TermsOfUse"), exports);
106
+ var ToolResponse_1 = require("./ToolResponse");
107
+ Object.defineProperty(exports, "ToolResponse", { enumerable: true, get: function () { return __importDefault(ToolResponse_1).default; } });
108
+ __exportStar(require("./ToolResponse"), exports);
106
109
  var tracking_1 = require("./tracking");
107
110
  Object.defineProperty(exports, "tracking", { enumerable: true, get: function () { return __importDefault(tracking_1).default; } });
108
111
  __exportStar(require("./tracking"), exports);
package/dist/css/main.css CHANGED
@@ -2324,6 +2324,42 @@
2324
2324
  --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
2325
2325
  }
2326
2326
 
2327
+ .pf-chatbot__tool-response {
2328
+ --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
2329
+ overflow: unset;
2330
+ }
2331
+
2332
+ .pf-chatbot__tool-response-expandable-section {
2333
+ --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--xs);
2334
+ }
2335
+
2336
+ .pf-chatbot__tool-response-section {
2337
+ display: flex;
2338
+ flex-direction: column;
2339
+ gap: var(--pf-t--global--spacer--xs);
2340
+ }
2341
+
2342
+ .pf-chatbot__tool-response-subheading {
2343
+ font-size: var(--pf-t--global--font--size--body--sm);
2344
+ font-weight: var(--pf-t--global--font--weight--body--default);
2345
+ color: var(--pf-t--global--text--color--subtle);
2346
+ }
2347
+
2348
+ .pf-chatbot__tool-response-body {
2349
+ color: var(--pf-t--global--text--color--subtle);
2350
+ margin-block-end: var(--pf-t--global--spacer--xs);
2351
+ }
2352
+
2353
+ .pf-chatbot__tool-response-card {
2354
+ --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
2355
+ --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
2356
+ --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
2357
+ --pf-v6-c-card--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
2358
+ }
2359
+ .pf-chatbot__tool-response-card .pf-v6-c-divider {
2360
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--control--read-only);
2361
+ }
2362
+
2327
2363
  .ws-full-page-utils {
2328
2364
  left: 0 !important;
2329
2365
  right: auto !important;
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/MessageDivider/MessageDivider.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":";AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAKF;EA9BF;IA+BI;IACA;;;AAIF;EApCF;IAqCI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAOJ;EACE;;;AC3IF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACnBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AASF;AAAA;EACE;;AACA;AAAA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AAUF;AAAA;AAAA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAKE;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxQN;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AASJ;EACE;;;AAQF;EACE;;;AAIJ;EACE;EACA;;;AC3DF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AAUJ;AAAA;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAOA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AClKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;AAOA;EACE;;AAGF;EACE;EACA;;;ACjGF;EACE;;AAMA;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACxBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;ACpDN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAGA;EACE;;;AAUF;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAIA;EACE;;;AC5FJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIA;EADF;IAEI;;;;AAIN;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;;ACrEJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;AChDR;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EAQA;EACA;;AAIF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;ACnGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AAIA;EACE;EACA;;;AClFJ;EACE;;AAGE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AHmCJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AEjIJ;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AAIA;EACE;EACA;;;AEtFJ;EACE;EACA;EACA;EACA;EAGA;;;ADHF;EACE;;AAGE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AE1EN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;ALjBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AMjDN;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;ACnBJ;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;;AAIF;EACE;EACA;EACA;;;AC7BJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAKA;EACE;;;AAKF;EACE;;AAGF;EACE;;AAIA;EACE;;;ACnEN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;EACA;;;ACzCF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AAOJ;EACE;EACA;EACA;EACA;;;ACrDF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EACE;;;AAMJ;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAOJ;EACE;EACA;EACA;EACA;;;AC1DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;EACA;;;AClCF;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;AAQN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AC1HJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAII;AAAA;AAAA;IACE;IACA;;;AAMJ;EACE;;;AC/CJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKF;EACE;EACA;EAEA;;AAGF;EACE;;AAKF;AAAA;EAEE;;;AFrCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AGhDJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAIA;EACE;EACA;;;AAIJ;EACE;;;AC3CF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;AAON;EACE;EACA;;;ACjGJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AC/CJ;EACE;EACA","file":"main.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/MessageDivider/MessageDivider.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/ToolResponse/ToolResponse.scss","../../src/main.scss"],"names":[],"mappings":";AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAKF;EA9BF;IA+BI;IACA;;;AAIF;EApCF;IAqCI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAOJ;EACE;;;AC3IF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACnBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AASF;AAAA;EACE;;AACA;AAAA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AAUF;AAAA;AAAA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAKE;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxQN;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AASJ;EACE;;;AAQF;EACE;;;AAIJ;EACE;EACA;;;AC3DF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AAUJ;AAAA;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAOA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AClKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;AAOA;EACE;;AAGF;EACE;EACA;;;ACjGF;EACE;;AAMA;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACxBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;ACpDN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAGA;EACE;;;AAUF;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAIA;EACE;;;AC5FJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIA;EADF;IAEI;;;;AAIN;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;;ACrEJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;AChDR;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EAQA;EACA;;AAIF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;ACnGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AAIA;EACE;EACA;;;AClFJ;EACE;;AAGE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AHmCJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AEjIJ;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AAIA;EACE;EACA;;;AEtFJ;EACE;EACA;EACA;EACA;EAGA;;;ADHF;EACE;;AAGE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AE1EN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;ALjBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AMjDN;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;ACnBJ;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;;AAIF;EACE;EACA;EACA;;;AC7BJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAKA;EACE;;;AAKF;EACE;;AAGF;EACE;;AAIA;EACE;;;ACnEN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;EACA;;;ACzCF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AAOJ;EACE;EACA;EACA;EACA;;;ACrDF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EACE;;;AAMJ;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAOJ;EACE;EACA;EACA;EACA;;;AC1DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;EACA;;;AClCF;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;AAQN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AC1HJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAII;AAAA;AAAA;IACE;IACA;;;AAMJ;EACE;;;AC/CJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKF;EACE;EACA;EAEA;;AAGF;EACE;;AAKF;AAAA;EAEE;;;AFrCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AGhDJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAIA;EACE;EACA;;;AAIJ;EACE;;;AC3CF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;AAON;EACE;EACA;;;ACjGJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;ACnFJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;ACIJ;EACE;EACA","file":"main.css"}
@@ -0,0 +1 @@
1
+ {"main":"../../cjs/ToolResponse/index.js","module":"../../esm/ToolResponse/index.js","typings":"../../esm/ToolResponse/index.d.ts"}
@@ -10,6 +10,7 @@ import { UserFeedbackProps } from './UserFeedback/UserFeedback';
10
10
  import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
11
11
  import { TableProps } from '@patternfly/react-table';
12
12
  import { PluggableList } from 'unified';
13
+ import { ToolResponseProps } from '../ToolResponse';
13
14
  export interface MessageAttachment {
14
15
  /** Name of file attached to the message */
15
16
  name: string;
@@ -145,6 +146,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
145
146
  isMarkdownDisabled?: boolean;
146
147
  /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
147
148
  reactMarkdownProps?: Options;
149
+ /** Props for tool response card */
150
+ toolResponse?: ToolResponseProps;
148
151
  }
149
152
  export declare const MessageBase: FunctionComponent<MessageProps>;
150
153
  declare const Message: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -44,8 +44,9 @@ import LinkMessage from './LinkMessage/LinkMessage';
44
44
  import ErrorMessage from './ErrorMessage/ErrorMessage';
45
45
  import MessageInput from './MessageInput';
46
46
  import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
47
+ import ToolResponse from '../ToolResponse';
47
48
  export const MessageBase = (_a) => {
48
- var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps"]);
49
+ var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse"]);
49
50
  const [messageText, setMessageText] = useState(content);
50
51
  useEffect(() => {
51
52
  setMessageText(content);
@@ -114,7 +115,7 @@ export const MessageBase = (_a) => {
114
115
  }
115
116
  return (_jsxs(_Fragment, { children: [beforeMainContent && _jsx(_Fragment, { children: beforeMainContent }), error ? _jsx(ErrorMessage, Object.assign({}, error)) : handleMarkdown()] }));
116
117
  };
117
- return (_jsxs("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [_jsx(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)), _jsxs("div", { className: "pf-chatbot__message-contents", children: [_jsxs("div", { className: "pf-chatbot__message-meta", children: [name && (_jsx("span", { className: "pf-chatbot__message-name", children: _jsx(Truncate, { content: name }) })), role === 'bot' && (_jsx(Label, { variant: "outline", isCompact: true, children: botWord })), _jsx(Timestamp, { date: date, children: timestamp })] }), _jsxs("div", { className: "pf-chatbot__message-response", children: [_jsxs("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && _jsx(_Fragment, { children: afterMainContent }), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && _jsx(ResponseActions, { actions: actions }), userFeedbackForm && _jsx(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && (_jsx(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && (_jsx("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
118
+ return (_jsxs("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [_jsx(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)), _jsxs("div", { className: "pf-chatbot__message-contents", children: [_jsxs("div", { className: "pf-chatbot__message-meta", children: [name && (_jsx("span", { className: "pf-chatbot__message-name", children: _jsx(Truncate, { content: name }) })), role === 'bot' && (_jsx(Label, { variant: "outline", isCompact: true, children: botWord })), _jsx(Timestamp, { date: date, children: timestamp })] }), _jsxs("div", { className: "pf-chatbot__message-response", children: [_jsxs("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && _jsx(_Fragment, { children: afterMainContent }), toolResponse && _jsx(ToolResponse, Object.assign({}, toolResponse)), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && _jsx(ResponseActions, { actions: actions }), userFeedbackForm && _jsx(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && (_jsx(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && (_jsx("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
118
119
  var _a;
119
120
  return (_jsx("div", { className: "pf-chatbot__message-attachment", children: _jsx(FileDetailsLabel, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId }) }, (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name));
120
121
  }) })), !isLoading && endContent && _jsx(_Fragment, { children: endContent })] })] })] })));
@@ -521,6 +521,20 @@ describe('Message', () => {
521
521
  } }));
522
522
  expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
523
523
  }));
524
+ it('should handle tool response correctly', () => __awaiter(void 0, void 0, void 0, function* () {
525
+ render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", toolResponse: {
526
+ toggleContent: 'Tool response: Name',
527
+ subheading: 'Thought for 3 seconds',
528
+ body: 'Lorem ipsum dolor sit amet',
529
+ cardTitle: 'Card title',
530
+ cardBody: 'Card body'
531
+ } }));
532
+ expect(screen.getByRole('button', { name: /Tool response: Name/i })).toBeTruthy();
533
+ expect(screen.getByText('Thought for 3 seconds')).toBeTruthy();
534
+ expect(screen.getByText('Lorem ipsum dolor sit amet')).toBeTruthy();
535
+ expect(screen.getByText('Card title')).toBeTruthy();
536
+ expect(screen.getByText('Card body')).toBeTruthy();
537
+ }));
524
538
  it('should handle block quote correctly', () => {
525
539
  render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: BLOCK_QUOTES }));
526
540
  expect(screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
@@ -0,0 +1,30 @@
1
+ import { CardBodyProps, CardProps, CardTitleProps, DividerProps, ExpandableSectionProps } from '@patternfly/react-core';
2
+ import { type FunctionComponent } from 'react';
3
+ export interface ToolResponseProps {
4
+ /** Toggle content shown for expandable section */
5
+ toggleContent: React.ReactNode;
6
+ /** Additional props passed to expandable section */
7
+ expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
8
+ /** Subheading rendered inside expandable section */
9
+ subheading?: string;
10
+ /** Body text rendered inside expandable section */
11
+ body?: React.ReactNode | string;
12
+ /** Content passed into tool response card body */
13
+ cardBody: React.ReactNode;
14
+ /** Content passed into tool response card title */
15
+ cardTitle: React.ReactNode;
16
+ /** Additional props passed to main card */
17
+ cardProps?: CardProps;
18
+ /** Additional props passed to main card body */
19
+ cardBodyProps?: CardBodyProps;
20
+ /** Additional props passed to tool response card */
21
+ toolResponseCardProps?: CardProps;
22
+ /** Additional props passed to tool response card body */
23
+ toolResponseCardBodyProps?: CardBodyProps;
24
+ /** Additional props passed to tool response card divider */
25
+ toolResponseCardDividerProps?: DividerProps;
26
+ /** Additional props passed to tool response card title */
27
+ toolResponseCardTitleProps?: CardTitleProps;
28
+ }
29
+ export declare const ToolResponse: FunctionComponent<ToolResponseProps>;
30
+ export default ToolResponse;
@@ -0,0 +1,14 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ // ============================================================================
3
+ // Tool Response Card
4
+ // ============================================================================
5
+ import { Card, CardBody, CardTitle, Divider, ExpandableSection } from '@patternfly/react-core';
6
+ import { useState } from 'react';
7
+ export const ToolResponse = ({ body, cardProps, expandableSectionProps, subheading, cardBody, cardTitle, cardBodyProps, toggleContent, toolResponseCardBodyProps, toolResponseCardDividerProps, toolResponseCardProps, toolResponseCardTitleProps }) => {
8
+ const [isExpanded, setIsExpanded] = useState(true);
9
+ const onToggle = (_event, isExpanded) => {
10
+ setIsExpanded(isExpanded);
11
+ };
12
+ return (_jsx(Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response" }, cardProps, { children: _jsx(CardBody, Object.assign({}, cardBodyProps, { children: _jsx(ExpandableSection, Object.assign({ toggleContent: toggleContent, onToggle: onToggle, isExpanded: isExpanded, isIndented: true, className: "pf-chatbot__tool-response-expandable-section" }, expandableSectionProps, { children: _jsxs("div", { className: "pf-chatbot__tool-response-section", children: [subheading && (_jsx("div", { className: "pf-chatbot__tool-response-subheading", children: _jsx("span", { children: subheading }) })), body && _jsx("div", { className: "pf-chatbot__tool-response-body", children: body }), _jsxs(Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response-card" }, toolResponseCardProps, { children: [_jsx(CardTitle, Object.assign({}, toolResponseCardTitleProps, { children: cardTitle })), _jsx(Divider, Object.assign({}, toolResponseCardDividerProps)), _jsx(CardBody, Object.assign({}, toolResponseCardBodyProps, { children: cardBody }))] }))] }) })) })) })));
13
+ };
14
+ export default ToolResponse;
@@ -0,0 +1 @@
1
+ import '@testing-library/jest-dom';
@@ -0,0 +1,55 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { render, screen } from '@testing-library/react';
3
+ import '@testing-library/jest-dom';
4
+ import ToolResponse from './ToolResponse';
5
+ describe('ToolResponse', () => {
6
+ const defaultProps = {
7
+ toggleContent: 'Tool response: toolName',
8
+ cardTitle: 'Title',
9
+ cardBody: 'Body'
10
+ };
11
+ it('should render with required props only', () => {
12
+ render(_jsx(ToolResponse, Object.assign({}, defaultProps)));
13
+ expect(screen.getByText('Title')).toBeTruthy();
14
+ expect(screen.getByText('Body')).toBeTruthy();
15
+ expect(screen.getByText('Tool response: toolName')).toBeTruthy();
16
+ });
17
+ it('should render subheading when provided', () => {
18
+ const subheading = 'Tool execution result';
19
+ render(_jsx(ToolResponse, Object.assign({}, defaultProps, { subheading: subheading })));
20
+ expect(screen.getByText(subheading)).toBeTruthy();
21
+ });
22
+ it('should render body content when provided', () => {
23
+ const body = 'This is the tool response body content';
24
+ render(_jsx(ToolResponse, Object.assign({}, defaultProps, { body: body })));
25
+ expect(screen.getByText(body)).toBeTruthy();
26
+ });
27
+ it('should render with complex content including React elements', () => {
28
+ const body = (_jsxs("div", { children: [_jsx("p", { children: "Complex body content" }), _jsxs("ul", { children: [_jsx("li", { children: "Item 1" }), _jsx("li", { children: "Item 2" })] })] }));
29
+ const cardTitle = _jsx("strong", { children: "API Response" });
30
+ const cardBody = (_jsx("div", { children: _jsx("code", { children: "{ status: 'success' }" }) }));
31
+ render(_jsx(ToolResponse, Object.assign({}, defaultProps, { body: body, cardTitle: cardTitle, cardBody: cardBody })));
32
+ expect(screen.getByText('Complex body content')).toBeTruthy();
33
+ expect(screen.getByText('Item 1')).toBeTruthy();
34
+ expect(screen.getByText('Item 2')).toBeTruthy();
35
+ expect(screen.getByText('API Response')).toBeTruthy();
36
+ expect(screen.getByText("{ status: 'success' }")).toBeTruthy();
37
+ });
38
+ it('should apply custom className from cardProps', () => {
39
+ const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { cardProps: { className: 'custom-tool-response-class' } })));
40
+ expect(container.querySelector('.custom-tool-response-class')).toBeTruthy();
41
+ });
42
+ it('should pass through expandableSectionProps', () => {
43
+ render(_jsx(ToolResponse, Object.assign({}, defaultProps, { expandableSectionProps: { className: 'custom-expandable-class' } })));
44
+ expect(document.querySelector('.custom-expandable-class')).toBeTruthy();
45
+ });
46
+ it('should pass through toolResponseCardProps', () => {
47
+ render(_jsx(ToolResponse, Object.assign({}, defaultProps, { toolResponseCardProps: { className: 'custom-card-class' } })));
48
+ expect(document.querySelector('.custom-card-class')).toBeTruthy();
49
+ });
50
+ it('should not render subheading span when subheading is not provided', () => {
51
+ const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps)));
52
+ const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
53
+ expect(subheadingContainer).toBeFalsy();
54
+ });
55
+ });
@@ -0,0 +1,2 @@
1
+ export { default } from './ToolResponse';
2
+ export * from './ToolResponse';
@@ -0,0 +1,2 @@
1
+ export { default } from './ToolResponse';
2
+ export * from './ToolResponse';
@@ -54,5 +54,7 @@ export { default as SourcesCard } from './SourcesCard';
54
54
  export * from './SourcesCard';
55
55
  export { default as TermsOfUse } from './TermsOfUse';
56
56
  export * from './TermsOfUse';
57
+ export { default as ToolResponse } from './ToolResponse';
58
+ export * from './ToolResponse';
57
59
  export { default as tracking } from './tracking';
58
60
  export * from './tracking';
package/dist/esm/index.js CHANGED
@@ -55,5 +55,7 @@ export { default as SourcesCard } from './SourcesCard';
55
55
  export * from './SourcesCard';
56
56
  export { default as TermsOfUse } from './TermsOfUse';
57
57
  export * from './TermsOfUse';
58
+ export { default as ToolResponse } from './ToolResponse';
59
+ export * from './ToolResponse';
58
60
  export { default as tracking } from './tracking';
59
61
  export * from './tracking';
@@ -1 +1 @@
1
- {"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/index.ts","../src/Message/Plugins/rehypeCodeBlockToggle.ts","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/MessageDivider/MessageDivider.test.tsx","../src/MessageDivider/MessageDivider.tsx","../src/MessageDivider/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}
1
+ {"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/index.ts","../src/Message/Plugins/rehypeCodeBlockToggle.ts","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/MessageDivider/MessageDivider.test.tsx","../src/MessageDivider/MessageDivider.tsx","../src/MessageDivider/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/ToolResponse/ToolResponse.test.tsx","../src/ToolResponse/ToolResponse.tsx","../src/ToolResponse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/chatbot",
3
- "version": "6.4.0-prerelease.16",
3
+ "version": "6.4.0-prerelease.17",
4
4
  "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -0,0 +1,135 @@
1
+ import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
2
+ import Message from '@patternfly/chatbot/dist/dynamic/Message';
3
+ import patternflyAvatar from './patternfly_avatar.jpg';
4
+ import { CopyIcon, WrenchIcon } from '@patternfly/react-icons';
5
+ import {
6
+ Button,
7
+ DescriptionList,
8
+ DescriptionListDescription,
9
+ DescriptionListGroup,
10
+ DescriptionListTerm,
11
+ ExpandableSection,
12
+ ExpandableSectionVariant,
13
+ Flex,
14
+ FlexItem,
15
+ Label
16
+ } from '@patternfly/react-core';
17
+
18
+ export const MessageWithToolResponseExample: FunctionComponent = () => {
19
+ const [isExpanded, setIsExpanded] = useState(false);
20
+
21
+ const onToggle = (_event: ReactMouseEvent, isExpanded: boolean) => {
22
+ setIsExpanded(isExpanded);
23
+ };
24
+
25
+ return (
26
+ <Message
27
+ name="Bot"
28
+ role="bot"
29
+ avatar={patternflyAvatar}
30
+ content="This example has a body description that's within the recommended limit of 2 lines:"
31
+ toolResponse={{
32
+ toggleContent: 'Tool response: toolName',
33
+ subheading: 'Thought for 3 seconds',
34
+ body: "Here's the summary for your toolName response:",
35
+ cardTitle: (
36
+ <Flex alignItems={{ default: 'alignItemsCenter' }} justifyContent={{ default: 'justifyContentSpaceBetween' }}>
37
+ <FlexItem>
38
+ <Flex direction={{ default: 'column' }} gap={{ default: 'gapXs' }}>
39
+ <FlexItem grow={{ default: 'grow' }}>
40
+ <Flex gap={{ default: 'gapXs' }}>
41
+ <FlexItem>
42
+ <WrenchIcon style={{ color: 'var(--pf-t--global--icon--color--brand--default' }} />
43
+ </FlexItem>
44
+ <FlexItem>toolName</FlexItem>
45
+ </Flex>
46
+ </FlexItem>
47
+ <FlexItem>
48
+ <Flex gap={{ default: 'gapSm' }} style={{ fontSize: '12px', fontWeight: '400' }}>
49
+ <FlexItem>Execution time:</FlexItem>
50
+ <FlexItem>0.12 seconds</FlexItem>
51
+ </Flex>
52
+ </FlexItem>
53
+ </Flex>
54
+ </FlexItem>
55
+ <FlexItem>
56
+ <Button
57
+ variant="plain"
58
+ aria-label="Copy tool response to clipboard"
59
+ icon={<CopyIcon style={{ color: 'var(--pf-t--global--icon--color--subtle)' }} />}
60
+ ></Button>
61
+ </FlexItem>
62
+ </Flex>
63
+ ),
64
+ cardBody: (
65
+ <>
66
+ <DescriptionList
67
+ style={{ '--pf-v6-c-description-list--RowGap': 'var(--pf-t--global--spacer--md)' } as any}
68
+ aria-label="Tool response"
69
+ >
70
+ <DescriptionListGroup
71
+ style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
72
+ >
73
+ <DescriptionListTerm>Parameters</DescriptionListTerm>
74
+ <DescriptionListDescription>
75
+ <Flex direction={{ default: 'column' }}>
76
+ <FlexItem>Optional description text for parameters.</FlexItem>
77
+ <FlexItem>
78
+ <Flex gap={{ default: 'gapSm' }}>
79
+ <FlexItem>
80
+ <Label variant="outline" color="blue">
81
+ type
82
+ </Label>
83
+ </FlexItem>
84
+ <FlexItem>
85
+ <Label variant="outline" color="blue">
86
+ properties
87
+ </Label>
88
+ </FlexItem>
89
+ <FlexItem>
90
+ <Label variant="outline" color="blue">
91
+ label
92
+ </Label>
93
+ </FlexItem>
94
+ <FlexItem>
95
+ <Label variant="outline" color="blue">
96
+ label
97
+ </Label>
98
+ </FlexItem>
99
+ </Flex>
100
+ </FlexItem>
101
+ </Flex>
102
+ </DescriptionListDescription>
103
+ </DescriptionListGroup>
104
+ <DescriptionListGroup
105
+ style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
106
+ >
107
+ <DescriptionListTerm>Response</DescriptionListTerm>
108
+ <DescriptionListDescription>
109
+ <ExpandableSection
110
+ variant={ExpandableSectionVariant.truncate}
111
+ toggleTextExpanded="show less of response"
112
+ toggleTextCollapsed="show more of response"
113
+ onToggle={onToggle}
114
+ isExpanded={isExpanded}
115
+ style={
116
+ {
117
+ '--pf-v6-c-expandable-section__content--Opacity': '1',
118
+ '--pf-v6-c-expandable-section__content--PaddingInlineStart': 0,
119
+ '--pf-v6-c-expandable-section__content--TranslateY': 0,
120
+ '--pf-v6-c-expandable-section--m-expand-top__content--TranslateY': 0
121
+ } as any
122
+ }
123
+ >
124
+ Descriptive text about the tool response, including completion status, details on the data that was
125
+ processed, or anything else relevant to the use case.
126
+ </ExpandableSection>
127
+ </DescriptionListDescription>
128
+ </DescriptionListGroup>
129
+ </DescriptionList>
130
+ </>
131
+ )
132
+ }}
133
+ />
134
+ );
135
+ };
@@ -34,7 +34,7 @@ import Message from '@patternfly/chatbot/dist/dynamic/Message';
34
34
  import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';
35
35
  import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
36
36
  import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
37
- import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, OutlinedQuestionCircleIcon, RedoIcon, RobotIcon } from '@patternfly/react-icons';
37
+ import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CopyIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, OutlinedQuestionCircleIcon, RedoIcon, RobotIcon, WrenchIcon } from '@patternfly/react-icons';
38
38
  import patternflyAvatar from './patternfly_avatar.jpg';
39
39
  import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
40
40
  import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails';
@@ -178,6 +178,14 @@ The API for a source requires a link at minimum, but we strongly recommend provi
178
178
 
179
179
  ```
180
180
 
181
+ ### Messages with tool responses
182
+
183
+ If you are using [model context protocol (MCP)](https://www.redhat.com/en/blog/model-context-protocol-discover-missing-link-ai-integration), you may find it useful to display information on tool responses as part of a message. Passing `toolResponse` to `<Message>` allows you to display a card with an optional subheading and body, as well as custom card content. Content is intentionally left fully customizable for now as this is an evolving area.
184
+
185
+ ```js file="./MessageWithToolResponse.tsx"
186
+
187
+ ```
188
+
181
189
  ### Messages with quick start tiles
182
190
 
183
191
  [Quick start](/extensions/quick-starts/) tiles can be added to messages via the `quickStarts` prop. Users can initiate the quick start from a link within the message tile.
@@ -675,6 +675,28 @@ describe('Message', () => {
675
675
  );
676
676
  expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
677
677
  });
678
+ it('should handle tool response correctly', async () => {
679
+ render(
680
+ <Message
681
+ avatar="./img"
682
+ role="user"
683
+ name="User"
684
+ content="Hi"
685
+ toolResponse={{
686
+ toggleContent: 'Tool response: Name',
687
+ subheading: 'Thought for 3 seconds',
688
+ body: 'Lorem ipsum dolor sit amet',
689
+ cardTitle: 'Card title',
690
+ cardBody: 'Card body'
691
+ }}
692
+ />
693
+ );
694
+ expect(screen.getByRole('button', { name: /Tool response: Name/i })).toBeTruthy();
695
+ expect(screen.getByText('Thought for 3 seconds')).toBeTruthy();
696
+ expect(screen.getByText('Lorem ipsum dolor sit amet')).toBeTruthy();
697
+ expect(screen.getByText('Card title')).toBeTruthy();
698
+ expect(screen.getByText('Card body')).toBeTruthy();
699
+ });
678
700
  it('should handle block quote correctly', () => {
679
701
  render(<Message avatar="./img" role="user" name="User" content={BLOCK_QUOTES} />);
680
702
  expect(screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
@@ -49,6 +49,7 @@ import LinkMessage from './LinkMessage/LinkMessage';
49
49
  import ErrorMessage from './ErrorMessage/ErrorMessage';
50
50
  import MessageInput from './MessageInput';
51
51
  import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
52
+ import ToolResponse, { ToolResponseProps } from '../ToolResponse';
52
53
 
53
54
  export interface MessageAttachment {
54
55
  /** Name of file attached to the message */
@@ -189,6 +190,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
189
190
  isMarkdownDisabled?: boolean;
190
191
  /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
191
192
  reactMarkdownProps?: Options;
193
+ /** Props for tool response card */
194
+ toolResponse?: ToolResponseProps;
192
195
  }
193
196
 
194
197
  export const MessageBase: FunctionComponent<MessageProps> = ({
@@ -230,6 +233,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
230
233
  isCompact,
231
234
  isMarkdownDisabled,
232
235
  reactMarkdownProps,
236
+ toolResponse,
233
237
  ...props
234
238
  }: MessageProps) => {
235
239
  const [messageText, setMessageText] = useState(content);
@@ -376,6 +380,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
376
380
  <div className="pf-chatbot__message-and-actions">
377
381
  {renderMessage()}
378
382
  {afterMainContent && <>{afterMainContent}</>}
383
+ {toolResponse && <ToolResponse {...toolResponse} />}
379
384
  {!isLoading && sources && <SourcesCard {...sources} isCompact={isCompact} />}
380
385
  {quickStarts && quickStarts.quickStart && (
381
386
  <QuickStartTile
@@ -0,0 +1,36 @@
1
+ .pf-chatbot__tool-response {
2
+ --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
3
+ overflow: unset;
4
+ }
5
+
6
+ .pf-chatbot__tool-response-expandable-section {
7
+ --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--xs);
8
+ }
9
+
10
+ .pf-chatbot__tool-response-section {
11
+ display: flex;
12
+ flex-direction: column;
13
+ gap: var(--pf-t--global--spacer--xs);
14
+ }
15
+
16
+ .pf-chatbot__tool-response-subheading {
17
+ font-size: var(--pf-t--global--font--size--body--sm);
18
+ font-weight: var(--pf-t--global--font--weight--body--default);
19
+ color: var(--pf-t--global--text--color--subtle);
20
+ }
21
+
22
+ .pf-chatbot__tool-response-body {
23
+ color: var(--pf-t--global--text--color--subtle);
24
+ margin-block-end: var(--pf-t--global--spacer--xs);
25
+ }
26
+
27
+ .pf-chatbot__tool-response-card {
28
+ --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
29
+ --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
30
+ --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
31
+ --pf-v6-c-card--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
32
+
33
+ .pf-v6-c-divider {
34
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--control--read-only);
35
+ }
36
+ }
@@ -0,0 +1,78 @@
1
+ import { render, screen } from '@testing-library/react';
2
+ import '@testing-library/jest-dom';
3
+ import ToolResponse from './ToolResponse';
4
+
5
+ describe('ToolResponse', () => {
6
+ const defaultProps = {
7
+ toggleContent: 'Tool response: toolName',
8
+ cardTitle: 'Title',
9
+ cardBody: 'Body'
10
+ };
11
+
12
+ it('should render with required props only', () => {
13
+ render(<ToolResponse {...defaultProps} />);
14
+ expect(screen.getByText('Title')).toBeTruthy();
15
+ expect(screen.getByText('Body')).toBeTruthy();
16
+ expect(screen.getByText('Tool response: toolName')).toBeTruthy();
17
+ });
18
+
19
+ it('should render subheading when provided', () => {
20
+ const subheading = 'Tool execution result';
21
+ render(<ToolResponse {...defaultProps} subheading={subheading} />);
22
+ expect(screen.getByText(subheading)).toBeTruthy();
23
+ });
24
+
25
+ it('should render body content when provided', () => {
26
+ const body = 'This is the tool response body content';
27
+ render(<ToolResponse {...defaultProps} body={body} />);
28
+ expect(screen.getByText(body)).toBeTruthy();
29
+ });
30
+
31
+ it('should render with complex content including React elements', () => {
32
+ const body = (
33
+ <div>
34
+ <p>Complex body content</p>
35
+ <ul>
36
+ <li>Item 1</li>
37
+ <li>Item 2</li>
38
+ </ul>
39
+ </div>
40
+ );
41
+ const cardTitle = <strong>API Response</strong>;
42
+ const cardBody = (
43
+ <div>
44
+ <code>{"{ status: 'success' }"}</code>
45
+ </div>
46
+ );
47
+
48
+ render(<ToolResponse {...defaultProps} body={body} cardTitle={cardTitle} cardBody={cardBody} />);
49
+ expect(screen.getByText('Complex body content')).toBeTruthy();
50
+ expect(screen.getByText('Item 1')).toBeTruthy();
51
+ expect(screen.getByText('Item 2')).toBeTruthy();
52
+ expect(screen.getByText('API Response')).toBeTruthy();
53
+ expect(screen.getByText("{ status: 'success' }")).toBeTruthy();
54
+ });
55
+
56
+ it('should apply custom className from cardProps', () => {
57
+ const { container } = render(
58
+ <ToolResponse {...defaultProps} cardProps={{ className: 'custom-tool-response-class' }} />
59
+ );
60
+ expect(container.querySelector('.custom-tool-response-class')).toBeTruthy();
61
+ });
62
+
63
+ it('should pass through expandableSectionProps', () => {
64
+ render(<ToolResponse {...defaultProps} expandableSectionProps={{ className: 'custom-expandable-class' }} />);
65
+ expect(document.querySelector('.custom-expandable-class')).toBeTruthy();
66
+ });
67
+
68
+ it('should pass through toolResponseCardProps', () => {
69
+ render(<ToolResponse {...defaultProps} toolResponseCardProps={{ className: 'custom-card-class' }} />);
70
+ expect(document.querySelector('.custom-card-class')).toBeTruthy();
71
+ });
72
+
73
+ it('should not render subheading span when subheading is not provided', () => {
74
+ const { container } = render(<ToolResponse {...defaultProps} />);
75
+ const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
76
+ expect(subheadingContainer).toBeFalsy();
77
+ });
78
+ });
@@ -0,0 +1,95 @@
1
+ // ============================================================================
2
+ // Tool Response Card
3
+ // ============================================================================
4
+ import {
5
+ Card,
6
+ CardBody,
7
+ CardBodyProps,
8
+ CardProps,
9
+ CardTitle,
10
+ CardTitleProps,
11
+ Divider,
12
+ DividerProps,
13
+ ExpandableSection,
14
+ ExpandableSectionProps
15
+ } from '@patternfly/react-core';
16
+ import { useState, type FunctionComponent } from 'react';
17
+
18
+ export interface ToolResponseProps {
19
+ /** Toggle content shown for expandable section */
20
+ toggleContent: React.ReactNode;
21
+ /** Additional props passed to expandable section */
22
+ expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
23
+ /** Subheading rendered inside expandable section */
24
+ subheading?: string;
25
+ /** Body text rendered inside expandable section */
26
+ body?: React.ReactNode | string;
27
+ /** Content passed into tool response card body */
28
+ cardBody: React.ReactNode;
29
+ /** Content passed into tool response card title */
30
+ cardTitle: React.ReactNode;
31
+ /** Additional props passed to main card */
32
+ cardProps?: CardProps;
33
+ /** Additional props passed to main card body */
34
+ cardBodyProps?: CardBodyProps;
35
+ /** Additional props passed to tool response card */
36
+ toolResponseCardProps?: CardProps;
37
+ /** Additional props passed to tool response card body */
38
+ toolResponseCardBodyProps?: CardBodyProps;
39
+ /** Additional props passed to tool response card divider */
40
+ toolResponseCardDividerProps?: DividerProps;
41
+ /** Additional props passed to tool response card title */
42
+ toolResponseCardTitleProps?: CardTitleProps;
43
+ }
44
+
45
+ export const ToolResponse: FunctionComponent<ToolResponseProps> = ({
46
+ body,
47
+ cardProps,
48
+ expandableSectionProps,
49
+ subheading,
50
+ cardBody,
51
+ cardTitle,
52
+ cardBodyProps,
53
+ toggleContent,
54
+ toolResponseCardBodyProps,
55
+ toolResponseCardDividerProps,
56
+ toolResponseCardProps,
57
+ toolResponseCardTitleProps
58
+ }: ToolResponseProps) => {
59
+ const [isExpanded, setIsExpanded] = useState(true);
60
+
61
+ const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
62
+ setIsExpanded(isExpanded);
63
+ };
64
+
65
+ return (
66
+ <Card isCompact className="pf-chatbot__tool-response" {...cardProps}>
67
+ <CardBody {...cardBodyProps}>
68
+ <ExpandableSection
69
+ toggleContent={toggleContent}
70
+ onToggle={onToggle}
71
+ isExpanded={isExpanded}
72
+ isIndented
73
+ className="pf-chatbot__tool-response-expandable-section"
74
+ {...expandableSectionProps}
75
+ >
76
+ <div className="pf-chatbot__tool-response-section">
77
+ {subheading && (
78
+ <div className="pf-chatbot__tool-response-subheading">
79
+ <span>{subheading}</span>
80
+ </div>
81
+ )}
82
+ {body && <div className="pf-chatbot__tool-response-body">{body}</div>}
83
+ <Card isCompact className="pf-chatbot__tool-response-card" {...toolResponseCardProps}>
84
+ <CardTitle {...toolResponseCardTitleProps}>{cardTitle}</CardTitle>
85
+ <Divider {...toolResponseCardDividerProps} />
86
+ <CardBody {...toolResponseCardBodyProps}>{cardBody}</CardBody>
87
+ </Card>
88
+ </div>
89
+ </ExpandableSection>
90
+ </CardBody>
91
+ </Card>
92
+ );
93
+ };
94
+
95
+ export default ToolResponse;
@@ -0,0 +1,3 @@
1
+ export { default } from './ToolResponse';
2
+
3
+ export * from './ToolResponse';
package/src/index.ts CHANGED
@@ -84,5 +84,8 @@ export * from './SourcesCard';
84
84
  export { default as TermsOfUse } from './TermsOfUse';
85
85
  export * from './TermsOfUse';
86
86
 
87
+ export { default as ToolResponse } from './ToolResponse';
88
+ export * from './ToolResponse';
89
+
87
90
  export { default as tracking } from './tracking';
88
91
  export * from './tracking';
package/src/main.scss CHANGED
@@ -33,6 +33,7 @@
33
33
  @import './SourcesCard/SourcesCard.scss';
34
34
  @import './SourceDetailsMenuItem/SourceDetailsMenuItem';
35
35
  @import './TermsOfUse/TermsOfUse';
36
+ @import './ToolResponse/ToolResponse';
36
37
 
37
38
  .ws-full-page-utils {
38
39
  left: 0 !important;