@patternfly/chatbot 2.2.0-prerelease.24 → 2.2.0-prerelease.26
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/ImageMessage/ImageMessage.d.ts +4 -0
- package/dist/cjs/Message/ImageMessage/ImageMessage.js +25 -0
- package/dist/cjs/Message/Message.d.ts +11 -1
- package/dist/cjs/Message/Message.js +38 -30
- package/dist/cjs/Message/Message.test.js +68 -0
- package/dist/cjs/MessageBar/MessageBar.d.ts +5 -1
- package/dist/cjs/MessageBar/MicrophoneButton.d.ts +1 -1
- package/dist/cjs/__mocks__/rehype-unwrap-images.d.ts +2 -0
- package/dist/cjs/__mocks__/rehype-unwrap-images.js +4 -0
- package/dist/css/main.css +8 -0
- package/dist/css/main.css.map +1 -1
- package/dist/esm/Message/ImageMessage/ImageMessage.d.ts +4 -0
- package/dist/esm/Message/ImageMessage/ImageMessage.js +20 -0
- package/dist/esm/Message/Message.d.ts +11 -1
- package/dist/esm/Message/Message.js +38 -30
- package/dist/esm/Message/Message.test.js +68 -0
- package/dist/esm/MessageBar/MessageBar.d.ts +5 -1
- package/dist/esm/MessageBar/MicrophoneButton.d.ts +1 -1
- package/dist/esm/__mocks__/rehype-unwrap-images.d.ts +2 -0
- package/dist/esm/__mocks__/rehype-unwrap-images.js +2 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +11 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +11 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx +11 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx +54 -0
- package/src/Message/ImageMessage/ImageMessage.scss +9 -0
- package/src/Message/ImageMessage/ImageMessage.tsx +14 -0
- package/src/Message/Message.test.tsx +120 -0
- package/src/Message/Message.tsx +59 -35
- package/src/MessageBar/MessageBar.tsx +10 -4
- package/src/MessageBar/MicrophoneButton.tsx +1 -1
- package/src/__mocks__/rehype-unwrap-images.tsx +3 -0
- package/src/main.scss +1 -0
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// ============================================================================
|
|
3
|
+
// Chatbot Main - Message - Content - Image
|
|
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 ImageMessage = (_a) => {
|
|
22
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
|
23
|
+
return (react_1.default.createElement("img", Object.assign({ className: "pf-chatbot__message-image" }, props), children));
|
|
24
|
+
};
|
|
25
|
+
exports.default = ImageMessage;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
import { AvatarProps, LabelGroupProps } from '@patternfly/react-core';
|
|
3
3
|
import { ActionProps } from '../ResponseActions/ResponseActions';
|
|
4
4
|
import { SourcesCardProps } from '../SourcesCard';
|
|
@@ -25,6 +25,14 @@ export interface MessageAttachment {
|
|
|
25
25
|
/** Custom test id for the loading spinner in the attachment component */
|
|
26
26
|
spinnerTestId?: string;
|
|
27
27
|
}
|
|
28
|
+
export interface MessageExtraContent {
|
|
29
|
+
/** Content to display before the main content */
|
|
30
|
+
beforeMainContent?: ReactNode;
|
|
31
|
+
/** Content to display after the main content */
|
|
32
|
+
afterMainContent?: ReactNode;
|
|
33
|
+
/** Content to display at the end */
|
|
34
|
+
endContent?: ReactNode;
|
|
35
|
+
}
|
|
28
36
|
export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'role'> {
|
|
29
37
|
/** Unique id for message */
|
|
30
38
|
id?: string;
|
|
@@ -32,6 +40,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
|
|
|
32
40
|
role: 'user' | 'bot';
|
|
33
41
|
/** Message content */
|
|
34
42
|
content?: string;
|
|
43
|
+
/** Extra Message content */
|
|
44
|
+
extraContent?: MessageExtraContent;
|
|
35
45
|
/** Name of the user */
|
|
36
46
|
name?: string;
|
|
37
47
|
/** Avatar src for the user */
|
|
@@ -41,8 +41,11 @@ const TdMessage_1 = __importDefault(require("./TableMessage/TdMessage"));
|
|
|
41
41
|
const TbodyMessage_1 = __importDefault(require("./TableMessage/TbodyMessage"));
|
|
42
42
|
const TheadMessage_1 = __importDefault(require("./TableMessage/TheadMessage"));
|
|
43
43
|
const ThMessage_1 = __importDefault(require("./TableMessage/ThMessage"));
|
|
44
|
+
const ImageMessage_1 = __importDefault(require("./ImageMessage/ImageMessage"));
|
|
45
|
+
const rehype_unwrap_images_1 = __importDefault(require("rehype-unwrap-images"));
|
|
44
46
|
const MessageBase = (_a) => {
|
|
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"]);
|
|
47
|
+
var { role, content, extraContent, 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", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps"]);
|
|
48
|
+
const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
|
|
46
49
|
let avatarClassName;
|
|
47
50
|
if (avatarProps && 'className' in avatarProps) {
|
|
48
51
|
const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
|
|
@@ -62,34 +65,38 @@ const MessageBase = (_a) => {
|
|
|
62
65
|
react_1.default.createElement(react_core_1.Timestamp, { date: date }, timestamp)),
|
|
63
66
|
react_1.default.createElement("div", { className: "pf-chatbot__message-response" },
|
|
64
67
|
react_1.default.createElement("div", { className: "pf-chatbot__message-and-actions" },
|
|
65
|
-
isLoading ? (react_1.default.createElement(MessageLoading_1.default, { loadingWord: loadingWord })) : (react_1.default.createElement(
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
68
|
+
isLoading ? (react_1.default.createElement(MessageLoading_1.default, { loadingWord: loadingWord })) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
69
|
+
beforeMainContent && react_1.default.createElement(react_1.default.Fragment, null, beforeMainContent),
|
|
70
|
+
react_1.default.createElement(react_markdown_1.default, { components: {
|
|
71
|
+
p: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props)),
|
|
72
|
+
code: (_a) => {
|
|
73
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
|
74
|
+
return (react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, props, codeBlockProps), children));
|
|
75
|
+
},
|
|
76
|
+
h1: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h1 }, props)),
|
|
77
|
+
h2: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h2 }, props)),
|
|
78
|
+
h3: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h3 }, props)),
|
|
79
|
+
h4: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h4 }, props)),
|
|
80
|
+
h5: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h5 }, props)),
|
|
81
|
+
h6: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h6 }, props)),
|
|
82
|
+
blockquote: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props)),
|
|
83
|
+
ul: (props) => react_1.default.createElement(UnorderedListMessage_1.default, Object.assign({}, props)),
|
|
84
|
+
ol: (props) => react_1.default.createElement(OrderedListMessage_1.default, Object.assign({}, props)),
|
|
85
|
+
li: (props) => react_1.default.createElement(ListItemMessage_1.default, Object.assign({}, props)),
|
|
86
|
+
table: (props) => react_1.default.createElement(TableMessage_1.default, Object.assign({}, props, tableProps)),
|
|
87
|
+
tbody: (props) => react_1.default.createElement(TbodyMessage_1.default, Object.assign({}, props)),
|
|
88
|
+
thead: (props) => react_1.default.createElement(TheadMessage_1.default, Object.assign({}, props)),
|
|
89
|
+
tr: (props) => react_1.default.createElement(TrMessage_1.default, Object.assign({}, props)),
|
|
90
|
+
td: (props) => {
|
|
91
|
+
// Conflicts with Td type
|
|
92
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
93
|
+
const { width } = props, rest = __rest(props, ["width"]);
|
|
94
|
+
return react_1.default.createElement(TdMessage_1.default, Object.assign({}, rest));
|
|
95
|
+
},
|
|
96
|
+
th: (props) => react_1.default.createElement(ThMessage_1.default, Object.assign({}, props)),
|
|
97
|
+
img: (props) => react_1.default.createElement(ImageMessage_1.default, Object.assign({}, props))
|
|
98
|
+
}, remarkPlugins: [remark_gfm_1.default], rehypePlugins: [rehype_unwrap_images_1.default] }, content),
|
|
99
|
+
afterMainContent && react_1.default.createElement(react_1.default.Fragment, null, afterMainContent))),
|
|
93
100
|
!isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources)),
|
|
94
101
|
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 })),
|
|
95
102
|
!isLoading && actions && react_1.default.createElement(ResponseActions_1.default, { actions: actions }),
|
|
@@ -100,7 +107,8 @@ const MessageBase = (_a) => {
|
|
|
100
107
|
var _a;
|
|
101
108
|
return (react_1.default.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },
|
|
102
109
|
react_1.default.createElement(FileDetailsLabel_1.default, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId })));
|
|
103
|
-
})))
|
|
110
|
+
}))),
|
|
111
|
+
!isLoading && endContent && react_1.default.createElement(react_1.default.Fragment, null, endContent)))));
|
|
104
112
|
};
|
|
105
113
|
exports.MessageBase = MessageBase;
|
|
106
114
|
const Message = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(exports.MessageBase, Object.assign({ innerRef: ref }, props))));
|
|
@@ -137,6 +137,7 @@ const EMPTY_TABLE = `
|
|
|
137
137
|
| |
|
|
138
138
|
|
|
139
139
|
`;
|
|
140
|
+
const IMAGE = ``;
|
|
140
141
|
const checkListItemsRendered = () => {
|
|
141
142
|
const items = ['Item 1', 'Item 2', 'Item 3'];
|
|
142
143
|
expect(react_2.screen.getAllByRole('listitem')).toHaveLength(3);
|
|
@@ -512,4 +513,71 @@ describe('Message', () => {
|
|
|
512
513
|
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE, tableProps: { 'aria-label': 'Test' } }));
|
|
513
514
|
expect(react_2.screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
|
|
514
515
|
});
|
|
516
|
+
it('should render beforeMainContent with main content', () => {
|
|
517
|
+
const mainContent = 'Main message content';
|
|
518
|
+
const beforeMainContentText = 'Before main content';
|
|
519
|
+
const beforeMainContent = react_1.default.createElement("div", null, beforeMainContentText);
|
|
520
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { beforeMainContent } }));
|
|
521
|
+
expect(react_2.screen.getByText(beforeMainContentText)).toBeTruthy();
|
|
522
|
+
expect(react_2.screen.getByText(mainContent)).toBeTruthy();
|
|
523
|
+
});
|
|
524
|
+
it('should render afterMainContent with main content', () => {
|
|
525
|
+
const mainContent = 'Main message content';
|
|
526
|
+
const afterMainContentText = 'After main content';
|
|
527
|
+
const afterMainContent = react_1.default.createElement("div", null, afterMainContentText);
|
|
528
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { afterMainContent } }));
|
|
529
|
+
expect(react_2.screen.getByText(afterMainContentText)).toBeTruthy();
|
|
530
|
+
expect(react_2.screen.getByText(mainContent)).toBeTruthy();
|
|
531
|
+
});
|
|
532
|
+
it('should render endContent with main content', () => {
|
|
533
|
+
const mainContent = 'Main message content';
|
|
534
|
+
const endMainContentText = 'End content';
|
|
535
|
+
const endContent = react_1.default.createElement("div", null, endMainContentText);
|
|
536
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { endContent } }));
|
|
537
|
+
expect(react_2.screen.getByText(endMainContentText)).toBeTruthy();
|
|
538
|
+
expect(react_2.screen.getByText(mainContent)).toBeTruthy();
|
|
539
|
+
});
|
|
540
|
+
it('should render all parts of extraContent with main content', () => {
|
|
541
|
+
const beforeMainContent = react_1.default.createElement("div", null, "Before main content");
|
|
542
|
+
const afterMainContent = react_1.default.createElement("div", null, "After main content");
|
|
543
|
+
const endContent = react_1.default.createElement("div", null, "End content");
|
|
544
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent, afterMainContent, endContent } }));
|
|
545
|
+
expect(react_2.screen.getByText('Before main content')).toBeTruthy();
|
|
546
|
+
expect(react_2.screen.getByText('Main message content')).toBeTruthy();
|
|
547
|
+
expect(react_2.screen.getByText('After main content')).toBeTruthy();
|
|
548
|
+
expect(react_2.screen.getByText('End content')).toBeTruthy();
|
|
549
|
+
});
|
|
550
|
+
it('should not render extraContent when not provided', () => {
|
|
551
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Main message content" }));
|
|
552
|
+
// Ensure no extraContent is rendered
|
|
553
|
+
expect(react_2.screen.getByText('Main message content')).toBeTruthy();
|
|
554
|
+
expect(react_2.screen.queryByText('Before main content')).toBeFalsy();
|
|
555
|
+
expect(react_2.screen.queryByText('After main content')).toBeFalsy();
|
|
556
|
+
expect(react_2.screen.queryByText('end message content')).toBeFalsy();
|
|
557
|
+
});
|
|
558
|
+
it('should handle undefined or null values in extraContent gracefully', () => {
|
|
559
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent: null, afterMainContent: undefined, endContent: null } }));
|
|
560
|
+
// Ensure that no extraContent is rendered if they are null or undefined
|
|
561
|
+
expect(react_2.screen.getByText('Main message content')).toBeTruthy();
|
|
562
|
+
expect(react_2.screen.queryByText('Before main content')).toBeFalsy();
|
|
563
|
+
expect(react_2.screen.queryByText('After main content')).toBeFalsy();
|
|
564
|
+
expect(react_2.screen.queryByText('end message content')).toBeFalsy();
|
|
565
|
+
});
|
|
566
|
+
it('should render JSX in extraContent correctly', () => {
|
|
567
|
+
const beforeMainContent = (react_1.default.createElement("div", { "data-testid": "before-main-content" },
|
|
568
|
+
react_1.default.createElement("strong", null, "Bold before content")));
|
|
569
|
+
const afterMainContent = (react_1.default.createElement("div", { "data-testid": "after-main-content" },
|
|
570
|
+
react_1.default.createElement("strong", null, "Bold after content")));
|
|
571
|
+
const endContent = (react_1.default.createElement("div", { "data-testid": "end-main-content" },
|
|
572
|
+
react_1.default.createElement("strong", null, "Bold end content")));
|
|
573
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent, afterMainContent, endContent } }));
|
|
574
|
+
// Check that the JSX is correctly rendered
|
|
575
|
+
expect(react_2.screen.getByTestId('before-main-content')).toContainHTML('<strong>Bold before content</strong>');
|
|
576
|
+
expect(react_2.screen.getByTestId('after-main-content')).toContainHTML('<strong>Bold after content</strong>');
|
|
577
|
+
expect(react_2.screen.getByTestId('end-main-content')).toContainHTML('<strong>Bold end content</strong>');
|
|
578
|
+
});
|
|
579
|
+
it('should handle image correctly', () => {
|
|
580
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: IMAGE }));
|
|
581
|
+
expect(react_2.screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
|
|
582
|
+
});
|
|
515
583
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ButtonProps, DropEvent, TextAreaProps } from '@patternfly/react-core';
|
|
2
|
+
import { ButtonProps, DropEvent, TextAreaProps, TooltipProps } from '@patternfly/react-core';
|
|
3
3
|
import { ChatbotDisplayMode } from '../Chatbot';
|
|
4
4
|
export interface MessageBarWithAttachMenuProps {
|
|
5
5
|
/** Flag to enable whether attach menu is open */
|
|
@@ -48,14 +48,17 @@ export interface MessageBarProps extends TextAreaProps {
|
|
|
48
48
|
tooltipContent?: string;
|
|
49
49
|
props?: ButtonProps;
|
|
50
50
|
inputTestId?: string;
|
|
51
|
+
tooltipProps?: Omit<TooltipProps, 'content'>;
|
|
51
52
|
};
|
|
52
53
|
stop?: {
|
|
53
54
|
tooltipContent?: string;
|
|
54
55
|
props?: ButtonProps;
|
|
56
|
+
tooltipProps?: Omit<TooltipProps, 'content'>;
|
|
55
57
|
};
|
|
56
58
|
send?: {
|
|
57
59
|
tooltipContent?: string;
|
|
58
60
|
props?: ButtonProps;
|
|
61
|
+
tooltipProps?: Omit<TooltipProps, 'content'>;
|
|
59
62
|
};
|
|
60
63
|
microphone?: {
|
|
61
64
|
tooltipContent?: {
|
|
@@ -64,6 +67,7 @@ export interface MessageBarProps extends TextAreaProps {
|
|
|
64
67
|
};
|
|
65
68
|
language?: string;
|
|
66
69
|
props?: ButtonProps;
|
|
70
|
+
tooltipProps?: Omit<TooltipProps, 'content'>;
|
|
67
71
|
};
|
|
68
72
|
};
|
|
69
73
|
/** A callback for when the text area value changes. */
|
|
@@ -10,7 +10,7 @@ export interface MicrophoneButtonProps extends ButtonProps {
|
|
|
10
10
|
/** Callback to update the message value once speech recognition is complete */
|
|
11
11
|
onSpeechRecognition: React.Dispatch<React.SetStateAction<string>>;
|
|
12
12
|
/** Props to control the PF Tooltip component */
|
|
13
|
-
tooltipProps?: TooltipProps
|
|
13
|
+
tooltipProps?: Omit<TooltipProps, 'content'>;
|
|
14
14
|
/** English text "Use microphone" and "Stop listening" used in the tooltip */
|
|
15
15
|
tooltipContent?: {
|
|
16
16
|
active?: string;
|
package/dist/css/main.css
CHANGED
|
@@ -1192,6 +1192,14 @@
|
|
|
1192
1192
|
font-size: var(--pf-t--global--font--size--body--default);
|
|
1193
1193
|
}
|
|
1194
1194
|
|
|
1195
|
+
.pf-chatbot__message-image {
|
|
1196
|
+
border-radius: var(--pf-t--global--border--radius--small);
|
|
1197
|
+
max-width: 37.5rem;
|
|
1198
|
+
max-height: 25rem;
|
|
1199
|
+
min-height: 6.25rem;
|
|
1200
|
+
display: block;
|
|
1201
|
+
}
|
|
1202
|
+
|
|
1195
1203
|
.pf-chatbot__message-and-actions blockquote .pf-chatbot__message-text {
|
|
1196
1204
|
display: inline-block;
|
|
1197
1205
|
}
|
package/dist/css/main.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AC1GF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAGI;AAAA;IACE;IACA;;;ACpBJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AAQF;EACE;;AACA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AASF;AAAA;AAAA;EACE;;;ACvLN;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;;;AC5CJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AASJ;EACE;;;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;;;ACvIF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;AAAA;EAEE;;AAEF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;ACvFA;EAA0B;;AAMxB;EAAM;;AACN;EAAuB;;AACvB;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACnBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC1CN;EACE;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AASA;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AClFF;EACE;EACA;EACA;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIA;EADF;IAEI;;;;AAIN;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;;ACrEJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;AChDR;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AC7FF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;;AD9CN;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;;;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AC1GF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAGI;AAAA;IACE;IACA;;;ACpBJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AAQF;EACE;;AACA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AASF;AAAA;AAAA;EACE;;;ACvLN;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;;;AC5CJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AASJ;EACE;;;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;;;ACvIF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;AAAA;EAEE;;AAEF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;ACvFA;EAA0B;;AAMxB;EAAM;;AACN;EAAuB;;AACvB;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACnBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC1CN;EACE;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AASA;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AClFF;EACE;EACA;EACA;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIA;EADF;IAEI;;;;AAIN;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;;ACrEJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;AChDR;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AC7FF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;;AD9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AEhFF;EACE;EACA;EACA;EACA;EAGA;;;ADDE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;;AE7CN;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;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AChDF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AC5BR;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AC1CJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EACE;;;AAMJ;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AC/CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;ACrBR;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;ACxFN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAGI;AAAA;IACE;IACA;;;ADtCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AEhDJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;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;;;AChCF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACrER;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;AC5BJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EAEA;EACA;EACA;EAEA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// ============================================================================
|
|
2
|
+
// Chatbot Main - Message - Content - Image
|
|
3
|
+
// ============================================================================
|
|
4
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
5
|
+
var t = {};
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
9
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
10
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
11
|
+
t[p[i]] = s[p[i]];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
import React from 'react';
|
|
16
|
+
const ImageMessage = (_a) => {
|
|
17
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
|
18
|
+
return (React.createElement("img", Object.assign({ className: "pf-chatbot__message-image" }, props), children));
|
|
19
|
+
};
|
|
20
|
+
export default ImageMessage;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
import { AvatarProps, LabelGroupProps } from '@patternfly/react-core';
|
|
3
3
|
import { ActionProps } from '../ResponseActions/ResponseActions';
|
|
4
4
|
import { SourcesCardProps } from '../SourcesCard';
|
|
@@ -25,6 +25,14 @@ export interface MessageAttachment {
|
|
|
25
25
|
/** Custom test id for the loading spinner in the attachment component */
|
|
26
26
|
spinnerTestId?: string;
|
|
27
27
|
}
|
|
28
|
+
export interface MessageExtraContent {
|
|
29
|
+
/** Content to display before the main content */
|
|
30
|
+
beforeMainContent?: ReactNode;
|
|
31
|
+
/** Content to display after the main content */
|
|
32
|
+
afterMainContent?: ReactNode;
|
|
33
|
+
/** Content to display at the end */
|
|
34
|
+
endContent?: ReactNode;
|
|
35
|
+
}
|
|
28
36
|
export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'role'> {
|
|
29
37
|
/** Unique id for message */
|
|
30
38
|
id?: string;
|
|
@@ -32,6 +40,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
|
|
|
32
40
|
role: 'user' | 'bot';
|
|
33
41
|
/** Message content */
|
|
34
42
|
content?: string;
|
|
43
|
+
/** Extra Message content */
|
|
44
|
+
extraContent?: MessageExtraContent;
|
|
35
45
|
/** Name of the user */
|
|
36
46
|
name?: string;
|
|
37
47
|
/** Avatar src for the user */
|
|
@@ -35,8 +35,11 @@ import TdMessage from './TableMessage/TdMessage';
|
|
|
35
35
|
import TbodyMessage from './TableMessage/TbodyMessage';
|
|
36
36
|
import TheadMessage from './TableMessage/TheadMessage';
|
|
37
37
|
import ThMessage from './TableMessage/ThMessage';
|
|
38
|
+
import ImageMessage from './ImageMessage/ImageMessage';
|
|
39
|
+
import rehypeUnwrapImages from 'rehype-unwrap-images';
|
|
38
40
|
export 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, 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"]);
|
|
41
|
+
var { role, content, extraContent, 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", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps"]);
|
|
42
|
+
const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
|
|
40
43
|
let avatarClassName;
|
|
41
44
|
if (avatarProps && 'className' in avatarProps) {
|
|
42
45
|
const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
|
|
@@ -56,34 +59,38 @@ export const MessageBase = (_a) => {
|
|
|
56
59
|
React.createElement(Timestamp, { date: date }, timestamp)),
|
|
57
60
|
React.createElement("div", { className: "pf-chatbot__message-response" },
|
|
58
61
|
React.createElement("div", { className: "pf-chatbot__message-and-actions" },
|
|
59
|
-
isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
62
|
+
isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(React.Fragment, null,
|
|
63
|
+
beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
|
|
64
|
+
React.createElement(Markdown, { components: {
|
|
65
|
+
p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
|
|
66
|
+
code: (_a) => {
|
|
67
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
|
68
|
+
return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
|
|
69
|
+
},
|
|
70
|
+
h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
|
|
71
|
+
h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
|
|
72
|
+
h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
|
|
73
|
+
h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
|
|
74
|
+
h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
|
|
75
|
+
h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
|
|
76
|
+
blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
|
|
77
|
+
ul: (props) => React.createElement(UnorderedListMessage, Object.assign({}, props)),
|
|
78
|
+
ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
|
|
79
|
+
li: (props) => React.createElement(ListItemMessage, Object.assign({}, props)),
|
|
80
|
+
table: (props) => React.createElement(TableMessage, Object.assign({}, props, tableProps)),
|
|
81
|
+
tbody: (props) => React.createElement(TbodyMessage, Object.assign({}, props)),
|
|
82
|
+
thead: (props) => React.createElement(TheadMessage, Object.assign({}, props)),
|
|
83
|
+
tr: (props) => React.createElement(TrMessage, Object.assign({}, props)),
|
|
84
|
+
td: (props) => {
|
|
85
|
+
// Conflicts with Td type
|
|
86
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
87
|
+
const { width } = props, rest = __rest(props, ["width"]);
|
|
88
|
+
return React.createElement(TdMessage, Object.assign({}, rest));
|
|
89
|
+
},
|
|
90
|
+
th: (props) => React.createElement(ThMessage, Object.assign({}, props)),
|
|
91
|
+
img: (props) => React.createElement(ImageMessage, Object.assign({}, props))
|
|
92
|
+
}, remarkPlugins: [remarkGfm], rehypePlugins: [rehypeUnwrapImages] }, content),
|
|
93
|
+
afterMainContent && React.createElement(React.Fragment, null, afterMainContent))),
|
|
87
94
|
!isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
|
|
88
95
|
quickStarts && quickStarts.quickStart && (React.createElement(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
|
|
89
96
|
!isLoading && actions && React.createElement(ResponseActions, { actions: actions }),
|
|
@@ -94,7 +101,8 @@ export const MessageBase = (_a) => {
|
|
|
94
101
|
var _a;
|
|
95
102
|
return (React.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },
|
|
96
103
|
React.createElement(FileDetailsLabel, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId })));
|
|
97
|
-
})))
|
|
104
|
+
}))),
|
|
105
|
+
!isLoading && endContent && React.createElement(React.Fragment, null, endContent)))));
|
|
98
106
|
};
|
|
99
107
|
const Message = React.forwardRef((props, ref) => (React.createElement(MessageBase, Object.assign({ innerRef: ref }, props))));
|
|
100
108
|
export default Message;
|
|
@@ -132,6 +132,7 @@ const EMPTY_TABLE = `
|
|
|
132
132
|
| |
|
|
133
133
|
|
|
134
134
|
`;
|
|
135
|
+
const IMAGE = ``;
|
|
135
136
|
const checkListItemsRendered = () => {
|
|
136
137
|
const items = ['Item 1', 'Item 2', 'Item 3'];
|
|
137
138
|
expect(screen.getAllByRole('listitem')).toHaveLength(3);
|
|
@@ -507,4 +508,71 @@ describe('Message', () => {
|
|
|
507
508
|
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: TABLE, tableProps: { 'aria-label': 'Test' } }));
|
|
508
509
|
expect(screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
|
|
509
510
|
});
|
|
511
|
+
it('should render beforeMainContent with main content', () => {
|
|
512
|
+
const mainContent = 'Main message content';
|
|
513
|
+
const beforeMainContentText = 'Before main content';
|
|
514
|
+
const beforeMainContent = React.createElement("div", null, beforeMainContentText);
|
|
515
|
+
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { beforeMainContent } }));
|
|
516
|
+
expect(screen.getByText(beforeMainContentText)).toBeTruthy();
|
|
517
|
+
expect(screen.getByText(mainContent)).toBeTruthy();
|
|
518
|
+
});
|
|
519
|
+
it('should render afterMainContent with main content', () => {
|
|
520
|
+
const mainContent = 'Main message content';
|
|
521
|
+
const afterMainContentText = 'After main content';
|
|
522
|
+
const afterMainContent = React.createElement("div", null, afterMainContentText);
|
|
523
|
+
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { afterMainContent } }));
|
|
524
|
+
expect(screen.getByText(afterMainContentText)).toBeTruthy();
|
|
525
|
+
expect(screen.getByText(mainContent)).toBeTruthy();
|
|
526
|
+
});
|
|
527
|
+
it('should render endContent with main content', () => {
|
|
528
|
+
const mainContent = 'Main message content';
|
|
529
|
+
const endMainContentText = 'End content';
|
|
530
|
+
const endContent = React.createElement("div", null, endMainContentText);
|
|
531
|
+
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: mainContent, extraContent: { endContent } }));
|
|
532
|
+
expect(screen.getByText(endMainContentText)).toBeTruthy();
|
|
533
|
+
expect(screen.getByText(mainContent)).toBeTruthy();
|
|
534
|
+
});
|
|
535
|
+
it('should render all parts of extraContent with main content', () => {
|
|
536
|
+
const beforeMainContent = React.createElement("div", null, "Before main content");
|
|
537
|
+
const afterMainContent = React.createElement("div", null, "After main content");
|
|
538
|
+
const endContent = React.createElement("div", null, "End content");
|
|
539
|
+
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent, afterMainContent, endContent } }));
|
|
540
|
+
expect(screen.getByText('Before main content')).toBeTruthy();
|
|
541
|
+
expect(screen.getByText('Main message content')).toBeTruthy();
|
|
542
|
+
expect(screen.getByText('After main content')).toBeTruthy();
|
|
543
|
+
expect(screen.getByText('End content')).toBeTruthy();
|
|
544
|
+
});
|
|
545
|
+
it('should not render extraContent when not provided', () => {
|
|
546
|
+
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Main message content" }));
|
|
547
|
+
// Ensure no extraContent is rendered
|
|
548
|
+
expect(screen.getByText('Main message content')).toBeTruthy();
|
|
549
|
+
expect(screen.queryByText('Before main content')).toBeFalsy();
|
|
550
|
+
expect(screen.queryByText('After main content')).toBeFalsy();
|
|
551
|
+
expect(screen.queryByText('end message content')).toBeFalsy();
|
|
552
|
+
});
|
|
553
|
+
it('should handle undefined or null values in extraContent gracefully', () => {
|
|
554
|
+
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent: null, afterMainContent: undefined, endContent: null } }));
|
|
555
|
+
// Ensure that no extraContent is rendered if they are null or undefined
|
|
556
|
+
expect(screen.getByText('Main message content')).toBeTruthy();
|
|
557
|
+
expect(screen.queryByText('Before main content')).toBeFalsy();
|
|
558
|
+
expect(screen.queryByText('After main content')).toBeFalsy();
|
|
559
|
+
expect(screen.queryByText('end message content')).toBeFalsy();
|
|
560
|
+
});
|
|
561
|
+
it('should render JSX in extraContent correctly', () => {
|
|
562
|
+
const beforeMainContent = (React.createElement("div", { "data-testid": "before-main-content" },
|
|
563
|
+
React.createElement("strong", null, "Bold before content")));
|
|
564
|
+
const afterMainContent = (React.createElement("div", { "data-testid": "after-main-content" },
|
|
565
|
+
React.createElement("strong", null, "Bold after content")));
|
|
566
|
+
const endContent = (React.createElement("div", { "data-testid": "end-main-content" },
|
|
567
|
+
React.createElement("strong", null, "Bold end content")));
|
|
568
|
+
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Main message content", extraContent: { beforeMainContent, afterMainContent, endContent } }));
|
|
569
|
+
// Check that the JSX is correctly rendered
|
|
570
|
+
expect(screen.getByTestId('before-main-content')).toContainHTML('<strong>Bold before content</strong>');
|
|
571
|
+
expect(screen.getByTestId('after-main-content')).toContainHTML('<strong>Bold after content</strong>');
|
|
572
|
+
expect(screen.getByTestId('end-main-content')).toContainHTML('<strong>Bold end content</strong>');
|
|
573
|
+
});
|
|
574
|
+
it('should handle image correctly', () => {
|
|
575
|
+
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: IMAGE }));
|
|
576
|
+
expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
|
|
577
|
+
});
|
|
510
578
|
});
|