@patternfly/chatbot 2.2.0-prerelease.20 → 2.2.0-prerelease.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Message/Message.d.ts +3 -0
- package/dist/cjs/Message/Message.js +22 -5
- package/dist/cjs/Message/Message.test.js +94 -0
- package/dist/cjs/Message/TableMessage/TableMessage.d.ts +20 -0
- package/dist/cjs/Message/TableMessage/TableMessage.js +67 -0
- package/dist/cjs/Message/TableMessage/TbodyMessage.d.ts +7 -0
- package/dist/cjs/Message/TableMessage/TbodyMessage.js +33 -0
- package/dist/cjs/Message/TableMessage/TdMessage.d.ts +5 -0
- package/dist/cjs/Message/TableMessage/TdMessage.js +26 -0
- package/dist/cjs/Message/TableMessage/ThMessage.d.ts +5 -0
- package/dist/cjs/Message/TableMessage/ThMessage.js +26 -0
- package/dist/cjs/Message/TableMessage/TheadMessage.d.ts +5 -0
- package/dist/cjs/Message/TableMessage/TheadMessage.js +26 -0
- package/dist/cjs/Message/TableMessage/TrMessage.d.ts +7 -0
- package/dist/cjs/Message/TableMessage/TrMessage.js +37 -0
- package/dist/cjs/MessageBar/MessageBar.d.ts +4 -1
- package/dist/cjs/MessageBar/MessageBar.js +125 -39
- package/dist/css/main.css +59 -17
- package/dist/css/main.css.map +1 -1
- package/dist/esm/Message/Message.d.ts +3 -0
- package/dist/esm/Message/Message.js +22 -5
- package/dist/esm/Message/Message.test.js +94 -0
- package/dist/esm/Message/TableMessage/TableMessage.d.ts +20 -0
- package/dist/esm/Message/TableMessage/TableMessage.js +62 -0
- package/dist/esm/Message/TableMessage/TbodyMessage.d.ts +7 -0
- package/dist/esm/Message/TableMessage/TbodyMessage.js +28 -0
- package/dist/esm/Message/TableMessage/TdMessage.d.ts +5 -0
- package/dist/esm/Message/TableMessage/TdMessage.js +21 -0
- package/dist/esm/Message/TableMessage/ThMessage.d.ts +5 -0
- package/dist/esm/Message/TableMessage/ThMessage.js +21 -0
- package/dist/esm/Message/TableMessage/TheadMessage.d.ts +5 -0
- package/dist/esm/Message/TableMessage/TheadMessage.js +21 -0
- package/dist/esm/Message/TableMessage/TrMessage.d.ts +7 -0
- package/dist/esm/Message/TableMessage/TrMessage.js +32 -0
- package/dist/esm/MessageBar/MessageBar.d.ts +4 -1
- package/dist/esm/MessageBar/MessageBar.js +125 -39
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +27 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx +27 -1
- package/src/Message/Message.test.tsx +99 -0
- package/src/Message/Message.tsx +25 -4
- package/src/Message/TableMessage/TableMessage.scss +23 -0
- package/src/Message/TableMessage/TableMessage.tsx +83 -0
- package/src/Message/TableMessage/TbodyMessage.tsx +20 -0
- package/src/Message/TableMessage/TdMessage.tsx +11 -0
- package/src/Message/TableMessage/ThMessage.tsx +11 -0
- package/src/Message/TableMessage/TheadMessage.tsx +11 -0
- package/src/Message/TableMessage/TrMessage.tsx +27 -0
- package/src/Message/TextMessage/TextMessage.scss +5 -0
- package/src/MessageBar/MessageBar.scss +35 -18
- package/src/MessageBar/MessageBar.tsx +144 -53
- package/src/main.scss +1 -0
@@ -6,6 +6,7 @@ import { QuickStart, QuickstartAction } from './QuickStarts/types';
|
|
6
6
|
import QuickResponse from './QuickResponse/QuickResponse';
|
7
7
|
import { UserFeedbackProps } from './UserFeedback/UserFeedback';
|
8
8
|
import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
|
9
|
+
import { TableProps } from '@patternfly/react-table';
|
9
10
|
export interface MessageAttachment {
|
10
11
|
/** Name of file attached to the message */
|
11
12
|
name: string;
|
@@ -84,6 +85,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
|
|
84
85
|
isLiveRegion?: boolean;
|
85
86
|
/** Ref applied to message */
|
86
87
|
innerRef?: React.Ref<HTMLDivElement>;
|
88
|
+
/** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
|
89
|
+
tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
|
87
90
|
}
|
88
91
|
export declare const MessageBase: React.FunctionComponent<MessageProps>;
|
89
92
|
declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
@@ -35,8 +35,14 @@ const QuickStartTile_1 = __importDefault(require("./QuickStarts/QuickStartTile")
|
|
35
35
|
const QuickResponse_1 = __importDefault(require("./QuickResponse/QuickResponse"));
|
36
36
|
const UserFeedback_1 = __importDefault(require("./UserFeedback/UserFeedback"));
|
37
37
|
const UserFeedbackComplete_1 = __importDefault(require("./UserFeedback/UserFeedbackComplete"));
|
38
|
+
const TableMessage_1 = __importDefault(require("./TableMessage/TableMessage"));
|
39
|
+
const TrMessage_1 = __importDefault(require("./TableMessage/TrMessage"));
|
40
|
+
const TdMessage_1 = __importDefault(require("./TableMessage/TdMessage"));
|
41
|
+
const TbodyMessage_1 = __importDefault(require("./TableMessage/TbodyMessage"));
|
42
|
+
const TheadMessage_1 = __importDefault(require("./TableMessage/TheadMessage"));
|
43
|
+
const ThMessage_1 = __importDefault(require("./TableMessage/ThMessage"));
|
38
44
|
const MessageBase = (_a) => {
|
39
|
-
var { role, content, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef"]);
|
45
|
+
var { role, content, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps"]);
|
40
46
|
let avatarClassName;
|
41
47
|
if (avatarProps && 'className' in avatarProps) {
|
42
48
|
const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
|
@@ -62,16 +68,27 @@ const MessageBase = (_a) => {
|
|
62
68
|
var { children } = _a, props = __rest(_a, ["children"]);
|
63
69
|
return (react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, props, codeBlockProps), children));
|
64
70
|
},
|
65
|
-
ul: UnorderedListMessage_1.default,
|
66
|
-
ol: (props) => react_1.default.createElement(OrderedListMessage_1.default, Object.assign({}, props)),
|
67
|
-
li: ListItemMessage_1.default,
|
68
71
|
h1: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h1 }, props)),
|
69
72
|
h2: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h2 }, props)),
|
70
73
|
h3: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h3 }, props)),
|
71
74
|
h4: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h4 }, props)),
|
72
75
|
h5: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h5 }, props)),
|
73
76
|
h6: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h6 }, props)),
|
74
|
-
blockquote: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props))
|
77
|
+
blockquote: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props)),
|
78
|
+
ul: (props) => react_1.default.createElement(UnorderedListMessage_1.default, Object.assign({}, props)),
|
79
|
+
ol: (props) => react_1.default.createElement(OrderedListMessage_1.default, Object.assign({}, props)),
|
80
|
+
li: (props) => react_1.default.createElement(ListItemMessage_1.default, Object.assign({}, props)),
|
81
|
+
table: (props) => react_1.default.createElement(TableMessage_1.default, Object.assign({}, props, tableProps)),
|
82
|
+
tbody: (props) => react_1.default.createElement(TbodyMessage_1.default, Object.assign({}, props)),
|
83
|
+
thead: (props) => react_1.default.createElement(TheadMessage_1.default, Object.assign({}, props)),
|
84
|
+
tr: (props) => react_1.default.createElement(TrMessage_1.default, Object.assign({}, props)),
|
85
|
+
td: (props) => {
|
86
|
+
// Conflicts with Td type
|
87
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
88
|
+
const { width } = props, rest = __rest(props, ["width"]);
|
89
|
+
return react_1.default.createElement(TdMessage_1.default, Object.assign({}, rest));
|
90
|
+
},
|
91
|
+
th: (props) => react_1.default.createElement(ThMessage_1.default, Object.assign({}, props))
|
75
92
|
}, remarkPlugins: [remark_gfm_1.default] }, content)),
|
76
93
|
!isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources)),
|
77
94
|
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 })),
|
@@ -93,6 +93,50 @@ const HEADING = `
|
|
93
93
|
const BLOCK_QUOTES = `> Blockquotes can also be nested...
|
94
94
|
>> ...by using additional greater-than signs (>) right next to each other...
|
95
95
|
> > > ...or with spaces between each sign.`;
|
96
|
+
const TABLE = `
|
97
|
+
|
98
|
+
| Column 1 | Column 2 |
|
99
|
+
|-|-|
|
100
|
+
| Cell 1 | Cell 2 |
|
101
|
+
| Cell 3 | Cell 4 |
|
102
|
+
|
103
|
+
`;
|
104
|
+
const ONE_COLUMN_TABLE = `
|
105
|
+
|
106
|
+
| Column 1 |
|
107
|
+
|-|
|
108
|
+
| Cell 1 |
|
109
|
+
| Cell 2 |
|
110
|
+
|
111
|
+
`;
|
112
|
+
const ONE_CELL_TABLE = `
|
113
|
+
|
114
|
+
| Column 1 |
|
115
|
+
|-|
|
116
|
+
| Cell 1 |
|
117
|
+
|
118
|
+
`;
|
119
|
+
const HEADERLESS_TABLE = `
|
120
|
+
|
121
|
+
| |
|
122
|
+
|-|
|
123
|
+
| Cell 1 |
|
124
|
+
|
125
|
+
`;
|
126
|
+
const CHILDLESS_TABLE = `
|
127
|
+
|
128
|
+
| Column 1 |
|
129
|
+
|-|
|
130
|
+
| |
|
131
|
+
|
132
|
+
`;
|
133
|
+
const EMPTY_TABLE = `
|
134
|
+
|
135
|
+
| |
|
136
|
+
|-|
|
137
|
+
| |
|
138
|
+
|
139
|
+
`;
|
96
140
|
const checkListItemsRendered = () => {
|
97
141
|
const items = ['Item 1', 'Item 2', 'Item 3'];
|
98
142
|
expect(react_2.screen.getAllByRole('listitem')).toHaveLength(3);
|
@@ -418,4 +462,54 @@ describe('Message', () => {
|
|
418
462
|
expect(react_2.screen.getByRole('heading', { name: /h5 Heading/i })).toBeTruthy();
|
419
463
|
expect(react_2.screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
|
420
464
|
});
|
465
|
+
it('should render table correctly', () => {
|
466
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE }));
|
467
|
+
expect(react_2.screen.getByRole('row', { name: /Column 1 Column 2/i })).toBeTruthy();
|
468
|
+
expect(react_2.screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toBeTruthy();
|
469
|
+
expect(react_2.screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toBeTruthy();
|
470
|
+
expect(react_2.screen.getByRole('columnheader', { name: /Column 1/i })).toBeTruthy();
|
471
|
+
expect(react_2.screen.getByRole('columnheader', { name: /Column 2/i })).toBeTruthy();
|
472
|
+
expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).toBeTruthy();
|
473
|
+
expect(react_2.screen.getByRole('cell', { name: /Cell 2/i })).toBeTruthy();
|
474
|
+
expect(react_2.screen.getByRole('cell', { name: /Cell 3/i })).toBeTruthy();
|
475
|
+
expect(react_2.screen.getByRole('cell', { name: /Cell 4/i })).toBeTruthy();
|
476
|
+
});
|
477
|
+
it('should render table data labels correctly for mobile breakpoint', () => {
|
478
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE }));
|
479
|
+
expect(react_2.screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
|
480
|
+
expect(react_2.screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
|
481
|
+
expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
|
482
|
+
expect(react_2.screen.getByRole('cell', { name: /Cell 2/i })).toHaveAttribute('data-label', 'Column 2');
|
483
|
+
expect(react_2.screen.getByRole('cell', { name: /Cell 3/i })).toHaveAttribute('data-label', 'Column 1');
|
484
|
+
expect(react_2.screen.getByRole('cell', { name: /Cell 4/i })).toHaveAttribute('data-label', 'Column 2');
|
485
|
+
});
|
486
|
+
it('should render table data labels correctly for mobile breakpoint for one column table', () => {
|
487
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ONE_COLUMN_TABLE }));
|
488
|
+
expect(react_2.screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
|
489
|
+
expect(react_2.screen.getByRole('row', { name: /Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1');
|
490
|
+
expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
|
491
|
+
expect(react_2.screen.getByRole('cell', { name: /Cell 2/i })).toHaveAttribute('data-label', 'Column 1');
|
492
|
+
});
|
493
|
+
it('should render table data labels correctly for mobile breakpoint for one cell table', () => {
|
494
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ONE_CELL_TABLE }));
|
495
|
+
expect(react_2.screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
|
496
|
+
expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
|
497
|
+
});
|
498
|
+
it('should render table data labels correctly for mobile breakpoint for headerless', () => {
|
499
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: HEADERLESS_TABLE }));
|
500
|
+
expect(react_2.screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', '');
|
501
|
+
expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).not.toHaveAttribute('data-label');
|
502
|
+
});
|
503
|
+
it('should render table data labels correctly for mobile breakpoint for childless', () => {
|
504
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CHILDLESS_TABLE }));
|
505
|
+
expect(react_2.screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', 'Column 1');
|
506
|
+
});
|
507
|
+
it('should render table data labels correctly for mobile breakpoint for empty', () => {
|
508
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: EMPTY_TABLE }));
|
509
|
+
expect(react_2.screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', '');
|
510
|
+
});
|
511
|
+
it('should render custom table aria label correctly', () => {
|
512
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE, tableProps: { 'aria-label': 'Test' } }));
|
513
|
+
expect(react_2.screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
|
514
|
+
});
|
421
515
|
});
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ExtraProps } from 'react-markdown';
|
3
|
+
import { TableProps } from '@patternfly/react-table';
|
4
|
+
interface Properties {
|
5
|
+
line: number;
|
6
|
+
column: number;
|
7
|
+
offset: number;
|
8
|
+
}
|
9
|
+
export interface TableNode {
|
10
|
+
children?: TableNode[];
|
11
|
+
value?: string;
|
12
|
+
position: {
|
13
|
+
start: Properties;
|
14
|
+
end: Properties;
|
15
|
+
};
|
16
|
+
tagName: string;
|
17
|
+
type: string;
|
18
|
+
}
|
19
|
+
declare const TableMessage: ({ children, ...props }: TableProps & ExtraProps) => React.JSX.Element;
|
20
|
+
export default TableMessage;
|
@@ -0,0 +1,67 @@
|
|
1
|
+
"use strict";
|
2
|
+
// ============================================================================
|
3
|
+
// Chatbot Main - Message - Content - Table
|
4
|
+
// ============================================================================
|
5
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
6
|
+
var t = {};
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
8
|
+
t[p] = s[p];
|
9
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
10
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
11
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
12
|
+
t[p[i]] = s[p[i]];
|
13
|
+
}
|
14
|
+
return t;
|
15
|
+
};
|
16
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
17
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
18
|
+
};
|
19
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
20
|
+
const react_1 = __importDefault(require("react"));
|
21
|
+
const react_table_1 = require("@patternfly/react-table");
|
22
|
+
const TableMessage = (_a) => {
|
23
|
+
var _b;
|
24
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
25
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
26
|
+
// This allows us to parse the nested data we get back from the 3rd party Markdown parser
|
27
|
+
// Open to feedback here if there is a better way to do this
|
28
|
+
// This looks for ths and spits them all out so we can filter them later, looking for text values
|
29
|
+
const findHeaders = (array) => {
|
30
|
+
const headers = [];
|
31
|
+
if (!array) {
|
32
|
+
return headers;
|
33
|
+
}
|
34
|
+
const traverse = (items) => {
|
35
|
+
for (const item of items) {
|
36
|
+
if (item.tagName === 'th') {
|
37
|
+
headers.push(item);
|
38
|
+
}
|
39
|
+
if (item.children) {
|
40
|
+
traverse(item.children);
|
41
|
+
}
|
42
|
+
}
|
43
|
+
};
|
44
|
+
traverse(array);
|
45
|
+
return headers;
|
46
|
+
};
|
47
|
+
const headers = findHeaders((_b = rest.node) === null || _b === void 0 ? void 0 : _b.children);
|
48
|
+
const headerTextValues = headers.map((header) => { var _a, _b; return (_b = (_a = header === null || header === void 0 ? void 0 : header.children) === null || _a === void 0 ? void 0 : _a.filter((c) => (c === null || c === void 0 ? void 0 : c.type) === 'text')[0]) === null || _b === void 0 ? void 0 : _b.value; });
|
49
|
+
// We are sending these header text values down to child tds by passing them through children, since mobile view for tables expects a dataLabel prop
|
50
|
+
// The data structure does not otherwise know this information at that level
|
51
|
+
// This is somewhat opinionated and may break if 3rd party library changes
|
52
|
+
// See Tr and Tbody for other usage
|
53
|
+
const modifyChildren = (children) => react_1.default.Children.map(children, (child) => {
|
54
|
+
if (child && (headerTextValues === null || headerTextValues === void 0 ? void 0 : headerTextValues.length) > 0) {
|
55
|
+
return react_1.default.cloneElement(child, { extraHeaders: headerTextValues });
|
56
|
+
}
|
57
|
+
return child;
|
58
|
+
});
|
59
|
+
if (!props['aria-label']) {
|
60
|
+
// eslint-disable-next-line no-console
|
61
|
+
console.warn('For accessibility reasons an aria-label should be specified for the Table via the <Message /> tableProps prop');
|
62
|
+
}
|
63
|
+
return (
|
64
|
+
// gridBreakPoint is so we show mobile-styled-PF table
|
65
|
+
react_1.default.createElement(react_table_1.Table, Object.assign({ "aria-label": props['aria-label'], gridBreakPoint: "grid", className: `pf-chatbot__message-table ${className ? className : ''}` }, rest), modifyChildren(children)));
|
66
|
+
};
|
67
|
+
exports.default = TableMessage;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ExtraProps } from 'react-markdown';
|
3
|
+
import { TbodyProps } from '@patternfly/react-table';
|
4
|
+
declare const TbodyProps: ({ children, ...props }: TbodyProps & ExtraProps & {
|
5
|
+
extraHeaders?: string[];
|
6
|
+
}) => React.JSX.Element;
|
7
|
+
export default TbodyProps;
|
@@ -0,0 +1,33 @@
|
|
1
|
+
"use strict";
|
2
|
+
// ============================================================================
|
3
|
+
// Chatbot Main - Message - Content - Table
|
4
|
+
// ============================================================================
|
5
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
6
|
+
var t = {};
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
8
|
+
t[p] = s[p];
|
9
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
10
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
11
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
12
|
+
t[p[i]] = s[p[i]];
|
13
|
+
}
|
14
|
+
return t;
|
15
|
+
};
|
16
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
17
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
18
|
+
};
|
19
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
20
|
+
const react_1 = __importDefault(require("react"));
|
21
|
+
const react_table_1 = require("@patternfly/react-table");
|
22
|
+
const TbodyProps = (_a) => {
|
23
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
24
|
+
// passthrough so we can place dataLabel on tds
|
25
|
+
const modifyChildren = (children) => {
|
26
|
+
if (children && props.extraHeaders) {
|
27
|
+
return react_1.default.Children.map(children, (child) => react_1.default.cloneElement(child, { extraHeaders: props.extraHeaders }));
|
28
|
+
}
|
29
|
+
return children;
|
30
|
+
};
|
31
|
+
return react_1.default.createElement(react_table_1.Tbody, Object.assign({}, props), modifyChildren(children));
|
32
|
+
};
|
33
|
+
exports.default = TbodyProps;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
"use strict";
|
2
|
+
// ============================================================================
|
3
|
+
// Chatbot Main - Message - Content - Table
|
4
|
+
// ============================================================================
|
5
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
6
|
+
var t = {};
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
8
|
+
t[p] = s[p];
|
9
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
10
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
11
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
12
|
+
t[p[i]] = s[p[i]];
|
13
|
+
}
|
14
|
+
return t;
|
15
|
+
};
|
16
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
17
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
18
|
+
};
|
19
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
20
|
+
const react_1 = __importDefault(require("react"));
|
21
|
+
const react_table_1 = require("@patternfly/react-table");
|
22
|
+
const TdMessage = (_a) => {
|
23
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
24
|
+
return react_1.default.createElement(react_table_1.Td, Object.assign({}, props), children);
|
25
|
+
};
|
26
|
+
exports.default = TdMessage;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
"use strict";
|
2
|
+
// ============================================================================
|
3
|
+
// Chatbot Main - Message - Content - Table
|
4
|
+
// ============================================================================
|
5
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
6
|
+
var t = {};
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
8
|
+
t[p] = s[p];
|
9
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
10
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
11
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
12
|
+
t[p[i]] = s[p[i]];
|
13
|
+
}
|
14
|
+
return t;
|
15
|
+
};
|
16
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
17
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
18
|
+
};
|
19
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
20
|
+
const react_1 = __importDefault(require("react"));
|
21
|
+
const react_table_1 = require("@patternfly/react-table");
|
22
|
+
const ThMessage = (_a) => {
|
23
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
24
|
+
return react_1.default.createElement(react_table_1.Th, Object.assign({}, props), children);
|
25
|
+
};
|
26
|
+
exports.default = ThMessage;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
"use strict";
|
2
|
+
// ============================================================================
|
3
|
+
// Chatbot Main - Message - Content - Table
|
4
|
+
// ============================================================================
|
5
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
6
|
+
var t = {};
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
8
|
+
t[p] = s[p];
|
9
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
10
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
11
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
12
|
+
t[p[i]] = s[p[i]];
|
13
|
+
}
|
14
|
+
return t;
|
15
|
+
};
|
16
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
17
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
18
|
+
};
|
19
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
20
|
+
const react_1 = __importDefault(require("react"));
|
21
|
+
const react_table_1 = require("@patternfly/react-table");
|
22
|
+
const TheadMessage = (_a) => {
|
23
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
24
|
+
return react_1.default.createElement(react_table_1.Thead, Object.assign({}, props), children);
|
25
|
+
};
|
26
|
+
exports.default = TheadMessage;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ExtraProps } from 'react-markdown';
|
3
|
+
import { TrProps } from '@patternfly/react-table';
|
4
|
+
declare const TrMessage: ({ children, ...props }: TrProps & ExtraProps & {
|
5
|
+
extraHeaders?: string[];
|
6
|
+
}) => React.JSX.Element;
|
7
|
+
export default TrMessage;
|
@@ -0,0 +1,37 @@
|
|
1
|
+
"use strict";
|
2
|
+
// ============================================================================
|
3
|
+
// Chatbot Main - Message - Content - Table
|
4
|
+
// ============================================================================
|
5
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
6
|
+
var t = {};
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
8
|
+
t[p] = s[p];
|
9
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
10
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
11
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
12
|
+
t[p[i]] = s[p[i]];
|
13
|
+
}
|
14
|
+
return t;
|
15
|
+
};
|
16
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
17
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
18
|
+
};
|
19
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
20
|
+
const react_1 = __importDefault(require("react"));
|
21
|
+
const react_table_1 = require("@patternfly/react-table");
|
22
|
+
const TrMessage = (_a) => {
|
23
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
24
|
+
let tdIndex = 0;
|
25
|
+
// passthrough so we can place dataLabel on tds
|
26
|
+
// places column name on correct child
|
27
|
+
const modifyChildren = (children) => react_1.default.Children.map(children, (child) => {
|
28
|
+
if (child.type.name === 'td' && props.extraHeaders) {
|
29
|
+
const clonedChild = react_1.default.cloneElement(child, { dataLabel: props.extraHeaders[tdIndex] });
|
30
|
+
tdIndex = tdIndex + 1;
|
31
|
+
return clonedChild;
|
32
|
+
}
|
33
|
+
return child;
|
34
|
+
});
|
35
|
+
return react_1.default.createElement(react_table_1.Tr, Object.assign({}, props), modifyChildren(children));
|
36
|
+
};
|
37
|
+
exports.default = TrMessage;
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { ButtonProps, DropEvent } from '@patternfly/react-core';
|
3
|
+
import { ChatbotDisplayMode } from '../Chatbot';
|
3
4
|
export interface MessageBarWithAttachMenuProps {
|
4
5
|
/** Flag to enable whether attach menu is open */
|
5
6
|
isAttachMenuOpen: boolean;
|
@@ -66,7 +67,9 @@ export interface MessageBarProps {
|
|
66
67
|
};
|
67
68
|
};
|
68
69
|
/** A callback for when the text area value changes. */
|
69
|
-
onChange?: (event: React.ChangeEvent<
|
70
|
+
onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
|
71
|
+
/** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
|
72
|
+
displayMode?: ChatbotDisplayMode;
|
70
73
|
}
|
71
74
|
export declare const MessageBar: React.FunctionComponent<MessageBarProps>;
|
72
75
|
export default MessageBar;
|