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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import type { FunctionComponent } from 'react';
2
- import { ButtonProps, CardProps } from '@patternfly/react-core';
2
+ import { ButtonProps, CardBodyProps, CardFooterProps, CardProps, CardTitleProps, TruncateProps } from '@patternfly/react-core';
3
3
  export interface SourcesCardProps extends CardProps {
4
4
  /** Additional classes for the pagination navigation container. */
5
5
  className?: string;
@@ -13,6 +13,8 @@ export interface SourcesCardProps extends CardProps {
13
13
  sources: {
14
14
  /** Title of sources card */
15
15
  title?: string;
16
+ /** Subtitle of sources card */
17
+ subtitle?: string;
16
18
  /** Link to source */
17
19
  link: string;
18
20
  /** Body of sources card */
@@ -25,6 +27,10 @@ export interface SourcesCardProps extends CardProps {
25
27
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
26
28
  /** Any additional props applied to the title of the Sources card */
27
29
  titleProps?: ButtonProps;
30
+ /** Custom footer applied to the Sources card */
31
+ footer?: React.ReactNode;
32
+ /** Additional props passed to Truncate component */
33
+ truncateProps?: TruncateProps;
28
34
  }[];
29
35
  /** Label for the English word "source" */
30
36
  sourceWord?: string;
@@ -44,6 +50,12 @@ export interface SourcesCardProps extends CardProps {
44
50
  showMoreWords?: string;
45
51
  /** Label for English words "show less" */
46
52
  showLessWords?: string;
53
+ /** Additional props passed to card title */
54
+ cardTitleProps?: CardTitleProps;
55
+ /** Additional props passed to card body */
56
+ cardBodyProps?: CardBodyProps;
57
+ /** Additional props passed to card footer */
58
+ cardFooterProps?: CardFooterProps;
47
59
  }
48
60
  declare const SourcesCard: FunctionComponent<SourcesCardProps>;
49
61
  export default SourcesCard;
@@ -18,7 +18,7 @@ const react_core_1 = require("@patternfly/react-core");
18
18
  const react_icons_1 = require("@patternfly/react-icons");
19
19
  const SourcesCard = (_a) => {
20
20
  var _b;
21
- 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
+ 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, cardTitleProps, cardBodyProps, cardFooterProps } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact", "cardTitleProps", "cardBodyProps", "cardFooterProps"]);
22
22
  const [page, setPage] = (0, react_1.useState)(1);
23
23
  const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
24
24
  const onToggle = (_event, isExpanded) => {
@@ -28,15 +28,15 @@ const SourcesCard = (_a) => {
28
28
  setPage(newPage);
29
29
  onSetPage && onSetPage(_evt, newPage);
30
30
  };
31
- const renderTitle = (title) => {
31
+ const renderTitle = (title, truncateProps) => {
32
32
  if (title) {
33
- return (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: title });
33
+ return (0, jsx_runtime_1.jsx)(react_core_1.Truncate, Object.assign({ content: title }, truncateProps));
34
34
  }
35
35
  return `Source ${page}`;
36
36
  };
37
- return ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__source", children: [(0, jsx_runtime_1.jsx)("span", { children: (0, react_core_1.pluralize)(sources.length, sourceWord, sourceWordPlural) }), (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { className: "pf-chatbot__sources-card-title", children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkSquareAltIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, onClick: (_b = sources[page - 1].onClick) !== null && _b !== void 0 ? _b : undefined }, sources[page - 1].titleProps, { children: renderTitle(sources[page - 1].title) })) }), sources[page - 1].body && ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body`, children: sources[page - 1].hasShowMore ? (
37
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__source", children: [(0, jsx_runtime_1.jsx)("span", { children: (0, react_core_1.pluralize)(sources.length, sourceWord, sourceWordPlural) }), (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, Object.assign({ className: "pf-chatbot__sources-card-title" }, cardTitleProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__sources-card-title-container", children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkSquareAltIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, onClick: (_b = sources[page - 1].onClick) !== null && _b !== void 0 ? _b : undefined }, sources[page - 1].titleProps, { children: renderTitle(sources[page - 1].title, sources[page - 1].truncateProps) })), sources[page - 1].subtitle && ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__sources-card-subtitle", children: sources[page - 1].subtitle }))] }) })), sources[page - 1].body && ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({ className: `pf-chatbot__sources-card-body ${sources[page - 1].footer ? 'pf-chatbot__compact-sources-card-body' : undefined}` }, cardBodyProps, { children: sources[page - 1].hasShowMore ? (
38
38
  // prevents extra VO announcements of button text - parent Message has aria-live
39
- (0, jsx_runtime_1.jsx)("div", { "aria-live": "off", children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, { variant: react_core_1.ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) })), sources.length > 1 && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { className: "pf-chatbot__sources-card-footer-container", children: (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-footer", children: (0, jsx_runtime_1.jsxs)("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
39
+ (0, jsx_runtime_1.jsx)("div", { "aria-live": "off", children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, { variant: react_core_1.ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) }))), sources[page - 1].footer ? ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer" }, cardFooterProps, { children: sources[page - 1].footer }))) : (sources.length > 1 && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer-container" }, cardFooterProps, { children: (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-footer", children: (0, jsx_runtime_1.jsxs)("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
40
40
  const newPage = page >= 1 ? page - 1 : 1;
41
41
  onPreviousClick && onPreviousClick(event, newPage);
42
42
  handleNewPage(event, newPage);
@@ -44,6 +44,6 @@ const SourcesCard = (_a) => {
44
44
  const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
45
45
  onNextClick && onNextClick(event, newPage);
46
46
  handleNewPage(event, newPage);
47
- }, children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { isInline: true, iconSize: "lg", children: (0, jsx_runtime_1.jsx)("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: (0, jsx_runtime_1.jsx)("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }) }) }) })] }) }) }))] }))] }));
47
+ }, children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { isInline: true, iconSize: "lg", children: (0, jsx_runtime_1.jsx)("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: (0, jsx_runtime_1.jsx)("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }) }) }) })] }) }) }))))] }))] }));
48
48
  };
49
49
  exports.default = SourcesCard;
@@ -184,4 +184,53 @@ describe('SourcesCard', () => {
184
184
  (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', titleProps: { className: 'test' } }] }));
185
185
  expect(react_1.screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
186
186
  });
187
+ it('should apply cardTitleProps appropriately', () => {
188
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { cardTitleProps: { 'data-testid': 'card-title', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '' }] }));
189
+ expect(react_1.screen.getByTestId('card-title')).toHaveClass('test');
190
+ });
191
+ it('should apply cardBodyProps appropriately', () => {
192
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { cardBodyProps: { 'data-testid': 'card-body', body: 'To make an apple pie, you must first...', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }] }));
193
+ expect(react_1.screen.getByTestId('card-body')).toHaveClass('test');
194
+ });
195
+ it('should apply cardFooterProps appropriately', () => {
196
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { cardFooterProps: { 'data-testid': 'card-footer', className: 'test' }, sources: [
197
+ { title: 'How to make an apple pie', link: '' },
198
+ { title: 'How to make cookies', link: '' }
199
+ ] }));
200
+ expect(react_1.screen.getByTestId('card-footer')).toHaveClass('test');
201
+ });
202
+ it('should apply truncateProps appropriately', () => {
203
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
204
+ {
205
+ title: 'How to make an apple pie',
206
+ link: '',
207
+ truncateProps: { 'data-testid': 'card-truncate', className: 'test' }
208
+ }
209
+ ] }));
210
+ expect(react_1.screen.getByTestId('card-truncate')).toHaveClass('test');
211
+ });
212
+ it('should apply custom footer appropriately when there is one source', () => {
213
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "I am a custom footer" }) }] }));
214
+ expect(react_1.screen.getByText('I am a custom footer'));
215
+ expect(react_1.screen.queryByText('1/1')).toBeFalsy();
216
+ });
217
+ it('should apply custom footer appropriately when are multiple sources', () => {
218
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [
219
+ { title: 'How to make an apple pie', link: '', footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "I am a custom footer" }) },
220
+ { title: 'How to bake bread', link: '' }
221
+ ] }));
222
+ expect(react_1.screen.getByText('I am a custom footer'));
223
+ // does not show navigation bar
224
+ expect(react_1.screen.queryByText('1/2')).toBeFalsy();
225
+ });
226
+ it('should apply footer props to custom footer appropriately', () => {
227
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { cardFooterProps: { 'data-testid': 'card-footer', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '', footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "I am a custom footer" }) }] }));
228
+ expect(react_1.screen.getByText('I am a custom footer'));
229
+ expect(react_1.screen.getByTestId('card-footer')).toHaveClass('test');
230
+ });
231
+ it('should apply subtitle appropriately', () => {
232
+ (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', subtitle: 'You must first create the universe' }] }));
233
+ expect(react_1.screen.getByText('How to make an apple pie'));
234
+ expect(react_1.screen.getByText('You must first create the universe'));
235
+ });
187
236
  });
package/dist/css/main.css CHANGED
@@ -2148,6 +2148,17 @@
2148
2148
  box-shadow: var(--pf-t--global--box-shadow--sm);
2149
2149
  }
2150
2150
 
2151
+ .pf-chatbot__compact-sources-card-body {
2152
+ --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2153
+ }
2154
+
2155
+ .pf-chatbot__sources-card-subtitle,
2156
+ .pf-chatbot__sources-card-subtle {
2157
+ color: var(--pf-t--global--text--color--subtle);
2158
+ font-size: var(--pf-t--global--font--size--body--sm);
2159
+ font-weight: var(--pf-t--global--font--weight--body--default);
2160
+ }
2161
+
2151
2162
  .pf-chatbot__sources-card-body-text {
2152
2163
  display: block;
2153
2164
  display: -webkit-box;
@@ -2159,6 +2170,12 @@
2159
2170
  text-overflow: ellipsis;
2160
2171
  }
2161
2172
 
2173
+ .pf-chatbot__sources-card-title-container {
2174
+ display: flex;
2175
+ flex-direction: column;
2176
+ gap: var(--pf-t--global--spacer--xs);
2177
+ }
2178
+
2162
2179
  .pf-chatbot__sources-card-footer-container {
2163
2180
  border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
2164
2181
  padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm) !important;
@@ -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/MessageDivider/MessageDivider.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;EACA,YACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAKF;EA9BF;IA+BI;IACA;;;AAIF;EApCF;IAqCI;;;;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;;;AC3IF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACnBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;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;;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;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxQN;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;;;AAIJ;EACE;EACA;;;AC3DF;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;;;AAOA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AClKF;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;EACE;;AAMA;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACxBN;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;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;ACpDN;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;EAQA;EACA;;AAIF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;ACnGF;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;;;AAIA;EACE;EACA;;;AClFJ;EACE;;AAGE;EACE;;;AAMN;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;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AHmCJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AEjIJ;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;;;AAIA;EACE;EACA;;;AEtFJ;EACE;EACA;EACA;EACA;EAGA;;;ADHF;EACE;;AAGE;EACE;;;AAMN;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;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AE1EN;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;;;AASR;EACE;EACA;EACA;EACA;;;ACzCF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AAOJ;EACE;EACA;EACA;EACA;;;ACrDF;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;;;AAOJ;EACE;EACA;EACA;EACA;;;AC1DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;EACA;;;AClCF;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;;;;AAQN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AC1HJ;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;;;AAMJ;EACE;;;AC/CJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKF;EACE;EACA;EAEA;;AAGF;EACE;;AAKF;AAAA;EAEE;;;AFrCN;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;;;;AGhDJ;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;;;AC/CJ;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/MessageDivider/MessageDivider.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;EACA,YACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAKF;EA9BF;IA+BI;IACA;;;AAIF;EApCF;IAqCI;;;;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;;;AC3IF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACnBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;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;;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;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxQN;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;;;AAIJ;EACE;EACA;;;AC3DF;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;;;AAOA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AClKF;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;EACE;;AAMA;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACxBN;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;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;ACpDN;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;EAQA;EACA;;AAIF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;ACnGF;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;;;AAIA;EACE;EACA;;;AClFJ;EACE;;AAGE;EACE;;;AAMN;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;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AHmCJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AEjIJ;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;;;AAIA;EACE;EACA;;;AEtFJ;EACE;EACA;EACA;EACA;EAGA;;;ADHF;EACE;;AAGE;EACE;;;AAMN;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;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AE1EN;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;;;AASR;EACE;EACA;EACA;EACA;;;ACzCF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AAOJ;EACE;EACA;EACA;EACA;;;ACrDF;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;;;AAOJ;EACE;EACA;EACA;EACA;;;AC1DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;EACA;;;AClCF;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;;;;AAQN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AC1HJ;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;;;AAMJ;EACE;;;AC/CJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKF;EACE;EACA;EAEA;;AAGF;EACE;;AAKF;AAAA;EAEE;;;AFrCN;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;;;;AGhDJ;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;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;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;;;ACjGJ;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;;;AC/CJ;EACE;EACA","file":"main.css"}
@@ -1,5 +1,5 @@
1
1
  import type { FunctionComponent } from 'react';
2
- import { ButtonProps, CardProps } from '@patternfly/react-core';
2
+ import { ButtonProps, CardBodyProps, CardFooterProps, CardProps, CardTitleProps, TruncateProps } from '@patternfly/react-core';
3
3
  export interface SourcesCardProps extends CardProps {
4
4
  /** Additional classes for the pagination navigation container. */
5
5
  className?: string;
@@ -13,6 +13,8 @@ export interface SourcesCardProps extends CardProps {
13
13
  sources: {
14
14
  /** Title of sources card */
15
15
  title?: string;
16
+ /** Subtitle of sources card */
17
+ subtitle?: string;
16
18
  /** Link to source */
17
19
  link: string;
18
20
  /** Body of sources card */
@@ -25,6 +27,10 @@ export interface SourcesCardProps extends CardProps {
25
27
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
26
28
  /** Any additional props applied to the title of the Sources card */
27
29
  titleProps?: ButtonProps;
30
+ /** Custom footer applied to the Sources card */
31
+ footer?: React.ReactNode;
32
+ /** Additional props passed to Truncate component */
33
+ truncateProps?: TruncateProps;
28
34
  }[];
29
35
  /** Label for the English word "source" */
30
36
  sourceWord?: string;
@@ -44,6 +50,12 @@ export interface SourcesCardProps extends CardProps {
44
50
  showMoreWords?: string;
45
51
  /** Label for English words "show less" */
46
52
  showLessWords?: string;
53
+ /** Additional props passed to card title */
54
+ cardTitleProps?: CardTitleProps;
55
+ /** Additional props passed to card body */
56
+ cardBodyProps?: CardBodyProps;
57
+ /** Additional props passed to card footer */
58
+ cardFooterProps?: CardFooterProps;
47
59
  }
48
60
  declare const SourcesCard: FunctionComponent<SourcesCardProps>;
49
61
  export default SourcesCard;
@@ -16,7 +16,7 @@ import { Button, ButtonVariant, Card, CardBody, CardFooter, CardTitle, Expandabl
16
16
  import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
17
17
  const SourcesCard = (_a) => {
18
18
  var _b;
19
- 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"]);
19
+ 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, cardTitleProps, cardBodyProps, cardFooterProps } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact", "cardTitleProps", "cardBodyProps", "cardFooterProps"]);
20
20
  const [page, setPage] = useState(1);
21
21
  const [isExpanded, setIsExpanded] = useState(false);
22
22
  const onToggle = (_event, isExpanded) => {
@@ -26,15 +26,15 @@ const SourcesCard = (_a) => {
26
26
  setPage(newPage);
27
27
  onSetPage && onSetPage(_evt, newPage);
28
28
  };
29
- const renderTitle = (title) => {
29
+ const renderTitle = (title, truncateProps) => {
30
30
  if (title) {
31
- return _jsx(Truncate, { content: title });
31
+ return _jsx(Truncate, Object.assign({ content: title }, truncateProps));
32
32
  }
33
33
  return `Source ${page}`;
34
34
  };
35
- return (_jsxs("div", { className: "pf-chatbot__source", children: [_jsx("span", { children: pluralize(sources.length, sourceWord, sourceWordPlural) }), _jsxs(Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [_jsx(CardTitle, { className: "pf-chatbot__sources-card-title", children: _jsx(Button, Object.assign({ component: "a", variant: ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? _jsx(ExternalLinkSquareAltIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, onClick: (_b = sources[page - 1].onClick) !== null && _b !== void 0 ? _b : undefined }, sources[page - 1].titleProps, { children: renderTitle(sources[page - 1].title) })) }), sources[page - 1].body && (_jsx(CardBody, { className: `pf-chatbot__sources-card-body`, children: sources[page - 1].hasShowMore ? (
35
+ return (_jsxs("div", { className: "pf-chatbot__source", children: [_jsx("span", { children: pluralize(sources.length, sourceWord, sourceWordPlural) }), _jsxs(Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [_jsx(CardTitle, Object.assign({ className: "pf-chatbot__sources-card-title" }, cardTitleProps, { children: _jsxs("div", { className: "pf-chatbot__sources-card-title-container", children: [_jsx(Button, Object.assign({ component: "a", variant: ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? _jsx(ExternalLinkSquareAltIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, onClick: (_b = sources[page - 1].onClick) !== null && _b !== void 0 ? _b : undefined }, sources[page - 1].titleProps, { children: renderTitle(sources[page - 1].title, sources[page - 1].truncateProps) })), sources[page - 1].subtitle && (_jsx("span", { className: "pf-chatbot__sources-card-subtitle", children: sources[page - 1].subtitle }))] }) })), sources[page - 1].body && (_jsx(CardBody, Object.assign({ className: `pf-chatbot__sources-card-body ${sources[page - 1].footer ? 'pf-chatbot__compact-sources-card-body' : undefined}` }, cardBodyProps, { children: sources[page - 1].hasShowMore ? (
36
36
  // prevents extra VO announcements of button text - parent Message has aria-live
37
- _jsx("div", { "aria-live": "off", children: _jsx(ExpandableSection, { variant: ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : (_jsx("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) })), sources.length > 1 && (_jsx(CardFooter, { className: "pf-chatbot__sources-card-footer-container", children: _jsx("div", { className: "pf-chatbot__sources-card-footer", children: _jsxs("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [_jsx(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
37
+ _jsx("div", { "aria-live": "off", children: _jsx(ExpandableSection, { variant: ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : (_jsx("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) }))), sources[page - 1].footer ? (_jsx(CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer" }, cardFooterProps, { children: sources[page - 1].footer }))) : (sources.length > 1 && (_jsx(CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer-container" }, cardFooterProps, { children: _jsx("div", { className: "pf-chatbot__sources-card-footer", children: _jsxs("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [_jsx(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
38
38
  const newPage = page >= 1 ? page - 1 : 1;
39
39
  onPreviousClick && onPreviousClick(event, newPage);
40
40
  handleNewPage(event, newPage);
@@ -42,6 +42,6 @@ const SourcesCard = (_a) => {
42
42
  const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
43
43
  onNextClick && onNextClick(event, newPage);
44
44
  handleNewPage(event, newPage);
45
- }, children: _jsx(Icon, { isInline: true, iconSize: "lg", children: _jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _jsx("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }) }) }) })] }) }) }))] }))] }));
45
+ }, children: _jsx(Icon, { isInline: true, iconSize: "lg", children: _jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _jsx("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }) }) }) })] }) }) }))))] }))] }));
46
46
  };
47
47
  export default SourcesCard;
@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
7
7
  step((generator = generator.apply(thisArg, _arguments || [])).next());
8
8
  });
9
9
  };
10
- import { jsx as _jsx } from "react/jsx-runtime";
10
+ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
11
11
  import { render, screen } from '@testing-library/react';
12
12
  import userEvent from '@testing-library/user-event';
13
13
  import '@testing-library/jest-dom';
@@ -179,4 +179,53 @@ describe('SourcesCard', () => {
179
179
  render(_jsx(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '', titleProps: { className: 'test' } }] }));
180
180
  expect(screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
181
181
  });
182
+ it('should apply cardTitleProps appropriately', () => {
183
+ render(_jsx(SourcesCard, { cardTitleProps: { 'data-testid': 'card-title', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '' }] }));
184
+ expect(screen.getByTestId('card-title')).toHaveClass('test');
185
+ });
186
+ it('should apply cardBodyProps appropriately', () => {
187
+ render(_jsx(SourcesCard, { cardBodyProps: { 'data-testid': 'card-body', body: 'To make an apple pie, you must first...', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }] }));
188
+ expect(screen.getByTestId('card-body')).toHaveClass('test');
189
+ });
190
+ it('should apply cardFooterProps appropriately', () => {
191
+ render(_jsx(SourcesCard, { cardFooterProps: { 'data-testid': 'card-footer', className: 'test' }, sources: [
192
+ { title: 'How to make an apple pie', link: '' },
193
+ { title: 'How to make cookies', link: '' }
194
+ ] }));
195
+ expect(screen.getByTestId('card-footer')).toHaveClass('test');
196
+ });
197
+ it('should apply truncateProps appropriately', () => {
198
+ render(_jsx(SourcesCard, { sources: [
199
+ {
200
+ title: 'How to make an apple pie',
201
+ link: '',
202
+ truncateProps: { 'data-testid': 'card-truncate', className: 'test' }
203
+ }
204
+ ] }));
205
+ expect(screen.getByTestId('card-truncate')).toHaveClass('test');
206
+ });
207
+ it('should apply custom footer appropriately when there is one source', () => {
208
+ render(_jsx(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '', footer: _jsx(_Fragment, { children: "I am a custom footer" }) }] }));
209
+ expect(screen.getByText('I am a custom footer'));
210
+ expect(screen.queryByText('1/1')).toBeFalsy();
211
+ });
212
+ it('should apply custom footer appropriately when are multiple sources', () => {
213
+ render(_jsx(SourcesCard, { sources: [
214
+ { title: 'How to make an apple pie', link: '', footer: _jsx(_Fragment, { children: "I am a custom footer" }) },
215
+ { title: 'How to bake bread', link: '' }
216
+ ] }));
217
+ expect(screen.getByText('I am a custom footer'));
218
+ // does not show navigation bar
219
+ expect(screen.queryByText('1/2')).toBeFalsy();
220
+ });
221
+ it('should apply footer props to custom footer appropriately', () => {
222
+ render(_jsx(SourcesCard, { cardFooterProps: { 'data-testid': 'card-footer', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '', footer: _jsx(_Fragment, { children: "I am a custom footer" }) }] }));
223
+ expect(screen.getByText('I am a custom footer'));
224
+ expect(screen.getByTestId('card-footer')).toHaveClass('test');
225
+ });
226
+ it('should apply subtitle appropriately', () => {
227
+ render(_jsx(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '', subtitle: 'You must first create the universe' }] }));
228
+ expect(screen.getByText('How to make an apple pie'));
229
+ expect(screen.getByText('You must first create the universe'));
230
+ });
182
231
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/chatbot",
3
- "version": "6.4.0-prerelease.15",
3
+ "version": "6.4.0-prerelease.16",
4
4
  "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -53,7 +53,7 @@
53
53
  "react-dom": "^18 || ^19"
54
54
  },
55
55
  "devDependencies": {
56
- "@patternfly/documentation-framework": "6.16.0",
56
+ "@patternfly/documentation-framework": "6.19.0",
57
57
  "@patternfly/patternfly": "^6.1.0",
58
58
  "@patternfly/patternfly-a11y": "^5.0.0",
59
59
  "@types/dom-speech-recognition": "^0.0.4",
@@ -1,6 +1,8 @@
1
1
  import { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
2
2
  import Message from '@patternfly/chatbot/dist/dynamic/Message';
3
3
  import patternflyAvatar from './patternfly_avatar.jpg';
4
+ import { Button, Flex, FlexItem, Label, Popover } from '@patternfly/react-core';
5
+ import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
4
6
 
5
7
  export const MessageWithSourcesExample: FunctionComponent = () => {
6
8
  const onSetPage = (_event: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
@@ -8,8 +10,76 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
8
10
  console.log(`Page changed to ${newPage}`);
9
11
  };
10
12
 
13
+ const date = new Date();
14
+
15
+ const datePart = date.toLocaleDateString('en', {
16
+ year: 'numeric',
17
+ month: 'short',
18
+ day: 'numeric'
19
+ });
20
+
21
+ const timePart = date.toLocaleTimeString('en', {
22
+ hour: '2-digit',
23
+ minute: '2-digit',
24
+ hour12: true
25
+ });
26
+
27
+ const formattedDate = `${datePart}, ${timePart}`;
28
+
11
29
  return (
12
30
  <>
31
+ <Message
32
+ name="Bot"
33
+ role="bot"
34
+ avatar={patternflyAvatar}
35
+ content="This example has a custom subtitle and footer with no pagination"
36
+ sources={{
37
+ sources: [
38
+ {
39
+ title: 'Getting started with Red Hat OpenShift',
40
+ subtitle: 'Red Hat knowledge base',
41
+ link: '#',
42
+ body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
43
+ isExternal: true,
44
+ footer: (
45
+ <Flex className="pf-chatbot__sources-card-subtle" gap={{ default: 'gapXs' }}>
46
+ <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
47
+ <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
48
+ <FlexItem>
49
+ <Label color="green">Confidence 93%</Label>
50
+ </FlexItem>
51
+ <FlexItem>
52
+ <Popover
53
+ headerContent={
54
+ <Flex gap={{ default: 'gapXs' }}>
55
+ <FlexItem>
56
+ <OutlinedQuestionCircleIcon />
57
+ </FlexItem>
58
+ <FlexItem>Why this confidence score?</FlexItem>
59
+ </Flex>
60
+ }
61
+ bodyContent={
62
+ <>
63
+ A high confidence score indicates a strong match. The system found significant overlap in
64
+ key data points, including text content, names, dates, and organizational details, with a
65
+ high degree of certainty. This match is highly reliable.
66
+ </>
67
+ }
68
+ >
69
+ <Button variant="link" icon={<OutlinedQuestionCircleIcon />}>
70
+ Learn about this score
71
+ </Button>
72
+ </Popover>
73
+ </FlexItem>
74
+ </Flex>
75
+ </FlexItem>
76
+ <FlexItem>{`Last updated: ${formattedDate}`}</FlexItem>
77
+ </Flex>
78
+ )
79
+ }
80
+ ]
81
+ }}
82
+ />
13
83
  <Message
14
84
  name="Bot"
15
85
  role="bot"
@@ -34,7 +34,7 @@ import Message from '@patternfly/chatbot/dist/dynamic/Message';
34
34
  import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';
35
35
  import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
36
36
  import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
37
- import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, RedoIcon, RobotIcon } from '@patternfly/react-icons';
37
+ import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, OutlinedQuestionCircleIcon, RedoIcon, RobotIcon } from '@patternfly/react-icons';
38
38
  import patternflyAvatar from './patternfly_avatar.jpg';
39
39
  import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
40
40
  import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails';
@@ -2,7 +2,7 @@
2
2
  module.exports = {
3
3
  sideNavItems: [{ section: 'PatternFly-AI' }],
4
4
  topNavItems: [],
5
- hasDarkThemeSwitcher: true,
5
+ hasThemeSwitcher: true,
6
6
  hasRTLSwitcher: true,
7
7
  port: 8006
8
8
  };
@@ -16,6 +16,17 @@
16
16
  box-shadow: var(--pf-t--global--box-shadow--sm);
17
17
  }
18
18
 
19
+ .pf-chatbot__compact-sources-card-body {
20
+ --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
21
+ }
22
+
23
+ .pf-chatbot__sources-card-subtitle,
24
+ .pf-chatbot__sources-card-subtle {
25
+ color: var(--pf-t--global--text--color--subtle);
26
+ font-size: var(--pf-t--global--font--size--body--sm);
27
+ font-weight: var(--pf-t--global--font--weight--body--default);
28
+ }
29
+
19
30
  .pf-chatbot__sources-card-body-text {
20
31
  display: block;
21
32
  display: -webkit-box;
@@ -27,6 +38,12 @@
27
38
  text-overflow: ellipsis;
28
39
  }
29
40
 
41
+ .pf-chatbot__sources-card-title-container {
42
+ display: flex;
43
+ flex-direction: column;
44
+ gap: var(--pf-t--global--spacer--xs);
45
+ }
46
+
30
47
  .pf-chatbot__sources-card-footer-container {
31
48
  border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
32
49
  padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--sm)
@@ -256,4 +256,97 @@ describe('SourcesCard', () => {
256
256
  );
257
257
  expect(screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
258
258
  });
259
+
260
+ it('should apply cardTitleProps appropriately', () => {
261
+ render(
262
+ <SourcesCard
263
+ cardTitleProps={{ 'data-testid': 'card-title', className: 'test' } as any}
264
+ sources={[{ title: 'How to make an apple pie', link: '' }]}
265
+ />
266
+ );
267
+ expect(screen.getByTestId('card-title')).toHaveClass('test');
268
+ });
269
+
270
+ it('should apply cardBodyProps appropriately', () => {
271
+ render(
272
+ <SourcesCard
273
+ cardBodyProps={
274
+ { 'data-testid': 'card-body', body: 'To make an apple pie, you must first...', className: 'test' } as any
275
+ }
276
+ sources={[{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }]}
277
+ />
278
+ );
279
+ expect(screen.getByTestId('card-body')).toHaveClass('test');
280
+ });
281
+
282
+ it('should apply cardFooterProps appropriately', () => {
283
+ render(
284
+ <SourcesCard
285
+ cardFooterProps={{ 'data-testid': 'card-footer', className: 'test' } as any}
286
+ sources={[
287
+ { title: 'How to make an apple pie', link: '' },
288
+ { title: 'How to make cookies', link: '' }
289
+ ]}
290
+ />
291
+ );
292
+ expect(screen.getByTestId('card-footer')).toHaveClass('test');
293
+ });
294
+
295
+ it('should apply truncateProps appropriately', () => {
296
+ render(
297
+ <SourcesCard
298
+ sources={[
299
+ {
300
+ title: 'How to make an apple pie',
301
+ link: '',
302
+ truncateProps: { 'data-testid': 'card-truncate', className: 'test' } as any
303
+ }
304
+ ]}
305
+ />
306
+ );
307
+ expect(screen.getByTestId('card-truncate')).toHaveClass('test');
308
+ });
309
+
310
+ it('should apply custom footer appropriately when there is one source', () => {
311
+ render(
312
+ <SourcesCard sources={[{ title: 'How to make an apple pie', link: '', footer: <>I am a custom footer</> }]} />
313
+ );
314
+ expect(screen.getByText('I am a custom footer'));
315
+ expect(screen.queryByText('1/1')).toBeFalsy();
316
+ });
317
+
318
+ it('should apply custom footer appropriately when are multiple sources', () => {
319
+ render(
320
+ <SourcesCard
321
+ sources={[
322
+ { title: 'How to make an apple pie', link: '', footer: <>I am a custom footer</> },
323
+ { title: 'How to bake bread', link: '' }
324
+ ]}
325
+ />
326
+ );
327
+ expect(screen.getByText('I am a custom footer'));
328
+ // does not show navigation bar
329
+ expect(screen.queryByText('1/2')).toBeFalsy();
330
+ });
331
+
332
+ it('should apply footer props to custom footer appropriately', () => {
333
+ render(
334
+ <SourcesCard
335
+ cardFooterProps={{ 'data-testid': 'card-footer', className: 'test' } as any}
336
+ sources={[{ title: 'How to make an apple pie', link: '', footer: <>I am a custom footer</> }]}
337
+ />
338
+ );
339
+ expect(screen.getByText('I am a custom footer'));
340
+ expect(screen.getByTestId('card-footer')).toHaveClass('test');
341
+ });
342
+
343
+ it('should apply subtitle appropriately', () => {
344
+ render(
345
+ <SourcesCard
346
+ sources={[{ title: 'How to make an apple pie', link: '', subtitle: 'You must first create the universe' }]}
347
+ />
348
+ );
349
+ expect(screen.getByText('How to make an apple pie'));
350
+ expect(screen.getByText('You must first create the universe'));
351
+ });
259
352
  });
@@ -10,14 +10,18 @@ import {
10
10
  ButtonVariant,
11
11
  Card,
12
12
  CardBody,
13
+ CardBodyProps,
13
14
  CardFooter,
15
+ CardFooterProps,
14
16
  CardProps,
15
17
  CardTitle,
18
+ CardTitleProps,
16
19
  ExpandableSection,
17
20
  ExpandableSectionVariant,
18
21
  Icon,
19
22
  pluralize,
20
- Truncate
23
+ Truncate,
24
+ TruncateProps
21
25
  } from '@patternfly/react-core';
22
26
  import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
23
27
 
@@ -34,6 +38,8 @@ export interface SourcesCardProps extends CardProps {
34
38
  sources: {
35
39
  /** Title of sources card */
36
40
  title?: string;
41
+ /** Subtitle of sources card */
42
+ subtitle?: string;
37
43
  /** Link to source */
38
44
  link: string;
39
45
  /** Body of sources card */
@@ -46,6 +52,10 @@ export interface SourcesCardProps extends CardProps {
46
52
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
47
53
  /** Any additional props applied to the title of the Sources card */
48
54
  titleProps?: ButtonProps;
55
+ /** Custom footer applied to the Sources card */
56
+ footer?: React.ReactNode;
57
+ /** Additional props passed to Truncate component */
58
+ truncateProps?: TruncateProps;
49
59
  }[];
50
60
  /** Label for the English word "source" */
51
61
  sourceWord?: string;
@@ -65,6 +75,12 @@ export interface SourcesCardProps extends CardProps {
65
75
  showMoreWords?: string;
66
76
  /** Label for English words "show less" */
67
77
  showLessWords?: string;
78
+ /** Additional props passed to card title */
79
+ cardTitleProps?: CardTitleProps;
80
+ /** Additional props passed to card body */
81
+ cardBodyProps?: CardBodyProps;
82
+ /** Additional props passed to card footer */
83
+ cardFooterProps?: CardFooterProps;
68
84
  }
69
85
 
70
86
  const SourcesCard: FunctionComponent<SourcesCardProps> = ({
@@ -82,6 +98,9 @@ const SourcesCard: FunctionComponent<SourcesCardProps> = ({
82
98
  showMoreWords = 'show more',
83
99
  showLessWords = 'show less',
84
100
  isCompact,
101
+ cardTitleProps,
102
+ cardBodyProps,
103
+ cardFooterProps,
85
104
  ...props
86
105
  }: SourcesCardProps) => {
87
106
  const [page, setPage] = useState(1);
@@ -96,9 +115,9 @@ const SourcesCard: FunctionComponent<SourcesCardProps> = ({
96
115
  onSetPage && onSetPage(_evt, newPage);
97
116
  };
98
117
 
99
- const renderTitle = (title?: string) => {
118
+ const renderTitle = (title?: string, truncateProps?: TruncateProps) => {
100
119
  if (title) {
101
- return <Truncate content={title} />;
120
+ return <Truncate content={title} {...truncateProps} />;
102
121
  }
103
122
  return `Source ${page}`;
104
123
  };
@@ -107,24 +126,32 @@ const SourcesCard: FunctionComponent<SourcesCardProps> = ({
107
126
  <div className="pf-chatbot__source">
108
127
  <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
109
128
  <Card isCompact={isCompact} className="pf-chatbot__sources-card" {...props}>
110
- <CardTitle className="pf-chatbot__sources-card-title">
111
- <Button
112
- component="a"
113
- variant={ButtonVariant.link}
114
- href={sources[page - 1].link}
115
- icon={sources[page - 1].isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
116
- iconPosition="end"
117
- isInline
118
- rel={sources[page - 1].isExternal ? 'noreferrer' : undefined}
119
- target={sources[page - 1].isExternal ? '_blank' : undefined}
120
- onClick={sources[page - 1].onClick ?? undefined}
121
- {...sources[page - 1].titleProps}
122
- >
123
- {renderTitle(sources[page - 1].title)}
124
- </Button>
129
+ <CardTitle className="pf-chatbot__sources-card-title" {...cardTitleProps}>
130
+ <div className="pf-chatbot__sources-card-title-container">
131
+ <Button
132
+ component="a"
133
+ variant={ButtonVariant.link}
134
+ href={sources[page - 1].link}
135
+ icon={sources[page - 1].isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
136
+ iconPosition="end"
137
+ isInline
138
+ rel={sources[page - 1].isExternal ? 'noreferrer' : undefined}
139
+ target={sources[page - 1].isExternal ? '_blank' : undefined}
140
+ onClick={sources[page - 1].onClick ?? undefined}
141
+ {...sources[page - 1].titleProps}
142
+ >
143
+ {renderTitle(sources[page - 1].title, sources[page - 1].truncateProps)}
144
+ </Button>
145
+ {sources[page - 1].subtitle && (
146
+ <span className="pf-chatbot__sources-card-subtitle">{sources[page - 1].subtitle}</span>
147
+ )}
148
+ </div>
125
149
  </CardTitle>
126
150
  {sources[page - 1].body && (
127
- <CardBody className={`pf-chatbot__sources-card-body`}>
151
+ <CardBody
152
+ className={`pf-chatbot__sources-card-body ${sources[page - 1].footer ? 'pf-chatbot__compact-sources-card-body' : undefined}`}
153
+ {...cardBodyProps}
154
+ >
128
155
  {sources[page - 1].hasShowMore ? (
129
156
  // prevents extra VO announcements of button text - parent Message has aria-live
130
157
  <div aria-live="off">
@@ -143,68 +170,77 @@ const SourcesCard: FunctionComponent<SourcesCardProps> = ({
143
170
  )}
144
171
  </CardBody>
145
172
  )}
146
- {sources.length > 1 && (
147
- <CardFooter className="pf-chatbot__sources-card-footer-container">
148
- <div className="pf-chatbot__sources-card-footer">
149
- <nav className={`pf-chatbot__sources-card-footer-buttons ${className}`} aria-label={paginationAriaLabel}>
150
- <Button
151
- variant={ButtonVariant.plain}
152
- isDisabled={isDisabled || page === 1}
153
- data-action="previous"
154
- onClick={(event) => {
155
- const newPage = page >= 1 ? page - 1 : 1;
156
- onPreviousClick && onPreviousClick(event, newPage);
157
- handleNewPage(event, newPage);
158
- }}
159
- aria-label={toPreviousPageAriaLabel}
160
- >
161
- <Icon iconSize="lg">
162
- {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
163
- <svg
164
- className="pf-v6-svg"
165
- viewBox="0 0 280 500"
166
- fill="currentColor"
167
- aria-hidden="true"
168
- role="img"
169
- width="1em"
170
- height="1em"
171
- >
172
- <path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path>
173
- </svg>
174
- </Icon>
175
- </Button>
176
- <span aria-hidden="true">
177
- {page}/{sources.length}
178
- </span>
179
- <Button
180
- variant={ButtonVariant.plain}
181
- isDisabled={isDisabled || page === sources.length}
182
- aria-label={toNextPageAriaLabel}
183
- data-action="next"
184
- onClick={(event) => {
185
- const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
186
- onNextClick && onNextClick(event, newPage);
187
- handleNewPage(event, newPage);
188
- }}
189
- >
190
- <Icon isInline iconSize="lg">
191
- {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
192
- <svg
193
- className="pf-v6-svg"
194
- viewBox="0 0 180 500"
195
- fill="currentColor"
196
- aria-hidden="true"
197
- role="img"
198
- width="1em"
199
- height="1em"
200
- >
201
- <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
202
- </svg>
203
- </Icon>
204
- </Button>
205
- </nav>
206
- </div>
173
+ {sources[page - 1].footer ? (
174
+ <CardFooter className="pf-chatbot__sources-card-footer" {...cardFooterProps}>
175
+ {sources[page - 1].footer}
207
176
  </CardFooter>
177
+ ) : (
178
+ sources.length > 1 && (
179
+ <CardFooter className="pf-chatbot__sources-card-footer-container" {...cardFooterProps}>
180
+ <div className="pf-chatbot__sources-card-footer">
181
+ <nav
182
+ className={`pf-chatbot__sources-card-footer-buttons ${className}`}
183
+ aria-label={paginationAriaLabel}
184
+ >
185
+ <Button
186
+ variant={ButtonVariant.plain}
187
+ isDisabled={isDisabled || page === 1}
188
+ data-action="previous"
189
+ onClick={(event) => {
190
+ const newPage = page >= 1 ? page - 1 : 1;
191
+ onPreviousClick && onPreviousClick(event, newPage);
192
+ handleNewPage(event, newPage);
193
+ }}
194
+ aria-label={toPreviousPageAriaLabel}
195
+ >
196
+ <Icon iconSize="lg">
197
+ {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
198
+ <svg
199
+ className="pf-v6-svg"
200
+ viewBox="0 0 280 500"
201
+ fill="currentColor"
202
+ aria-hidden="true"
203
+ role="img"
204
+ width="1em"
205
+ height="1em"
206
+ >
207
+ <path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path>
208
+ </svg>
209
+ </Icon>
210
+ </Button>
211
+ <span aria-hidden="true">
212
+ {page}/{sources.length}
213
+ </span>
214
+ <Button
215
+ variant={ButtonVariant.plain}
216
+ isDisabled={isDisabled || page === sources.length}
217
+ aria-label={toNextPageAriaLabel}
218
+ data-action="next"
219
+ onClick={(event) => {
220
+ const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
221
+ onNextClick && onNextClick(event, newPage);
222
+ handleNewPage(event, newPage);
223
+ }}
224
+ >
225
+ <Icon isInline iconSize="lg">
226
+ {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
227
+ <svg
228
+ className="pf-v6-svg"
229
+ viewBox="0 0 180 500"
230
+ fill="currentColor"
231
+ aria-hidden="true"
232
+ role="img"
233
+ width="1em"
234
+ height="1em"
235
+ >
236
+ <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
237
+ </svg>
238
+ </Icon>
239
+ </Button>
240
+ </nav>
241
+ </div>
242
+ </CardFooter>
243
+ )
208
244
  )}
209
245
  </Card>
210
246
  </div>