@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.
- package/dist/cjs/Message/Message.d.ts +3 -0
- package/dist/cjs/Message/Message.js +3 -2
- package/dist/cjs/Message/Message.test.js +14 -0
- package/dist/cjs/ToolResponse/ToolResponse.d.ts +30 -0
- package/dist/cjs/ToolResponse/ToolResponse.js +18 -0
- package/dist/cjs/ToolResponse/ToolResponse.test.d.ts +1 -0
- package/dist/cjs/ToolResponse/ToolResponse.test.js +60 -0
- package/dist/cjs/ToolResponse/index.d.ts +2 -0
- package/dist/cjs/ToolResponse/index.js +23 -0
- package/dist/cjs/index.d.ts +2 -0
- package/dist/cjs/index.js +4 -1
- package/dist/css/main.css +36 -0
- package/dist/css/main.css.map +1 -1
- package/dist/dynamic/ToolResponse/package.json +1 -0
- package/dist/esm/Message/Message.d.ts +3 -0
- package/dist/esm/Message/Message.js +3 -2
- package/dist/esm/Message/Message.test.js +14 -0
- package/dist/esm/ToolResponse/ToolResponse.d.ts +30 -0
- package/dist/esm/ToolResponse/ToolResponse.js +14 -0
- package/dist/esm/ToolResponse/ToolResponse.test.d.ts +1 -0
- package/dist/esm/ToolResponse/ToolResponse.test.js +55 -0
- package/dist/esm/ToolResponse/index.d.ts +2 -0
- package/dist/esm/ToolResponse/index.js +2 -0
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.js +2 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithToolResponse.tsx +135 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +9 -1
- package/src/Message/Message.test.tsx +22 -0
- package/src/Message/Message.tsx +5 -0
- package/src/ToolResponse/ToolResponse.scss +36 -0
- package/src/ToolResponse/ToolResponse.test.tsx +78 -0
- package/src/ToolResponse/ToolResponse.tsx +95 -0
- package/src/ToolResponse/index.ts +3 -0
- package/src/index.ts +3 -0
- 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,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);
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -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;
|
package/dist/css/main.css.map
CHANGED
|
@@ -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
|
+
});
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -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.
|
|
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",
|
package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithToolResponse.tsx
ADDED
|
@@ -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();
|
package/src/Message/Message.tsx
CHANGED
|
@@ -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;
|
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