@patternfly/chatbot 6.3.0-prerelease.4 → 6.3.0-prerelease.5
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 +2 -0
- package/dist/cjs/Message/Message.js +4 -4
- package/dist/cjs/Message/Message.test.js +12 -0
- package/dist/cjs/Message/QuickResponse/QuickResponse.d.ts +2 -0
- package/dist/cjs/Message/QuickResponse/QuickResponse.js +2 -2
- package/dist/cjs/Message/UserFeedback/UserFeedback.js +4 -4
- package/dist/cjs/Message/UserFeedback/UserFeedback.test.js +4 -0
- package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.js +4 -4
- package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.test.js +4 -0
- package/dist/css/main.css +15 -4
- package/dist/css/main.css.map +1 -1
- package/dist/esm/Message/Message.d.ts +2 -0
- package/dist/esm/Message/Message.js +4 -4
- package/dist/esm/Message/Message.test.js +12 -0
- package/dist/esm/Message/QuickResponse/QuickResponse.d.ts +2 -0
- package/dist/esm/Message/QuickResponse/QuickResponse.js +2 -2
- package/dist/esm/Message/UserFeedback/UserFeedback.js +4 -4
- package/dist/esm/Message/UserFeedback/UserFeedback.test.js +4 -0
- package/dist/esm/Message/UserFeedback/UserFeedbackComplete.js +4 -4
- package/dist/esm/Message/UserFeedback/UserFeedbackComplete.test.js +4 -0
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx +33 -0
- package/src/Message/Message.test.tsx +21 -0
- package/src/Message/Message.tsx +8 -2
- package/src/Message/QuickResponse/QuickResponse.tsx +5 -1
- package/src/Message/UserFeedback/UserFeedback.scss +24 -3
- package/src/Message/UserFeedback/UserFeedback.test.tsx +13 -0
- package/src/Message/UserFeedback/UserFeedback.tsx +4 -2
- package/src/Message/UserFeedback/UserFeedbackComplete.test.tsx +4 -0
- package/src/Message/UserFeedback/UserFeedbackComplete.tsx +10 -2
@@ -120,6 +120,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
|
|
120
120
|
onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
121
121
|
/** Props for edit form */
|
122
122
|
editFormProps?: FormProps;
|
123
|
+
/** Sets message to compact styling. */
|
124
|
+
isCompact?: boolean;
|
123
125
|
}
|
124
126
|
export declare const MessageBase: React.FunctionComponent<MessageProps>;
|
125
127
|
declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
@@ -49,7 +49,7 @@ const LinkMessage_1 = __importDefault(require("./LinkMessage/LinkMessage"));
|
|
49
49
|
const ErrorMessage_1 = __importDefault(require("./ErrorMessage/ErrorMessage"));
|
50
50
|
const MessageInput_1 = __importDefault(require("./MessageInput"));
|
51
51
|
const MessageBase = (_a) => {
|
52
|
-
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, editFormProps } = _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", "editFormProps"]);
|
52
|
+
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, editFormProps, isCompact } = _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", "editFormProps", "isCompact"]);
|
53
53
|
const [messageText, setMessageText] = react_1.default.useState(content);
|
54
54
|
react_1.default.useEffect(() => {
|
55
55
|
setMessageText(content);
|
@@ -131,9 +131,9 @@ const MessageBase = (_a) => {
|
|
131
131
|
!isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources)),
|
132
132
|
quickStarts && quickStarts.quickStart && (react_1.default.createElement(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
|
133
133
|
!isLoading && actions && react_1.default.createElement(ResponseActions_1.default, { actions: actions }),
|
134
|
-
userFeedbackForm && react_1.default.createElement(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString })),
|
135
|
-
userFeedbackComplete && react_1.default.createElement(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString })),
|
136
|
-
!isLoading && quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps }))),
|
134
|
+
userFeedbackForm && react_1.default.createElement(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })),
|
135
|
+
userFeedbackComplete && (react_1.default.createElement(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))),
|
136
|
+
!isLoading && quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))),
|
137
137
|
attachments && (react_1.default.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
|
138
138
|
var _a;
|
139
139
|
return (react_1.default.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },
|
@@ -287,6 +287,18 @@ describe('Message', () => {
|
|
287
287
|
yield user_event_1.default.click(quickResponse);
|
288
288
|
expect(spy).toHaveBeenCalledTimes(1);
|
289
289
|
}));
|
290
|
+
it('should be able to handle isCompact', () => __awaiter(void 0, void 0, void 0, function* () {
|
291
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
|
292
|
+
{
|
293
|
+
id: '1',
|
294
|
+
content: 'Yes',
|
295
|
+
onClick: jest.fn(),
|
296
|
+
className: 'test'
|
297
|
+
}
|
298
|
+
], isCompact: true }));
|
299
|
+
const parent = react_2.screen.getByRole('button', { name: /Yes/i }).parentNode;
|
300
|
+
expect(parent).toHaveClass('pf-m-compact');
|
301
|
+
}));
|
290
302
|
it('should be able to show more than 1 quick response', () => __awaiter(void 0, void 0, void 0, function* () {
|
291
303
|
const spy = jest.fn();
|
292
304
|
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
|
@@ -12,6 +12,8 @@ export interface QuickResponseProps {
|
|
12
12
|
quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
|
13
13
|
/** Callback when a response is clicked; used in feedback cards */
|
14
14
|
onSelect?: (id: string) => void;
|
15
|
+
/** Sets the quick responses to compact styling */
|
16
|
+
isCompact?: boolean;
|
15
17
|
}
|
16
18
|
export declare const QuickResponse: React.FunctionComponent<QuickResponseProps>;
|
17
19
|
export default QuickResponse;
|
@@ -18,7 +18,7 @@ exports.QuickResponse = void 0;
|
|
18
18
|
const react_1 = __importDefault(require("react"));
|
19
19
|
const react_core_1 = require("@patternfly/react-core");
|
20
20
|
const react_icons_1 = require("@patternfly/react-icons");
|
21
|
-
const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect }) => {
|
21
|
+
const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect, isCompact }) => {
|
22
22
|
const [selectedQuickResponse, setSelectedQuickResponse] = react_1.default.useState();
|
23
23
|
const handleQuickResponseClick = (id, onClick) => {
|
24
24
|
setSelectedQuickResponse(id);
|
@@ -27,7 +27,7 @@ const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabe
|
|
27
27
|
};
|
28
28
|
return (react_1.default.createElement(react_core_1.LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${(quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className) ? quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className : ''}` }, quickResponseContainerProps), quickResponses.map((_a) => {
|
29
29
|
var { id, onClick, content, className } = _a, props = __rest(_a, ["id", "onClick", "content", "className"]);
|
30
|
-
return (react_1.default.createElement(react_core_1.Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? react_1.default.createElement(react_icons_1.CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}
|
30
|
+
return (react_1.default.createElement(react_core_1.Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? react_1.default.createElement(react_icons_1.CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`, isCompact: isCompact }, props), content));
|
31
31
|
})));
|
32
32
|
};
|
33
33
|
exports.QuickResponse = QuickResponse;
|
@@ -23,7 +23,7 @@ const react_core_1 = require("@patternfly/react-core");
|
|
23
23
|
const QuickResponse_1 = __importDefault(require("../QuickResponse/QuickResponse"));
|
24
24
|
const CloseButton_1 = __importDefault(require("./CloseButton"));
|
25
25
|
const UserFeedback = (_a) => {
|
26
|
-
var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad"]);
|
26
|
+
var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true, isCompact } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "isCompact"]);
|
27
27
|
const [selectedResponse, setSelectedResponse] = react_1.default.useState();
|
28
28
|
const [value, setValue] = react_1.default.useState('');
|
29
29
|
const divRef = react_1.default.useRef(null);
|
@@ -36,14 +36,14 @@ const UserFeedback = (_a) => {
|
|
36
36
|
return (
|
37
37
|
/* card does not have ref forwarding; hence wrapper div */
|
38
38
|
react_1.default.createElement("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title },
|
39
|
-
react_1.default.createElement(react_core_1.Card, Object.assign({ className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
|
39
|
+
react_1.default.createElement(react_core_1.Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
|
40
40
|
react_1.default.createElement(react_core_1.CardHeader, { actions: {
|
41
41
|
actions: react_1.default.createElement(CloseButton_1.default, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
|
42
42
|
} },
|
43
43
|
react_1.default.createElement(HeadingLevel, { className: "pf-chatbot__feedback-card-title" }, title)),
|
44
44
|
react_1.default.createElement(react_core_1.CardBody, null,
|
45
|
-
react_1.default.createElement(react_core_1.Form, { className:
|
46
|
-
quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id) })),
|
45
|
+
react_1.default.createElement(react_core_1.Form, { className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` },
|
46
|
+
quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })),
|
47
47
|
hasTextArea && (react_1.default.createElement(react_core_1.TextArea, { value: value, onChange: (_event, value) => {
|
48
48
|
setValue(value);
|
49
49
|
onTextAreaChange && onTextAreaChange(_event, value);
|
@@ -130,4 +130,8 @@ describe('UserFeedback', () => {
|
|
130
130
|
(0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", focusOnLoad: false }));
|
131
131
|
expect(react_2.screen.getByTestId('card').parentElement).not.toHaveFocus();
|
132
132
|
});
|
133
|
+
it('should handle isCompact', () => {
|
134
|
+
(0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", isCompact: true }));
|
135
|
+
expect(react_2.screen.getByTestId('card')).toHaveClass('pf-m-compact');
|
136
|
+
});
|
133
137
|
});
|
@@ -22,7 +22,7 @@ const react_1 = __importDefault(require("react"));
|
|
22
22
|
const react_core_1 = require("@patternfly/react-core");
|
23
23
|
const CloseButton_1 = __importDefault(require("./CloseButton"));
|
24
24
|
const UserFeedbackComplete = (_a) => {
|
25
|
-
var { className, title = 'Feedback submitted', body = "We've received your response. Thank you for sharing your feedback!", timestamp, timeout = false, timeoutAnimation = 3000, onTimeout, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, onMouseEnter, onMouseLeave, ouiaId, ouiaSafe, isLiveRegion, id, focusOnLoad = true } = _a, props = __rest(_a, ["className", "title", "body", "timestamp", "timeout", "timeoutAnimation", "onTimeout", "onClose", "closeButtonAriaLabel", "onMouseEnter", "onMouseLeave", "ouiaId", "ouiaSafe", "isLiveRegion", "id", "focusOnLoad"]);
|
25
|
+
var { className, title = 'Feedback submitted', body = "We've received your response. Thank you for sharing your feedback!", timestamp, timeout = false, timeoutAnimation = 3000, onTimeout, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, onMouseEnter, onMouseLeave, ouiaId, ouiaSafe, isLiveRegion, id, focusOnLoad = true, isCompact } = _a, props = __rest(_a, ["className", "title", "body", "timestamp", "timeout", "timeoutAnimation", "onTimeout", "onClose", "closeButtonAriaLabel", "onMouseEnter", "onMouseLeave", "ouiaId", "ouiaSafe", "isLiveRegion", "id", "focusOnLoad", "isCompact"]);
|
26
26
|
const [timedOut, setTimedOut] = react_1.default.useState(false);
|
27
27
|
const [timedOutAnimation, setTimedOutAnimation] = react_1.default.useState(true);
|
28
28
|
const [isMouseOver, setIsMouseOver] = react_1.default.useState();
|
@@ -85,8 +85,8 @@ const UserFeedbackComplete = (_a) => {
|
|
85
85
|
'aria-live': 'polite',
|
86
86
|
'aria-atomic': 'false'
|
87
87
|
}), { id: id, tabIndex: 0, "aria-label": title }, ouiaProps),
|
88
|
-
react_1.default.createElement(react_core_1.Card, Object.assign({ className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
|
89
|
-
react_1.default.createElement(react_core_1.CardHeader, { actions:
|
88
|
+
react_1.default.createElement(react_core_1.Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card pf-chatbot__feedback-card-complete${className ? ` ${className}` : ''}` }, props),
|
89
|
+
react_1.default.createElement(react_core_1.CardHeader, { className: onClose ? 'pf-chatbot__feedback-card-complete-header' : 'pf-chatbot__feedback-card-complete-empty-header', actions:
|
90
90
|
/* eslint-disable indent */
|
91
91
|
onClose
|
92
92
|
? {
|
@@ -112,6 +112,6 @@ const UserFeedbackComplete = (_a) => {
|
|
112
112
|
react_1.default.createElement("path", { d: "M27.7803 30.1276C27.6098 30.1276 27.4497 30.0614 27.3298 29.9406L22.9465 25.5562C22.8267 25.4364 22.7595 25.2762 22.7595 25.1068C22.7595 24.9374 22.8256 24.7762 22.9465 24.6554L24.2379 23.364C24.3577 23.2442 24.5178 23.177 24.6883 23.177C24.8587 23.177 25.0168 23.2431 25.1377 23.363L27.7803 26.0056L34.861 18.9259C34.9808 18.8061 35.1409 18.7389 35.3103 18.7389C35.4798 18.7389 35.6389 18.8051 35.7597 18.9239L37.0531 20.2173C37.173 20.3361 37.2401 20.4962 37.2401 20.6677C37.2401 20.8392 37.174 20.9983 37.0531 21.1181L28.2317 29.9406C28.1119 30.0604 27.9518 30.1265 27.7823 30.1265L27.7803 30.1276Z", fill: "white" }))),
|
113
113
|
react_1.default.createElement("div", { className: "pf-chatbot__feedback-complete-text" },
|
114
114
|
react_1.default.createElement(react_core_1.CardTitle, { className: "pf-chatbot__feedback-complete-title" }, title),
|
115
|
-
react_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__feedback-complete-body` }, body))))));
|
115
|
+
react_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__feedback-complete-card-body` }, body))))));
|
116
116
|
};
|
117
117
|
exports.default = UserFeedbackComplete;
|
@@ -246,4 +246,8 @@ describe('UserFeedbackComplete', () => {
|
|
246
246
|
(0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", "data-testid": "card", focusOnLoad: false }));
|
247
247
|
expect(react_2.screen.getByTestId('card').parentElement).not.toHaveFocus();
|
248
248
|
});
|
249
|
+
it('should handle isCompact', () => {
|
250
|
+
(0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", "data-testid": "card", isCompact: true }));
|
251
|
+
expect(react_2.screen.getByTestId('card')).toHaveClass('pf-m-compact');
|
252
|
+
});
|
249
253
|
});
|
package/dist/css/main.css
CHANGED
@@ -1481,6 +1481,7 @@
|
|
1481
1481
|
flex-direction: column;
|
1482
1482
|
gap: var(--pf-t--global--spacer--lg);
|
1483
1483
|
align-items: center;
|
1484
|
+
text-align: center;
|
1484
1485
|
}
|
1485
1486
|
|
1486
1487
|
.pf-chatbot__feedback-complete-text {
|
@@ -1499,10 +1500,6 @@
|
|
1499
1500
|
justify-content: center;
|
1500
1501
|
}
|
1501
1502
|
|
1502
|
-
.pf-chatbot__feedback-complete-body {
|
1503
|
-
text-align: center;
|
1504
|
-
}
|
1505
|
-
|
1506
1503
|
.pf-chatbot__feedback-complete-title {
|
1507
1504
|
font-family: var(--pf-t--global--font--family--heading);
|
1508
1505
|
font-size: var(--pf-t--global--font--size--lg);
|
@@ -1525,6 +1522,20 @@
|
|
1525
1522
|
font-weight: initial;
|
1526
1523
|
}
|
1527
1524
|
|
1525
|
+
.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card .pf-chatbot__feedback-card-form.pf-m-compact {
|
1526
|
+
--pf-v6-c-form--GridGap: var(--pf-t--global--spacer--md);
|
1527
|
+
}
|
1528
|
+
|
1529
|
+
.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card.pf-chatbot__feedback-card-complete div.pf-chatbot__feedback-complete-body {
|
1530
|
+
gap: var(--pf-t--global--spacer--sm);
|
1531
|
+
}
|
1532
|
+
.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card.pf-chatbot__feedback-card-complete .pf-chatbot__feedback-complete-image {
|
1533
|
+
width: 40px;
|
1534
|
+
}
|
1535
|
+
.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card.pf-chatbot__feedback-card-complete .pf-chatbot__feedback-card-complete-empty-header .pf-v6-c-card__header:first-child {
|
1536
|
+
--pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
1537
|
+
}
|
1538
|
+
|
1528
1539
|
.pf-v6-c-button.pf-chatbot__button--attach {
|
1529
1540
|
border-radius: var(--pf-t--global--border--radius--pill);
|
1530
1541
|
padding: var(--pf-t--global--spacer--md);
|
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/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;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;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;;;ACpIF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACrBJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;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;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;;;AClOJ;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;;;ACrDJ;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;;;AAMF;EACE;EACA;;;ACjJF;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;EAA0B;;AAMxB;EAAM;;AACN;EAAuB;;AACvB;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACnBN;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;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC5CN;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;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;ACjGF;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;;;AC1EE;EACE;;;AAMN;EACE;;;AAIF;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;;;ADrDN;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;;;AEhFF;EACE;EACA;EACA;EACA;EAGA;;;ADDE;EACE;;;AAMN;EACE;;;AAIF;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;;;AEpDN;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;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AChDF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AC5BR;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AC1CJ;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;;;AC/CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;ACrBR;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;;;;ACxGN;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;;;ADvCN;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;;;;AEhDJ;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;EACA;EACA;EACA;EACA;EACA;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;;;ACvER;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;;;AC5BJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EACA;EACA;EAEA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;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/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;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;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;;;ACpIF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACrBJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;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;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;;;AClOJ;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;;;ACrDJ;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;;;AAMF;EACE;EACA;;;ACjJF;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;EAA0B;;AAMxB;EAAM;;AACN;EAAuB;;AACvB;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACnBN;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;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC5CN;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;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;ACjGF;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;;;AC1EE;EACE;;;AAMN;EACE;;;AAIF;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;;;ADrDN;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;;;AEhFF;EACE;EACA;EACA;EACA;EAGA;;;ADDE;EACE;;;AAMN;EACE;;;AAIF;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;;;AEpDN;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;;;AC5BR;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AC1CJ;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;;;AC/CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;ACrBR;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;;;;ACxGN;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;;;ADvCN;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;;;;AEhDJ;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;EACA;EACA;EACA;EACA;EACA;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;;;ACvER;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;;;AC5BJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EACA;EACA;EAEA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}
|
@@ -120,6 +120,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
|
|
120
120
|
onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
121
121
|
/** Props for edit form */
|
122
122
|
editFormProps?: FormProps;
|
123
|
+
/** Sets message to compact styling. */
|
124
|
+
isCompact?: boolean;
|
123
125
|
}
|
124
126
|
export declare const MessageBase: React.FunctionComponent<MessageProps>;
|
125
127
|
declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
@@ -43,7 +43,7 @@ import LinkMessage from './LinkMessage/LinkMessage';
|
|
43
43
|
import ErrorMessage from './ErrorMessage/ErrorMessage';
|
44
44
|
import MessageInput from './MessageInput';
|
45
45
|
export const MessageBase = (_a) => {
|
46
|
-
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, editFormProps } = _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", "editFormProps"]);
|
46
|
+
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, editFormProps, isCompact } = _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", "editFormProps", "isCompact"]);
|
47
47
|
const [messageText, setMessageText] = React.useState(content);
|
48
48
|
React.useEffect(() => {
|
49
49
|
setMessageText(content);
|
@@ -125,9 +125,9 @@ export const MessageBase = (_a) => {
|
|
125
125
|
!isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
|
126
126
|
quickStarts && quickStarts.quickStart && (React.createElement(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
|
127
127
|
!isLoading && actions && React.createElement(ResponseActions, { actions: actions }),
|
128
|
-
userFeedbackForm && React.createElement(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString })),
|
129
|
-
userFeedbackComplete && React.createElement(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString })),
|
130
|
-
!isLoading && quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps }))),
|
128
|
+
userFeedbackForm && React.createElement(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })),
|
129
|
+
userFeedbackComplete && (React.createElement(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))),
|
130
|
+
!isLoading && quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))),
|
131
131
|
attachments && (React.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
|
132
132
|
var _a;
|
133
133
|
return (React.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },
|
@@ -282,6 +282,18 @@ describe('Message', () => {
|
|
282
282
|
yield userEvent.click(quickResponse);
|
283
283
|
expect(spy).toHaveBeenCalledTimes(1);
|
284
284
|
}));
|
285
|
+
it('should be able to handle isCompact', () => __awaiter(void 0, void 0, void 0, function* () {
|
286
|
+
render(React.createElement(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
|
287
|
+
{
|
288
|
+
id: '1',
|
289
|
+
content: 'Yes',
|
290
|
+
onClick: jest.fn(),
|
291
|
+
className: 'test'
|
292
|
+
}
|
293
|
+
], isCompact: true }));
|
294
|
+
const parent = screen.getByRole('button', { name: /Yes/i }).parentNode;
|
295
|
+
expect(parent).toHaveClass('pf-m-compact');
|
296
|
+
}));
|
285
297
|
it('should be able to show more than 1 quick response', () => __awaiter(void 0, void 0, void 0, function* () {
|
286
298
|
const spy = jest.fn();
|
287
299
|
render(React.createElement(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
|
@@ -12,6 +12,8 @@ export interface QuickResponseProps {
|
|
12
12
|
quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
|
13
13
|
/** Callback when a response is clicked; used in feedback cards */
|
14
14
|
onSelect?: (id: string) => void;
|
15
|
+
/** Sets the quick responses to compact styling */
|
16
|
+
isCompact?: boolean;
|
15
17
|
}
|
16
18
|
export declare const QuickResponse: React.FunctionComponent<QuickResponseProps>;
|
17
19
|
export default QuickResponse;
|
@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
12
12
|
import React from 'react';
|
13
13
|
import { Label, LabelGroup } from '@patternfly/react-core';
|
14
14
|
import { CheckIcon } from '@patternfly/react-icons';
|
15
|
-
export const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect }) => {
|
15
|
+
export const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect, isCompact }) => {
|
16
16
|
const [selectedQuickResponse, setSelectedQuickResponse] = React.useState();
|
17
17
|
const handleQuickResponseClick = (id, onClick) => {
|
18
18
|
setSelectedQuickResponse(id);
|
@@ -21,7 +21,7 @@ export const QuickResponse = ({ quickResponses, quickResponseContainerProps = {
|
|
21
21
|
};
|
22
22
|
return (React.createElement(LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${(quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className) ? quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className : ''}` }, quickResponseContainerProps), quickResponses.map((_a) => {
|
23
23
|
var { id, onClick, content, className } = _a, props = __rest(_a, ["id", "onClick", "content", "className"]);
|
24
|
-
return (React.createElement(Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? React.createElement(CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}
|
24
|
+
return (React.createElement(Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? React.createElement(CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`, isCompact: isCompact }, props), content));
|
25
25
|
})));
|
26
26
|
};
|
27
27
|
export default QuickResponse;
|
@@ -18,7 +18,7 @@ import { ActionGroup, Button, Card, CardBody, CardHeader, Form, TextArea } from
|
|
18
18
|
import QuickResponse from '../QuickResponse/QuickResponse';
|
19
19
|
import CloseButton from './CloseButton';
|
20
20
|
const UserFeedback = (_a) => {
|
21
|
-
var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad"]);
|
21
|
+
var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true, isCompact } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "isCompact"]);
|
22
22
|
const [selectedResponse, setSelectedResponse] = React.useState();
|
23
23
|
const [value, setValue] = React.useState('');
|
24
24
|
const divRef = React.useRef(null);
|
@@ -31,14 +31,14 @@ const UserFeedback = (_a) => {
|
|
31
31
|
return (
|
32
32
|
/* card does not have ref forwarding; hence wrapper div */
|
33
33
|
React.createElement("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title },
|
34
|
-
React.createElement(Card, Object.assign({ className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
|
34
|
+
React.createElement(Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
|
35
35
|
React.createElement(CardHeader, { actions: {
|
36
36
|
actions: React.createElement(CloseButton, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
|
37
37
|
} },
|
38
38
|
React.createElement(HeadingLevel, { className: "pf-chatbot__feedback-card-title" }, title)),
|
39
39
|
React.createElement(CardBody, null,
|
40
|
-
React.createElement(Form, { className:
|
41
|
-
quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id) })),
|
40
|
+
React.createElement(Form, { className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` },
|
41
|
+
quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })),
|
42
42
|
hasTextArea && (React.createElement(TextArea, { value: value, onChange: (_event, value) => {
|
43
43
|
setValue(value);
|
44
44
|
onTextAreaChange && onTextAreaChange(_event, value);
|
@@ -125,4 +125,8 @@ describe('UserFeedback', () => {
|
|
125
125
|
render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", focusOnLoad: false }));
|
126
126
|
expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
|
127
127
|
});
|
128
|
+
it('should handle isCompact', () => {
|
129
|
+
render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", isCompact: true }));
|
130
|
+
expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
|
131
|
+
});
|
128
132
|
});
|
@@ -17,7 +17,7 @@ import React from 'react';
|
|
17
17
|
import { Card, CardBody, CardHeader, CardTitle, useOUIAProps } from '@patternfly/react-core';
|
18
18
|
import CloseButton from './CloseButton';
|
19
19
|
const UserFeedbackComplete = (_a) => {
|
20
|
-
var { className, title = 'Feedback submitted', body = "We've received your response. Thank you for sharing your feedback!", timestamp, timeout = false, timeoutAnimation = 3000, onTimeout, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, onMouseEnter, onMouseLeave, ouiaId, ouiaSafe, isLiveRegion, id, focusOnLoad = true } = _a, props = __rest(_a, ["className", "title", "body", "timestamp", "timeout", "timeoutAnimation", "onTimeout", "onClose", "closeButtonAriaLabel", "onMouseEnter", "onMouseLeave", "ouiaId", "ouiaSafe", "isLiveRegion", "id", "focusOnLoad"]);
|
20
|
+
var { className, title = 'Feedback submitted', body = "We've received your response. Thank you for sharing your feedback!", timestamp, timeout = false, timeoutAnimation = 3000, onTimeout, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, onMouseEnter, onMouseLeave, ouiaId, ouiaSafe, isLiveRegion, id, focusOnLoad = true, isCompact } = _a, props = __rest(_a, ["className", "title", "body", "timestamp", "timeout", "timeoutAnimation", "onTimeout", "onClose", "closeButtonAriaLabel", "onMouseEnter", "onMouseLeave", "ouiaId", "ouiaSafe", "isLiveRegion", "id", "focusOnLoad", "isCompact"]);
|
21
21
|
const [timedOut, setTimedOut] = React.useState(false);
|
22
22
|
const [timedOutAnimation, setTimedOutAnimation] = React.useState(true);
|
23
23
|
const [isMouseOver, setIsMouseOver] = React.useState();
|
@@ -80,8 +80,8 @@ const UserFeedbackComplete = (_a) => {
|
|
80
80
|
'aria-live': 'polite',
|
81
81
|
'aria-atomic': 'false'
|
82
82
|
}), { id: id, tabIndex: 0, "aria-label": title }, ouiaProps),
|
83
|
-
React.createElement(Card, Object.assign({ className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
|
84
|
-
React.createElement(CardHeader, { actions:
|
83
|
+
React.createElement(Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card pf-chatbot__feedback-card-complete${className ? ` ${className}` : ''}` }, props),
|
84
|
+
React.createElement(CardHeader, { className: onClose ? 'pf-chatbot__feedback-card-complete-header' : 'pf-chatbot__feedback-card-complete-empty-header', actions:
|
85
85
|
/* eslint-disable indent */
|
86
86
|
onClose
|
87
87
|
? {
|
@@ -107,6 +107,6 @@ const UserFeedbackComplete = (_a) => {
|
|
107
107
|
React.createElement("path", { d: "M27.7803 30.1276C27.6098 30.1276 27.4497 30.0614 27.3298 29.9406L22.9465 25.5562C22.8267 25.4364 22.7595 25.2762 22.7595 25.1068C22.7595 24.9374 22.8256 24.7762 22.9465 24.6554L24.2379 23.364C24.3577 23.2442 24.5178 23.177 24.6883 23.177C24.8587 23.177 25.0168 23.2431 25.1377 23.363L27.7803 26.0056L34.861 18.9259C34.9808 18.8061 35.1409 18.7389 35.3103 18.7389C35.4798 18.7389 35.6389 18.8051 35.7597 18.9239L37.0531 20.2173C37.173 20.3361 37.2401 20.4962 37.2401 20.6677C37.2401 20.8392 37.174 20.9983 37.0531 21.1181L28.2317 29.9406C28.1119 30.0604 27.9518 30.1265 27.7823 30.1265L27.7803 30.1276Z", fill: "white" }))),
|
108
108
|
React.createElement("div", { className: "pf-chatbot__feedback-complete-text" },
|
109
109
|
React.createElement(CardTitle, { className: "pf-chatbot__feedback-complete-title" }, title),
|
110
|
-
React.createElement(CardBody, { className: `pf-chatbot__feedback-complete-body` }, body))))));
|
110
|
+
React.createElement(CardBody, { className: `pf-chatbot__feedback-complete-card-body` }, body))))));
|
111
111
|
};
|
112
112
|
export default UserFeedbackComplete;
|
@@ -241,4 +241,8 @@ describe('UserFeedbackComplete', () => {
|
|
241
241
|
render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", "data-testid": "card", focusOnLoad: false }));
|
242
242
|
expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
|
243
243
|
});
|
244
|
+
it('should handle isCompact', () => {
|
245
|
+
render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", "data-testid": "card", isCompact: true }));
|
246
|
+
expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
|
247
|
+
});
|
244
248
|
});
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@patternfly/chatbot",
|
3
|
-
"version": "6.3.0-prerelease.
|
3
|
+
"version": "6.3.0-prerelease.5",
|
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/MessageWithFeedback.tsx
CHANGED
@@ -40,6 +40,26 @@ export const MessageWithFeedbackExample: React.FunctionComponent = () => {
|
|
40
40
|
focusOnLoad: false
|
41
41
|
}}
|
42
42
|
/>
|
43
|
+
<Message
|
44
|
+
name="Bot"
|
45
|
+
role="bot"
|
46
|
+
avatar={patternflyAvatar}
|
47
|
+
content="This is a compact message with the feedback card:"
|
48
|
+
userFeedbackForm={{
|
49
|
+
quickResponses: [
|
50
|
+
{ id: '1', content: 'Helpful information' },
|
51
|
+
{ id: '2', content: 'Easy to understand' },
|
52
|
+
{ id: '3', content: 'Resolved my issue' }
|
53
|
+
],
|
54
|
+
onSubmit: (quickResponse, additionalFeedback) =>
|
55
|
+
alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
|
56
|
+
hasTextArea,
|
57
|
+
// eslint-disable-next-line no-console
|
58
|
+
onClose: () => console.log('closed feedback form'),
|
59
|
+
focusOnLoad: false
|
60
|
+
}}
|
61
|
+
isCompact
|
62
|
+
/>
|
43
63
|
</Stack>
|
44
64
|
<Stack hasGutter>
|
45
65
|
<FormGroup role="radiogroup" isInline fieldId="feedback-thank-you" label="Variant">
|
@@ -65,6 +85,19 @@ export const MessageWithFeedbackExample: React.FunctionComponent = () => {
|
|
65
85
|
focusOnLoad: false
|
66
86
|
}}
|
67
87
|
/>
|
88
|
+
<Message
|
89
|
+
name="Bot"
|
90
|
+
role="bot"
|
91
|
+
avatar={patternflyAvatar}
|
92
|
+
content="This is a compact thank-you message, which is displayed once the feedback card is submitted:"
|
93
|
+
// eslint-disable-next-line no-console
|
94
|
+
userFeedbackComplete={{
|
95
|
+
// eslint-disable-next-line no-console
|
96
|
+
onClose: hasCloseButton ? () => console.log('closed completion message') : undefined,
|
97
|
+
focusOnLoad: false
|
98
|
+
}}
|
99
|
+
isCompact
|
100
|
+
/>
|
68
101
|
</Stack>
|
69
102
|
</>
|
70
103
|
);
|
@@ -334,6 +334,27 @@ describe('Message', () => {
|
|
334
334
|
await userEvent.click(quickResponse);
|
335
335
|
expect(spy).toHaveBeenCalledTimes(1);
|
336
336
|
});
|
337
|
+
it('should be able to handle isCompact', async () => {
|
338
|
+
render(
|
339
|
+
<Message
|
340
|
+
avatar="./img"
|
341
|
+
role="bot"
|
342
|
+
name="Bot"
|
343
|
+
content="Hi"
|
344
|
+
quickResponses={[
|
345
|
+
{
|
346
|
+
id: '1',
|
347
|
+
content: 'Yes',
|
348
|
+
onClick: jest.fn(),
|
349
|
+
className: 'test'
|
350
|
+
}
|
351
|
+
]}
|
352
|
+
isCompact
|
353
|
+
/>
|
354
|
+
);
|
355
|
+
const parent = screen.getByRole('button', { name: /Yes/i }).parentNode;
|
356
|
+
expect(parent).toHaveClass('pf-m-compact');
|
357
|
+
});
|
337
358
|
it('should be able to show more than 1 quick response', async () => {
|
338
359
|
const spy = jest.fn();
|
339
360
|
render(
|
package/src/Message/Message.tsx
CHANGED
@@ -164,6 +164,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
|
|
164
164
|
onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
165
165
|
/** Props for edit form */
|
166
166
|
editFormProps?: FormProps;
|
167
|
+
/** Sets message to compact styling. */
|
168
|
+
isCompact?: boolean;
|
167
169
|
}
|
168
170
|
|
169
171
|
export const MessageBase: React.FunctionComponent<MessageProps> = ({
|
@@ -201,6 +203,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
|
|
201
203
|
onEditUpdate,
|
202
204
|
onEditCancel,
|
203
205
|
editFormProps,
|
206
|
+
isCompact,
|
204
207
|
...props
|
205
208
|
}: MessageProps) => {
|
206
209
|
const [messageText, setMessageText] = React.useState(content);
|
@@ -349,12 +352,15 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
|
|
349
352
|
/>
|
350
353
|
)}
|
351
354
|
{!isLoading && actions && <ResponseActions actions={actions} />}
|
352
|
-
{userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} />}
|
353
|
-
{userFeedbackComplete &&
|
355
|
+
{userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} isCompact={isCompact} />}
|
356
|
+
{userFeedbackComplete && (
|
357
|
+
<UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} isCompact={isCompact} />
|
358
|
+
)}
|
354
359
|
{!isLoading && quickResponses && (
|
355
360
|
<QuickResponse
|
356
361
|
quickResponses={quickResponses}
|
357
362
|
quickResponseContainerProps={quickResponseContainerProps}
|
363
|
+
isCompact={isCompact}
|
358
364
|
/>
|
359
365
|
)}
|
360
366
|
</div>
|
@@ -15,12 +15,15 @@ export interface QuickResponseProps {
|
|
15
15
|
quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
|
16
16
|
/** Callback when a response is clicked; used in feedback cards */
|
17
17
|
onSelect?: (id: string) => void;
|
18
|
+
/** Sets the quick responses to compact styling */
|
19
|
+
isCompact?: boolean;
|
18
20
|
}
|
19
21
|
|
20
22
|
export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
|
21
23
|
quickResponses,
|
22
24
|
quickResponseContainerProps = { numLabels: 5 },
|
23
|
-
onSelect
|
25
|
+
onSelect,
|
26
|
+
isCompact
|
24
27
|
}: QuickResponseProps) => {
|
25
28
|
const [selectedQuickResponse, setSelectedQuickResponse] = React.useState<string>();
|
26
29
|
|
@@ -42,6 +45,7 @@ export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
|
|
42
45
|
key={id}
|
43
46
|
onClick={() => handleQuickResponseClick(id, onClick)}
|
44
47
|
className={`${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`}
|
48
|
+
isCompact={isCompact}
|
45
49
|
{...props}
|
46
50
|
>
|
47
51
|
{content}
|
@@ -11,6 +11,7 @@
|
|
11
11
|
flex-direction: column;
|
12
12
|
gap: var(--pf-t--global--spacer--lg);
|
13
13
|
align-items: center;
|
14
|
+
text-align: center;
|
14
15
|
}
|
15
16
|
.pf-chatbot__feedback-complete-text {
|
16
17
|
display: flex;
|
@@ -26,9 +27,6 @@
|
|
26
27
|
align-items: center;
|
27
28
|
justify-content: center;
|
28
29
|
}
|
29
|
-
.pf-chatbot__feedback-complete-body {
|
30
|
-
text-align: center;
|
31
|
-
}
|
32
30
|
.pf-chatbot__feedback-complete-title {
|
33
31
|
font-family: var(--pf-t--global--font--family--heading);
|
34
32
|
font-size: var(--pf-t--global--font--size--lg);
|
@@ -51,3 +49,26 @@
|
|
51
49
|
.pf-chatbot__feedback-card-optional {
|
52
50
|
font-weight: initial;
|
53
51
|
}
|
52
|
+
|
53
|
+
// Compact styles
|
54
|
+
.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card {
|
55
|
+
.pf-chatbot__feedback-card-form.pf-m-compact {
|
56
|
+
--pf-v6-c-form--GridGap: var(--pf-t--global--spacer--md);
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|
60
|
+
.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card.pf-chatbot__feedback-card-complete {
|
61
|
+
div.pf-chatbot__feedback-complete-body {
|
62
|
+
gap: var(--pf-t--global--spacer--sm);
|
63
|
+
}
|
64
|
+
|
65
|
+
.pf-chatbot__feedback-complete-image {
|
66
|
+
width: 40px;
|
67
|
+
}
|
68
|
+
|
69
|
+
.pf-chatbot__feedback-card-complete-empty-header {
|
70
|
+
.pf-v6-c-card__header:first-child {
|
71
|
+
--pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
72
|
+
}
|
73
|
+
}
|
74
|
+
}
|
@@ -233,4 +233,17 @@ describe('UserFeedback', () => {
|
|
233
233
|
);
|
234
234
|
expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
|
235
235
|
});
|
236
|
+
it('should handle isCompact', () => {
|
237
|
+
render(
|
238
|
+
<UserFeedback
|
239
|
+
timestamp="12/12/12"
|
240
|
+
onClose={jest.fn}
|
241
|
+
onSubmit={jest.fn}
|
242
|
+
quickResponses={MOCK_RESPONSES}
|
243
|
+
data-testid="card"
|
244
|
+
isCompact
|
245
|
+
/>
|
246
|
+
);
|
247
|
+
expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
|
248
|
+
});
|
236
249
|
});
|
@@ -71,6 +71,7 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
|
|
71
71
|
id,
|
72
72
|
headingLevel: HeadingLevel = 'h1',
|
73
73
|
focusOnLoad = true,
|
74
|
+
isCompact,
|
74
75
|
...props
|
75
76
|
}: UserFeedbackProps) => {
|
76
77
|
const [selectedResponse, setSelectedResponse] = React.useState<string>();
|
@@ -86,7 +87,7 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
|
|
86
87
|
return (
|
87
88
|
/* card does not have ref forwarding; hence wrapper div */
|
88
89
|
<div ref={divRef} id={id} tabIndex={0} aria-label={title}>
|
89
|
-
<Card className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
|
90
|
+
<Card isCompact={isCompact} className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
|
90
91
|
<CardHeader
|
91
92
|
actions={{
|
92
93
|
actions: <CloseButton onClose={onClose} ariaLabel={closeButtonAriaLabel} />
|
@@ -95,12 +96,13 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
|
|
95
96
|
<HeadingLevel className="pf-chatbot__feedback-card-title">{title}</HeadingLevel>
|
96
97
|
</CardHeader>
|
97
98
|
<CardBody>
|
98
|
-
<Form className=
|
99
|
+
<Form className={`pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`}>
|
99
100
|
{quickResponses && (
|
100
101
|
<QuickResponse
|
101
102
|
quickResponses={quickResponses}
|
102
103
|
quickResponseContainerProps={quickResponseContainerProps}
|
103
104
|
onSelect={(id) => setSelectedResponse(id)}
|
105
|
+
isCompact={isCompact}
|
104
106
|
/>
|
105
107
|
)}
|
106
108
|
{hasTextArea && (
|
@@ -252,4 +252,8 @@ describe('UserFeedbackComplete', () => {
|
|
252
252
|
render(<UserFeedbackComplete timestamp="12/12/12" data-testid="card" focusOnLoad={false} />);
|
253
253
|
expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
|
254
254
|
});
|
255
|
+
it('should handle isCompact', () => {
|
256
|
+
render(<UserFeedbackComplete timestamp="12/12/12" data-testid="card" isCompact />);
|
257
|
+
expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
|
258
|
+
});
|
255
259
|
});
|
@@ -63,6 +63,7 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
|
|
63
63
|
isLiveRegion,
|
64
64
|
id,
|
65
65
|
focusOnLoad = true,
|
66
|
+
isCompact,
|
66
67
|
...props
|
67
68
|
}: UserFeedbackCompleteProps) => {
|
68
69
|
const [timedOut, setTimedOut] = React.useState(false);
|
@@ -143,8 +144,15 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
|
|
143
144
|
aria-label={title}
|
144
145
|
{...ouiaProps}
|
145
146
|
>
|
146
|
-
<Card
|
147
|
+
<Card
|
148
|
+
isCompact={isCompact}
|
149
|
+
className={`pf-chatbot__feedback-card pf-chatbot__feedback-card-complete${className ? ` ${className}` : ''}`}
|
150
|
+
{...props}
|
151
|
+
>
|
147
152
|
<CardHeader
|
153
|
+
className={
|
154
|
+
onClose ? 'pf-chatbot__feedback-card-complete-header' : 'pf-chatbot__feedback-card-complete-empty-header'
|
155
|
+
}
|
148
156
|
actions={
|
149
157
|
/* eslint-disable indent */
|
150
158
|
onClose
|
@@ -200,7 +208,7 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
|
|
200
208
|
</div>
|
201
209
|
<div className="pf-chatbot__feedback-complete-text">
|
202
210
|
<CardTitle className="pf-chatbot__feedback-complete-title">{title}</CardTitle>
|
203
|
-
<CardBody className={`pf-chatbot__feedback-complete-body`}>{body}</CardBody>
|
211
|
+
<CardBody className={`pf-chatbot__feedback-complete-card-body`}>{body}</CardBody>
|
204
212
|
</div>
|
205
213
|
</div>
|
206
214
|
</Card>
|