@patternfly/chatbot 2.1.0-prerelease.22 → 2.1.0-prerelease.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/MessageBar/MessageBar.d.ts +1 -0
- package/dist/cjs/MessageBar/MessageBar.js +3 -3
- package/dist/cjs/MessageBar/MicrophoneButton.d.ts +2 -0
- package/dist/cjs/MessageBar/MicrophoneButton.js +4 -2
- package/dist/css/main.css +68 -1
- package/dist/css/main.css.map +1 -1
- package/dist/esm/MessageBar/MessageBar.d.ts +1 -0
- package/dist/esm/MessageBar/MessageBar.js +3 -3
- package/dist/esm/MessageBar/MicrophoneButton.d.ts +2 -0
- package/dist/esm/MessageBar/MicrophoneButton.js +4 -2
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/design-guidelines.md +216 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarLanguage.tsx +17 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +10 -0
- package/patternfly-docs/content/extensions/chatbot/images.css +6 -0
- package/patternfly-docs/content/extensions/chatbot/img/attached-file.svg +46 -0
- package/patternfly-docs/content/extensions/chatbot/img/attachment-error.svg +12 -0
- package/patternfly-docs/content/extensions/chatbot/img/attachment-menu.svg +150 -0
- package/patternfly-docs/content/extensions/chatbot/img/attachment-unsent.svg +88 -0
- package/patternfly-docs/content/extensions/chatbot/img/chatbot-elements.svg +136 -0
- package/patternfly-docs/content/extensions/chatbot/img/chatbot-toggle-notification.svg +8 -0
- package/patternfly-docs/content/extensions/chatbot/img/chatbot-toggle.svg +10 -0
- package/patternfly-docs/content/extensions/chatbot/img/conversation-history.svg +154 -0
- package/patternfly-docs/content/extensions/chatbot/img/display-menu.svg +82 -0
- package/patternfly-docs/content/extensions/chatbot/img/docked.svg +350 -0
- package/patternfly-docs/content/extensions/chatbot/img/embedded.svg +156 -0
- package/patternfly-docs/content/extensions/chatbot/img/footnote.svg +75 -0
- package/patternfly-docs/content/extensions/chatbot/img/fullscreen.svg +109 -0
- package/patternfly-docs/content/extensions/chatbot/img/listening.svg +65 -0
- package/patternfly-docs/content/extensions/chatbot/img/message-bar-elements.svg +23 -0
- package/patternfly-docs/content/extensions/chatbot/img/message-elements.svg +162 -0
- package/patternfly-docs/content/extensions/chatbot/img/overlay.svg +276 -0
- package/patternfly-docs/content/extensions/chatbot/img/stop-button.svg +64 -0
- package/src/Chatbot/Chatbot.scss +30 -1
- package/src/ChatbotContent/ChatbotContent.scss +5 -0
- package/src/FileDropZone/FileDropZone.scss +20 -0
- package/src/MessageBar/MessageBar.tsx +2 -0
- package/src/MessageBar/MicrophoneButton.tsx +6 -1
- package/src/MessageBox/JumpButton.scss +5 -0
- package/src/MessageBox/MessageBox.scss +10 -0
|
@@ -86,15 +86,15 @@ const MessageBar = (_a) => {
|
|
|
86
86
|
}
|
|
87
87
|
};
|
|
88
88
|
const renderButtons = () => {
|
|
89
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
89
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
90
90
|
if (hasStopButton && handleStopButton) {
|
|
91
91
|
return (react_1.default.createElement(StopButton_1.default, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent }, (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.props)));
|
|
92
92
|
}
|
|
93
93
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
94
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))),
|
|
95
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))),
|
|
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
|
|
97
|
-
(alwayShowSendButton || message) && (react_1.default.createElement(SendButton_1.default, Object.assign({ value: message, onClick: handleSend, isDisabled: isSendButtonDisabled, tooltipContent: (
|
|
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, language: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.language }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.props))),
|
|
97
|
+
(alwayShowSendButton || message) && (react_1.default.createElement(SendButton_1.default, Object.assign({ value: message, onClick: handleSend, isDisabled: isSendButtonDisabled, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.tooltipContent }, (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _m === void 0 ? void 0 : _m.props)))));
|
|
98
98
|
};
|
|
99
99
|
const placeholder = isListeningMessage ? 'Listening' : 'Send a message...';
|
|
100
100
|
const messageBarContents = (react_1.default.createElement(react_1.default.Fragment, null,
|
|
@@ -16,6 +16,8 @@ export interface MicrophoneButtonProps extends ButtonProps {
|
|
|
16
16
|
active?: string;
|
|
17
17
|
inactive?: string;
|
|
18
18
|
};
|
|
19
|
+
/** Locale code for language speech recognition is conducted in. This should be in the format 'en-US', a.k.a. the ISO 639-1 code, a dash, and the ISO_3166-1 code. */
|
|
20
|
+
language?: string;
|
|
19
21
|
}
|
|
20
22
|
export declare const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps>;
|
|
21
23
|
export default MicrophoneButton;
|
|
@@ -24,7 +24,7 @@ const react_core_1 = require("@patternfly/react-core");
|
|
|
24
24
|
// Import FontAwesome icons
|
|
25
25
|
const microphone_icon_1 = require("@patternfly/react-icons/dist/esm/icons/microphone-icon");
|
|
26
26
|
const MicrophoneButton = (_a) => {
|
|
27
|
-
var { isListening, onIsListeningChange, onSpeechRecognition, className, tooltipProps, tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' } } = _a, props = __rest(_a, ["isListening", "onIsListeningChange", "onSpeechRecognition", "className", "tooltipProps", "tooltipContent"]);
|
|
27
|
+
var { isListening, onIsListeningChange, onSpeechRecognition, className, tooltipProps, tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' }, language = 'en-US' } = _a, props = __rest(_a, ["isListening", "onIsListeningChange", "onSpeechRecognition", "className", "tooltipProps", "tooltipContent", "language"]);
|
|
28
28
|
// Microphone
|
|
29
29
|
// --------------------------------------------------------------------------
|
|
30
30
|
const [speechRecognition, setSpeechRecognition] = react_1.default.useState();
|
|
@@ -49,11 +49,13 @@ const MicrophoneButton = (_a) => {
|
|
|
49
49
|
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
|
|
50
50
|
recognition.continuous = false;
|
|
51
51
|
recognition.interimResults = false;
|
|
52
|
-
recognition.lang =
|
|
52
|
+
recognition.lang = language;
|
|
53
53
|
recognition.onresult = (event) => {
|
|
54
54
|
const result = event.results[0][0].transcript;
|
|
55
55
|
onSpeechRecognition(result);
|
|
56
56
|
recognition.stop();
|
|
57
|
+
// turn button off
|
|
58
|
+
onIsListeningChange(false);
|
|
57
59
|
};
|
|
58
60
|
recognition.onerror = (event) => {
|
|
59
61
|
// eslint-disable-next-line no-console
|
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-
|
|
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
|
|
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"}
|
|
@@ -80,15 +80,15 @@ export const MessageBar = (_a) => {
|
|
|
80
80
|
}
|
|
81
81
|
};
|
|
82
82
|
const renderButtons = () => {
|
|
83
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
83
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
84
84
|
if (hasStopButton && handleStopButton) {
|
|
85
85
|
return (React.createElement(StopButton, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent }, (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.props)));
|
|
86
86
|
}
|
|
87
87
|
return (React.createElement(React.Fragment, null,
|
|
88
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))),
|
|
89
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))),
|
|
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
|
|
91
|
-
(alwayShowSendButton || message) && (React.createElement(SendButton, Object.assign({ value: message, onClick: handleSend, isDisabled: isSendButtonDisabled, tooltipContent: (
|
|
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, language: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.language }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.props))),
|
|
91
|
+
(alwayShowSendButton || message) && (React.createElement(SendButton, Object.assign({ value: message, onClick: handleSend, isDisabled: isSendButtonDisabled, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.tooltipContent }, (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _m === void 0 ? void 0 : _m.props)))));
|
|
92
92
|
};
|
|
93
93
|
const placeholder = isListeningMessage ? 'Listening' : 'Send a message...';
|
|
94
94
|
const messageBarContents = (React.createElement(React.Fragment, null,
|
|
@@ -16,6 +16,8 @@ export interface MicrophoneButtonProps extends ButtonProps {
|
|
|
16
16
|
active?: string;
|
|
17
17
|
inactive?: string;
|
|
18
18
|
};
|
|
19
|
+
/** Locale code for language speech recognition is conducted in. This should be in the format 'en-US', a.k.a. the ISO 639-1 code, a dash, and the ISO_3166-1 code. */
|
|
20
|
+
language?: string;
|
|
19
21
|
}
|
|
20
22
|
export declare const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps>;
|
|
21
23
|
export default MicrophoneButton;
|
|
@@ -18,7 +18,7 @@ import { Button, Tooltip, Icon } from '@patternfly/react-core';
|
|
|
18
18
|
// Import FontAwesome icons
|
|
19
19
|
import { MicrophoneIcon } from '@patternfly/react-icons/dist/esm/icons/microphone-icon';
|
|
20
20
|
export const MicrophoneButton = (_a) => {
|
|
21
|
-
var { isListening, onIsListeningChange, onSpeechRecognition, className, tooltipProps, tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' } } = _a, props = __rest(_a, ["isListening", "onIsListeningChange", "onSpeechRecognition", "className", "tooltipProps", "tooltipContent"]);
|
|
21
|
+
var { isListening, onIsListeningChange, onSpeechRecognition, className, tooltipProps, tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' }, language = 'en-US' } = _a, props = __rest(_a, ["isListening", "onIsListeningChange", "onSpeechRecognition", "className", "tooltipProps", "tooltipContent", "language"]);
|
|
22
22
|
// Microphone
|
|
23
23
|
// --------------------------------------------------------------------------
|
|
24
24
|
const [speechRecognition, setSpeechRecognition] = React.useState();
|
|
@@ -43,11 +43,13 @@ export const MicrophoneButton = (_a) => {
|
|
|
43
43
|
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
|
|
44
44
|
recognition.continuous = false;
|
|
45
45
|
recognition.interimResults = false;
|
|
46
|
-
recognition.lang =
|
|
46
|
+
recognition.lang = language;
|
|
47
47
|
recognition.onresult = (event) => {
|
|
48
48
|
const result = event.results[0][0].transcript;
|
|
49
49
|
onSpeechRecognition(result);
|
|
50
50
|
recognition.stop();
|
|
51
|
+
// turn button off
|
|
52
|
+
onIsListeningChange(false);
|
|
51
53
|
};
|
|
52
54
|
recognition.onerror = (event) => {
|
|
53
55
|
// eslint-disable-next-line no-console
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/chatbot",
|
|
3
|
-
"version": "2.1.0-prerelease.
|
|
3
|
+
"version": "2.1.0-prerelease.24",
|
|
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",
|
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
---
|
|
2
|
+
section: PatternFly-AI
|
|
3
|
+
subsection: ChatBot
|
|
4
|
+
id: Overview
|
|
5
|
+
sortValue: 1
|
|
6
|
+
source: design-guidelines
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
import "./images.css"
|
|
10
|
+
|
|
11
|
+
## Elements
|
|
12
|
+
|
|
13
|
+
<div class="ws-docs-content-img">
|
|
14
|
+
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
1. **Container:** The window that contains the entire ChatBot experience and all of its components.
|
|
18
|
+
1. **Header:** A persistent region at the top of the ChatBot window that contains navigation, branding, and actions.
|
|
19
|
+
1. **Navigation:** A menu that contains navigational options, including access to the conversation history.
|
|
20
|
+
1. **Options menu:** Contains display options and other settings. More details can be found in the [ChatBot variations section](#variations).
|
|
21
|
+
1. **Messages:** Elements of the conversation between a ChatBot and user. More details can be found in the [message guidelines](#messages).
|
|
22
|
+
1. **Attachments:** Details about files that a user has uploaded to the ChatBot.
|
|
23
|
+
1. **Footer:** A persistent region at the bottom of the ChatBot window that contains the message bar and the footnote.
|
|
24
|
+
1. **Footnote (optional):** A persistent, short message that contains any legal disclaimers or important information about the ChatBot. Footnotes are optional, but strongly recommended. More details can be found in the [footnote guidelines](#footnotes).
|
|
25
|
+
1. **Toggle:** The button that allows users to open and close the ChatBot window. When the ChatBot is opened, the toggle should appear below the ChatBot window. The toggle shape and icon can be customized as needed, as shown in these [ChatBot toggle examples](/patternfly-ai/chatbot/ui#custom-toggle-icon). More details can be found in the [guidelines for accessing a ChatBot](#accessing-a-chatbot).
|
|
26
|
+
|
|
27
|
+
### Messages
|
|
28
|
+
|
|
29
|
+
<div class="ws-docs-content-img">
|
|
30
|
+
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
1. **User message:** Messages that the user has sent to the ChatBot.
|
|
34
|
+
1. **Bot message:** Messages from the ChatBot, which are marked with an "AI" label to communicate the use of AI to users. You should choose a descriptive name for your ChatBot.
|
|
35
|
+
1. **Avatar:** Representative image for your ChatBot and the user. ChatBot avatars should align with your product's brand and any existing brand standards.
|
|
36
|
+
1. **Name:** Identifier for your ChatBot and the user. Choose a name for your ChatBot that users can easily identify as a bot.
|
|
37
|
+
1. **Timestamp:** The relative or absolute time that a message was sent.
|
|
38
|
+
1. **Label:** Labels ChatBot messages as "AI."
|
|
39
|
+
1. **Quick responses:** Programmable, clickable actions that allow users to quickly answer questions from the ChatBot.
|
|
40
|
+
1. **Sources:** Cards that link to documentation or other external resources. When multiple sources are included, users can paginate through the different options.
|
|
41
|
+
1. **Response actions:** Actions that allow users to interact with a bot message. these typically include providing feedback, copying, sharing, or reading aloud, but [custom message actions](/patternfly-ai/chatbot/messages#custom-message-actions) are also supported.
|
|
42
|
+
|
|
43
|
+
### Message bar
|
|
44
|
+
|
|
45
|
+
To message the ChatBot, users can type directly into the message bar in the footer or click any included actions.
|
|
46
|
+
|
|
47
|
+
<div class="ws-docs-content-img">
|
|
48
|
+
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
1. **Attach button:** Allows users to upload files from their computer.
|
|
52
|
+
1. **Use microphone button:** Supports speech recognition to allow users to use voice input. This feature is currently only available in Chrome and Safari.
|
|
53
|
+
1. **Send button:** Allows users to send a typed message. This button should be disabled until a user has input text.
|
|
54
|
+
|
|
55
|
+
When a user chooses to use speech input via the microphone button, the button will display an animation to indicate that the ChatBot is listening to the user (as shown in [this speech recognition example](/patternfly-ai/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)).
|
|
56
|
+
|
|
57
|
+
<div class="ws-docs-content-img">
|
|
58
|
+
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
When a bot is responding (or "streaming") to the user, a stop button will be displayed as the only action in the message bar. Selecting this button will halt the bot's message where it's at.
|
|
62
|
+
|
|
63
|
+
<div class="ws-docs-content-img">
|
|
64
|
+
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
### Footnotes
|
|
68
|
+
|
|
69
|
+
The footnote provides a persistent space to display messaging about your product's Terms and Conditions, which focus on the rules of using the service, and Privacy Policy, which focuses on the handling of personal data.
|
|
70
|
+
|
|
71
|
+
Though footnotes are not required, they are highly recommended to ensure legal compliance, establish user trust, and clearly define the usage guidelines and data handling practices.
|
|
72
|
+
|
|
73
|
+
When users select the footnote, you can display a popover that provides more information than would fit in the footnote:
|
|
74
|
+
|
|
75
|
+
<div class="ws-docs-content-img">
|
|
76
|
+
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
## Usage
|
|
80
|
+
|
|
81
|
+
When ChatBots are designed to meet the needs of your users, they can improve the overall UX of your product by offering convenient, efficient, and persistent support. When your ChatBot cannot find an answer for your users, you must provide them with a method to contact human support.
|
|
82
|
+
|
|
83
|
+
Before building a ChatBot, make sure that you have justified it as an appropriate solution by asking yourself these questions:
|
|
84
|
+
|
|
85
|
+
- What are the users’ goals?
|
|
86
|
+
- How in-depth is the assistance the user will need?
|
|
87
|
+
- Does human assistance better serve your users?
|
|
88
|
+
- How is a ChatBot superior to online documentation, contextual support or wizards?
|
|
89
|
+
- What data sources or abilities can this ChatBot leverage to assist your users?
|
|
90
|
+
|
|
91
|
+
Do not create a ChatBot simply for the sake of novelty.
|
|
92
|
+
|
|
93
|
+
### When to use a ChatBot
|
|
94
|
+
|
|
95
|
+
Use a ChatBot to offer your users on-demand help at any time, including:
|
|
96
|
+
|
|
97
|
+
- Technical support and troubleshooting.
|
|
98
|
+
- Product information and documentation.
|
|
99
|
+
- Sales and product recommendations.
|
|
100
|
+
- Training and onboarding.
|
|
101
|
+
- System monitoring and alerts.
|
|
102
|
+
- Community engagement.
|
|
103
|
+
- Feedback collection and surveys.
|
|
104
|
+
|
|
105
|
+
### When not to use a ChatBot
|
|
106
|
+
|
|
107
|
+
Do not use a ChatBot when:
|
|
108
|
+
|
|
109
|
+
- A task could be accomplished more efficiently through the UI.
|
|
110
|
+
- A process is very complex or could take a long time.
|
|
111
|
+
- A real human is needed for sensitive or emotional topics.
|
|
112
|
+
|
|
113
|
+
## Behavior
|
|
114
|
+
|
|
115
|
+
### Accessing a ChatBot
|
|
116
|
+
|
|
117
|
+
Users can enter a conversation with a ChatBot by clicking on the toggle. Once the ChatBot window opens, the toggle will change to display an "angle down" icon to indicate that clicking the toggle again will minimize the ChatBot. Users can select the toggle at any point in their journey to open and close the ChatBot as needed.
|
|
118
|
+
|
|
119
|
+
<div class="ws-docs-content-img">
|
|
120
|
+
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
When there is an unread message from the ChatBot, a notification badge should be placed on the toggle.
|
|
124
|
+
|
|
125
|
+
<div class="ws-docs-content-img">
|
|
126
|
+
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
### Using the navigation menu
|
|
130
|
+
|
|
131
|
+
The ChatBot navigation menu primarily contains a users' conversation history with the ChatBot. Clicking the menu icon opens a side drawer in the ChatBot window.
|
|
132
|
+
|
|
133
|
+
By clicking into the navigation menu, users can search through previous conversations and perform additional actions, such as sharing a conversation with others.
|
|
134
|
+
|
|
135
|
+
<div class="ws-docs-content-img">
|
|
136
|
+
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
### Attaching files
|
|
140
|
+
|
|
141
|
+
Using [the attach button](/patternfly-ai/chatbot/overview/design-guidelines#message-bar) in the message bar, users can [attach files](/patternfly-ai/chatbot/messages#file-attachments) to their message to share with the ChatBot.
|
|
142
|
+
|
|
143
|
+
The attach button can follow a couple of patterns, including:
|
|
144
|
+
|
|
145
|
+
- Opening the file explorer for a user's operating system
|
|
146
|
+
- Opening a menu with attachment options that are chosen by designers and developers
|
|
147
|
+
|
|
148
|
+
<div class="ws-docs-content-img">
|
|
149
|
+
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
When users attach a file to a message that they're drafting, it will be displayed in the ChatBot footer, above the message bar. This allows them to remove an attachment before sending if necessary:
|
|
153
|
+
|
|
154
|
+
<div class="ws-docs-content-img">
|
|
155
|
+
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
If a message attachment is successful, a label with the file details will be displayed in the message:
|
|
159
|
+
|
|
160
|
+
<div class="ws-docs-content-img">
|
|
161
|
+
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
Users can select the file label to either preview or edit their attachment, as shown in these [attachment examples](/patternfly-ai/chatbot/messages#attachment-preview).
|
|
165
|
+
|
|
166
|
+
If a message attachment fails, an error message should share the reason for failure:
|
|
167
|
+
|
|
168
|
+
<div class="ws-docs-content-img">
|
|
169
|
+
|
|
170
|
+
</div>
|
|
171
|
+
|
|
172
|
+
## Variations
|
|
173
|
+
|
|
174
|
+
### Display modes
|
|
175
|
+
|
|
176
|
+
There are a few display modes that users can choose when interacting with a ChatBot.
|
|
177
|
+
|
|
178
|
+
<div class="ws-docs-content-img">
|
|
179
|
+
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
1. **Overlay:** The default display mode, which floats the ChatBot window on top of a product's UI. In overlay mode, the ChatBot can be opened and minimized with the toggle.
|
|
183
|
+
|
|
184
|
+
<div class="ws-docs-content-img">
|
|
185
|
+
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
2. **Docked:** Anchors the ChatBot to the side of the page content. When docked, the ChatBot window is persistent, and cannot be toggled.
|
|
189
|
+
|
|
190
|
+
<div class="ws-docs-content-img">
|
|
191
|
+
|
|
192
|
+
</div>
|
|
193
|
+
|
|
194
|
+
3. **Full screen:** Fills the screen with the ChatBot window.
|
|
195
|
+
|
|
196
|
+
<div class="ws-docs-content-img">
|
|
197
|
+
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
4. **Embedded:** Places the ChatBot within a product as its own page. An embedded ChatBot could be displayed in the product's navigation menu.
|
|
201
|
+
|
|
202
|
+
<div class="ws-docs-content-img">
|
|
203
|
+
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
## Placement
|
|
207
|
+
|
|
208
|
+
Your users will expect your ChatBot to be in a reliable, permanent location. Overlay displays are placed in the bottom right of the screen by default. If you're using a full screen or embedded ChatBot, stick to a consistent access location, like a button in the masthead or an item in the navigation menu.
|
|
209
|
+
|
|
210
|
+
## Content considerations
|
|
211
|
+
|
|
212
|
+
For guidance on writing ChatBot content, refer to our [conversation design guidelines](/patternfly-ai/conversation-design).
|
|
213
|
+
|
|
214
|
+
## Accessibility
|
|
215
|
+
|
|
216
|
+
Although accessibility has been integrated into the design of our ChatBot components, it is important to ensure that your implementation is inclusive of all users. For more guidance, refer to [our accessibility guidelines](/accessibility/about-accessibility).
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
|
|
3
|
+
|
|
4
|
+
export const ChatbotMessageBarExample: React.FunctionComponent = () => {
|
|
5
|
+
const handleSend = (message) => alert(message);
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<MessageBar
|
|
9
|
+
hasAttachButton={false}
|
|
10
|
+
onSendMessage={handleSend}
|
|
11
|
+
hasMicrophoneButton
|
|
12
|
+
buttonProps={{
|
|
13
|
+
microphone: { language: 'ja-JP' }
|
|
14
|
+
}}
|
|
15
|
+
/>
|
|
16
|
+
);
|
|
17
|
+
};
|
|
@@ -247,6 +247,16 @@ By default the message bar supports file uploads via an attach button. Setting `
|
|
|
247
247
|
|
|
248
248
|
```
|
|
249
249
|
|
|
250
|
+
### Message bar with speech recognition in a different language
|
|
251
|
+
|
|
252
|
+
Speech recognition defaults to en-US. You can update the locale as needed. Locale codes are a combination of the [ISO 639-1 language code](https://www.iso.org/iso-639-language-code) and the [ISO 3166-1 country code](https://www.iso.org/iso-3166-country-codes.html), separated by a hyphen.
|
|
253
|
+
|
|
254
|
+
In this example, the locale is set to to ja-JP. You can try it out by saying "hajimemashite" (初めまして).
|
|
255
|
+
|
|
256
|
+
```js file="./ChatbotMessageBarLanguage.tsx"
|
|
257
|
+
|
|
258
|
+
```
|
|
259
|
+
|
|
250
260
|
### Message bar with attach menu appended to attach button
|
|
251
261
|
|
|
252
262
|
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.
|