@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.
Files changed (26) hide show
  1. package/dist/cjs/Message/Message.js +2 -2
  2. package/dist/cjs/Message/QuickStarts/QuickStartTile.d.ts +2 -0
  3. package/dist/cjs/Message/QuickStarts/QuickStartTile.js +2 -2
  4. package/dist/cjs/SourcesCard/SourcesCard.js +2 -2
  5. package/dist/cjs/TermsOfUse/TermsOfUse.d.ts +2 -0
  6. package/dist/cjs/TermsOfUse/TermsOfUse.js +5 -5
  7. package/dist/css/main.css +21 -0
  8. package/dist/css/main.css.map +1 -1
  9. package/dist/esm/Message/Message.js +2 -2
  10. package/dist/esm/Message/QuickStarts/QuickStartTile.d.ts +2 -0
  11. package/dist/esm/Message/QuickStarts/QuickStartTile.js +2 -2
  12. package/dist/esm/SourcesCard/SourcesCard.js +2 -2
  13. package/dist/esm/TermsOfUse/TermsOfUse.d.ts +2 -0
  14. package/dist/esm/TermsOfUse/TermsOfUse.js +5 -5
  15. package/package.json +1 -1
  16. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickResponses.tsx +24 -0
  17. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx +11 -0
  18. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx +21 -0
  19. package/patternfly-docs/content/extensions/chatbot/examples/UI/TermsOfUseCompact.tsx +136 -0
  20. package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +7 -0
  21. package/src/Message/Message.tsx +2 -1
  22. package/src/Message/QuickStarts/QuickStartTile.tsx +5 -1
  23. package/src/SourcesCard/SourcesCard.scss +8 -0
  24. package/src/SourcesCard/SourcesCard.tsx +2 -1
  25. package/src/TermsOfUse/TermsOfUse.scss +20 -0
  26. 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, null,
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, null,
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,
@@ -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, null,
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, null,
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.5",
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",
@@ -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
  );
@@ -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.
@@ -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 && <img src={image} className="pf-chatbot__terms-of-use--image" alt={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">