@patternfly/chatbot 6.3.0-prerelease.5 → 6.3.0-prerelease.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Message/Message.js +2 -2
- package/dist/cjs/Message/QuickStarts/QuickStartTile.d.ts +2 -0
- package/dist/cjs/Message/QuickStarts/QuickStartTile.js +2 -2
- package/dist/cjs/SourcesCard/SourcesCard.js +2 -2
- package/dist/cjs/TermsOfUse/TermsOfUse.d.ts +2 -0
- package/dist/cjs/TermsOfUse/TermsOfUse.js +5 -5
- package/dist/css/main.css +21 -0
- package/dist/css/main.css.map +1 -1
- package/dist/esm/Message/Message.js +2 -2
- package/dist/esm/Message/QuickStarts/QuickStartTile.d.ts +2 -0
- package/dist/esm/Message/QuickStarts/QuickStartTile.js +2 -2
- package/dist/esm/SourcesCard/SourcesCard.js +2 -2
- package/dist/esm/TermsOfUse/TermsOfUse.d.ts +2 -0
- package/dist/esm/TermsOfUse/TermsOfUse.js +5 -5
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickResponses.tsx +24 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx +11 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx +21 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/TermsOfUseCompact.tsx +136 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +7 -0
- package/src/Message/Message.tsx +2 -1
- package/src/Message/QuickStarts/QuickStartTile.tsx +5 -1
- package/src/SourcesCard/SourcesCard.scss +8 -0
- package/src/SourcesCard/SourcesCard.tsx +2 -1
- package/src/TermsOfUse/TermsOfUse.scss +20 -0
- package/src/TermsOfUse/TermsOfUse.tsx +9 -4
@@ -128,8 +128,8 @@ const MessageBase = (_a) => {
|
|
128
128
|
react_1.default.createElement("div", { className: "pf-chatbot__message-and-actions" },
|
129
129
|
renderMessage(),
|
130
130
|
afterMainContent && react_1.default.createElement(react_1.default.Fragment, null, afterMainContent),
|
131
|
-
!isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources)),
|
132
|
-
quickStarts && quickStarts.quickStart && (react_1.default.createElement(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
|
131
|
+
!isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources, { isCompact: isCompact })),
|
132
|
+
quickStarts && quickStarts.quickStart && (react_1.default.createElement(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })),
|
133
133
|
!isLoading && actions && react_1.default.createElement(ResponseActions_1.default, { actions: actions }),
|
134
134
|
userFeedbackForm && react_1.default.createElement(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })),
|
135
135
|
userFeedbackComplete && (react_1.default.createElement(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))),
|
@@ -22,6 +22,8 @@ export interface QuickStartTileProps {
|
|
22
22
|
prerequisiteWordPlural?: string;
|
23
23
|
/** Aria-label for the quick start description button */
|
24
24
|
quickStartButtonAriaLabel?: string;
|
25
|
+
/** Sets the tile to compact styling */
|
26
|
+
isCompact?: boolean;
|
25
27
|
}
|
26
28
|
declare const QuickStartTile: React.FC<QuickStartTileProps>;
|
27
29
|
export default QuickStartTile;
|
@@ -42,7 +42,7 @@ const camelize = (str) => str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match
|
|
42
42
|
return index === 0 ? match.toLowerCase() : match.toUpperCase();
|
43
43
|
});
|
44
44
|
exports.camelize = camelize;
|
45
|
-
const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, minuteWord = 'minute', minuteWordPlural = 'minutes', prerequisiteWord, prerequisiteWordPlural, quickStartButtonAriaLabel, action }) => {
|
45
|
+
const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, minuteWord = 'minute', minuteWordPlural = 'minutes', prerequisiteWord, prerequisiteWordPlural, quickStartButtonAriaLabel, action, isCompact }) => {
|
46
46
|
const { metadata: { name: id }, spec: { icon, displayName, description, durationMinutes, prerequisites, link, type } } = quickStart;
|
47
47
|
let quickStartIcon;
|
48
48
|
if (typeof icon === 'object') {
|
@@ -63,7 +63,7 @@ const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, mi
|
|
63
63
|
};
|
64
64
|
const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || outlined_bookmark_icon_1.default;
|
65
65
|
const additionalAction = action ? (React.createElement(react_core_1.Button, Object.assign({ "aria-label": action['aria-label'], icon: React.createElement(ActionIcon, null), variant: "plain", onClick: action.onClick }, action.buttonProps))) : undefined;
|
66
|
-
return (React.createElement(react_core_1.Card, { className: `pf-chatbot__quickstarts-tile ${className ? className : ''}`, id: `${id}-chatbot-qs-tile`, style: { height: '100%' }, "data-testid": `chatbot-qs-card-${(0, exports.camelize)(displayName)}
|
66
|
+
return (React.createElement(react_core_1.Card, { className: `pf-chatbot__quickstarts-tile ${className ? className : ''}`, id: `${id}-chatbot-qs-tile`, style: { height: '100%' }, "data-testid": `chatbot-qs-card-${(0, exports.camelize)(displayName)}`, isCompact: isCompact },
|
67
67
|
React.createElement(react_core_1.CardHeader, Object.assign({}, (action && {
|
68
68
|
actions: { actions: additionalAction }
|
69
69
|
})), quickStartIcon),
|
@@ -22,7 +22,7 @@ const react_1 = __importDefault(require("react"));
|
|
22
22
|
const react_core_1 = require("@patternfly/react-core");
|
23
23
|
const react_icons_1 = require("@patternfly/react-icons");
|
24
24
|
const SourcesCard = (_a) => {
|
25
|
-
var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less' } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords"]);
|
25
|
+
var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less', isCompact } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact"]);
|
26
26
|
const [page, setPage] = react_1.default.useState(1);
|
27
27
|
const [isExpanded, setIsExpanded] = react_1.default.useState(false);
|
28
28
|
const onToggle = (_event, isExpanded) => {
|
@@ -40,7 +40,7 @@ const SourcesCard = (_a) => {
|
|
40
40
|
};
|
41
41
|
return (react_1.default.createElement("div", { className: "pf-chatbot__source" },
|
42
42
|
react_1.default.createElement("span", null, (0, react_core_1.pluralize)(sources.length, sourceWord, sourceWordPlural)),
|
43
|
-
react_1.default.createElement(react_core_1.Card, Object.assign({ className: "pf-chatbot__sources-card" }, props),
|
43
|
+
react_1.default.createElement(react_core_1.Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props),
|
44
44
|
react_1.default.createElement(react_core_1.CardTitle, { className: "pf-chatbot__sources-card-title" },
|
45
45
|
react_1.default.createElement(react_core_1.Button, { component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? react_1.default.createElement(react_icons_1.ExternalLinkSquareAltIcon, null) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined }, renderTitle(sources[page - 1].title))),
|
46
46
|
sources[page - 1].body && (react_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body` }, sources[page - 1].hasShowMore ? (
|
@@ -28,6 +28,8 @@ export interface TermsOfUseProps extends ModalProps {
|
|
28
28
|
innerRef?: React.Ref<HTMLDivElement>;
|
29
29
|
/** OuiaID applied to modal */
|
30
30
|
ouiaId?: string;
|
31
|
+
/** Sets modal to compact styling. */
|
32
|
+
isCompact?: boolean;
|
31
33
|
}
|
32
34
|
export declare const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps>;
|
33
35
|
declare const TermsOfUse: React.ForwardRefExoticComponent<Omit<TermsOfUseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
@@ -23,7 +23,7 @@ const react_core_1 = require("@patternfly/react-core");
|
|
23
23
|
const Chatbot_1 = require("../Chatbot");
|
24
24
|
const ChatbotModal_1 = __importDefault(require("../ChatbotModal/ChatbotModal"));
|
25
25
|
const TermsOfUseBase = (_a) => {
|
26
|
-
var { handleModalToggle, isModalOpen, onPrimaryAction, onSecondaryAction, primaryActionBtn = 'Accept', secondaryActionBtn = 'Decline', title = 'Terms of use', image, altText, displayMode = Chatbot_1.ChatbotDisplayMode.default, className, children, innerRef, ouiaId = 'TermsOfUse' } = _a, props = __rest(_a, ["handleModalToggle", "isModalOpen", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "image", "altText", "displayMode", "className", "children", "innerRef", "ouiaId"]);
|
26
|
+
var { handleModalToggle, isModalOpen, onPrimaryAction, onSecondaryAction, primaryActionBtn = 'Accept', secondaryActionBtn = 'Decline', title = 'Terms of use', image, altText, displayMode = Chatbot_1.ChatbotDisplayMode.default, className, children, innerRef, ouiaId = 'TermsOfUse', isCompact } = _a, props = __rest(_a, ["handleModalToggle", "isModalOpen", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "image", "altText", "displayMode", "className", "children", "innerRef", "ouiaId", "isCompact"]);
|
27
27
|
const handlePrimaryAction = (_event) => {
|
28
28
|
handleModalToggle(_event);
|
29
29
|
onPrimaryAction && onPrimaryAction(_event);
|
@@ -31,13 +31,13 @@ const TermsOfUseBase = (_a) => {
|
|
31
31
|
const handleSecondaryAction = (_event) => {
|
32
32
|
onSecondaryAction(_event);
|
33
33
|
};
|
34
|
-
const modal = (react_1.default.createElement(ChatbotModal_1.default, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "terms-of-use-title", "aria-describedby": "terms-of-use-modal", className: `pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${className ? className : ''}`, displayMode: displayMode }, props),
|
34
|
+
const modal = (react_1.default.createElement(ChatbotModal_1.default, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "terms-of-use-title", "aria-describedby": "terms-of-use-modal", className: `pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`, displayMode: displayMode }, props),
|
35
35
|
react_1.default.createElement("section", { className: `pf-chatbot__terms-of-use--section`, "aria-label": title, tabIndex: -1, ref: innerRef },
|
36
|
-
react_1.default.createElement(react_core_1.ModalHeader,
|
36
|
+
react_1.default.createElement(react_core_1.ModalHeader, { className: "pf-chatbot__terms-of-use--modal-header" },
|
37
37
|
react_1.default.createElement("div", { className: "pf-chatbot__terms-of-use--header" },
|
38
|
-
image && altText && react_1.default.createElement("img", { src: image, className: "pf-chatbot__terms-of-use--image", alt: altText }),
|
38
|
+
!isCompact && image && altText && (react_1.default.createElement("img", { src: image, className: "pf-chatbot__terms-of-use--image", alt: altText })),
|
39
39
|
react_1.default.createElement("h1", { className: "pf-chatbot__terms-of-use--title" }, title))),
|
40
|
-
react_1.default.createElement(react_core_1.ModalBody,
|
40
|
+
react_1.default.createElement(react_core_1.ModalBody, { className: "pf-chatbot__terms-of-use--modal-body" },
|
41
41
|
react_1.default.createElement(react_core_1.Content, null, children)),
|
42
42
|
react_1.default.createElement(react_core_1.ModalFooter, { className: "pf-chatbot__terms-of-use--footer" },
|
43
43
|
react_1.default.createElement(react_core_1.Button, { isBlock: true, key: "terms-of-use-modal-primary", variant: "primary", onClick: handlePrimaryAction, form: "terms-of-use-form", size: "lg" }, primaryActionBtn),
|
package/dist/css/main.css
CHANGED
@@ -2006,6 +2006,11 @@
|
|
2006
2006
|
color: var(--pf-t--global--icon--color--subtle);
|
2007
2007
|
}
|
2008
2008
|
|
2009
|
+
.pf-v6-c-card.pf-m-compact.pf-chatbot__sources-card .pf-v6-c-card__footer.pf-chatbot__sources-card-footer-container {
|
2010
|
+
border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
|
2011
|
+
padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--xs) !important;
|
2012
|
+
}
|
2013
|
+
|
2009
2014
|
.pf-chatbot__source-details-subhead {
|
2010
2015
|
color: var(--pf-t--global--text--color--subtle);
|
2011
2016
|
font-size: var(--pf-t--global--icon--size--font--xs);
|
@@ -2093,6 +2098,22 @@
|
|
2093
2098
|
font-size: var(--pf-t--global--font--size--heading--2xl);
|
2094
2099
|
}
|
2095
2100
|
|
2101
|
+
.pf-chatbot__terms-of-use-modal.pf-m-compact .pf-chatbot__terms-of-use--header {
|
2102
|
+
gap: var(--pf-t--global--spacer--md);
|
2103
|
+
align-items: flex-start;
|
2104
|
+
margin-block-start: var(--pf-t--global--spacer--lg);
|
2105
|
+
}
|
2106
|
+
.pf-chatbot__terms-of-use-modal.pf-m-compact .pf-chatbot__terms-of-use--modal-header {
|
2107
|
+
--pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
2108
|
+
--pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
2109
|
+
--pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
2110
|
+
--pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
2111
|
+
}
|
2112
|
+
.pf-chatbot__terms-of-use-modal.pf-m-compact .pf-chatbot__terms-of-use--modal-body {
|
2113
|
+
--pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
2114
|
+
--pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
2115
|
+
}
|
2116
|
+
|
2096
2117
|
:where(:root) {
|
2097
2118
|
--pf-t--chatbot--heading--font-family: var(
|
2098
2119
|
--pf-v6-c-content--heading--FontFamily,
|
package/dist/css/main.css.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAOJ;EACE;;;ACpIF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACrBJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AASF;AAAA;EACE;;AACA;AAAA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AAUF;AAAA;AAAA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAKE;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;;AClOJ;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AASJ;EACE;;;AAQF;EACE;;;ACrDJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AAUJ;AAAA;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAMF;EACE;EACA;;;ACjJF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;AAOA;EACE;;AAGF;EACE;EACA;;;ACjGF;EAA0B;;AAMxB;EAAM;;AACN;EAAuB;;AACvB;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACnBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC5CN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAGA;EACE;;;AAUF;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAIA;EACE;;;AC5FJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIA;EADF;IAEI;;;;AAIN;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;;ACrEJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;AChDR;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;ACjGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;ADrDN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AEhFF;EACE;EACA;EACA;EACA;EAGA;;;ADDE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AEpDN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;ALjBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AMjDN;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;ACnBJ;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;;AAIF;EACE;EACA;EACA;;;AC7BJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAKA;EACE;;;AAKF;EACE;;AAGF;EACE;;AAIA;EACE;;;ACnEN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AC5BR;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AC1CJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EACE;;;AAMJ;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AC/CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;ACrBR;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;ACxGN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAII;AAAA;AAAA;IACE;IACA;;;ADvCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AEhDJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAIA;EACE;EACA;;;AAIJ;EACE;;;AC3CF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACvER;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;AC5BJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EACA;EACA;EAEA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAOJ;EACE;;;ACpIF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACrBJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AASF;AAAA;EACE;;AACA;AAAA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AAUF;AAAA;AAAA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAKE;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;;AClOJ;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AASJ;EACE;;;AAQF;EACE;;;ACrDJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AAUJ;AAAA;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAMF;EACE;EACA;;;ACjJF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;AAOA;EACE;;AAGF;EACE;EACA;;;ACjGF;EAA0B;;AAMxB;EAAM;;AACN;EAAuB;;AACvB;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACnBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC5CN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAGA;EACE;;;AAUF;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAIA;EACE;;;AC5FJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIA;EADF;IAEI;;;;AAIN;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;;ACrEJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;AChDR;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;ACjGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;ADrDN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AEhFF;EACE;EACA;EACA;EACA;EAGA;;;ADDE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AEpDN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;ALjBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AMjDN;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;ACnBJ;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;;AAIF;EACE;EACA;EACA;;;AC7BJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAKA;EACE;;;AAKF;EACE;;AAGF;EACE;;AAIA;EACE;;;ACnEN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AC5BR;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AC1CJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EACE;;;AAMJ;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AC/CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;ACrBR;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;ACxGN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAII;AAAA;AAAA;IACE;IACA;;;ADvCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AEhDJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAIA;EACE;EACA;;;AAIJ;EACE;;;AC3CF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;AAON;EACE;EACA;;;AChFJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AChDJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EACA;EACA;EAEA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}
|
@@ -122,8 +122,8 @@ export const MessageBase = (_a) => {
|
|
122
122
|
React.createElement("div", { className: "pf-chatbot__message-and-actions" },
|
123
123
|
renderMessage(),
|
124
124
|
afterMainContent && React.createElement(React.Fragment, null, afterMainContent),
|
125
|
-
!isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
|
126
|
-
quickStarts && quickStarts.quickStart && (React.createElement(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
|
125
|
+
!isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })),
|
126
|
+
quickStarts && quickStarts.quickStart && (React.createElement(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })),
|
127
127
|
!isLoading && actions && React.createElement(ResponseActions, { actions: actions }),
|
128
128
|
userFeedbackForm && React.createElement(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })),
|
129
129
|
userFeedbackComplete && (React.createElement(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))),
|
@@ -22,6 +22,8 @@ export interface QuickStartTileProps {
|
|
22
22
|
prerequisiteWordPlural?: string;
|
23
23
|
/** Aria-label for the quick start description button */
|
24
24
|
quickStartButtonAriaLabel?: string;
|
25
|
+
/** Sets the tile to compact styling */
|
26
|
+
isCompact?: boolean;
|
25
27
|
}
|
26
28
|
declare const QuickStartTile: React.FC<QuickStartTileProps>;
|
27
29
|
export default QuickStartTile;
|
@@ -12,7 +12,7 @@ export const camelize = (str) => str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function
|
|
12
12
|
} // or if (/\s+/.test(match)) for white spaces
|
13
13
|
return index === 0 ? match.toLowerCase() : match.toUpperCase();
|
14
14
|
});
|
15
|
-
const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, minuteWord = 'minute', minuteWordPlural = 'minutes', prerequisiteWord, prerequisiteWordPlural, quickStartButtonAriaLabel, action }) => {
|
15
|
+
const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, minuteWord = 'minute', minuteWordPlural = 'minutes', prerequisiteWord, prerequisiteWordPlural, quickStartButtonAriaLabel, action, isCompact }) => {
|
16
16
|
const { metadata: { name: id }, spec: { icon, displayName, description, durationMinutes, prerequisites, link, type } } = quickStart;
|
17
17
|
let quickStartIcon;
|
18
18
|
if (typeof icon === 'object') {
|
@@ -33,7 +33,7 @@ const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, mi
|
|
33
33
|
};
|
34
34
|
const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || OutlinedBookmarkIcon;
|
35
35
|
const additionalAction = action ? (React.createElement(Button, Object.assign({ "aria-label": action['aria-label'], icon: React.createElement(ActionIcon, null), variant: "plain", onClick: action.onClick }, action.buttonProps))) : undefined;
|
36
|
-
return (React.createElement(Card, { className: `pf-chatbot__quickstarts-tile ${className ? className : ''}`, id: `${id}-chatbot-qs-tile`, style: { height: '100%' }, "data-testid": `chatbot-qs-card-${camelize(displayName)}
|
36
|
+
return (React.createElement(Card, { className: `pf-chatbot__quickstarts-tile ${className ? className : ''}`, id: `${id}-chatbot-qs-tile`, style: { height: '100%' }, "data-testid": `chatbot-qs-card-${camelize(displayName)}`, isCompact: isCompact },
|
37
37
|
React.createElement(CardHeader, Object.assign({}, (action && {
|
38
38
|
actions: { actions: additionalAction }
|
39
39
|
})), quickStartIcon),
|
@@ -17,7 +17,7 @@ import React from 'react';
|
|
17
17
|
import { Button, ButtonVariant, Card, CardBody, CardFooter, CardTitle, ExpandableSection, ExpandableSectionVariant, Icon, pluralize, Truncate } from '@patternfly/react-core';
|
18
18
|
import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
|
19
19
|
const SourcesCard = (_a) => {
|
20
|
-
var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less' } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords"]);
|
20
|
+
var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less', isCompact } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact"]);
|
21
21
|
const [page, setPage] = React.useState(1);
|
22
22
|
const [isExpanded, setIsExpanded] = React.useState(false);
|
23
23
|
const onToggle = (_event, isExpanded) => {
|
@@ -35,7 +35,7 @@ const SourcesCard = (_a) => {
|
|
35
35
|
};
|
36
36
|
return (React.createElement("div", { className: "pf-chatbot__source" },
|
37
37
|
React.createElement("span", null, pluralize(sources.length, sourceWord, sourceWordPlural)),
|
38
|
-
React.createElement(Card, Object.assign({ className: "pf-chatbot__sources-card" }, props),
|
38
|
+
React.createElement(Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props),
|
39
39
|
React.createElement(CardTitle, { className: "pf-chatbot__sources-card-title" },
|
40
40
|
React.createElement(Button, { component: "a", variant: ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? React.createElement(ExternalLinkSquareAltIcon, null) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined }, renderTitle(sources[page - 1].title))),
|
41
41
|
sources[page - 1].body && (React.createElement(CardBody, { className: `pf-chatbot__sources-card-body` }, sources[page - 1].hasShowMore ? (
|
@@ -28,6 +28,8 @@ export interface TermsOfUseProps extends ModalProps {
|
|
28
28
|
innerRef?: React.Ref<HTMLDivElement>;
|
29
29
|
/** OuiaID applied to modal */
|
30
30
|
ouiaId?: string;
|
31
|
+
/** Sets modal to compact styling. */
|
32
|
+
isCompact?: boolean;
|
31
33
|
}
|
32
34
|
export declare const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps>;
|
33
35
|
declare const TermsOfUse: React.ForwardRefExoticComponent<Omit<TermsOfUseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
@@ -17,7 +17,7 @@ import { Button, Content, ModalBody, ModalFooter, ModalHeader } from '@patternfl
|
|
17
17
|
import { ChatbotDisplayMode } from '../Chatbot';
|
18
18
|
import ChatbotModal from '../ChatbotModal/ChatbotModal';
|
19
19
|
export const TermsOfUseBase = (_a) => {
|
20
|
-
var { handleModalToggle, isModalOpen, onPrimaryAction, onSecondaryAction, primaryActionBtn = 'Accept', secondaryActionBtn = 'Decline', title = 'Terms of use', image, altText, displayMode = ChatbotDisplayMode.default, className, children, innerRef, ouiaId = 'TermsOfUse' } = _a, props = __rest(_a, ["handleModalToggle", "isModalOpen", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "image", "altText", "displayMode", "className", "children", "innerRef", "ouiaId"]);
|
20
|
+
var { handleModalToggle, isModalOpen, onPrimaryAction, onSecondaryAction, primaryActionBtn = 'Accept', secondaryActionBtn = 'Decline', title = 'Terms of use', image, altText, displayMode = ChatbotDisplayMode.default, className, children, innerRef, ouiaId = 'TermsOfUse', isCompact } = _a, props = __rest(_a, ["handleModalToggle", "isModalOpen", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "image", "altText", "displayMode", "className", "children", "innerRef", "ouiaId", "isCompact"]);
|
21
21
|
const handlePrimaryAction = (_event) => {
|
22
22
|
handleModalToggle(_event);
|
23
23
|
onPrimaryAction && onPrimaryAction(_event);
|
@@ -25,13 +25,13 @@ export const TermsOfUseBase = (_a) => {
|
|
25
25
|
const handleSecondaryAction = (_event) => {
|
26
26
|
onSecondaryAction(_event);
|
27
27
|
};
|
28
|
-
const modal = (React.createElement(ChatbotModal, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "terms-of-use-title", "aria-describedby": "terms-of-use-modal", className: `pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${className ? className : ''}`, displayMode: displayMode }, props),
|
28
|
+
const modal = (React.createElement(ChatbotModal, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "terms-of-use-title", "aria-describedby": "terms-of-use-modal", className: `pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`, displayMode: displayMode }, props),
|
29
29
|
React.createElement("section", { className: `pf-chatbot__terms-of-use--section`, "aria-label": title, tabIndex: -1, ref: innerRef },
|
30
|
-
React.createElement(ModalHeader,
|
30
|
+
React.createElement(ModalHeader, { className: "pf-chatbot__terms-of-use--modal-header" },
|
31
31
|
React.createElement("div", { className: "pf-chatbot__terms-of-use--header" },
|
32
|
-
image && altText && React.createElement("img", { src: image, className: "pf-chatbot__terms-of-use--image", alt: altText }),
|
32
|
+
!isCompact && image && altText && (React.createElement("img", { src: image, className: "pf-chatbot__terms-of-use--image", alt: altText })),
|
33
33
|
React.createElement("h1", { className: "pf-chatbot__terms-of-use--title" }, title))),
|
34
|
-
React.createElement(ModalBody,
|
34
|
+
React.createElement(ModalBody, { className: "pf-chatbot__terms-of-use--modal-body" },
|
35
35
|
React.createElement(Content, null, children)),
|
36
36
|
React.createElement(ModalFooter, { className: "pf-chatbot__terms-of-use--footer" },
|
37
37
|
React.createElement(Button, { isBlock: true, key: "terms-of-use-modal-primary", variant: "primary", onClick: handlePrimaryAction, form: "terms-of-use-form", size: "lg" }, primaryActionBtn),
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@patternfly/chatbot",
|
3
|
-
"version": "6.3.0-prerelease.
|
3
|
+
"version": "6.3.0-prerelease.7",
|
4
4
|
"description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
|
5
5
|
"main": "dist/cjs/index.js",
|
6
6
|
"module": "dist/esm/index.js",
|
package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickResponses.tsx
CHANGED
@@ -50,5 +50,29 @@ export const MessageWithQuickResponsesExample: React.FunctionComponent = () => (
|
|
50
50
|
{ id: '2', content: 'No', onClick: () => alert('Clicked no') }
|
51
51
|
]}
|
52
52
|
/>
|
53
|
+
<Message
|
54
|
+
name="Bot"
|
55
|
+
role="bot"
|
56
|
+
avatar={patternflyAvatar}
|
57
|
+
content="Welcome back, User! How can I help you today?"
|
58
|
+
quickResponses={[
|
59
|
+
{ id: '1', content: 'Help me with an access issue', onClick: () => alert('Clicked id 1') },
|
60
|
+
{ id: '2', content: 'Show my critical vulnerabilities', onClick: () => alert('Clicked id 2') },
|
61
|
+
{ id: '3', content: 'Create new integrations', onClick: () => alert('Clicked id 3') },
|
62
|
+
{ id: '4', content: 'Get recommendations from an advisor', onClick: () => alert('Clicked id 4') },
|
63
|
+
{ id: '5', content: 'Something else', onClick: () => alert('Clicked id 5') }
|
64
|
+
]}
|
65
|
+
/>
|
66
|
+
<Message
|
67
|
+
name="Bot"
|
68
|
+
role="bot"
|
69
|
+
avatar={patternflyAvatar}
|
70
|
+
content="Example with compact responses"
|
71
|
+
quickResponses={[
|
72
|
+
{ id: '1', content: 'Yes', onClick: () => alert('Clicked id 1') },
|
73
|
+
{ id: '2', content: 'No', onClick: () => alert('Clicked id 2') }
|
74
|
+
]}
|
75
|
+
isCompact
|
76
|
+
/>
|
53
77
|
</>
|
54
78
|
);
|
package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx
CHANGED
@@ -27,5 +27,16 @@ export const MessageWithQuickStartExample: React.FunctionComponent = () => (
|
|
27
27
|
onSelectQuickStart: (id) => alert(id)
|
28
28
|
}}
|
29
29
|
/>
|
30
|
+
<Message
|
31
|
+
name="Bot"
|
32
|
+
role="bot"
|
33
|
+
avatar={patternflyAvatar}
|
34
|
+
content="This quick start tile is compact"
|
35
|
+
quickStarts={{
|
36
|
+
quickStart: monitorSampleAppQuickStart,
|
37
|
+
onSelectQuickStart: (id) => alert(id)
|
38
|
+
}}
|
39
|
+
isCompact
|
40
|
+
/>
|
30
41
|
</>
|
31
42
|
);
|
@@ -150,6 +150,27 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
|
|
150
150
|
onSetPage
|
151
151
|
}}
|
152
152
|
/>
|
153
|
+
<Message
|
154
|
+
name="Bot"
|
155
|
+
role="bot"
|
156
|
+
avatar={patternflyAvatar}
|
157
|
+
content="This example displays a compact sources card"
|
158
|
+
sources={{
|
159
|
+
sources: [
|
160
|
+
{
|
161
|
+
link: '#'
|
162
|
+
},
|
163
|
+
{
|
164
|
+
link: '#'
|
165
|
+
},
|
166
|
+
{
|
167
|
+
link: '#'
|
168
|
+
}
|
169
|
+
],
|
170
|
+
onSetPage
|
171
|
+
}}
|
172
|
+
isCompact
|
173
|
+
/>
|
153
174
|
</>
|
154
175
|
);
|
155
176
|
};
|
@@ -0,0 +1,136 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { Button, FormGroup, Radio, SkipToContent } from '@patternfly/react-core';
|
3
|
+
import TermsOfUse from '@patternfly/chatbot/dist/dynamic/TermsOfUse';
|
4
|
+
import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
|
5
|
+
|
6
|
+
export const TermsOfUseCompactExample: React.FunctionComponent = () => {
|
7
|
+
const [isModalOpen, setIsModalOpen] = React.useState(true);
|
8
|
+
const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
|
9
|
+
const chatbotRef = React.useRef<HTMLDivElement>(null);
|
10
|
+
const termsRef = React.useRef<HTMLDivElement>(null);
|
11
|
+
|
12
|
+
const handleSkipToContent = (e) => {
|
13
|
+
e.preventDefault();
|
14
|
+
if (!isModalOpen && chatbotRef.current) {
|
15
|
+
chatbotRef.current.focus();
|
16
|
+
}
|
17
|
+
if (isModalOpen && termsRef.current) {
|
18
|
+
termsRef.current.focus();
|
19
|
+
}
|
20
|
+
};
|
21
|
+
|
22
|
+
const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
|
23
|
+
setIsModalOpen(!isModalOpen);
|
24
|
+
};
|
25
|
+
|
26
|
+
const onPrimaryAction = () => {
|
27
|
+
// eslint-disable-next-line no-console
|
28
|
+
console.log('Clicked primary action');
|
29
|
+
};
|
30
|
+
|
31
|
+
const onSecondaryAction = () => {
|
32
|
+
// eslint-disable-next-line no-console
|
33
|
+
console.log('Clicked secondary action');
|
34
|
+
};
|
35
|
+
|
36
|
+
const introduction = (
|
37
|
+
<>
|
38
|
+
<p>
|
39
|
+
Welcome to PatternFly! These terms and conditions outline the rules and regulations for the use of PatternFly's
|
40
|
+
website, located at <a href="https://patternfly.org">www.patternfly.org.</a>
|
41
|
+
</p>
|
42
|
+
<p>
|
43
|
+
By accessing this website, you are agreeing with our terms and conditions. If you do not agree to all of these
|
44
|
+
terms and conditions, do not continue to use PatternFly.
|
45
|
+
</p>
|
46
|
+
</>
|
47
|
+
);
|
48
|
+
|
49
|
+
const terminology = (
|
50
|
+
<>
|
51
|
+
<p>
|
52
|
+
The following terminology applies to these Terms and Conditions, Privacy Statement, Disclaimer Notice, and all
|
53
|
+
Agreements:
|
54
|
+
</p>
|
55
|
+
<ul>
|
56
|
+
<li>
|
57
|
+
"Client", "You", and "Your" refer to you, the person using this website who is compliant with the Company's
|
58
|
+
terms and conditions.
|
59
|
+
</li>
|
60
|
+
<li>
|
61
|
+
"The Company", "Ourselves", "We", "Our", and "Us", refer to our Company. "Party", "Parties", or "Us", refers
|
62
|
+
to both the Client and ourselves.
|
63
|
+
</li>
|
64
|
+
</ul>
|
65
|
+
</>
|
66
|
+
);
|
67
|
+
|
68
|
+
const body = (
|
69
|
+
<>
|
70
|
+
<h2>Introduction</h2>
|
71
|
+
{introduction}
|
72
|
+
<h2>Terminology</h2>
|
73
|
+
{terminology}
|
74
|
+
</>
|
75
|
+
);
|
76
|
+
|
77
|
+
return (
|
78
|
+
<>
|
79
|
+
<SkipToContent style={{ zIndex: '999' }} onClick={handleSkipToContent} href="#">
|
80
|
+
Skip to chatbot
|
81
|
+
</SkipToContent>
|
82
|
+
<div
|
83
|
+
style={{
|
84
|
+
position: 'fixed',
|
85
|
+
padding: 'var(--pf-t--global--spacer--lg)',
|
86
|
+
zIndex: '601',
|
87
|
+
boxShadow: 'var(--pf-t--global--box-shadow--lg)'
|
88
|
+
}}
|
89
|
+
>
|
90
|
+
<FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Display mode">
|
91
|
+
<Radio
|
92
|
+
isChecked={displayMode === ChatbotDisplayMode.default}
|
93
|
+
onChange={() => setDisplayMode(ChatbotDisplayMode.default)}
|
94
|
+
name="basic-inline-radio"
|
95
|
+
label="Default"
|
96
|
+
id="default"
|
97
|
+
/>
|
98
|
+
<Radio
|
99
|
+
isChecked={displayMode === ChatbotDisplayMode.docked}
|
100
|
+
onChange={() => setDisplayMode(ChatbotDisplayMode.docked)}
|
101
|
+
name="basic-inline-radio"
|
102
|
+
label="Docked"
|
103
|
+
id="docked"
|
104
|
+
/>
|
105
|
+
<Radio
|
106
|
+
isChecked={displayMode === ChatbotDisplayMode.fullscreen}
|
107
|
+
onChange={() => setDisplayMode(ChatbotDisplayMode.fullscreen)}
|
108
|
+
name="basic-inline-radio"
|
109
|
+
label="Fullscreen"
|
110
|
+
id="fullscreen"
|
111
|
+
/>
|
112
|
+
<Radio
|
113
|
+
isChecked={displayMode === ChatbotDisplayMode.embedded}
|
114
|
+
onChange={() => setDisplayMode(ChatbotDisplayMode.embedded)}
|
115
|
+
name="basic-inline-radio"
|
116
|
+
label="Embedded"
|
117
|
+
id="embedded"
|
118
|
+
/>
|
119
|
+
</FormGroup>
|
120
|
+
<Button onClick={handleModalToggle}>Launch modal</Button>
|
121
|
+
</div>
|
122
|
+
<Chatbot ref={chatbotRef} displayMode={displayMode} isVisible></Chatbot>
|
123
|
+
<TermsOfUse
|
124
|
+
ref={termsRef}
|
125
|
+
displayMode={displayMode}
|
126
|
+
isModalOpen={isModalOpen}
|
127
|
+
handleModalToggle={handleModalToggle}
|
128
|
+
onPrimaryAction={onPrimaryAction}
|
129
|
+
onSecondaryAction={onSecondaryAction}
|
130
|
+
isCompact
|
131
|
+
>
|
132
|
+
{body}
|
133
|
+
</TermsOfUse>
|
134
|
+
</>
|
135
|
+
);
|
136
|
+
};
|
@@ -396,6 +396,13 @@ This example also includes an example of how to use [skip to content](/patternfl
|
|
396
396
|
|
397
397
|
```
|
398
398
|
|
399
|
+
### Compact terms of use
|
400
|
+
|
401
|
+
To apply compact styling to the terms of use modal, pass `isCompact` to `<TermsOfUse>`. This will remove the header image and adjust the spacing of text, so that there is less white space in the modal.
|
402
|
+
```js file="./TermsOfUseCompact.tsx" isFullscreen
|
403
|
+
|
404
|
+
```
|
405
|
+
|
399
406
|
### Settings
|
400
407
|
|
401
408
|
To contain user preference controls and other ChatBot setting options, you can create a separate settings page that can accept any number of buttons, dropdown menus, toggles, labels, and so on. This settings page will render all components appropriately within all 4 display modes.
|
package/src/Message/Message.tsx
CHANGED
@@ -339,7 +339,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
|
|
339
339
|
<div className="pf-chatbot__message-and-actions">
|
340
340
|
{renderMessage()}
|
341
341
|
{afterMainContent && <>{afterMainContent}</>}
|
342
|
-
{!isLoading && sources && <SourcesCard {...sources} />}
|
342
|
+
{!isLoading && sources && <SourcesCard {...sources} isCompact={isCompact} />}
|
343
343
|
{quickStarts && quickStarts.quickStart && (
|
344
344
|
<QuickStartTile
|
345
345
|
quickStart={quickStarts.quickStart}
|
@@ -349,6 +349,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
|
|
349
349
|
prerequisiteWord={quickStarts.prerequisiteWord}
|
350
350
|
prerequisiteWordPlural={quickStarts.prerequisiteWordPlural}
|
351
351
|
quickStartButtonAriaLabel={quickStarts.quickStartButtonAriaLabel}
|
352
|
+
isCompact={isCompact}
|
352
353
|
/>
|
353
354
|
)}
|
354
355
|
{!isLoading && actions && <ResponseActions actions={actions} />}
|
@@ -49,6 +49,8 @@ export interface QuickStartTileProps {
|
|
49
49
|
prerequisiteWordPlural?: string;
|
50
50
|
/** Aria-label for the quick start description button */
|
51
51
|
quickStartButtonAriaLabel?: string;
|
52
|
+
/** Sets the tile to compact styling */
|
53
|
+
isCompact?: boolean;
|
52
54
|
}
|
53
55
|
|
54
56
|
const QuickStartTile: React.FC<QuickStartTileProps> = ({
|
@@ -61,7 +63,8 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
|
|
61
63
|
prerequisiteWord,
|
62
64
|
prerequisiteWordPlural,
|
63
65
|
quickStartButtonAriaLabel,
|
64
|
-
action
|
66
|
+
action,
|
67
|
+
isCompact
|
65
68
|
}) => {
|
66
69
|
const {
|
67
70
|
metadata: { name: id },
|
@@ -105,6 +108,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
|
|
105
108
|
id={`${id}-chatbot-qs-tile`}
|
106
109
|
style={{ height: '100%' }}
|
107
110
|
data-testid={`chatbot-qs-card-${camelize(displayName)}`}
|
111
|
+
isCompact={isCompact}
|
108
112
|
>
|
109
113
|
<CardHeader
|
110
114
|
{...(action && {
|
@@ -74,3 +74,11 @@
|
|
74
74
|
}
|
75
75
|
}
|
76
76
|
}
|
77
|
+
|
78
|
+
.pf-v6-c-card.pf-m-compact.pf-chatbot__sources-card {
|
79
|
+
.pf-v6-c-card__footer.pf-chatbot__sources-card-footer-container {
|
80
|
+
border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
|
81
|
+
padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--xs)
|
82
|
+
var(--pf-t--global--spacer--xs) !important;
|
83
|
+
}
|
84
|
+
}
|
@@ -71,6 +71,7 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
|
|
71
71
|
onSetPage,
|
72
72
|
showMoreWords = 'show more',
|
73
73
|
showLessWords = 'show less',
|
74
|
+
isCompact,
|
74
75
|
...props
|
75
76
|
}: SourcesCardProps) => {
|
76
77
|
const [page, setPage] = React.useState(1);
|
@@ -95,7 +96,7 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
|
|
95
96
|
return (
|
96
97
|
<div className="pf-chatbot__source">
|
97
98
|
<span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
|
98
|
-
<Card className="pf-chatbot__sources-card" {...props}>
|
99
|
+
<Card isCompact={isCompact} className="pf-chatbot__sources-card" {...props}>
|
99
100
|
<CardTitle className="pf-chatbot__sources-card-title">
|
100
101
|
<Button
|
101
102
|
component="a"
|
@@ -64,3 +64,23 @@
|
|
64
64
|
font-size: var(--pf-t--global--font--size--heading--2xl);
|
65
65
|
}
|
66
66
|
}
|
67
|
+
|
68
|
+
.pf-chatbot__terms-of-use-modal.pf-m-compact {
|
69
|
+
.pf-chatbot__terms-of-use--header {
|
70
|
+
gap: var(--pf-t--global--spacer--md);
|
71
|
+
align-items: flex-start;
|
72
|
+
margin-block-start: var(--pf-t--global--spacer--lg);
|
73
|
+
}
|
74
|
+
|
75
|
+
.pf-chatbot__terms-of-use--modal-header {
|
76
|
+
--pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
77
|
+
--pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
78
|
+
--pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
79
|
+
--pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
80
|
+
}
|
81
|
+
|
82
|
+
.pf-chatbot__terms-of-use--modal-body {
|
83
|
+
--pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
84
|
+
--pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
85
|
+
}
|
86
|
+
}
|
@@ -33,6 +33,8 @@ export interface TermsOfUseProps extends ModalProps {
|
|
33
33
|
innerRef?: React.Ref<HTMLDivElement>;
|
34
34
|
/** OuiaID applied to modal */
|
35
35
|
ouiaId?: string;
|
36
|
+
/** Sets modal to compact styling. */
|
37
|
+
isCompact?: boolean;
|
36
38
|
}
|
37
39
|
|
38
40
|
export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
|
@@ -50,6 +52,7 @@ export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
|
|
50
52
|
children,
|
51
53
|
innerRef,
|
52
54
|
ouiaId = 'TermsOfUse',
|
55
|
+
isCompact,
|
53
56
|
...props
|
54
57
|
}: TermsOfUseProps) => {
|
55
58
|
const handlePrimaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
|
@@ -67,19 +70,21 @@ export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
|
|
67
70
|
ouiaId={ouiaId}
|
68
71
|
aria-labelledby="terms-of-use-title"
|
69
72
|
aria-describedby="terms-of-use-modal"
|
70
|
-
className={`pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${className ? className : ''}`}
|
73
|
+
className={`pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`}
|
71
74
|
displayMode={displayMode}
|
72
75
|
{...props}
|
73
76
|
>
|
74
77
|
{/* This is a workaround since the PatternFly modal doesn't have ref forwarding */}
|
75
78
|
<section className={`pf-chatbot__terms-of-use--section`} aria-label={title} tabIndex={-1} ref={innerRef}>
|
76
|
-
<ModalHeader>
|
79
|
+
<ModalHeader className="pf-chatbot__terms-of-use--modal-header">
|
77
80
|
<div className="pf-chatbot__terms-of-use--header">
|
78
|
-
{image && altText &&
|
81
|
+
{!isCompact && image && altText && (
|
82
|
+
<img src={image} className="pf-chatbot__terms-of-use--image" alt={altText} />
|
83
|
+
)}
|
79
84
|
<h1 className="pf-chatbot__terms-of-use--title">{title}</h1>
|
80
85
|
</div>
|
81
86
|
</ModalHeader>
|
82
|
-
<ModalBody>
|
87
|
+
<ModalBody className="pf-chatbot__terms-of-use--modal-body">
|
83
88
|
<Content>{children}</Content>
|
84
89
|
</ModalBody>
|
85
90
|
<ModalFooter className="pf-chatbot__terms-of-use--footer">
|