@patternfly/chatbot 2.1.0-prerelease.21 → 2.1.0-prerelease.23

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 (16) hide show
  1. package/dist/cjs/MessageBar/MessageBar.js +9 -1
  2. package/dist/css/main.css +68 -1
  3. package/dist/css/main.css.map +1 -1
  4. package/dist/esm/MessageBar/MessageBar.js +9 -1
  5. package/package.json +1 -1
  6. package/patternfly-docs/content/extensions/chatbot/about-chatbot.md +23 -14
  7. package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +4 -4
  8. package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +20 -20
  9. package/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md +3 -3
  10. package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +8 -8
  11. package/src/Chatbot/Chatbot.scss +30 -1
  12. package/src/ChatbotContent/ChatbotContent.scss +5 -0
  13. package/src/FileDropZone/FileDropZone.scss +20 -0
  14. package/src/MessageBar/MessageBar.tsx +11 -2
  15. package/src/MessageBox/JumpButton.scss +5 -0
  16. package/src/MessageBox/MessageBox.scss +10 -0
package/dist/cjs/MessageBar/MessageBar.js CHANGED
@@ -77,6 +77,14 @@ const MessageBar = (_a) => {
77
77
  (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(!(attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.isAttachMenuOpen)));
78
78
  attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuToggleClick();
79
79
  };
80
+ const handleSpeechRecognition = (message) => {
81
+ setMessage(message);
82
+ const textarea = textareaRef.current;
83
+ if (textarea) {
84
+ textarea.focus();
85
+ textarea.textContent = dompurify_1.default.sanitize(message);
86
+ }
87
+ };
80
88
  const renderButtons = () => {
81
89
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
82
90
  if (hasStopButton && handleStopButton) {
@@ -85,7 +93,7 @@ const MessageBar = (_a) => {
85
93
  return (react_1.default.createElement(react_1.default.Fragment, null,
86
94
  attachMenuProps && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipContent }, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props))),
87
95
  !attachMenuProps && hasAttachButton && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, inputTestId: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.inputTestId }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.props))),
88
- hasMicrophoneButton && (react_1.default.createElement(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: setMessage, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent }, (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.props))),
96
+ hasMicrophoneButton && (react_1.default.createElement(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent }, (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.props))),
89
97
  (alwayShowSendButton || message) && (react_1.default.createElement(SendButton_1.default, Object.assign({ value: message, onClick: handleSend, isDisabled: isSendButtonDisabled, tooltipContent: (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _k === void 0 ? void 0 : _k.tooltipContent }, (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.props)))));
90
98
  };
91
99
  const placeholder = isListeningMessage ? 'Listening' : 'Send a message...';
package/dist/css/main.css CHANGED
@@ -72,6 +72,17 @@
72
72
  .pf-chatbot--hidden {
73
73
  pointer-events: none;
74
74
  }
75
+ @media screen and (max-width: 32rem) {
76
+ .pf-chatbot {
77
+ width: 100vw;
78
+ inset-inline-end: 0;
79
+ }
80
+ }
81
+ @media screen and (max-height: 518px) {
82
+ .pf-chatbot {
83
+ overflow: auto;
84
+ }
85
+ }
75
86
 
76
87
  .pf-chatbot--docked {
77
88
  inset-block-end: 0;
@@ -82,9 +93,19 @@
82
93
  box-shadow: var(--pf-t--global--box-shadow--lg--left);
83
94
  overflow: inherit;
84
95
  }
96
+ @media screen and (max-width: 30rem) {
97
+ .pf-chatbot--docked {
98
+ width: 100%;
99
+ }
100
+ }
85
101
 
86
102
  html.pf-chatbot-allow--docked {
87
- padding-right: 480px;
103
+ padding-inline-start: 480px;
104
+ }
105
+ @media screen and (max-width: 30rem) {
106
+ html.pf-chatbot-allow--docked {
107
+ padding-inline-start: 0px;
108
+ }
88
109
  }
89
110
 
90
111
  .pf-chatbot--fullscreen {
@@ -116,6 +137,11 @@ html.pf-chatbot-allow--docked {
116
137
  .pf-chatbot-container--hidden {
117
138
  pointer-events: none;
118
139
  }
140
+ @media screen and (max-height: 518px) {
141
+ .pf-chatbot-container {
142
+ overflow: auto;
143
+ }
144
+ }
119
145
 
120
146
  .pf-chatbot-container--embedded {
121
147
  min-height: 100%;
@@ -140,6 +166,11 @@ html.pf-chatbot-allow--docked {
140
166
  overflow: hidden;
141
167
  flex: 1;
142
168
  }
169
+ @media screen and (max-height: 518px) {
170
+ .pf-chatbot__content {
171
+ overflow: unset;
172
+ }
173
+ }
143
174
 
144
175
  @media screen and (min-width: 64rem) {
145
176
  .pf-chatbot--fullscreen .pf-chatbot__content,
@@ -748,6 +779,11 @@ html.pf-chatbot-allow--docked {
748
779
  display: grid;
749
780
  grid-template-rows: 1fr auto;
750
781
  }
782
+ @media screen and (max-height: 518px) {
783
+ .pf-chatbot__dropzone--invisible {
784
+ overflow-y: auto;
785
+ }
786
+ }
751
787
 
752
788
  .pf-chatbot__dropzone--visible.pf-chatbot__dropzone {
753
789
  margin-block-start: var(--pf-t--global--spacer--lg);
@@ -774,6 +810,17 @@ html.pf-chatbot-allow--docked {
774
810
  padding: var(--pf-t--global--spacer--md);
775
811
  }
776
812
 
813
+ @media screen and (max-height: 518px) {
814
+ .pf-chatbot--default .pf-chatbot__dropzone--visible.pf-chatbot__dropzone {
815
+ display: flex;
816
+ height: 100%;
817
+ overflow: hidden;
818
+ }
819
+ .pf-chatbot--default .pf-chatbot__dropzone--visible.pf-chatbot__dropzone .pf-v6-c-multiple-file-upload__main {
820
+ width: 100%;
821
+ }
822
+ }
823
+
777
824
  .pf-chatbot__message {
778
825
  --pf-t--chatbot-message--type--background--color--default: var(--pf-t--global--background--color--tertiary--default);
779
826
  --pf-t--chatbot-message--type--background--color--primary: var(--pf-t--global--color--brand--default);
@@ -1363,6 +1410,11 @@ html.pf-chatbot-allow--docked {
1363
1410
  .pf-chatbot__jump--bottom {
1364
1411
  inset-block-end: var(--pf-t--global--spacer--md) !important;
1365
1412
  }
1413
+ @media screen and (max-height: 518px) {
1414
+ .pf-chatbot__jump {
1415
+ display: none;
1416
+ }
1417
+ }
1366
1418
 
1367
1419
  .pf-chatbot__messagebox {
1368
1420
  height: 100%;
@@ -1372,6 +1424,16 @@ html.pf-chatbot-allow--docked {
1372
1424
  row-gap: var(--pf-t--global--spacer--sm);
1373
1425
  padding: var(--pf-t--global--spacer--lg);
1374
1426
  }
1427
+ @media screen and (max-width: 32rem) {
1428
+ .pf-chatbot__messagebox {
1429
+ width: 100%;
1430
+ }
1431
+ }
1432
+ @media screen and (max-height: 518px) {
1433
+ .pf-chatbot__messagebox {
1434
+ overflow-y: visible;
1435
+ }
1436
+ }
1375
1437
 
1376
1438
  .pf-chatbot__messagebox--bottom > :first-child {
1377
1439
  margin-top: auto !important;
@@ -1427,6 +1489,11 @@ html.pf-chatbot-allow--docked {
1427
1489
  .pf-chatbot__jump--bottom {
1428
1490
  inset-block-end: var(--pf-t--global--spacer--md) !important;
1429
1491
  }
1492
+ @media screen and (max-height: 518px) {
1493
+ .pf-chatbot__jump {
1494
+ display: none;
1495
+ }
1496
+ }
1430
1497
 
1431
1498
  .pf-chatbot__response-actions {
1432
1499
  display: grid;
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/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/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/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.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;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;ACvFF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;IACA;;;ACfJ;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;;AAEF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAQF;EACE;;;AAQF;EACE;;AACA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AASF;AAAA;AAAA;EACE;;;AClKN;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;;;AAUF;EACE;;AAGJ;EACE;;;AChDJ;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;;AAEF;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;;;AC1IF;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;;;ACxEN;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;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AC/BF;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;;AAIA;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;;AAQR;EACE;EACA;EACA;;;ACnHF;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;;;;AI9CN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;;ACbN;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;EAEE;;AAEA;EACE;;;AAKN;EACE;IACE;IACA;;EAEF;IACE;IACA;;;ACvBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;;;ACTJ;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACvEF;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;;;ACzCJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAGI;AAAA;IACE;IACA;;;AD5BN;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;;;AE3CJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;;ACrBR;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;;;ACJF;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EAEA;EACA;EACA;EAEA;EACA;EACA;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/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/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/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.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;;;;AAIJ;EACE;;AAIA;EALF;IAMI;;;;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;;;ACpHF;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;;AAEF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAQF;EACE;;;AAQF;EACE;;AACA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AASF;AAAA;AAAA;EACE;;;AClKN;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;;;AAUF;EACE;;AAGJ;EACE;;;AChDJ;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;;AAEF;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;;;AC1IF;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;;;ACxEN;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;;AAIA;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;;AAQR;EACE;EACA;EACA;;;ACnHF;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;;;;AI9CN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;;ACbN;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;EAEE;;AAEA;EACE;;;AAKN;EACE;IACE;IACA;;EAEF;IACE;IACA;;;ACvBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;;;ACTJ;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACvEF;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;;AAEA;EACE;;AAMA;EACE;;;ACrBR;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;;;ACJF;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}
package/dist/esm/MessageBar/MessageBar.js CHANGED
@@ -71,6 +71,14 @@ export const MessageBar = (_a) => {
71
71
  (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(!(attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.isAttachMenuOpen)));
72
72
  attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuToggleClick();
73
73
  };
74
+ const handleSpeechRecognition = (message) => {
75
+ setMessage(message);
76
+ const textarea = textareaRef.current;
77
+ if (textarea) {
78
+ textarea.focus();
79
+ textarea.textContent = DOMPurify.sanitize(message);
80
+ }
81
+ };
74
82
  const renderButtons = () => {
75
83
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
76
84
  if (hasStopButton && handleStopButton) {
@@ -79,7 +87,7 @@ export const MessageBar = (_a) => {
79
87
  return (React.createElement(React.Fragment, null,
80
88
  attachMenuProps && (React.createElement(AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipContent }, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props))),
81
89
  !attachMenuProps && hasAttachButton && (React.createElement(AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, inputTestId: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.inputTestId }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.props))),
82
- hasMicrophoneButton && (React.createElement(MicrophoneButton, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: setMessage, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent }, (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.props))),
90
+ hasMicrophoneButton && (React.createElement(MicrophoneButton, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent }, (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.props))),
83
91
  (alwayShowSendButton || message) && (React.createElement(SendButton, Object.assign({ value: message, onClick: handleSend, isDisabled: isSendButtonDisabled, tooltipContent: (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _k === void 0 ? void 0 : _k.tooltipContent }, (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.props)))));
84
92
  };
85
93
  const placeholder = isListeningMessage ? 'Listening' : 'Send a message...';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/chatbot",
3
- "version": "2.1.0-prerelease.21",
3
+ "version": "2.1.0-prerelease.23",
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/about-chatbot.md CHANGED
@@ -6,24 +6,33 @@ sortValue: 1
6
6
  source: About
7
7
  ---
8
8
 
9
- **Note:** The PatternFly chatbot extension lives in its own package [`@patternfly/chatbot`](https://www.npmjs.com/package/@patternfly/chatbot)
9
+ **Note:** The PatternFly ChatBot extension lives in its own package [`@patternfly/chatbot`](https://www.npmjs.com/package/@patternfly/chatbot)
10
10
 
11
- It is important to leverage AI in a way that improves the experiences of your users. In alignment with our [AI principles](/patternfly-ai/about-ai#ai-principles) and [ethical design guidelines,](/patternfly-ai/ai-guidelines) we've created this chatbot extension. The PatternFly chatbot contains a React implementation of an AI chatbot, to provide your users with access to convenient and persistent help.
11
+ It is important to leverage AI in a way that improves the experiences of your users. In alignment with our [AI principles](/patternfly-ai/about-ai#ai-principles) and [ethical design guidelines,](/patternfly-ai/ai-guidelines) we've created this ChatBot extension. The PatternFly ChatBot contains a React implementation of an AI ChatBot, to provide your users with access to convenient and persistent help.
12
12
 
13
- _Only use this chatbot when it adds value to your users' experiences._ Don't use it simply for the sake of novelty—your users will only be excited to interact with a new chatbot feature if it directly helps them reach their goals.
13
+ _Only use this ChatBot when it adds value to your users' experiences._ Don't use it simply for the sake of novelty—your users will only be excited to interact with a new ChatBot feature if it directly helps them reach their goals.
14
14
 
15
- ## How to use the chatbot
15
+ ## How to use the ChatBot
16
16
 
17
- To illustrate the capabilities of the chatbot, we offer a [chatbot container demo](/patternfly-ai/chatbot/overview/demo) and a [chatbot attachments demo](/patternfly-ai/chatbot/messages/demo). To learn how to write for chatbot experiences, refer to our [chatbot writing guidelines.](/patternfly-ai/conversation-design/#writing-for-chatbots)
17
+ To illustrate the capabilities of the ChatBot, we offer a few demos:
18
+ - [Basic ChatBot](/patternfly-ai/chatbot/overview/demo#basic-chatbot)
19
+ - [Embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot)
20
+ - [ChatBot attachments via file upload](/patternfly-ai/chatbot/messages/demo#attach-via-upload-button-in-message-bar)
21
+ - [ChatBot attachments via built-in menu](/patternfly-ai/chatbot/messages/demo#attach-via-menu-of-options-in-message-bar)
18
22
 
19
- We currently support the follow features to customize your chatbot experience:
23
+ To learn how to write for ChatBot experiences, refer to our [conversation design guidelines](/patternfly-ai/conversation-design/#writing-for-chatbots).
20
24
 
21
- - [The chatbot container](/patternfly-ai/chatbot/ui#container)
22
- - [A toggle for the chatbot container](/patternfly-ai/chatbot/ui#toggle)
23
- - [The chatbot header](/patternfly-ai/chatbot/ui#header)
24
- - [The chatbot footer](/patternfly-ai/chatbot/ui#footer)
25
- - [Messages, from the chatbot and from users](/patternfly-ai/chatbot/messages)
26
- - [Chatbot attachments](/patternfly-ai/chatbot/messages#attachments)
27
- - [Conversation history](/patternfly-ai/chatbot/ui#navigation)
25
+ To learn how to design ChatBot experiences, [refer to the design guidelines](/patternfly-ai/chatbot/overview/design-guidelines).
28
26
 
29
- We will continue to grow and evolve our chatbot. If you notice a bug or have any suggestions, feel free to file an issue in our [GitHub repository!](https://github.com/patternfly/chatbot/issues) Make sure to check if there is already a pre-existing issue before creating a new one.
27
+ Explore our documentation, which covers both ChatBot UI components and message-related components:
28
+ - UI
29
+ - [Structural elements](/patternfly-ai/chatbot/ui#structure)
30
+ - [Toggle](/patternfly-ai/chatbot/ui#toggle)
31
+ - [Header](/patternfly-ai/chatbot/ui#header)
32
+ - [Footer](/patternfly-ai/chatbot/ui#footer)
33
+ - [Navigation](/patternfly-ai/chatbot/ui#navigation)
34
+ - Messages
35
+ - [Bot and user messages](/patternfly-ai/chatbot/messages)
36
+ - [File attachments](/patternfly-ai/chatbot/messages#attachments)
37
+
38
+ We will continue to grow and evolve our ChatBot. If you notice a bug or have any suggestions, feel free to file an issue in our [GitHub repository!](https://github.com/patternfly/chatbot/issues) Make sure to check if there is already a pre-existing issue before creating a new one.
package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md CHANGED
@@ -49,11 +49,11 @@ The `content` prop of the `<Message>` component is passed to a `<Markdown>` comp
49
49
 
50
50
  ### Bot messages
51
51
 
52
- Messages from the chatbot will be marked with an "AI" label to clearly communicate the use of AI to users. The chatbot can display different `content` types, including plain text, code, or a loading animation (via `isLoading`).
52
+ Messages from the ChatBot will be marked with an "AI" label to clearly communicate the use of AI to users. The ChatBot can display different `content` types, including plain text, code, or a loading animation (via `isLoading`).
53
53
 
54
54
  <br />
55
55
 
56
- By default, a date and timestamp is displayed with each message. We recommend using the `timestamp` prop in real chatbots, since it will allow you to set persistent dates and times on messages, even if the messages re-render. You can update `timestamp` with a different [date and time format](/ux-writing/numerics) as needed.
56
+ By default, a date and timestamp is displayed with each message. We recommend using the `timestamp` prop in real ChatBots, since it will allow you to set persistent dates and times on messages, even if the messages re-render. You can update `timestamp` with a different [date and time format](/ux-writing/numerics) as needed.
57
57
 
58
58
  <br />
59
59
 
@@ -117,7 +117,7 @@ Messages from users have a different background color to differentiate them from
117
117
 
118
118
  ### Messages with attachments
119
119
 
120
- When [attachments](/patternfly-ai/chatbot/messages#file-attachments) are shared and displayed in the chatbot window, users will see a selectable and dismissible message that contains file details in a label. Selecting the file label can open a preview modal, which allows users to view or make edits to the file contents.
120
+ When [attachments](/patternfly-ai/chatbot/messages#file-attachments) are shared and displayed in the ChatBot window, users will see a selectable and dismissible message that contains file details in a label. Selecting the file label can open a preview modal, which allows users to view or make edits to the file contents.
121
121
 
122
122
  The `<PreviewAttachment>` component displays a modal with a read-only view of the attached file's contents. Selecting the "edit" button will open the `<AttachmentEdit>` component, which provides an interactive environment where users can make changes to the file.
123
123
 
@@ -154,7 +154,7 @@ To allow users to preview the contents of an attachment, load a read-only view o
154
154
 
155
155
  ### Editable attachments
156
156
 
157
- To allow users to edit an attached file, load a new code editor within the chatbot window. On this screen, you can allow users to edit a file and save changes if they'd like. Return users to the main chatbot window once they dismiss the editor.
157
+ To allow users to edit an attached file, load a new code editor within the ChatBot window. On this screen, you can allow users to edit a file and save changes if they'd like. Return users to the main ChatBot window once they dismiss the editor.
158
158
 
159
159
  ```js file="./AttachmentEdit.tsx"
160
160
 
package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md CHANGED
@@ -83,9 +83,9 @@ import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
83
83
 
84
84
  ### Container
85
85
 
86
- The PatternFly chatbot is a separate window that overlays or is embedded within other UI content. This container can be shown and hidden via [the chatbot toggle.](/patternfly-ai/chatbot/ui#toggle)
86
+ The PatternFly ChatBot is a separate window that overlays or is embedded within other UI content. This container can be shown and hidden via [the ChatBot toggle.](/patternfly-ai/chatbot/ui#toggle)
87
87
 
88
- The `<Chatbot>` component is the container that encompasses the chatbot experience. It adapts to various display modes (overlay/default, docked, fullscreen, and embedded) and supports both light and dark themes.
88
+ The `<Chatbot>` component is the container that encompasses the ChatBot experience. It adapts to various display modes (overlay/default, docked, fullscreen, and embedded) and supports both light and dark themes.
89
89
 
90
90
  The "embedded" display mode is meant to be used within a [PatternFly page](/components/page) or other container within your product.
91
91
 
@@ -115,11 +115,11 @@ Your code structure should look like this:
115
115
  </Chatbot>
116
116
  ```
117
117
 
118
- **Note**: When messages update, it is important to announce new messages to users of assistive technology. To do this, make sure to set the `announcement` prop on `<MessageBox>` whenever you display a new message in `<MessageBox>`. You can view this in action in our [basic chatbot](/patternfly-ai/chatbot/overview/demo#basic-chatbot) and [embedded chatbot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot) demos.
118
+ **Note**: When messages update, it is important to announce new messages to users of assistive technology. To do this, make sure to set the `announcement` prop on `<MessageBox>` whenever you display a new message in `<MessageBox>`. You can view this in action in our [basic ChatBot](/patternfly-ai/chatbot/overview/demo#basic-chatbot) and [embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot) demos.
119
119
 
120
120
  ### Welcome message
121
121
 
122
- To introduce users to the chatbot experience, display a welcome message before they input their first message. This brief message should follow our [conversation design guidelines](/patternfly-ai/conversation-design) to welcome users to the chatbot experience and encourage them to interact.
122
+ To introduce users to the ChatBot experience, display a welcome message before they input their first message. This brief message should follow our [conversation design guidelines](/patternfly-ai/conversation-design) to welcome users to the ChatBot experience and encourage them to interact.
123
123
 
124
124
  This message can be dismissed once a user sends their first message. To change the arrangement of the message within the message box, specify the `position` in the `<MessageBox>` component.
125
125
 
@@ -137,10 +137,10 @@ To provide users with a more specific direction, you can also include optional w
137
137
 
138
138
  ### Skip to content
139
139
 
140
- To provide page context, we recommend using a "skip to chatbot" button. This allows you to skip past other content on the page, directly to the chatbot content, using a [PatternFly skip to content component](/components/skip-to-content). To display this button, you must tab into the main window.
140
+ To provide page context, we recommend using a "Skip to chatbot" button. This allows you to skip past other content on the page, directly to the ChatBot content, using a [PatternFly skip to content component](/components/skip-to-content). To display this button, you must tab into the main window.
141
141
  <br />
142
142
  <br />
143
- When using default or docked modes, we recommend putting focus on the toggle if the chatbot is closed, and the chatbot when it is open. For fullscreen and embedded, we recommend putting the focus on the first focusable item in the chatbot, such as a menu toggle. This can be seen in our more fully-featured demos for the [default, embedded, and fullscreen chatbot](/patternfly-ai/chatbot/overview/demo#basic-chatbot) and the [embedded chatbot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot).
143
+ When using default or docked modes, we recommend putting focus on the toggle if the ChatBot is closed, and the ChatBot when it is open. For fullscreen and embedded, we recommend putting the focus on the first focusable item in the ChatBot, such as a menu toggle. This can be seen in our more fully-featured demos for the [default, embedded, and fullscreen ChatBot](/patternfly-ai/chatbot/overview/demo#basic-chatbot) and the [embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot).
144
144
 
145
145
  ```js file="./SkipToContent.tsx" isFullscreen
146
146
 
@@ -150,7 +150,7 @@ When using default or docked modes, we recommend putting focus on the toggle if
150
150
 
151
151
  ### Basic toggle
152
152
 
153
- To allow users to open and close the chatbot window as needed, add a toggle.
153
+ To allow users to open and close the ChatBot window as needed, add a toggle.
154
154
 
155
155
  ```js file="./ChatbotToggleBasic.tsx" isFullscreen
156
156
 
@@ -176,7 +176,7 @@ A custom shape can be set for the toggle. To override the default circle shape,
176
176
 
177
177
  ### Header sections
178
178
 
179
- The chatbot header is persistent, and contains the title for the chatbot window, as well as any related controls and actions.
179
+ The ChatBot header is persistent, and contains the title for the ChatBot window, as well as any related controls and actions.
180
180
 
181
181
  The `<ChatbotHeader>` has 2 sections:
182
182
 
@@ -184,8 +184,8 @@ The `<ChatbotHeader>` has 2 sections:
184
184
  - `<ChatbotHeaderTitle>` handles the layout and display of a title or image at different responsive sizes.
185
185
  - `<ChatbotHeaderMenu>` (optional) is placed on the left side of the header and used to toggle a chat history menu.
186
186
  - `<ChatbotHeaderActions>` contains any additional controls:
187
- - The `<ChatbotHeaderSelectorDropdown>` component is a standard PatternFly dropdown that matches the chatbot styles.
188
- - The `<ChatbotHeaderOptionsDropdown>` component is a dropdown with a menu toggle that is intended to be used to update chatbot settings (like the display mode).
187
+ - The `<ChatbotHeaderSelectorDropdown>` component is a standard PatternFly dropdown that matches the ChatBot styles.
188
+ - The `<ChatbotHeaderOptionsDropdown>` component is a dropdown with a menu toggle that is intended to be used to update ChatBot settings (like the display mode).
189
189
 
190
190
  Your `<ChatbotHeader>` code structure should look like this:
191
191
 
@@ -220,7 +220,7 @@ In this example, select the respective checkbox to toggle these features:
220
220
  - **Left-aligned logo**
221
221
  - **Centered logo**
222
222
  - **Selector dropdown:** Users can choose from preselected options in a dropdown menu. For example, they can toggle between AI models.
223
- - **Options dropdown:** Users can select chatbot options from a menu. For example, they can switch between chatbot display modes.
223
+ - **Options dropdown:** Users can select ChatBot options from a menu. For example, they can switch between ChatBot display modes.
224
224
 
225
225
  ```js file="./ChatbotHeaderBasic.tsx"
226
226
 
@@ -230,7 +230,7 @@ In this example, select the respective checkbox to toggle these features:
230
230
 
231
231
  ### Footnote with popover
232
232
 
233
- A footnote can be placed in the chatbot footer to communicate any legal disclaimers or information about the chatbot.
233
+ A footnote can be placed in the ChatBot footer to communicate any legal disclaimers or information about the ChatBot.
234
234
  Footnotes can be static text or a button that opens a popover.
235
235
 
236
236
  ```js file="./ChatbotFootnote.tsx"
@@ -251,7 +251,7 @@ By default the message bar supports file uploads via an attach button. Setting `
251
251
 
252
252
  You can change the behavior of the attach button to open a menu, rather than the default file viewer for your operating system. This menu can display different actions related to attachments.
253
253
 
254
- Attachments can also be added to the chatbot via [drag and drop.](/patternfly-ai/chatbot/messages#attachment-dropzone)
254
+ Attachments can also be added to the ChatBot via [drag and drop.](/patternfly-ai/chatbot/messages#attachment-dropzone)
255
255
 
256
256
  ```js file="./ChatbotMessageBarAttach.tsx"
257
257
 
@@ -274,7 +274,7 @@ A simple footer with a message bar and footnote would have this code structure:
274
274
 
275
275
  ### Message bar with stop button
276
276
 
277
- If you are using streaming, you can add a stop button to the message bar that allows users to stop a response from a chatbot.
277
+ If you are using streaming, you can add a stop button to the message bar that allows users to stop a response from a ChatBot.
278
278
 
279
279
  To enable the stop button, set `hasStopButton` to `true` and pass in a `handleStopButton` callback function. You can use this callback to trigger an [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) configured as part of your API call.
280
280
 
@@ -286,9 +286,9 @@ To enable the stop button, set `hasStopButton` to `true` and pass in a `handleSt
286
286
 
287
287
  ### Side nav in a drawer
288
288
 
289
- The chatbot conversation history is contained in an interactive drawer, where users can interact with previous conversations or start a new conversation.
289
+ The ChatBot conversation history is contained in an interactive drawer, where users can interact with previous conversations or start a new conversation.
290
290
 
291
- The `<ChatbotConversationHistoryNav>` component is a wrapper placed within `<Chatbot>`, which contains all other chatbot components in `drawerContent`. There is a focus trap so users can only tab within the drawer while it is open.
291
+ The `<ChatbotConversationHistoryNav>` component is a wrapper placed within `<Chatbot>`, which contains all other ChatBot components in `drawerContent`. There is a focus trap so users can only tab within the drawer while it is open.
292
292
 
293
293
  The code structure will look like this:
294
294
 
@@ -310,14 +310,14 @@ The code structure will look like this:
310
310
  </Chatbot>
311
311
  ```
312
312
 
313
- The conversation history drawer looks different depending on the `displayMode` of the parent `<Chatbot>`. (As shown in the [main chatbot demo](/patternfly-ai/chatbot/overview/demo#basic-chatbot).):
313
+ The conversation history drawer looks different depending on the `displayMode` of the parent `<Chatbot>`. (As shown in the [main ChatBot demo](/patternfly-ai/chatbot/overview/demo#basic-chatbot).):
314
314
 
315
- - `Default` and `docked` display modes display the conversation history on top of the rest of the chatbot content, with a PatternFly backdrop between the drawer panel and drawer content.
315
+ - `Default` and `docked` display modes display the conversation history on top of the rest of the ChatBot content, with a PatternFly backdrop between the drawer panel and drawer content.
316
316
  - `Fullscreen` and `embedded` display modes display the conversation history in line with the drawer content.
317
317
 
318
318
  ### Drawer with search and "new chat" button
319
319
 
320
- In the conversation history drawer, users can search previous chatbot conversations via an input field. To customize the placeholder text, use `searchInputPlaceholder`. Provide an aria label via `searchInputAriaLabel`.
320
+ In the conversation history drawer, users can search previous ChatBot conversations via an input field. To customize the placeholder text, use `searchInputPlaceholder`. Provide an aria label via `searchInputAriaLabel`.
321
321
 
322
322
  They can also start new conversations via a "New chat" button. To customize the button label, use `newChatButtonText`.
323
323
 
@@ -337,7 +337,7 @@ Actions can be added to conversations with `menuItems`. Optionally, you can also
337
337
 
338
338
  ### Modal
339
339
 
340
- Based on the [PatternFly modal](/components/modal), this modal adapts to the chatbot display mode and accepts components typically used in a modal. It is primarily used and tested in the context of the attachment modals, but you can customize this modal to adapt it to other use cases as needed. The modal will overlay the chatbot in default and docked modes, and will behave more like a traditional PatternFly modal in fullscreen and embedded modes.
340
+ Based on the [PatternFly modal](/components/modal), this modal adapts to the ChatBot display mode and accepts components typically used in a modal. It is primarily used and tested in the context of the attachment modals, but you can customize this modal to adapt it to other use cases as needed. The modal will overlay the ChatBot in default and docked modes, and will behave more like a traditional PatternFly modal in fullscreen and embedded modes.
341
341
 
342
342
  ```js file="./ChatbotModal.tsx" isFullscreen
343
343
 
package/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md CHANGED
@@ -54,12 +54,12 @@ This demo displays unique attachment features, including:
54
54
  1. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) components that contain:
55
55
  - An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) with an attachment.
56
56
  - The ability to preview or edit the attachment using the [`<PreviewAttachment>` and `<AttachmentEdit>` components.](/patternfly-ai/chatbot/messages##file-attachments)
57
- - A [PatternFly `<Alert>`](/components/alert), customized to be sticky within the chatbot window, which provides success or error messages for attachments.
57
+ - A [PatternFly `<Alert>`](/components/alert), customized to be sticky within the ChatBot window, which provides success or error messages for attachments.
58
58
  2. `<ChatbotContent>` and `<ChatbotFooter>`, wrapped in a `<FileDropZone>` component to support drag and drop attachments. The footer also:
59
59
  - Displays attached files, using a [`<FileDetailsLabel>`](/patternfly-ai/chatbot/messages#attachment-label) component.
60
60
  - Demonstrates custom handling of file uploads, using the `handleAttach` in `<MessageBar>` and `handleFileDrop` in `<FileDropZone>`.
61
61
 
62
- This demo includes broader chatbot features, including:
62
+ This demo includes broader ChatBot features, including:
63
63
 
64
64
  1. A [`<ChatbotToggle>`](/patternfly-ai/chatbot/ui#toggle) that controls the [`<Chatbot>`](/patternfly-ai/chatbot/ui#container) container.
65
65
  2. A [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) that updates based on the display mode, with sub-components (including a `<ChatbotHeaderTitle>`).
@@ -86,7 +86,7 @@ This demo displays unique attachment features, including:
86
86
  - Demonstrates custom handling of file uploads, using the `handleAttach` in `<MessageBar>` and `handleFileDrop` in `<FileDropZone>`.
87
87
  - Demonstrates how to define the `attachMenuProps` in the `<MessageBar>` to create a menu that allows users to select the source of an item they're attaching.
88
88
 
89
- This demo includes broader chatbot features, including:
89
+ This demo includes broader ChatBot features, including:
90
90
 
91
91
  1. A [`<ChatbotToggle>`](/patternfly-ai/chatbot/ui#toggle) that controls the [`<Chatbot>`](/patternfly-ai/chatbot/ui#container) container.
92
92
  2. A `<ChatbotContent>` and [`<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md CHANGED
@@ -56,9 +56,9 @@ import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
56
56
  import userAvatar from '../Messages/user_avatar.svg';
57
57
  import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
58
58
 
59
- ### Basic chatbot
59
+ ### Basic ChatBot
60
60
 
61
- This demo displays a basic chatbot, which includes:
61
+ This demo displays a basic ChatBot, which includes:
62
62
 
63
63
  1. The [`<ChatbotToggle>`](/patternfly-ai/chatbot/ui#toggle) that controls the [`<Chatbot>` container.](/patternfly-ai/chatbot/ui#container)
64
64
  2. A [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) with all built sub-components laid out, including a `<ChatbotHeaderTitle>` that changes its presentation depending on the display mode.
@@ -72,22 +72,22 @@ This demo displays a basic chatbot, which includes:
72
72
  5. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>` that contains the abilities of:
73
73
 
74
74
  - [Speech to text.](/patternfly-ai/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)
75
- - Sending a message to the chatbot.
75
+ - Sending a message to the ChatBot.
76
76
  - Receiving a response from a backend AI tool with a loading message state.
77
77
 
78
78
  6. A [`<ChatbotConversationHistoryNav>`](/patternfly-ai/chatbot/ui#navigation) toggled open and closed by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
79
79
 
80
- 7. A "skip to chatbot" button that allows you to skip to the chatbot content via the [PatternFly skip to content component](/patternfly-ai/chatbot/ui#skip-to-content). To display this button you must tab into the main window.
80
+ 7. A "Skip to chatbot" button that allows you to skip to the chatbot content via the [PatternFly skip to content component](/patternfly-ai/chatbot/ui#skip-to-content). To display this button you must tab into the main window.
81
81
 
82
82
  ```js file="./Chatbot.tsx" isFullscreen
83
83
 
84
84
  ```
85
85
 
86
- ### Embedded chatbot
86
+ ### Embedded ChatBot
87
87
 
88
- This demo displays an embedded chatbot. Embedded chatbots are meant to be placed within a page in your product. This demo includes:
88
+ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed within a page in your product. This demo includes:
89
89
 
90
- 1. A [PatternFly page](/components/page) with a sidebar, "skip to chatbot" button, and masthead. To display the "skip to chatbot" button you must tab into the main window.
90
+ 1. A [PatternFly page](/components/page) with a sidebar, "Skip to chatbot" button, and masthead. To display the "Skip to chatbot" button you must tab into the main window.
91
91
  2. A [`<Chatbot>`](/patternfly-ai/chatbot/ui#container) container.
92
92
  3. A [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) with all built sub-components laid out, including a `<ChatbotHeaderTitle>`
93
93
  4. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
@@ -96,7 +96,7 @@ This demo displays an embedded chatbot. Embedded chatbots are meant to be placed
96
96
  - Logic for enabling auto-scrolling to the most recent message whenever a new message is sent or received using a `scrollToBottomRef`
97
97
  5. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>` that contains the abilities of:
98
98
  - [Speech to text.](/patternfly-ai/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)
99
- - Sending a message to the chatbot.
99
+ - Sending a message to the ChatBot.
100
100
  - Receiving a response from a backend AI tool with a loading message state.
101
101
  6. A [`<ChatbotConversationHistoryNav>`](/patternfly-ai/chatbot/ui#navigation) that can be toggled by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
102
102
 
package/src/Chatbot/Chatbot.scss CHANGED
@@ -21,6 +21,18 @@
21
21
  &--hidden {
22
22
  pointer-events: none;
23
23
  }
24
+
25
+ // 32 rem is the width of the overlay chatbot plus the insets
26
+ // if the screen is smaller, we want to be 100%
27
+ @media screen and (max-width: 32rem) {
28
+ width: 100vw;
29
+ inset-inline-end: 0;
30
+ }
31
+
32
+ // allows for zoom conditions; try zooming to 200% to see
33
+ @media screen and (max-height: 518px) {
34
+ overflow: auto;
35
+ }
24
36
  }
25
37
 
26
38
  // ============================================================================
@@ -34,10 +46,22 @@
34
46
  border-radius: 0;
35
47
  box-shadow: var(--pf-t--global--box-shadow--lg--left);
36
48
  overflow: inherit;
49
+
50
+ // 30rem is the width of the docked chatbot
51
+ // if the screen is smaller, we want to be 100%
52
+ @media screen and (max-width: 30rem) {
53
+ width: 100%;
54
+ }
37
55
  }
38
56
 
39
57
  html.pf-chatbot-allow--docked {
40
- padding-right: 480px;
58
+ padding-inline-start: 480px;
59
+
60
+ // 30rem is the width of the docked chatbot
61
+ // if the screen is smaller, we want to be 100%
62
+ @media screen and (max-width: 30rem) {
63
+ padding-inline-start: 0px;
64
+ }
41
65
  }
42
66
 
43
67
  // ============================================================================
@@ -76,6 +100,11 @@ html.pf-chatbot-allow--docked {
76
100
  &--hidden {
77
101
  pointer-events: none;
78
102
  }
103
+
104
+ // allows for zoom conditions; try zooming to 200% to see
105
+ @media screen and (max-height: 518px) {
106
+ overflow: auto;
107
+ }
79
108
  }
80
109
 
81
110
  .pf-chatbot-container--embedded {
package/src/ChatbotContent/ChatbotContent.scss CHANGED
@@ -7,6 +7,11 @@
7
7
  overflow-y: auto;
8
8
  overflow: hidden; // needed in Red Hat Developer Hub workspace
9
9
  flex: 1; // needed in Composer AI
10
+
11
+ // allows for zoom conditions; try zooming to 200% to see
12
+ @media screen and (max-height: 518px) {
13
+ overflow: unset;
14
+ }
10
15
  }
11
16
 
12
17
  // ============================================================================
package/src/FileDropZone/FileDropZone.scss CHANGED
@@ -7,6 +7,11 @@
7
7
  overflow: hidden;
8
8
  display: grid;
9
9
  grid-template-rows: 1fr auto;
10
+
11
+ // allows for zoom conditions; try zooming to 200% to see
12
+ @media screen and (max-height: 518px) {
13
+ overflow-y: auto;
14
+ }
10
15
  }
11
16
 
12
17
  .pf-chatbot__dropzone--visible.pf-chatbot__dropzone {
@@ -34,3 +39,18 @@
34
39
  width: 100%;
35
40
  padding: var(--pf-t--global--spacer--md);
36
41
  }
42
+
43
+ .pf-chatbot--default {
44
+ // allows for zoom conditions; try zooming to 200% to see
45
+ .pf-chatbot__dropzone--visible.pf-chatbot__dropzone {
46
+ @media screen and (max-height: 518px) {
47
+ display: flex;
48
+ height: 100%;
49
+ overflow: hidden;
50
+
51
+ .pf-v6-c-multiple-file-upload__main {
52
+ width: 100%;
53
+ }
54
+ }
55
+ }
56
+ }
package/src/MessageBar/MessageBar.tsx CHANGED
@@ -139,6 +139,15 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
139
139
  attachMenuProps?.onAttachMenuToggleClick();
140
140
  };
141
141
 
142
+ const handleSpeechRecognition = (message) => {
143
+ setMessage(message);
144
+ const textarea = textareaRef.current;
145
+ if (textarea) {
146
+ textarea.focus();
147
+ textarea.textContent = DOMPurify.sanitize(message);
148
+ }
149
+ };
150
+
142
151
  const renderButtons = () => {
143
152
  if (hasStopButton && handleStopButton) {
144
153
  return (
@@ -173,7 +182,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
173
182
  <MicrophoneButton
174
183
  isListening={isListeningMessage}
175
184
  onIsListeningChange={setIsListeningMessage}
176
- onSpeechRecognition={setMessage}
185
+ onSpeechRecognition={handleSpeechRecognition}
177
186
  tooltipContent={buttonProps?.microphone?.tooltipContent}
178
187
  {...buttonProps?.microphone?.props}
179
188
  />
@@ -216,7 +225,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
216
225
  ref={textareaRef}
217
226
  onKeyDown={handleKeyDown}
218
227
  {...props}
219
- ></div>
228
+ />
220
229
  </div>
221
230
  <div className="pf-chatbot__message-bar-actions">{renderButtons()}</div>
222
231
  </>
package/src/MessageBox/JumpButton.scss CHANGED
@@ -43,4 +43,9 @@
43
43
  &--bottom {
44
44
  inset-block-end: var(--pf-t--global--spacer--md) !important;
45
45
  }
46
+
47
+ // allows for zoom conditions; try zooming to 200% to see
48
+ @media screen and (max-height: 518px) {
49
+ display: none;
50
+ }
46
51
  }
package/src/MessageBox/MessageBox.scss CHANGED
@@ -7,6 +7,16 @@
7
7
  flex-direction: column;
8
8
  row-gap: var(--pf-t--global--spacer--sm);
9
9
  padding: var(--pf-t--global--spacer--lg);
10
+
11
+ // 32 rem is the width of the overlay chatbot plus the insets
12
+ // if the screen is smaller, we want to be 100%
13
+ @media screen and (max-width: 32rem) {
14
+ width: 100%;
15
+ }
16
+ // allows for zoom conditions; try zooming to 200% to see
17
+ @media screen and (max-height: 518px) {
18
+ overflow-y: visible;
19
+ }
10
20
  }
11
21
 
12
22
  .pf-chatbot__messagebox--bottom > :first-child {