@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.
Files changed (30) hide show
  1. package/dist/cjs/Message/Message.d.ts +2 -0
  2. package/dist/cjs/Message/Message.js +4 -4
  3. package/dist/cjs/Message/Message.test.js +12 -0
  4. package/dist/cjs/Message/QuickResponse/QuickResponse.d.ts +2 -0
  5. package/dist/cjs/Message/QuickResponse/QuickResponse.js +2 -2
  6. package/dist/cjs/Message/UserFeedback/UserFeedback.js +4 -4
  7. package/dist/cjs/Message/UserFeedback/UserFeedback.test.js +4 -0
  8. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.js +4 -4
  9. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.test.js +4 -0
  10. package/dist/css/main.css +15 -4
  11. package/dist/css/main.css.map +1 -1
  12. package/dist/esm/Message/Message.d.ts +2 -0
  13. package/dist/esm/Message/Message.js +4 -4
  14. package/dist/esm/Message/Message.test.js +12 -0
  15. package/dist/esm/Message/QuickResponse/QuickResponse.d.ts +2 -0
  16. package/dist/esm/Message/QuickResponse/QuickResponse.js +2 -2
  17. package/dist/esm/Message/UserFeedback/UserFeedback.js +4 -4
  18. package/dist/esm/Message/UserFeedback/UserFeedback.test.js +4 -0
  19. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.js +4 -4
  20. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.test.js +4 -0
  21. package/package.json +1 -1
  22. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx +33 -0
  23. package/src/Message/Message.test.tsx +21 -0
  24. package/src/Message/Message.tsx +8 -2
  25. package/src/Message/QuickResponse/QuickResponse.tsx +5 -1
  26. package/src/Message/UserFeedback/UserFeedback.scss +24 -3
  27. package/src/Message/UserFeedback/UserFeedback.test.tsx +13 -0
  28. package/src/Message/UserFeedback/UserFeedback.tsx +4 -2
  29. package/src/Message/UserFeedback/UserFeedbackComplete.test.tsx +4 -0
  30. 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 : ''}` }, props), content));
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: "pf-chatbot__feedback-card-form" },
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);
@@ -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 : ''}` }, props), content));
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: "pf-chatbot__feedback-card-form" },
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.4",
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",
@@ -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(
@@ -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 && <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} />}
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="pf-chatbot__feedback-card-form">
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 className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
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>