@patternfly/chatbot 2.2.0-prerelease.15 → 2.2.0-prerelease.16

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 (21) hide show
  1. package/dist/cjs/Message/Message.js +13 -3
  2. package/dist/cjs/Message/Message.test.js +38 -3
  3. package/dist/cjs/Message/TextMessage/TextMessage.d.ts +2 -1
  4. package/dist/cjs/Message/TextMessage/TextMessage.js +2 -2
  5. package/dist/css/main.css +30 -41
  6. package/dist/css/main.css.map +1 -1
  7. package/dist/esm/Message/Message.js +14 -4
  8. package/dist/esm/Message/Message.test.js +38 -3
  9. package/dist/esm/Message/TextMessage/TextMessage.d.ts +2 -1
  10. package/dist/esm/Message/TextMessage/TextMessage.js +3 -3
  11. package/package.json +1 -1
  12. package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +142 -13
  13. package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx +182 -12
  14. package/src/Message/CodeBlockMessage/CodeBlockMessage.scss +3 -3
  15. package/src/Message/ListMessage/ListMessage.scss +5 -5
  16. package/src/Message/Message.scss +3 -11
  17. package/src/Message/Message.test.tsx +40 -3
  18. package/src/Message/Message.tsx +23 -4
  19. package/src/Message/MessageLoading.scss +2 -2
  20. package/src/Message/TextMessage/TextMessage.scss +8 -11
  21. package/src/Message/TextMessage/TextMessage.tsx +3 -3
package/dist/cjs/Message/Message.js CHANGED
@@ -57,11 +57,21 @@ const MessageBase = (_a) => {
57
57
  react_1.default.createElement("div", { className: "pf-chatbot__message-response" },
58
58
  react_1.default.createElement("div", { className: "pf-chatbot__message-and-actions" },
59
59
  isLoading ? (react_1.default.createElement(MessageLoading_1.default, { loadingWord: loadingWord })) : (react_1.default.createElement(react_markdown_1.default, { components: {
60
- p: TextMessage_1.default,
61
- code: ({ children }) => react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, codeBlockProps), children),
60
+ p: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props)),
61
+ code: (_a) => {
62
+ var { children } = _a, props = __rest(_a, ["children"]);
63
+ return (react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, props, codeBlockProps), children));
64
+ },
62
65
  ul: UnorderedListMessage_1.default,
63
66
  ol: (props) => react_1.default.createElement(OrderedListMessage_1.default, Object.assign({}, props)),
64
- li: ListItemMessage_1.default
67
+ li: ListItemMessage_1.default,
68
+ h1: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h1 }, props)),
69
+ h2: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h2 }, props)),
70
+ h3: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h3 }, props)),
71
+ h4: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h4 }, props)),
72
+ h5: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h5 }, props)),
73
+ h6: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h6 }, props)),
74
+ blockquote: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props))
65
75
  }, remarkPlugins: [remark_gfm_1.default] }, content)),
66
76
  !isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources)),
67
77
  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 })),
package/dist/cjs/Message/Message.test.js CHANGED
@@ -77,6 +77,22 @@ const ORDERED_LIST_WITH_CODE = `
77
77
 
78
78
  3. Item 3
79
79
  `;
80
+ const HEADING = `
81
+ # h1 Heading
82
+
83
+ ## h2 Heading
84
+
85
+ ### h3 Heading
86
+
87
+ #### h4 Heading
88
+
89
+ ##### h5 Heading
90
+
91
+ ###### h6 Heading
92
+ `;
93
+ const BLOCK_QUOTES = `> Blockquotes can also be nested...
94
+ >> ...by using additional greater-than signs (>) right next to each other...
95
+ > > > ...or with spaces between each sign.`;
80
96
  const checkListItemsRendered = () => {
81
97
  const items = ['Item 1', 'Item 2', 'Item 3'];
82
98
  expect(react_2.screen.getAllByRole('listitem')).toHaveLength(3);
@@ -312,12 +328,16 @@ describe('Message', () => {
312
328
  (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
313
329
  expect(react_2.screen.getByText('Here is some YAML code:')).toBeTruthy();
314
330
  expect(react_2.screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
315
- expect(react_2.screen.getByText(/apiVersion: helm.openshift.io\/v1beta1/i)).toBeTruthy();
331
+ expect(react_2.screen.getByText(/yaml/)).toBeTruthy();
332
+ expect(react_2.screen.getByText(/apiVersion:/i)).toBeTruthy();
333
+ expect(react_2.screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
316
334
  expect(react_2.screen.getByText(/metadata:/i)).toBeTruthy();
317
- expect(react_2.screen.getByText(/name: azure-sample-repo0oooo00ooo/i)).toBeTruthy();
335
+ expect(react_2.screen.getByText(/name:/i)).toBeTruthy();
336
+ expect(react_2.screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
318
337
  expect(react_2.screen.getByText(/spec/i)).toBeTruthy();
319
338
  expect(react_2.screen.getByText(/connectionConfig:/i)).toBeTruthy();
320
- expect(react_2.screen.getByText(/url: https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
339
+ expect(react_2.screen.getByText(/url:/i)).toBeTruthy();
340
+ expect(react_2.screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
321
341
  });
322
342
  it('can click copy code button', () => __awaiter(void 0, void 0, void 0, function* () {
323
343
  // need explicit setup since RTL stubs clipboard if you do this
@@ -383,4 +403,19 @@ describe('Message', () => {
383
403
  } }));
384
404
  expect(react_2.screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
385
405
  }));
406
+ it('should handle block quote correctly', () => {
407
+ (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: BLOCK_QUOTES }));
408
+ expect(react_2.screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
409
+ expect(react_2.screen.getByText('...by using additional greater-than signs (>) right next to each other...')).toBeTruthy();
410
+ expect(react_2.screen.getByText(/...or with spaces between each sign./)).toBeTruthy();
411
+ });
412
+ it('should handle heading correctly', () => {
413
+ (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: HEADING }));
414
+ expect(react_2.screen.getByRole('heading', { name: /h1 Heading/i })).toBeTruthy();
415
+ expect(react_2.screen.getByRole('heading', { name: /h2 Heading/i })).toBeTruthy();
416
+ expect(react_2.screen.getByRole('heading', { name: /h3 Heading/i })).toBeTruthy();
417
+ expect(react_2.screen.getByRole('heading', { name: /h4 Heading/i })).toBeTruthy();
418
+ expect(react_2.screen.getByRole('heading', { name: /h5 Heading/i })).toBeTruthy();
419
+ expect(react_2.screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
420
+ });
386
421
  });
package/dist/cjs/Message/TextMessage/TextMessage.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
2
  import { ExtraProps } from 'react-markdown';
3
- declare const TextMessage: ({ children, ...props }: JSX.IntrinsicElements["p"] & ExtraProps) => React.JSX.Element;
3
+ import { ContentProps } from '@patternfly/react-core';
4
+ declare const TextMessage: ({ component, children, ...props }: ContentProps & ExtraProps) => React.JSX.Element;
4
5
  export default TextMessage;
package/dist/cjs/Message/TextMessage/TextMessage.js CHANGED
@@ -20,8 +20,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
20
20
  const react_1 = __importDefault(require("react"));
21
21
  const react_core_1 = require("@patternfly/react-core");
22
22
  const TextMessage = (_a) => {
23
- var { children } = _a, props = __rest(_a, ["children"]);
23
+ var { component, children } = _a, props = __rest(_a, ["component", "children"]);
24
24
  return (react_1.default.createElement("span", { className: "pf-chatbot__message-text" },
25
- react_1.default.createElement(react_core_1.Content, Object.assign({ component: react_core_1.ContentVariants.p }, props), children)));
25
+ react_1.default.createElement(react_core_1.Content, Object.assign({ component: component }, props), children)));
26
26
  };
27
27
  exports.default = TextMessage;
package/dist/css/main.css CHANGED
@@ -905,13 +905,6 @@
905
905
  }
906
906
 
907
907
  .pf-chatbot__message {
908
- --pf-t--chatbot-message--type--background--color--default: var(--pf-t--global--background--color--tertiary--default);
909
- --pf-t--chatbot-message--type--background--color--primary: var(--pf-t--global--color--brand--default);
910
- --pf-t--chatbot-message--type--padding: var(--pf-t--global--spacer--sm);
911
- --pf-t--chatbot-message--type--text--color--default: var(--pf-t--global--text--color--regular);
912
- --pf-t--chatbot-message--type--text--color--primary: var(--pf-t--global--text--color--inverse);
913
- --pf-t--chatbot-message--type--border--radius: var(--pf-t--global--border--radius--small);
914
- --pf-t--chatbot-message--meta--label--color: var(--pf-t--global--border--color--on-secondary);
915
908
  display: flex;
916
909
  align-items: flex-start;
917
910
  gap: var(--pf-t--global--spacer--lg);
@@ -950,12 +943,12 @@
950
943
  font-size: var(--pf-t--global--font--size--sm);
951
944
  }
952
945
  .pf-chatbot__message-meta .pf-v6-c-label {
953
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--chatbot-message--meta--label--color);
946
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--on-secondary);
954
947
  --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--xs);
955
948
  font-weight: var(--pf-t--global--font--weight--body--bold);
956
949
  }
957
950
  .pf-chatbot__message-meta .pf-v6-c-label .pf-v6-c-label__content {
958
- --pf-v6-c-label--Color: var(--pf-t--chatbot-message--meta--label--color);
951
+ --pf-v6-c-label--Color: var(--pf-t--global--border--color--on-secondary);
959
952
  }
960
953
  .pf-chatbot__message-meta .pf-v6-c-timestamp {
961
954
  flex: 1 0 max-content;
@@ -968,7 +961,7 @@
968
961
  flex-direction: column;
969
962
  align-items: flex-start;
970
963
  gap: var(--pf-t--global--font--size--sm);
971
- color: var(--pf-t--chatbot-message--type--text--color--default);
964
+ color: var(--pf-t--global--text--color--regular);
972
965
  }
973
966
  .pf-chatbot__message-and-actions {
974
967
  display: grid;
@@ -983,9 +976,9 @@
983
976
 
984
977
  .pf-chatbot__message-loading {
985
978
  width: 36px;
986
- padding: var(--pf-t--chatbot-message--type--padding);
979
+ padding: var(--pf-t--global--spacer--sm);
987
980
  background-color: var(--pf-t--global--background--color--tertiary--default);
988
- border-radius: var(--pf-t--chatbot-message--type--border--radius);
981
+ border-radius: var(--pf-t--global--border--radius--small);
989
982
  }
990
983
  .pf-chatbot__message-loading-dots {
991
984
  position: relative;
@@ -1090,7 +1083,7 @@
1090
1083
  }
1091
1084
 
1092
1085
  .pf-chatbot__message-inline-code {
1093
- background-color: var(--pf-t--chatbot--code--background);
1086
+ background-color: var(--pf-t--global--background--color--tertiary--default);
1094
1087
  font-size: var(--pf-t--global--font--size--body--default);
1095
1088
  }
1096
1089
 
@@ -1100,8 +1093,8 @@
1100
1093
 
1101
1094
  .pf-chatbot__message-text {
1102
1095
  width: fit-content;
1103
- padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
1104
- border-radius: var(--pf-t--chatbot-message--type--border--radius);
1096
+ padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
1097
+ border-radius: var(--pf-t--global--border--radius--small);
1105
1098
  }
1106
1099
  .pf-chatbot__message-text .pf-v6-c-content,
1107
1100
  .pf-chatbot__message-text .pf-v6-c-content--small,
@@ -1111,24 +1104,22 @@
1111
1104
  --pf-v6-c-content--FontSize: var(--pf-t--chatbot--font-size);
1112
1105
  }
1113
1106
  .pf-chatbot__message-text code {
1114
- background-color: var(--pf-t--chatbot-message--type--background--color--default);
1107
+ background-color: var(--pf-t--global--background--color--tertiary--default);
1115
1108
  font-size: var(--pf-t--global--font--size--body--default);
1116
1109
  }
1117
1110
 
1118
1111
  .pf-chatbot__message--user .pf-chatbot__message-text {
1119
- background-color: var(--pf-t--chatbot-message--type--background--color--primary);
1120
- color: var(--pf-t--chatbot-message--type--text--color--primary);
1121
- padding: var(--pf-t--chatbot-message--type--padding);
1112
+ background-color: var(--pf-t--global--color--brand--default);
1113
+ color: var(--pf-t--global--text--color--on-brand--default);
1114
+ --pf-v6-c-content--Color: var(--pf-t--global--text--color--on-brand--default);
1115
+ padding: var(--pf-t--global--spacer--sm);
1122
1116
  }
1123
1117
  .pf-chatbot__message--user .pf-chatbot__message-text .pf-v6-c-content,
1124
1118
  .pf-chatbot__message--user .pf-chatbot__message-text .pf-v6-c-content--small,
1125
1119
  .pf-chatbot__message--user .pf-chatbot__message-text .pf-v6-c-content--blockquote,
1126
1120
  .pf-chatbot__message--user .pf-chatbot__message-text p,
1127
1121
  .pf-chatbot__message--user .pf-chatbot__message-text a {
1128
- color: var(--pf-t--chatbot-message--type--text--color--primary);
1129
- }
1130
- .pf-chatbot__message--user .pf-chatbot__message-text code {
1131
- background-color: initial;
1122
+ color: var(--pf-t--global--text--color--on-brand--default);
1132
1123
  }
1133
1124
 
1134
1125
  .pf-chatbot__message-code-block {
@@ -1193,7 +1184,7 @@
1193
1184
  }
1194
1185
 
1195
1186
  .pf-chatbot__message-inline-code {
1196
- background-color: var(--pf-t--chatbot--code--background);
1187
+ background-color: var(--pf-t--global--background--color--tertiary--default);
1197
1188
  font-size: var(--pf-t--global--font--size--body--default);
1198
1189
  }
1199
1190
 
@@ -1203,8 +1194,8 @@
1203
1194
 
1204
1195
  .pf-chatbot__message-text {
1205
1196
  width: fit-content;
1206
- padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
1207
- border-radius: var(--pf-t--chatbot-message--type--border--radius);
1197
+ padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
1198
+ border-radius: var(--pf-t--global--border--radius--small);
1208
1199
  }
1209
1200
  .pf-chatbot__message-text .pf-v6-c-content,
1210
1201
  .pf-chatbot__message-text .pf-v6-c-content--small,
@@ -1214,31 +1205,29 @@
1214
1205
  --pf-v6-c-content--FontSize: var(--pf-t--chatbot--font-size);
1215
1206
  }
1216
1207
  .pf-chatbot__message-text code {
1217
- background-color: var(--pf-t--chatbot-message--type--background--color--default);
1208
+ background-color: var(--pf-t--global--background--color--tertiary--default);
1218
1209
  font-size: var(--pf-t--global--font--size--body--default);
1219
1210
  }
1220
1211
 
1221
1212
  .pf-chatbot__message--user .pf-chatbot__message-text {
1222
- background-color: var(--pf-t--chatbot-message--type--background--color--primary);
1223
- color: var(--pf-t--chatbot-message--type--text--color--primary);
1224
- padding: var(--pf-t--chatbot-message--type--padding);
1213
+ background-color: var(--pf-t--global--color--brand--default);
1214
+ color: var(--pf-t--global--text--color--on-brand--default);
1215
+ --pf-v6-c-content--Color: var(--pf-t--global--text--color--on-brand--default);
1216
+ padding: var(--pf-t--global--spacer--sm);
1225
1217
  }
1226
1218
  .pf-chatbot__message--user .pf-chatbot__message-text .pf-v6-c-content,
1227
1219
  .pf-chatbot__message--user .pf-chatbot__message-text .pf-v6-c-content--small,
1228
1220
  .pf-chatbot__message--user .pf-chatbot__message-text .pf-v6-c-content--blockquote,
1229
1221
  .pf-chatbot__message--user .pf-chatbot__message-text p,
1230
1222
  .pf-chatbot__message--user .pf-chatbot__message-text a {
1231
- color: var(--pf-t--chatbot-message--type--text--color--primary);
1232
- }
1233
- .pf-chatbot__message--user .pf-chatbot__message-text code {
1234
- background-color: initial;
1223
+ color: var(--pf-t--global--text--color--on-brand--default);
1235
1224
  }
1236
1225
 
1237
1226
  .pf-chatbot__message-ordered-list,
1238
1227
  .pf-chatbot__message-unordered-list {
1239
1228
  width: fit-content;
1240
- padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
1241
- border-radius: var(--pf-t--chatbot-message--type--border--radius);
1229
+ padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
1230
+ border-radius: var(--pf-t--global--border--radius--small);
1242
1231
  }
1243
1232
  .pf-chatbot__message-ordered-list .pf-v6-c-list,
1244
1233
  .pf-chatbot__message-ordered-list ul,
@@ -1251,16 +1240,16 @@
1251
1240
 
1252
1241
  .pf-chatbot__message--user .pf-chatbot__message-ordered-list,
1253
1242
  .pf-chatbot__message--user .pf-chatbot__message-unordered-list {
1254
- background-color: var(--pf-t--chatbot-message--type--background--color--primary);
1255
- color: var(--pf-t--chatbot-message--type--text--color--primary);
1256
- padding: var(--pf-t--chatbot-message--type--padding);
1243
+ background-color: var(--pf-t--global--color--brand--default);
1244
+ color: var(--pf-t--global--text--color--on-brand--default);
1245
+ padding: var(--pf-t--global--spacer--sm);
1257
1246
  }
1258
1247
 
1259
1248
  .pf-chatbot__message-loading {
1260
1249
  width: 36px;
1261
- padding: var(--pf-t--chatbot-message--type--padding);
1250
+ padding: var(--pf-t--global--spacer--sm);
1262
1251
  background-color: var(--pf-t--global--background--color--tertiary--default);
1263
- border-radius: var(--pf-t--chatbot-message--type--border--radius);
1252
+ border-radius: var(--pf-t--global--border--radius--small);
1264
1253
  }
1265
1254
  .pf-chatbot__message-loading-dots {
1266
1255
  position: relative;
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/ListMessage/ListMessage.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;;;AC1GF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAGI;AAAA;IACE;IACA;;;ACpBJ;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;;;AAQF;EACE;;AACA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AASF;AAAA;AAAA;EACE;;;ACvLN;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;;;AC5CJ;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;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AASJ;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;;;ACvIF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;AAAA;EAEE;;AAEF;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;;;ACvFA;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;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC1CN;EACE;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AASA;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AClFF;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;EACA;EACA;EACA;EAEA;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;;;ACrGF;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;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;;AD5CN;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;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;;AC3CN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;AHnBJ;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;;;;AIjDN;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;ACpBJ;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;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzEF;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;EAGI;AAAA;IACE;IACA;;;ADtCN;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;;;AChCF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACrER;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;;;AC9BJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EAEA;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/ListMessage/ListMessage.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;;;AC1GF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAGI;AAAA;IACE;IACA;;;ACpBJ;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;;;AAQF;EACE;;AACA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AASF;AAAA;AAAA;EACE;;;ACvLN;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;;;AC5CJ;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;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AASJ;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;;;ACvIF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;AAAA;EAEE;;AAEF;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;;;ACvFA;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;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC1CN;EACE;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AASA;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AClFF;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;;;AC7FF;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;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;;ADzCN;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;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;;ACxCN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;AHnBJ;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;;;;AIjDN;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;ACpBJ;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;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzEF;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;EAGI;AAAA;IACE;IACA;;;ADtCN;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;;;AChCF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACrER;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;;;AC9BJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EAEA;EACA;EACA;EAEA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}
package/dist/esm/Message/Message.js CHANGED
@@ -15,7 +15,7 @@ var __rest = (this && this.__rest) || function (s, e) {
15
15
  import React from 'react';
16
16
  import Markdown from 'react-markdown';
17
17
  import remarkGfm from 'remark-gfm';
18
- import { Avatar, Label, Timestamp, Truncate } from '@patternfly/react-core';
18
+ import { Avatar, ContentVariants, Label, Timestamp, Truncate } from '@patternfly/react-core';
19
19
  import MessageLoading from './MessageLoading';
20
20
  import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
21
21
  import TextMessage from './TextMessage/TextMessage';
@@ -51,11 +51,21 @@ export const MessageBase = (_a) => {
51
51
  React.createElement("div", { className: "pf-chatbot__message-response" },
52
52
  React.createElement("div", { className: "pf-chatbot__message-and-actions" },
53
53
  isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(Markdown, { components: {
54
- p: TextMessage,
55
- code: ({ children }) => React.createElement(CodeBlockMessage, Object.assign({}, codeBlockProps), children),
54
+ p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
55
+ code: (_a) => {
56
+ var { children } = _a, props = __rest(_a, ["children"]);
57
+ return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
58
+ },
56
59
  ul: UnorderedListMessage,
57
60
  ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
58
- li: ListItemMessage
61
+ li: ListItemMessage,
62
+ h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
63
+ h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
64
+ h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
65
+ h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
66
+ h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
67
+ h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
68
+ blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props))
59
69
  }, remarkPlugins: [remarkGfm] }, content)),
60
70
  !isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
61
71
  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 })),
package/dist/esm/Message/Message.test.js CHANGED
@@ -72,6 +72,22 @@ const ORDERED_LIST_WITH_CODE = `
72
72
 
73
73
  3. Item 3
74
74
  `;
75
+ const HEADING = `
76
+ # h1 Heading
77
+
78
+ ## h2 Heading
79
+
80
+ ### h3 Heading
81
+
82
+ #### h4 Heading
83
+
84
+ ##### h5 Heading
85
+
86
+ ###### h6 Heading
87
+ `;
88
+ const BLOCK_QUOTES = `> Blockquotes can also be nested...
89
+ >> ...by using additional greater-than signs (>) right next to each other...
90
+ > > > ...or with spaces between each sign.`;
75
91
  const checkListItemsRendered = () => {
76
92
  const items = ['Item 1', 'Item 2', 'Item 3'];
77
93
  expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -307,12 +323,16 @@ describe('Message', () => {
307
323
  render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
308
324
  expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
309
325
  expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
310
- expect(screen.getByText(/apiVersion: helm.openshift.io\/v1beta1/i)).toBeTruthy();
326
+ expect(screen.getByText(/yaml/)).toBeTruthy();
327
+ expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
328
+ expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
311
329
  expect(screen.getByText(/metadata:/i)).toBeTruthy();
312
- expect(screen.getByText(/name: azure-sample-repo0oooo00ooo/i)).toBeTruthy();
330
+ expect(screen.getByText(/name:/i)).toBeTruthy();
331
+ expect(screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
313
332
  expect(screen.getByText(/spec/i)).toBeTruthy();
314
333
  expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
315
- expect(screen.getByText(/url: https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
334
+ expect(screen.getByText(/url:/i)).toBeTruthy();
335
+ expect(screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
316
336
  });
317
337
  it('can click copy code button', () => __awaiter(void 0, void 0, void 0, function* () {
318
338
  // need explicit setup since RTL stubs clipboard if you do this
@@ -378,4 +398,19 @@ describe('Message', () => {
378
398
  } }));
379
399
  expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
380
400
  }));
401
+ it('should handle block quote correctly', () => {
402
+ render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: BLOCK_QUOTES }));
403
+ expect(screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
404
+ expect(screen.getByText('...by using additional greater-than signs (>) right next to each other...')).toBeTruthy();
405
+ expect(screen.getByText(/...or with spaces between each sign./)).toBeTruthy();
406
+ });
407
+ it('should handle heading correctly', () => {
408
+ render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: HEADING }));
409
+ expect(screen.getByRole('heading', { name: /h1 Heading/i })).toBeTruthy();
410
+ expect(screen.getByRole('heading', { name: /h2 Heading/i })).toBeTruthy();
411
+ expect(screen.getByRole('heading', { name: /h3 Heading/i })).toBeTruthy();
412
+ expect(screen.getByRole('heading', { name: /h4 Heading/i })).toBeTruthy();
413
+ expect(screen.getByRole('heading', { name: /h5 Heading/i })).toBeTruthy();
414
+ expect(screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
415
+ });
381
416
  });
package/dist/esm/Message/TextMessage/TextMessage.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
2
  import { ExtraProps } from 'react-markdown';
3
- declare const TextMessage: ({ children, ...props }: JSX.IntrinsicElements["p"] & ExtraProps) => React.JSX.Element;
3
+ import { ContentProps } from '@patternfly/react-core';
4
+ declare const TextMessage: ({ component, children, ...props }: ContentProps & ExtraProps) => React.JSX.Element;
4
5
  export default TextMessage;
package/dist/esm/Message/TextMessage/TextMessage.js CHANGED
@@ -13,10 +13,10 @@ var __rest = (this && this.__rest) || function (s, e) {
13
13
  return t;
14
14
  };
15
15
  import React from 'react';
16
- import { Content, ContentVariants } from '@patternfly/react-core';
16
+ import { Content } from '@patternfly/react-core';
17
17
  const TextMessage = (_a) => {
18
- var { children } = _a, props = __rest(_a, ["children"]);
18
+ var { component, children } = _a, props = __rest(_a, ["component", "children"]);
19
19
  return (React.createElement("span", { className: "pf-chatbot__message-text" },
20
- React.createElement(Content, Object.assign({ component: ContentVariants.p }, props), children)));
20
+ React.createElement(Content, Object.assign({ component: component }, props), children)));
21
21
  };
22
22
  export default TextMessage;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/chatbot",
3
- "version": "2.2.0-prerelease.15",
3
+ "version": "2.2.0-prerelease.16",
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/BotMessage.tsx CHANGED
@@ -2,9 +2,39 @@ import React from 'react';
2
2
  import Message from '@patternfly/chatbot/dist/dynamic/Message';
3
3
  import patternflyAvatar from './patternfly_avatar.jpg';
4
4
  import squareImg from './PF-social-color-square.svg';
5
+ import { Form, FormGroup, Radio } from '@patternfly/react-core';
5
6
 
6
7
  export const BotMessageExample: React.FunctionComponent = () => {
7
- const markdown = `
8
+ const [variant, setVariant] = React.useState('code');
9
+
10
+ /* eslint-disable indent */
11
+ const renderContent = () => {
12
+ switch (variant) {
13
+ case 'code':
14
+ return code;
15
+ case 'heading':
16
+ return heading;
17
+ case 'emphasis':
18
+ return emphasis;
19
+ case 'blockQuotes':
20
+ return blockQuotes;
21
+ case 'orderedList':
22
+ return orderedList;
23
+ case 'unorderedList':
24
+ return unorderedList;
25
+ case 'moreComplexList':
26
+ return moreComplexList;
27
+ case 'inlineCode':
28
+ return inlineCode;
29
+ case 'link':
30
+ return link;
31
+ default:
32
+ return;
33
+ }
34
+ };
35
+ /* eslint-enable indent */
36
+
37
+ const code = `
8
38
  Here is some YAML code:
9
39
 
10
40
  ~~~yaml
@@ -35,6 +65,36 @@ export default MessageLoading;
35
65
  ~~~
36
66
  `;
37
67
 
68
+ const heading = `
69
+ # h1 Heading
70
+
71
+ ## h2 Heading
72
+
73
+ ### h3 Heading
74
+
75
+ #### h4 Heading
76
+
77
+ ##### h5 Heading
78
+
79
+ ###### h6 Heading
80
+ `;
81
+
82
+ const emphasis = `
83
+ **Bold text, formatted with double asterisks**
84
+
85
+ __Bold text, formatted with double underscores__
86
+
87
+ *Italic text, formatted with single asterisks*
88
+
89
+ _Italic text, formatted with single underscores_
90
+
91
+ ~~Strikethrough~~
92
+ `;
93
+
94
+ const blockQuotes = `> Blockquotes can also be nested...
95
+ >> ...by using additional greater-than signs (>) right next to each other...
96
+ > > > ...or with spaces between each sign.`;
97
+
38
98
  const orderedList = `
39
99
  Here is an ordered list:
40
100
 
@@ -61,21 +121,13 @@ export default MessageLoading;
61
121
  Acquire 1 tablespoon of room temperature \`butter\`. Use \`knife\` to spread butter on \`toast\`. Bon appétit!
62
122
  `;
63
123
 
124
+ const link = `A paragraph with a URL: https://reactjs.org.`;
125
+
126
+ const inlineCode = `Here is an inline code - \`() => void\``;
127
+
64
128
  return (
65
129
  <>
66
130
  <Message name="Bot" role="bot" avatar={patternflyAvatar} content={`Text-based message from a bot named "Bot"`} />
67
- <Message
68
- name="Bot"
69
- role="bot"
70
- avatar={patternflyAvatar}
71
- content={`Text-based message from a bot named "Bot," with updated timestamp`}
72
- timestamp="1 hour ago"
73
- />
74
- <Message name="Bot" role="bot" avatar={patternflyAvatar} content={markdown} />
75
- <Message name="Bot" role="bot" avatar={patternflyAvatar} content={orderedList} />
76
- <Message name="Bot" role="bot" avatar={patternflyAvatar} content={unorderedList} />
77
- <Message name="Bot" role="bot" avatar={patternflyAvatar} content={moreComplexList} />
78
- <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
79
131
  <Message role="bot" avatar={patternflyAvatar} content="Text-based message from a nameless bot" />
80
132
  <Message
81
133
  name="Default Openshift Container Platform Assistant That Can Help With Any Query You Might Need Help With"
@@ -90,6 +142,83 @@ export default MessageLoading;
90
142
  content="Text-based message from a bot with a square avatar. You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `<Message>` component via `avatarProps`."
91
143
  hasRoundAvatar={false}
92
144
  />
145
+ <Message
146
+ name="Bot"
147
+ role="bot"
148
+ avatar={patternflyAvatar}
149
+ content={`Text-based message from a bot named "Bot," with updated timestamp`}
150
+ timestamp="1 hour ago"
151
+ />
152
+ <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
153
+
154
+ <Form>
155
+ <FormGroup role="radiogroup" isInline fieldId="bot-message-type" label="Message content type">
156
+ <Radio
157
+ isChecked={variant === 'code'}
158
+ onChange={() => setVariant('code')}
159
+ name="bot-message-type"
160
+ label="Code"
161
+ id="code"
162
+ />
163
+ <Radio
164
+ isChecked={variant === 'inlineCode'}
165
+ onChange={() => setVariant('inlineCode')}
166
+ name="bot-message-type"
167
+ label="Inline code"
168
+ id="inline-code"
169
+ />
170
+ <Radio
171
+ isChecked={variant === 'heading'}
172
+ onChange={() => setVariant('heading')}
173
+ name="bot-message-type"
174
+ label="Heading"
175
+ id="heading"
176
+ />
177
+ <Radio
178
+ isChecked={variant === 'blockQuotes'}
179
+ onChange={() => setVariant('blockQuotes')}
180
+ name="bot-message-type"
181
+ label="Block quote"
182
+ id="block-quotes"
183
+ />
184
+ <Radio
185
+ isChecked={variant === 'emphasis'}
186
+ onChange={() => setVariant('emphasis')}
187
+ name="bot-message-type"
188
+ label="Emphasis"
189
+ id="emphasis"
190
+ />
191
+ <Radio
192
+ isChecked={variant === 'link'}
193
+ onChange={() => setVariant('link')}
194
+ name="bot-message-type"
195
+ label="Link"
196
+ id="link"
197
+ />
198
+ <Radio
199
+ isChecked={variant === 'unorderedList'}
200
+ onChange={() => setVariant('unorderedList')}
201
+ name="bot-message-type"
202
+ label="Unordered list"
203
+ id="unordered-list"
204
+ />
205
+ <Radio
206
+ isChecked={variant === 'orderedList'}
207
+ onChange={() => setVariant('orderedList')}
208
+ name="bot-message-type"
209
+ label="Ordered list"
210
+ id="ordered-list"
211
+ />
212
+ <Radio
213
+ isChecked={variant === 'moreComplexList'}
214
+ onChange={() => setVariant('moreComplexList')}
215
+ name="bot-message-type"
216
+ label="More complex list"
217
+ id="more-complex-list"
218
+ />
219
+ </FormGroup>
220
+ </Form>
221
+ <Message name="Bot" role="bot" avatar={patternflyAvatar} content={renderContent()} />
93
222
  </>
94
223
  );
95
224
  };
package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx CHANGED
@@ -2,25 +2,128 @@ import React from 'react';
2
2
 
3
3
  import Message from '@patternfly/chatbot/dist/dynamic/Message';
4
4
  import userAvatar from './user_avatar.svg';
5
+ import { Form, FormGroup, Radio } from '@patternfly/react-core';
5
6
 
6
7
  export const UserMessageExample: React.FunctionComponent = () => {
7
- const markdown = `A paragraph with *emphasis* and **strong importance**.
8
+ const [variant, setVariant] = React.useState('code');
8
9
 
9
- > A block quote with ~strikethrough~ and a URL: https://reactjs.org.
10
+ /* eslint-disable indent */
11
+ const renderContent = () => {
12
+ switch (variant) {
13
+ case 'code':
14
+ return code;
15
+ case 'inlineCode':
16
+ return inlineCode;
17
+ case 'heading':
18
+ return heading;
19
+ case 'emphasis':
20
+ return emphasis;
21
+ case 'blockQuotes':
22
+ return blockQuotes;
23
+ case 'orderedList':
24
+ return orderedList;
25
+ case 'unorderedList':
26
+ return unorderedList;
27
+ case 'moreComplexList':
28
+ return moreComplexList;
29
+ case 'link':
30
+ return link;
31
+ default:
32
+ return;
33
+ }
34
+ };
35
+ /* eslint-enable indent */
10
36
 
11
- Here is an inline code - \`() => void\`
37
+ const code = `
38
+ Here is some YAML code:
12
39
 
13
- Here is an ordered list:
40
+ ~~~yaml
41
+ apiVersion: helm.openshift.io/v1beta1/
42
+ kind: HelmChartRepository
43
+ metadata:
44
+ name: azure-sample-repo0oooo00ooo
45
+ spec:
46
+ connectionConfig:
47
+ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
48
+ ~~~
14
49
 
15
- 1. Item 1
16
- 2. Item 3
17
- 3. Item 4
50
+ Here is some JavaScript code:
18
51
 
19
- Here is an unordered list:
52
+ ~~~js
53
+ import React from 'react';
54
+
55
+ const MessageLoading = () => (
56
+ <div className="pf-chatbot__message-loading">
57
+ <span className="pf-chatbot__message-loading-dots">
58
+ <span className="pf-v6-screen-reader">Loading message</span>
59
+ </span>
60
+ </div>
61
+ );
62
+
63
+ export default MessageLoading;
64
+
65
+ ~~~
66
+ `;
67
+
68
+ const heading = `
69
+ # h1 Heading
70
+
71
+ ## h2 Heading
72
+
73
+ ### h3 Heading
74
+
75
+ #### h4 Heading
76
+
77
+ ##### h5 Heading
78
+
79
+ ###### h6 Heading
80
+ `;
81
+
82
+ const emphasis = `
83
+ **Bold text, formatted with double asterisks**
84
+
85
+ __Bold text, formatted with double underscores__
86
+
87
+ *Italic text, formatted with single asterisks*
88
+
89
+ _Italic text, formatted with single underscores_
90
+
91
+ ~~Strikethrough~~
92
+ `;
93
+
94
+ const blockQuotes = `> Blockquotes can also be nested...
95
+ >> ...by using additional greater-than signs (>) right next to each other...
96
+ > > > ...or with spaces between each sign.`;
97
+
98
+ const orderedList = `
99
+ Here is an ordered list:
100
+
101
+ 1. Item 1
102
+ 2. Item 2
103
+ 3. Item 3`;
104
+
105
+ const unorderedList = `
106
+ Here is an unordered list:
107
+
108
+ * Item 1
109
+ * Item 2
110
+ * Item 3`;
111
+
112
+ const moreComplexList = `You may be wondering whether you can display more complex lists with formatting. In response to your question, I will explain how to spread butter on toast.
113
+
114
+ 1. **Using a \`toaster\`:**
115
+
116
+ - Place \`bread\` in a \`toaster\`
117
+ - Once \`bread\` is lightly browned, remove from \`toaster\`
118
+
119
+ 2. **Using a \`knife\`:**
120
+
121
+ Acquire 1 tablespoon of room temperature \`butter\`. Use \`knife\` to spread butter on \`toast\`. Bon appétit!
122
+ `;
123
+
124
+ const link = `A paragraph with a URL: https://reactjs.org.`;
20
125
 
21
- * Item 1
22
- * Item 2
23
- * Item 3`;
126
+ const inlineCode = `Here is an inline code - \`() => void\``;
24
127
 
25
128
  return (
26
129
  <>
@@ -31,7 +134,6 @@ Here is an unordered list:
31
134
  timestamp="1 hour ago"
32
135
  avatar={userAvatar}
33
136
  />
34
- <Message name="User" role="user" content={markdown} avatar={userAvatar} />
35
137
  <Message
36
138
  name="User"
37
139
  role="user"
@@ -39,6 +141,74 @@ Here is an unordered list:
39
141
  avatar={userAvatar}
40
142
  avatarProps={{ isBordered: true }}
41
143
  />
144
+ <Form>
145
+ <FormGroup role="radiogroup" isInline fieldId="user-message-type" label="Message content type">
146
+ <Radio
147
+ isChecked={variant === 'code'}
148
+ onChange={() => setVariant('code')}
149
+ name="user-message-type"
150
+ label="Code"
151
+ id="user-code"
152
+ />
153
+ <Radio
154
+ isChecked={variant === 'inlineCode'}
155
+ onChange={() => setVariant('inlineCode')}
156
+ name="user-message-type"
157
+ label="Inline code"
158
+ id="user-inline-code"
159
+ />
160
+ <Radio
161
+ isChecked={variant === 'heading'}
162
+ onChange={() => setVariant('heading')}
163
+ name="user-message-type"
164
+ label="Heading"
165
+ id="user-heading"
166
+ />
167
+ <Radio
168
+ isChecked={variant === 'blockQuotes'}
169
+ onChange={() => setVariant('blockQuotes')}
170
+ name="user-message-type"
171
+ label="Block quote"
172
+ id="user-block-quotes"
173
+ />
174
+ <Radio
175
+ isChecked={variant === 'emphasis'}
176
+ onChange={() => setVariant('emphasis')}
177
+ name="user-message-type"
178
+ label="Emphasis"
179
+ id="user-emphasis"
180
+ />
181
+ <Radio
182
+ isChecked={variant === 'link'}
183
+ onChange={() => setVariant('link')}
184
+ name="user-message-type"
185
+ label="Link"
186
+ id="user-link"
187
+ />
188
+ <Radio
189
+ isChecked={variant === 'unorderedList'}
190
+ onChange={() => setVariant('unorderedList')}
191
+ name="user-message-type"
192
+ label="Unordered list"
193
+ id="user-unordered-list"
194
+ />
195
+ <Radio
196
+ isChecked={variant === 'orderedList'}
197
+ onChange={() => setVariant('orderedList')}
198
+ name="user-message-type"
199
+ label="Ordered list"
200
+ id="user-ordered-list"
201
+ />
202
+ <Radio
203
+ isChecked={variant === 'moreComplexList'}
204
+ onChange={() => setVariant('moreComplexList')}
205
+ name="user-message-type"
206
+ label="More complex list"
207
+ id="user-more-complex-list"
208
+ />
209
+ </FormGroup>
210
+ </Form>
211
+ <Message name="User" role="user" content={renderContent()} avatar={userAvatar} />
42
212
  </>
43
213
  );
44
214
  };
package/src/Message/CodeBlockMessage/CodeBlockMessage.scss CHANGED
@@ -40,11 +40,11 @@
40
40
  }
41
41
 
42
42
  .pf-chatbot__button--copy.pf-v6-c-button {
43
- color: var(--pf-t--color--white);
43
+ color: var(--pf-t--color--white); // same in light + dark theme
44
44
 
45
45
  &:hover,
46
46
  &:focus {
47
- color: var(--pf-t--color--white);
47
+ color: var(--pf-t--color--white); // same in light + dark theme
48
48
  }
49
49
  }
50
50
  }
@@ -77,6 +77,6 @@
77
77
  }
78
78
 
79
79
  .pf-chatbot__message-inline-code {
80
- background-color: var(--pf-t--chatbot--code--background);
80
+ background-color: var(--pf-t--global--background--color--tertiary--default);
81
81
  font-size: var(--pf-t--global--font--size--body--default);
82
82
  }
package/src/Message/ListMessage/ListMessage.scss CHANGED
@@ -5,8 +5,8 @@
5
5
  .pf-chatbot__message-ordered-list,
6
6
  .pf-chatbot__message-unordered-list {
7
7
  width: fit-content;
8
- padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
9
- border-radius: var(--pf-t--chatbot-message--type--border--radius);
8
+ padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
9
+ border-radius: var(--pf-t--global--border--radius--small);
10
10
 
11
11
  .pf-v6-c-list,
12
12
  ul,
@@ -18,8 +18,8 @@
18
18
  .pf-chatbot__message--user {
19
19
  .pf-chatbot__message-ordered-list,
20
20
  .pf-chatbot__message-unordered-list {
21
- background-color: var(--pf-t--chatbot-message--type--background--color--primary);
22
- color: var(--pf-t--chatbot-message--type--text--color--primary);
23
- padding: var(--pf-t--chatbot-message--type--padding);
21
+ background-color: var(--pf-t--global--color--brand--default);
22
+ color: var(--pf-t--global--text--color--on-brand--default);
23
+ padding: var(--pf-t--global--spacer--sm);
24
24
  }
25
25
  }
package/src/Message/Message.scss CHANGED
@@ -2,14 +2,6 @@
2
2
  // Chatbot Message
3
3
  // ============================================================================
4
4
  .pf-chatbot__message {
5
- --pf-t--chatbot-message--type--background--color--default: var(--pf-t--global--background--color--tertiary--default);
6
- --pf-t--chatbot-message--type--background--color--primary: var(--pf-t--global--color--brand--default);
7
- --pf-t--chatbot-message--type--padding: var(--pf-t--global--spacer--sm);
8
- --pf-t--chatbot-message--type--text--color--default: var(--pf-t--global--text--color--regular);
9
- --pf-t--chatbot-message--type--text--color--primary: var(--pf-t--global--text--color--inverse);
10
- --pf-t--chatbot-message--type--border--radius: var(--pf-t--global--border--radius--small);
11
- --pf-t--chatbot-message--meta--label--color: var(--pf-t--global--border--color--on-secondary);
12
-
13
5
  display: flex;
14
6
  align-items: flex-start;
15
7
  gap: var(--pf-t--global--spacer--lg);
@@ -63,12 +55,12 @@
63
55
 
64
56
  // Badge
65
57
  .pf-v6-c-label {
66
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--chatbot-message--meta--label--color);
58
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--on-secondary);
67
59
  --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--xs);
68
60
  font-weight: var(--pf-t--global--font--weight--body--bold);
69
61
 
70
62
  .pf-v6-c-label__content {
71
- --pf-v6-c-label--Color: var(--pf-t--chatbot-message--meta--label--color);
63
+ --pf-v6-c-label--Color: var(--pf-t--global--border--color--on-secondary);
72
64
  }
73
65
  }
74
66
 
@@ -88,7 +80,7 @@
88
80
  flex-direction: column;
89
81
  align-items: flex-start;
90
82
  gap: var(--pf-t--global--font--size--sm);
91
- color: var(--pf-t--chatbot-message--type--text--color--default);
83
+ color: var(--pf-t--global--text--color--regular);
92
84
  }
93
85
 
94
86
  &-and-actions {
package/src/Message/Message.test.tsx CHANGED
@@ -71,6 +71,24 @@ const ORDERED_LIST_WITH_CODE = `
71
71
  3. Item 3
72
72
  `;
73
73
 
74
+ const HEADING = `
75
+ # h1 Heading
76
+
77
+ ## h2 Heading
78
+
79
+ ### h3 Heading
80
+
81
+ #### h4 Heading
82
+
83
+ ##### h5 Heading
84
+
85
+ ###### h6 Heading
86
+ `;
87
+
88
+ const BLOCK_QUOTES = `> Blockquotes can also be nested...
89
+ >> ...by using additional greater-than signs (>) right next to each other...
90
+ > > > ...or with spaces between each sign.`;
91
+
74
92
  const checkListItemsRendered = () => {
75
93
  const items = ['Item 1', 'Item 2', 'Item 3'];
76
94
  expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -377,13 +395,17 @@ describe('Message', () => {
377
395
  render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
378
396
  expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
379
397
  expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
380
- expect(screen.getByText(/apiVersion: helm.openshift.io\/v1beta1/i)).toBeTruthy();
398
+ expect(screen.getByText(/yaml/)).toBeTruthy();
399
+ expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
400
+ expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
381
401
  expect(screen.getByText(/metadata:/i)).toBeTruthy();
382
- expect(screen.getByText(/name: azure-sample-repo0oooo00ooo/i)).toBeTruthy();
402
+ expect(screen.getByText(/name:/i)).toBeTruthy();
403
+ expect(screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
383
404
  expect(screen.getByText(/spec/i)).toBeTruthy();
384
405
  expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
406
+ expect(screen.getByText(/url:/i)).toBeTruthy();
385
407
  expect(
386
- screen.getByText(/url: https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)
408
+ screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)
387
409
  ).toBeTruthy();
388
410
  });
389
411
  it('can click copy code button', async () => {
@@ -491,4 +513,19 @@ describe('Message', () => {
491
513
  );
492
514
  expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
493
515
  });
516
+ it('should handle block quote correctly', () => {
517
+ render(<Message avatar="./img" role="user" name="User" content={BLOCK_QUOTES} />);
518
+ expect(screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
519
+ expect(screen.getByText('...by using additional greater-than signs (>) right next to each other...')).toBeTruthy();
520
+ expect(screen.getByText(/...or with spaces between each sign./)).toBeTruthy();
521
+ });
522
+ it('should handle heading correctly', () => {
523
+ render(<Message avatar="./img" role="user" name="User" content={HEADING} />);
524
+ expect(screen.getByRole('heading', { name: /h1 Heading/i })).toBeTruthy();
525
+ expect(screen.getByRole('heading', { name: /h2 Heading/i })).toBeTruthy();
526
+ expect(screen.getByRole('heading', { name: /h3 Heading/i })).toBeTruthy();
527
+ expect(screen.getByRole('heading', { name: /h4 Heading/i })).toBeTruthy();
528
+ expect(screen.getByRole('heading', { name: /h5 Heading/i })).toBeTruthy();
529
+ expect(screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
530
+ });
494
531
  });
package/src/Message/Message.tsx CHANGED
@@ -6,7 +6,15 @@ import React from 'react';
6
6
 
7
7
  import Markdown from 'react-markdown';
8
8
  import remarkGfm from 'remark-gfm';
9
- import { Avatar, AvatarProps, Label, LabelGroupProps, Timestamp, Truncate } from '@patternfly/react-core';
9
+ import {
10
+ Avatar,
11
+ AvatarProps,
12
+ ContentVariants,
13
+ Label,
14
+ LabelGroupProps,
15
+ Timestamp,
16
+ Truncate
17
+ } from '@patternfly/react-core';
10
18
  import MessageLoading from './MessageLoading';
11
19
  import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
12
20
  import TextMessage from './TextMessage/TextMessage';
@@ -173,11 +181,22 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
173
181
  ) : (
174
182
  <Markdown
175
183
  components={{
176
- p: TextMessage,
177
- code: ({ children }) => <CodeBlockMessage {...codeBlockProps}>{children}</CodeBlockMessage>,
184
+ p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
185
+ code: ({ children, ...props }) => (
186
+ <CodeBlockMessage {...props} {...codeBlockProps}>
187
+ {children}
188
+ </CodeBlockMessage>
189
+ ),
178
190
  ul: UnorderedListMessage,
179
191
  ol: (props) => <OrderedListMessage {...props} />,
180
- li: ListItemMessage
192
+ li: ListItemMessage,
193
+ h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
194
+ h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
195
+ h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
196
+ h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
197
+ h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
198
+ h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
199
+ blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />
181
200
  }}
182
201
  remarkPlugins={[remarkGfm]}
183
202
  >
package/src/Message/MessageLoading.scss CHANGED
@@ -3,9 +3,9 @@
3
3
  // ============================================================================
4
4
  .pf-chatbot__message-loading {
5
5
  width: 36px;
6
- padding: var(--pf-t--chatbot-message--type--padding);
6
+ padding: var(--pf-t--global--spacer--sm);
7
7
  background-color: var(--pf-t--global--background--color--tertiary--default);
8
- border-radius: var(--pf-t--chatbot-message--type--border--radius);
8
+ border-radius: var(--pf-t--global--border--radius--small);
9
9
 
10
10
  &-dots {
11
11
  position: relative;
package/src/Message/TextMessage/TextMessage.scss CHANGED
@@ -13,8 +13,8 @@
13
13
  // Need to inline shorter text
14
14
  .pf-chatbot__message-text {
15
15
  width: fit-content;
16
- padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
17
- border-radius: var(--pf-t--chatbot-message--type--border--radius);
16
+ padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
17
+ border-radius: var(--pf-t--global--border--radius--small);
18
18
 
19
19
  .pf-v6-c-content,
20
20
  .pf-v6-c-content--small,
@@ -25,27 +25,24 @@
25
25
  }
26
26
 
27
27
  code {
28
- background-color: var(--pf-t--chatbot-message--type--background--color--default);
28
+ background-color: var(--pf-t--global--background--color--tertiary--default);
29
29
  font-size: var(--pf-t--global--font--size--body--default);
30
30
  }
31
31
  }
32
32
 
33
33
  .pf-chatbot__message--user {
34
34
  .pf-chatbot__message-text {
35
- background-color: var(--pf-t--chatbot-message--type--background--color--primary);
36
- color: var(--pf-t--chatbot-message--type--text--color--primary);
37
- padding: var(--pf-t--chatbot-message--type--padding);
35
+ background-color: var(--pf-t--global--color--brand--default);
36
+ color: var(--pf-t--global--text--color--on-brand--default);
37
+ --pf-v6-c-content--Color: var(--pf-t--global--text--color--on-brand--default);
38
+ padding: var(--pf-t--global--spacer--sm);
38
39
 
39
40
  .pf-v6-c-content,
40
41
  .pf-v6-c-content--small,
41
42
  .pf-v6-c-content--blockquote,
42
43
  p,
43
44
  a {
44
- color: var(--pf-t--chatbot-message--type--text--color--primary);
45
- }
46
-
47
- code {
48
- background-color: initial;
45
+ color: var(--pf-t--global--text--color--on-brand--default);
49
46
  }
50
47
  }
51
48
  }
package/src/Message/TextMessage/TextMessage.tsx CHANGED
@@ -4,11 +4,11 @@
4
4
 
5
5
  import React from 'react';
6
6
  import { ExtraProps } from 'react-markdown';
7
- import { Content, ContentVariants } from '@patternfly/react-core';
7
+ import { Content, ContentProps } from '@patternfly/react-core';
8
8
 
9
- const TextMessage = ({ children, ...props }: JSX.IntrinsicElements['p'] & ExtraProps) => (
9
+ const TextMessage = ({ component, children, ...props }: ContentProps & ExtraProps) => (
10
10
  <span className="pf-chatbot__message-text">
11
- <Content component={ContentVariants.p} {...props}>
11
+ <Content component={component} {...props}>
12
12
  {children}
13
13
  </Content>
14
14
  </span>