@patternfly/chatbot 2.2.0-prerelease.45 → 2.2.0-prerelease.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/cjs/Message/Message.d.ts +15 -1
  2. package/dist/cjs/Message/Message.js +53 -34
  3. package/dist/cjs/Message/Message.test.js +46 -0
  4. package/dist/cjs/Message/MessageInput.d.ts +18 -0
  5. package/dist/cjs/Message/MessageInput.js +34 -0
  6. package/dist/css/main.css +4 -0
  7. package/dist/css/main.css.map +1 -1
  8. package/dist/esm/Message/Message.d.ts +15 -1
  9. package/dist/esm/Message/Message.js +53 -34
  10. package/dist/esm/Message/Message.test.js +46 -0
  11. package/dist/esm/Message/MessageInput.d.ts +18 -0
  12. package/dist/esm/Message/MessageInput.js +29 -0
  13. package/dist/tsconfig.tsbuildinfo +1 -1
  14. package/package.json +1 -1
  15. package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +1 -1
  16. package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx +61 -14
  17. package/src/Message/Message.scss +4 -0
  18. package/src/Message/Message.test.tsx +48 -0
  19. package/src/Message/Message.tsx +107 -53
  20. package/src/Message/MessageInput.tsx +59 -0
package/dist/cjs/Message/Message.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { ReactNode } from 'react';
2
- import { AlertProps, AvatarProps, ButtonProps, LabelGroupProps } from '@patternfly/react-core';
2
+ import { AlertProps, AvatarProps, ButtonProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
3
3
  import { ActionProps } from '../ResponseActions/ResponseActions';
4
4
  import { SourcesCardProps } from '../SourcesCard';
5
5
  import { QuickStart, QuickstartAction } from './QuickStarts/types';
@@ -106,6 +106,20 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
106
106
  error?: AlertProps;
107
107
  /** Props for links */
108
108
  linkProps?: ButtonProps;
109
+ /** Whether message is in edit mode */
110
+ isEditable?: boolean;
111
+ /** Placeholder for edit input */
112
+ editPlaceholder?: string;
113
+ /** Label for the English word "Update" used in edit mode. */
114
+ updateWord?: string;
115
+ /** Label for the English word "Cancel" used in edit mode. */
116
+ cancelWord?: string;
117
+ /** Callback function for when edit mode update button is clicked */
118
+ onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
119
+ /** Callback functionf or when edit cancel update button is clicked */
120
+ onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
121
+ /** Props for edit form */
122
+ editFormProps?: FormProps;
109
123
  }
110
124
  export declare const MessageBase: React.FunctionComponent<MessageProps>;
111
125
  declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
package/dist/cjs/Message/Message.js CHANGED
@@ -47,8 +47,13 @@ const rehype_external_links_1 = __importDefault(require("rehype-external-links")
47
47
  const rehype_sanitize_1 = __importDefault(require("rehype-sanitize"));
48
48
  const LinkMessage_1 = __importDefault(require("./LinkMessage/LinkMessage"));
49
49
  const ErrorMessage_1 = __importDefault(require("./ErrorMessage/ErrorMessage"));
50
+ const MessageInput_1 = __importDefault(require("./MessageInput"));
50
51
  const MessageBase = (_a) => {
51
- 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, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error } = _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", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error"]);
52
+ 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, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, editFormProps } = _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", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "editFormProps"]);
53
+ const [messageText, setMessageText] = react_1.default.useState(content);
54
+ react_1.default.useEffect(() => {
55
+ setMessageText(content);
56
+ }, [content]);
52
57
  const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
53
58
  let rehypePlugins = [rehype_unwrap_images_1.default];
54
59
  if (openLinkInNewTab) {
@@ -66,6 +71,51 @@ const MessageBase = (_a) => {
66
71
  // Keep timestamps consistent between Timestamp component and aria-label
67
72
  const date = new Date();
68
73
  const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
74
+ const renderMessage = () => {
75
+ if (isLoading) {
76
+ return react_1.default.createElement(MessageLoading_1.default, { loadingWord: loadingWord });
77
+ }
78
+ if (isEditable) {
79
+ return (react_1.default.createElement(react_1.default.Fragment, null,
80
+ beforeMainContent && react_1.default.createElement(react_1.default.Fragment, null, beforeMainContent),
81
+ react_1.default.createElement(MessageInput_1.default, Object.assign({ content: content, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, text) => {
82
+ onEditUpdate && onEditUpdate(event);
83
+ setMessageText(text);
84
+ }, onEditCancel: onEditCancel }, editFormProps))));
85
+ }
86
+ return (react_1.default.createElement(react_1.default.Fragment, null,
87
+ beforeMainContent && react_1.default.createElement(react_1.default.Fragment, null, beforeMainContent),
88
+ error ? (react_1.default.createElement(ErrorMessage_1.default, Object.assign({}, error))) : (react_1.default.createElement(react_markdown_1.default, { components: {
89
+ p: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props)),
90
+ code: (_a) => {
91
+ var { children } = _a, props = __rest(_a, ["children"]);
92
+ return (react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, props, codeBlockProps), children));
93
+ },
94
+ h1: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h1 }, props)),
95
+ h2: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h2 }, props)),
96
+ h3: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h3 }, props)),
97
+ h4: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h4 }, props)),
98
+ h5: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h5 }, props)),
99
+ h6: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h6 }, props)),
100
+ blockquote: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props)),
101
+ ul: (props) => react_1.default.createElement(UnorderedListMessage_1.default, Object.assign({}, props)),
102
+ ol: (props) => react_1.default.createElement(OrderedListMessage_1.default, Object.assign({}, props)),
103
+ li: (props) => react_1.default.createElement(ListItemMessage_1.default, Object.assign({}, props)),
104
+ table: (props) => react_1.default.createElement(TableMessage_1.default, Object.assign({}, props, tableProps)),
105
+ tbody: (props) => react_1.default.createElement(TbodyMessage_1.default, Object.assign({}, props)),
106
+ thead: (props) => react_1.default.createElement(TheadMessage_1.default, Object.assign({}, props)),
107
+ tr: (props) => react_1.default.createElement(TrMessage_1.default, Object.assign({}, props)),
108
+ td: (props) => {
109
+ // Conflicts with Td type
110
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
111
+ const { width } = props, rest = __rest(props, ["width"]);
112
+ return react_1.default.createElement(TdMessage_1.default, Object.assign({}, rest));
113
+ },
114
+ th: (props) => react_1.default.createElement(ThMessage_1.default, Object.assign({}, props)),
115
+ img: (props) => react_1.default.createElement(ImageMessage_1.default, Object.assign({}, props)),
116
+ a: (props) => (react_1.default.createElement(LinkMessage_1.default, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps), props.children))
117
+ }, remarkPlugins: [remark_gfm_1.default], rehypePlugins: rehypePlugins }, messageText))));
118
+ };
69
119
  return (react_1.default.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props),
70
120
  react_1.default.createElement(react_core_1.Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
71
121
  react_1.default.createElement("div", { className: "pf-chatbot__message-contents" },
@@ -76,39 +126,8 @@ const MessageBase = (_a) => {
76
126
  react_1.default.createElement(react_core_1.Timestamp, { date: date }, timestamp)),
77
127
  react_1.default.createElement("div", { className: "pf-chatbot__message-response" },
78
128
  react_1.default.createElement("div", { className: "pf-chatbot__message-and-actions" },
79
- isLoading ? (react_1.default.createElement(MessageLoading_1.default, { loadingWord: loadingWord })) : (react_1.default.createElement(react_1.default.Fragment, null,
80
- beforeMainContent && react_1.default.createElement(react_1.default.Fragment, null, beforeMainContent),
81
- error ? (react_1.default.createElement(ErrorMessage_1.default, Object.assign({}, error))) : (react_1.default.createElement(react_markdown_1.default, { components: {
82
- p: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props)),
83
- code: (_a) => {
84
- var { children } = _a, props = __rest(_a, ["children"]);
85
- return (react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, props, codeBlockProps), children));
86
- },
87
- h1: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h1 }, props)),
88
- h2: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h2 }, props)),
89
- h3: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h3 }, props)),
90
- h4: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h4 }, props)),
91
- h5: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h5 }, props)),
92
- h6: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h6 }, props)),
93
- blockquote: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props)),
94
- ul: (props) => react_1.default.createElement(UnorderedListMessage_1.default, Object.assign({}, props)),
95
- ol: (props) => react_1.default.createElement(OrderedListMessage_1.default, Object.assign({}, props)),
96
- li: (props) => react_1.default.createElement(ListItemMessage_1.default, Object.assign({}, props)),
97
- table: (props) => react_1.default.createElement(TableMessage_1.default, Object.assign({}, props, tableProps)),
98
- tbody: (props) => react_1.default.createElement(TbodyMessage_1.default, Object.assign({}, props)),
99
- thead: (props) => react_1.default.createElement(TheadMessage_1.default, Object.assign({}, props)),
100
- tr: (props) => react_1.default.createElement(TrMessage_1.default, Object.assign({}, props)),
101
- td: (props) => {
102
- // Conflicts with Td type
103
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
104
- const { width } = props, rest = __rest(props, ["width"]);
105
- return react_1.default.createElement(TdMessage_1.default, Object.assign({}, rest));
106
- },
107
- th: (props) => react_1.default.createElement(ThMessage_1.default, Object.assign({}, props)),
108
- img: (props) => react_1.default.createElement(ImageMessage_1.default, Object.assign({}, props)),
109
- a: (props) => (react_1.default.createElement(LinkMessage_1.default, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps), props.children))
110
- }, remarkPlugins: [remark_gfm_1.default], rehypePlugins: rehypePlugins }, content)),
111
- afterMainContent && react_1.default.createElement(react_1.default.Fragment, null, afterMainContent))),
129
+ renderMessage(),
130
+ afterMainContent && react_1.default.createElement(react_1.default.Fragment, null, afterMainContent),
112
131
  !isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources)),
113
132
  quickStarts && quickStarts.quickStart && (react_1.default.createElement(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
114
133
  !isLoading && actions && react_1.default.createElement(ResponseActions_1.default, { actions: actions }),
package/dist/cjs/Message/Message.test.js CHANGED
@@ -625,4 +625,50 @@ describe('Message', () => {
625
625
  expect(react_2.screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
626
626
  expect(react_2.screen.queryByText('Test')).toBeFalsy();
627
627
  });
628
+ it('should handle isEditable when there is message content', () => {
629
+ (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, content: "Test" }));
630
+ expect(react_2.screen.getByRole('textbox')).toBeTruthy();
631
+ expect(react_2.screen.getByRole('textbox')).toHaveValue('Test');
632
+ expect(react_2.screen.getByRole('button', { name: /Update/i })).toBeTruthy();
633
+ expect(react_2.screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
634
+ });
635
+ it('should handle isEditable when there is no message content', () => {
636
+ (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true }));
637
+ expect(react_2.screen.getByRole('textbox')).toBeTruthy();
638
+ expect(react_2.screen.getByRole('textbox')).toHaveValue('');
639
+ expect(react_2.screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Edit prompt message...');
640
+ expect(react_2.screen.getByRole('button', { name: /Update/i })).toBeTruthy();
641
+ expect(react_2.screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
642
+ });
643
+ it('should be able to change edit placeholder', () => {
644
+ (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, editPlaceholder: "I am a placeholder" }));
645
+ expect(react_2.screen.getByRole('textbox')).toBeTruthy();
646
+ expect(react_2.screen.getByRole('textbox')).toHaveValue('');
647
+ expect(react_2.screen.getByRole('textbox')).toHaveAttribute('placeholder', 'I am a placeholder');
648
+ });
649
+ it('should be able to change updateWord', () => {
650
+ (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, updateWord: "Submit" }));
651
+ expect(react_2.screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
652
+ });
653
+ it('should be able to change cancelWord', () => {
654
+ (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, cancelWord: "Don't submit" }));
655
+ expect(react_2.screen.getByRole('button', { name: /Don't submit/i })).toBeTruthy();
656
+ });
657
+ it('should be able to add onEditUpdate', () => __awaiter(void 0, void 0, void 0, function* () {
658
+ const spy = jest.fn();
659
+ (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditUpdate: spy }));
660
+ yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Update/i }));
661
+ expect(spy).toHaveBeenCalledTimes(1);
662
+ }));
663
+ it('should be able to add onEditCancel', () => __awaiter(void 0, void 0, void 0, function* () {
664
+ const spy = jest.fn();
665
+ (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditCancel: spy }));
666
+ yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Cancel/i }));
667
+ expect(spy).toHaveBeenCalledTimes(1);
668
+ }));
669
+ it('should be able to add editFormProps', () => {
670
+ const { container } = (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, editFormProps: { className: 'test' } }));
671
+ const form = container.querySelector('form');
672
+ expect(form).toHaveClass('test');
673
+ });
628
674
  });
package/dist/cjs/Message/MessageInput.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import { FormProps } from '@patternfly/react-core';
3
+ export interface MessageInputProps extends FormProps {
4
+ /** Placeholder for edit input */
5
+ editPlaceholder?: string;
6
+ /** Label for the English word "Update" used in edit mode. */
7
+ updateWord?: string;
8
+ /** Label for the English word "Cancel" used in edit mode. */
9
+ cancelWord?: string;
10
+ /** Callback function for when edit mode update button is clicked */
11
+ onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
12
+ /** Callback functionf or when edit cancel update button is clicked */
13
+ onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
14
+ /** Message text */
15
+ content?: string;
16
+ }
17
+ declare const MessageInput: React.FunctionComponent<MessageInputProps>;
18
+ export default MessageInput;
package/dist/cjs/Message/MessageInput.js ADDED
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+ // ============================================================================
3
+ // Chatbot Main - Message Input
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_core_1 = require("@patternfly/react-core");
22
+ const MessageInput = (_a) => {
23
+ var { editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, content } = _a, props = __rest(_a, ["editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "content"]);
24
+ const [messageText, setMessageText] = react_1.default.useState(content !== null && content !== void 0 ? content : '');
25
+ const onChange = (event, value) => {
26
+ setMessageText(value);
27
+ };
28
+ return (react_1.default.createElement(react_core_1.Form, Object.assign({}, props),
29
+ react_1.default.createElement(react_core_1.TextArea, { placeholder: editPlaceholder, value: messageText, onChange: onChange, "aria-label": editPlaceholder, autoResize: true }),
30
+ react_1.default.createElement(react_core_1.ActionGroup, { className: "pf-chatbot__message-edit-buttons" },
31
+ react_1.default.createElement(react_core_1.Button, { variant: "primary", onClick: (event) => onEditUpdate && onEditUpdate(event, messageText) }, updateWord),
32
+ react_1.default.createElement(react_core_1.Button, { variant: "secondary", onClick: onEditCancel }, cancelWord))));
33
+ };
34
+ exports.default = MessageInput;
package/dist/css/main.css CHANGED
@@ -1018,6 +1018,10 @@
1018
1018
  flex-wrap: wrap;
1019
1019
  }
1020
1020
 
1021
+ .pf-chatbot__message-edit-buttons {
1022
+ --pf-v6-c-form__group--m-action--MarginBlockStart: 0;
1023
+ }
1024
+
1021
1025
  .pf-chatbot__message-loading {
1022
1026
  width: 36px;
1023
1027
  padding: var(--pf-t--global--spacer--sm);
package/dist/css/main.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC5HJ;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACrBJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AASF;AAAA;EACE;;AACA;AAAA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AAUF;AAAA;AAAA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;ACzMF;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AASJ;EACE;;;AAQF;EACE;;;ACrDJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AAUJ;AAAA;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;ACzIF;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;EACA;EACA;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC5CN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AASA;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;ACrFF;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;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;ADrDN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AEhFF;EACE;EACA;EACA;EACA;EAGA;;;ADDE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AEpDN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;ALjBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AMjDN;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;ACnBJ;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;;AAIF;EACE;EACA;EACA;;;AC7BJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;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;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;ACxGN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAII;AAAA;AAAA;IACE;IACA;;;ADvCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AEhDJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AChCF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACvER;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;AC5BJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EACA;EACA;EAEA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC5HJ;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACrBJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AASF;AAAA;EACE;;AACA;AAAA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AAUF;AAAA;AAAA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;ACzMF;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AASJ;EACE;;;AAQF;EACE;;;ACrDJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AAUJ;AAAA;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;ACzIF;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;EACA;EACA;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC5CN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AASA;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;ACrFF;EACE;EACA;EACA;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIA;EADF;IAEI;;;;AAIN;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;;ACrEJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;AChDR;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;ACjGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;ADrDN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AEhFF;EACE;EACA;EACA;EACA;EAGA;;;ADDE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AEpDN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;ALjBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AMjDN;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;ACnBJ;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;;AAIF;EACE;EACA;EACA;;;AC7BJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;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;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;ACxGN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAII;AAAA;AAAA;IACE;IACA;;;ADvCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AEhDJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AChCF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACvER;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;AC5BJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EACA;EACA;EAEA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}
package/dist/esm/Message/Message.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { ReactNode } from 'react';
2
- import { AlertProps, AvatarProps, ButtonProps, LabelGroupProps } from '@patternfly/react-core';
2
+ import { AlertProps, AvatarProps, ButtonProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
3
3
  import { ActionProps } from '../ResponseActions/ResponseActions';
4
4
  import { SourcesCardProps } from '../SourcesCard';
5
5
  import { QuickStart, QuickstartAction } from './QuickStarts/types';
@@ -106,6 +106,20 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
106
106
  error?: AlertProps;
107
107
  /** Props for links */
108
108
  linkProps?: ButtonProps;
109
+ /** Whether message is in edit mode */
110
+ isEditable?: boolean;
111
+ /** Placeholder for edit input */
112
+ editPlaceholder?: string;
113
+ /** Label for the English word "Update" used in edit mode. */
114
+ updateWord?: string;
115
+ /** Label for the English word "Cancel" used in edit mode. */
116
+ cancelWord?: string;
117
+ /** Callback function for when edit mode update button is clicked */
118
+ onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
119
+ /** Callback functionf or when edit cancel update button is clicked */
120
+ onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
121
+ /** Props for edit form */
122
+ editFormProps?: FormProps;
109
123
  }
110
124
  export declare const MessageBase: React.FunctionComponent<MessageProps>;
111
125
  declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
package/dist/esm/Message/Message.js CHANGED
@@ -41,8 +41,13 @@ import rehypeExternalLinks from 'rehype-external-links';
41
41
  import rehypeSanitize from 'rehype-sanitize';
42
42
  import LinkMessage from './LinkMessage/LinkMessage';
43
43
  import ErrorMessage from './ErrorMessage/ErrorMessage';
44
+ import MessageInput from './MessageInput';
44
45
  export const MessageBase = (_a) => {
45
- 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, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error } = _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", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error"]);
46
+ 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, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, editFormProps } = _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", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "editFormProps"]);
47
+ const [messageText, setMessageText] = React.useState(content);
48
+ React.useEffect(() => {
49
+ setMessageText(content);
50
+ }, [content]);
46
51
  const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
47
52
  let rehypePlugins = [rehypeUnwrapImages];
48
53
  if (openLinkInNewTab) {
@@ -60,6 +65,51 @@ export const MessageBase = (_a) => {
60
65
  // Keep timestamps consistent between Timestamp component and aria-label
61
66
  const date = new Date();
62
67
  const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
68
+ const renderMessage = () => {
69
+ if (isLoading) {
70
+ return React.createElement(MessageLoading, { loadingWord: loadingWord });
71
+ }
72
+ if (isEditable) {
73
+ return (React.createElement(React.Fragment, null,
74
+ beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
75
+ React.createElement(MessageInput, Object.assign({ content: content, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, text) => {
76
+ onEditUpdate && onEditUpdate(event);
77
+ setMessageText(text);
78
+ }, onEditCancel: onEditCancel }, editFormProps))));
79
+ }
80
+ return (React.createElement(React.Fragment, null,
81
+ beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
82
+ error ? (React.createElement(ErrorMessage, Object.assign({}, error))) : (React.createElement(Markdown, { components: {
83
+ p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
84
+ code: (_a) => {
85
+ var { children } = _a, props = __rest(_a, ["children"]);
86
+ return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
87
+ },
88
+ h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
89
+ h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
90
+ h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
91
+ h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
92
+ h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
93
+ h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
94
+ blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
95
+ ul: (props) => React.createElement(UnorderedListMessage, Object.assign({}, props)),
96
+ ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
97
+ li: (props) => React.createElement(ListItemMessage, Object.assign({}, props)),
98
+ table: (props) => React.createElement(TableMessage, Object.assign({}, props, tableProps)),
99
+ tbody: (props) => React.createElement(TbodyMessage, Object.assign({}, props)),
100
+ thead: (props) => React.createElement(TheadMessage, Object.assign({}, props)),
101
+ tr: (props) => React.createElement(TrMessage, Object.assign({}, props)),
102
+ td: (props) => {
103
+ // Conflicts with Td type
104
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
105
+ const { width } = props, rest = __rest(props, ["width"]);
106
+ return React.createElement(TdMessage, Object.assign({}, rest));
107
+ },
108
+ th: (props) => React.createElement(ThMessage, Object.assign({}, props)),
109
+ img: (props) => React.createElement(ImageMessage, Object.assign({}, props)),
110
+ a: (props) => (React.createElement(LinkMessage, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps), props.children))
111
+ }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins }, messageText))));
112
+ };
63
113
  return (React.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props),
64
114
  React.createElement(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
65
115
  React.createElement("div", { className: "pf-chatbot__message-contents" },
@@ -70,39 +120,8 @@ export const MessageBase = (_a) => {
70
120
  React.createElement(Timestamp, { date: date }, timestamp)),
71
121
  React.createElement("div", { className: "pf-chatbot__message-response" },
72
122
  React.createElement("div", { className: "pf-chatbot__message-and-actions" },
73
- isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(React.Fragment, null,
74
- beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
75
- error ? (React.createElement(ErrorMessage, Object.assign({}, error))) : (React.createElement(Markdown, { components: {
76
- p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
77
- code: (_a) => {
78
- var { children } = _a, props = __rest(_a, ["children"]);
79
- return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
80
- },
81
- h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
82
- h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
83
- h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
84
- h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
85
- h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
86
- h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
87
- blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
88
- ul: (props) => React.createElement(UnorderedListMessage, Object.assign({}, props)),
89
- ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
90
- li: (props) => React.createElement(ListItemMessage, Object.assign({}, props)),
91
- table: (props) => React.createElement(TableMessage, Object.assign({}, props, tableProps)),
92
- tbody: (props) => React.createElement(TbodyMessage, Object.assign({}, props)),
93
- thead: (props) => React.createElement(TheadMessage, Object.assign({}, props)),
94
- tr: (props) => React.createElement(TrMessage, Object.assign({}, props)),
95
- td: (props) => {
96
- // Conflicts with Td type
97
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
98
- const { width } = props, rest = __rest(props, ["width"]);
99
- return React.createElement(TdMessage, Object.assign({}, rest));
100
- },
101
- th: (props) => React.createElement(ThMessage, Object.assign({}, props)),
102
- img: (props) => React.createElement(ImageMessage, Object.assign({}, props)),
103
- a: (props) => (React.createElement(LinkMessage, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps), props.children))
104
- }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins }, content)),
105
- afterMainContent && React.createElement(React.Fragment, null, afterMainContent))),
123
+ renderMessage(),
124
+ afterMainContent && React.createElement(React.Fragment, null, afterMainContent),
106
125
  !isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
107
126
  quickStarts && quickStarts.quickStart && (React.createElement(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
108
127
  !isLoading && actions && React.createElement(ResponseActions, { actions: actions }),
package/dist/esm/Message/Message.test.js CHANGED
@@ -620,4 +620,50 @@ describe('Message', () => {
620
620
  expect(screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
621
621
  expect(screen.queryByText('Test')).toBeFalsy();
622
622
  });
623
+ it('should handle isEditable when there is message content', () => {
624
+ render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, content: "Test" }));
625
+ expect(screen.getByRole('textbox')).toBeTruthy();
626
+ expect(screen.getByRole('textbox')).toHaveValue('Test');
627
+ expect(screen.getByRole('button', { name: /Update/i })).toBeTruthy();
628
+ expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
629
+ });
630
+ it('should handle isEditable when there is no message content', () => {
631
+ render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true }));
632
+ expect(screen.getByRole('textbox')).toBeTruthy();
633
+ expect(screen.getByRole('textbox')).toHaveValue('');
634
+ expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Edit prompt message...');
635
+ expect(screen.getByRole('button', { name: /Update/i })).toBeTruthy();
636
+ expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
637
+ });
638
+ it('should be able to change edit placeholder', () => {
639
+ render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, editPlaceholder: "I am a placeholder" }));
640
+ expect(screen.getByRole('textbox')).toBeTruthy();
641
+ expect(screen.getByRole('textbox')).toHaveValue('');
642
+ expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'I am a placeholder');
643
+ });
644
+ it('should be able to change updateWord', () => {
645
+ render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, updateWord: "Submit" }));
646
+ expect(screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
647
+ });
648
+ it('should be able to change cancelWord', () => {
649
+ render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, cancelWord: "Don't submit" }));
650
+ expect(screen.getByRole('button', { name: /Don't submit/i })).toBeTruthy();
651
+ });
652
+ it('should be able to add onEditUpdate', () => __awaiter(void 0, void 0, void 0, function* () {
653
+ const spy = jest.fn();
654
+ render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditUpdate: spy }));
655
+ yield userEvent.click(screen.getByRole('button', { name: /Update/i }));
656
+ expect(spy).toHaveBeenCalledTimes(1);
657
+ }));
658
+ it('should be able to add onEditCancel', () => __awaiter(void 0, void 0, void 0, function* () {
659
+ const spy = jest.fn();
660
+ render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditCancel: spy }));
661
+ yield userEvent.click(screen.getByRole('button', { name: /Cancel/i }));
662
+ expect(spy).toHaveBeenCalledTimes(1);
663
+ }));
664
+ it('should be able to add editFormProps', () => {
665
+ const { container } = render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, editFormProps: { className: 'test' } }));
666
+ const form = container.querySelector('form');
667
+ expect(form).toHaveClass('test');
668
+ });
623
669
  });
package/dist/esm/Message/MessageInput.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import { FormProps } from '@patternfly/react-core';
3
+ export interface MessageInputProps extends FormProps {
4
+ /** Placeholder for edit input */
5
+ editPlaceholder?: string;
6
+ /** Label for the English word "Update" used in edit mode. */
7
+ updateWord?: string;
8
+ /** Label for the English word "Cancel" used in edit mode. */
9
+ cancelWord?: string;
10
+ /** Callback function for when edit mode update button is clicked */
11
+ onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
12
+ /** Callback functionf or when edit cancel update button is clicked */
13
+ onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
14
+ /** Message text */
15
+ content?: string;
16
+ }
17
+ declare const MessageInput: React.FunctionComponent<MessageInputProps>;
18
+ export default MessageInput;
package/dist/esm/Message/MessageInput.js ADDED
@@ -0,0 +1,29 @@
1
+ // ============================================================================
2
+ // Chatbot Main - Message Input
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
+ import { ActionGroup, Button, Form, TextArea } from '@patternfly/react-core';
17
+ const MessageInput = (_a) => {
18
+ var { editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, content } = _a, props = __rest(_a, ["editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "content"]);
19
+ const [messageText, setMessageText] = React.useState(content !== null && content !== void 0 ? content : '');
20
+ const onChange = (event, value) => {
21
+ setMessageText(value);
22
+ };
23
+ return (React.createElement(Form, Object.assign({}, props),
24
+ React.createElement(TextArea, { placeholder: editPlaceholder, value: messageText, onChange: onChange, "aria-label": editPlaceholder, autoResize: true }),
25
+ React.createElement(ActionGroup, { className: "pf-chatbot__message-edit-buttons" },
26
+ React.createElement(Button, { variant: "primary", onClick: (event) => onEditUpdate && onEditUpdate(event, messageText) }, updateWord),
27
+ React.createElement(Button, { variant: "secondary", onClick: onEditCancel }, cancelWord))));
28
+ };
29
+ export default MessageInput;
package/dist/tsconfig.tsbuildinfo CHANGED
@@ -1 +1 @@
1
- {"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}
1
+ {"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/chatbot",
3
- "version": "2.2.0-prerelease.45",
3
+ "version": "2.2.0-prerelease.46",
4
4
  "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx CHANGED
@@ -276,7 +276,7 @@ _Italic text, formatted with single underscores_
276
276
  <Radio
277
277
  isChecked={variant === 'error'}
278
278
  onChange={() => setVariant('error')}
279
- name="bot-message-error"
279
+ name="bot-message-type"
280
280
  label="Error"
281
281
  id="error"
282
282
  />
package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx CHANGED
@@ -6,6 +6,7 @@ import { AlertActionLink, Form, FormGroup, Radio } from '@patternfly/react-core'
6
6
 
7
7
  export const UserMessageExample: React.FunctionComponent = () => {
8
8
  const [variant, setVariant] = React.useState('code');
9
+ const [isEditable, setIsEditable] = React.useState(true);
9
10
 
10
11
  /* eslint-disable indent */
11
12
  const renderContent = () => {
@@ -33,7 +34,7 @@ export const UserMessageExample: React.FunctionComponent = () => {
33
34
  case 'image':
34
35
  return image;
35
36
  default:
36
- return;
37
+ return '';
37
38
  }
38
39
  };
39
40
  /* eslint-enable indent */
@@ -175,88 +176,131 @@ _Italic text, formatted with single underscores_
175
176
  <FormGroup role="radiogroup" isInline fieldId="user-message-type" label="Message content type">
176
177
  <Radio
177
178
  isChecked={variant === 'code'}
178
- onChange={() => setVariant('code')}
179
+ onChange={() => {
180
+ setVariant('code');
181
+ setIsEditable(true);
182
+ }}
179
183
  name="user-message-type"
180
184
  label="Code"
181
185
  id="user-code"
182
186
  />
183
187
  <Radio
184
188
  isChecked={variant === 'inlineCode'}
185
- onChange={() => setVariant('inlineCode')}
189
+ onChange={() => {
190
+ setVariant('inlineCode');
191
+ setIsEditable(true);
192
+ }}
186
193
  name="user-message-type"
187
194
  label="Inline code"
188
195
  id="user-inline-code"
189
196
  />
190
197
  <Radio
191
198
  isChecked={variant === 'heading'}
192
- onChange={() => setVariant('heading')}
199
+ onChange={() => {
200
+ setVariant('heading');
201
+ setIsEditable(true);
202
+ }}
193
203
  name="user-message-type"
194
204
  label="Heading"
195
205
  id="user-heading"
196
206
  />
197
207
  <Radio
198
208
  isChecked={variant === 'blockQuotes'}
199
- onChange={() => setVariant('blockQuotes')}
209
+ onChange={() => {
210
+ setVariant('blockQuotes');
211
+ setIsEditable(true);
212
+ }}
200
213
  name="user-message-type"
201
214
  label="Block quote"
202
215
  id="user-block-quotes"
203
216
  />
204
217
  <Radio
205
218
  isChecked={variant === 'emphasis'}
206
- onChange={() => setVariant('emphasis')}
219
+ onChange={() => {
220
+ setVariant('emphasis');
221
+ setIsEditable(true);
222
+ }}
207
223
  name="user-message-type"
208
224
  label="Emphasis"
209
225
  id="user-emphasis"
210
226
  />
211
227
  <Radio
212
228
  isChecked={variant === 'link'}
213
- onChange={() => setVariant('link')}
229
+ onChange={() => {
230
+ setVariant('link');
231
+ setIsEditable(true);
232
+ }}
214
233
  name="user-message-type"
215
234
  label="Link"
216
235
  id="user-link"
217
236
  />
218
237
  <Radio
219
238
  isChecked={variant === 'unorderedList'}
220
- onChange={() => setVariant('unorderedList')}
239
+ onChange={() => {
240
+ setVariant('unorderedList');
241
+ setIsEditable(true);
242
+ }}
221
243
  name="user-message-type"
222
244
  label="Unordered list"
223
245
  id="user-unordered-list"
224
246
  />
225
247
  <Radio
226
248
  isChecked={variant === 'orderedList'}
227
- onChange={() => setVariant('orderedList')}
249
+ onChange={() => {
250
+ setVariant('orderedList');
251
+ setIsEditable(true);
252
+ }}
228
253
  name="user-message-type"
229
254
  label="Ordered list"
230
255
  id="user-ordered-list"
231
256
  />
232
257
  <Radio
233
258
  isChecked={variant === 'moreComplexList'}
234
- onChange={() => setVariant('moreComplexList')}
259
+ onChange={() => {
260
+ setVariant('moreComplexList');
261
+ setIsEditable(true);
262
+ }}
235
263
  name="user-message-type"
236
264
  label="More complex list"
237
265
  id="user-more-complex-list"
238
266
  />
239
267
  <Radio
240
268
  isChecked={variant === 'table'}
241
- onChange={() => setVariant('table')}
269
+ onChange={() => {
270
+ setVariant('table');
271
+ setIsEditable(true);
272
+ }}
242
273
  name="user-message-type"
243
274
  label="Table"
244
275
  id="user-table"
245
276
  />
246
277
  <Radio
247
278
  isChecked={variant === 'image'}
248
- onChange={() => setVariant('image')}
279
+ onChange={() => {
280
+ setVariant('image');
281
+ setIsEditable(true);
282
+ }}
249
283
  name="user-message-type"
250
284
  label="Image"
251
285
  id="user-image"
252
286
  />
253
287
  <Radio
254
288
  isChecked={variant === 'error'}
255
- onChange={() => setVariant('error')}
256
- name="user-message-error"
289
+ onChange={() => {
290
+ setVariant('error');
291
+ setIsEditable(true);
292
+ }}
293
+ name="user-message-type"
257
294
  label="Error"
258
295
  id="user-error"
259
296
  />
297
+ <Radio
298
+ isChecked={variant === 'editable'}
299
+ onChange={() => setVariant('editable')}
300
+ name="user-message-type"
301
+ label="Editable"
302
+ id="user-edit"
303
+ />
260
304
  </FormGroup>
261
305
  </Form>
262
306
  <Message
@@ -267,7 +311,10 @@ _Italic text, formatted with single underscores_
267
311
  tableProps={
268
312
  variant === 'table' ? { 'aria-label': 'App information and user roles for user messages' } : undefined
269
313
  }
314
+ isEditable={variant === 'editable' ? isEditable : false}
270
315
  error={variant === 'error' ? error : undefined}
316
+ onEditUpdate={() => setIsEditable(false)}
317
+ onEditCancel={() => setIsEditable(false)}
271
318
  />
272
319
  </>
273
320
  );
package/src/Message/Message.scss CHANGED
@@ -97,6 +97,10 @@
97
97
  flex-wrap: wrap;
98
98
  }
99
99
 
100
+ .pf-chatbot__message-edit-buttons {
101
+ --pf-v6-c-form__group--m-action--MarginBlockStart: 0;
102
+ }
103
+
100
104
  @import './MessageLoading';
101
105
  @import './CodeBlockMessage/CodeBlockMessage';
102
106
  @import './TextMessage/TextMessage';
package/src/Message/Message.test.tsx CHANGED
@@ -815,4 +815,52 @@ describe('Message', () => {
815
815
  expect(screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
816
816
  expect(screen.queryByText('Test')).toBeFalsy();
817
817
  });
818
+ it('should handle isEditable when there is message content', () => {
819
+ render(<Message avatar="./img" role="user" name="User" isEditable content="Test" />);
820
+ expect(screen.getByRole('textbox')).toBeTruthy();
821
+ expect(screen.getByRole('textbox')).toHaveValue('Test');
822
+ expect(screen.getByRole('button', { name: /Update/i })).toBeTruthy();
823
+ expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
824
+ });
825
+ it('should handle isEditable when there is no message content', () => {
826
+ render(<Message avatar="./img" role="user" name="User" isEditable />);
827
+ expect(screen.getByRole('textbox')).toBeTruthy();
828
+ expect(screen.getByRole('textbox')).toHaveValue('');
829
+ expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Edit prompt message...');
830
+ expect(screen.getByRole('button', { name: /Update/i })).toBeTruthy();
831
+ expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
832
+ });
833
+ it('should be able to change edit placeholder', () => {
834
+ render(<Message avatar="./img" role="user" name="User" isEditable editPlaceholder="I am a placeholder" />);
835
+ expect(screen.getByRole('textbox')).toBeTruthy();
836
+ expect(screen.getByRole('textbox')).toHaveValue('');
837
+ expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'I am a placeholder');
838
+ });
839
+ it('should be able to change updateWord', () => {
840
+ render(<Message avatar="./img" role="user" name="User" isEditable updateWord="Submit" />);
841
+ expect(screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
842
+ });
843
+ it('should be able to change cancelWord', () => {
844
+ render(<Message avatar="./img" role="user" name="User" isEditable cancelWord="Don't submit" />);
845
+ expect(screen.getByRole('button', { name: /Don't submit/i })).toBeTruthy();
846
+ });
847
+ it('should be able to add onEditUpdate', async () => {
848
+ const spy = jest.fn();
849
+ render(<Message avatar="./img" role="user" name="User" isEditable onEditUpdate={spy} />);
850
+ await userEvent.click(screen.getByRole('button', { name: /Update/i }));
851
+ expect(spy).toHaveBeenCalledTimes(1);
852
+ });
853
+ it('should be able to add onEditCancel', async () => {
854
+ const spy = jest.fn();
855
+ render(<Message avatar="./img" role="user" name="User" isEditable onEditCancel={spy} />);
856
+ await userEvent.click(screen.getByRole('button', { name: /Cancel/i }));
857
+ expect(spy).toHaveBeenCalledTimes(1);
858
+ });
859
+ it('should be able to add editFormProps', () => {
860
+ const { container } = render(
861
+ <Message avatar="./img" role="user" name="User" isEditable editFormProps={{ className: 'test' }} />
862
+ );
863
+ const form = container.querySelector('form');
864
+ expect(form).toHaveClass('test');
865
+ });
818
866
  });
package/src/Message/Message.tsx CHANGED
@@ -12,6 +12,7 @@ import {
12
12
  AvatarProps,
13
13
  ButtonProps,
14
14
  ContentVariants,
15
+ FormProps,
15
16
  Label,
16
17
  LabelGroupProps,
17
18
  Timestamp,
@@ -45,6 +46,7 @@ import rehypeSanitize from 'rehype-sanitize';
45
46
  import { PluggableList } from 'react-markdown/lib';
46
47
  import LinkMessage from './LinkMessage/LinkMessage';
47
48
  import ErrorMessage from './ErrorMessage/ErrorMessage';
49
+ import MessageInput from './MessageInput';
48
50
 
49
51
  export interface MessageAttachment {
50
52
  /** Name of file attached to the message */
@@ -148,6 +150,20 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
148
150
  error?: AlertProps;
149
151
  /** Props for links */
150
152
  linkProps?: ButtonProps;
153
+ /** Whether message is in edit mode */
154
+ isEditable?: boolean;
155
+ /** Placeholder for edit input */
156
+ editPlaceholder?: string;
157
+ /** Label for the English word "Update" used in edit mode. */
158
+ updateWord?: string;
159
+ /** Label for the English word "Cancel" used in edit mode. */
160
+ cancelWord?: string;
161
+ /** Callback function for when edit mode update button is clicked */
162
+ onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
163
+ /** Callback functionf or when edit cancel update button is clicked */
164
+ onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
165
+ /** Props for edit form */
166
+ editFormProps?: FormProps;
151
167
  }
152
168
 
153
169
  export const MessageBase: React.FunctionComponent<MessageProps> = ({
@@ -178,8 +194,21 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
178
194
  additionalRehypePlugins = [],
179
195
  linkProps,
180
196
  error,
197
+ isEditable,
198
+ editPlaceholder = 'Edit prompt message...',
199
+ updateWord = 'Update',
200
+ cancelWord = 'Cancel',
201
+ onEditUpdate,
202
+ onEditCancel,
203
+ editFormProps,
181
204
  ...props
182
205
  }: MessageProps) => {
206
+ const [messageText, setMessageText] = React.useState(content);
207
+
208
+ React.useEffect(() => {
209
+ setMessageText(content);
210
+ }, [content]);
211
+
183
212
  const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
184
213
  let rehypePlugins: PluggableList = [rehypeUnwrapImages];
185
214
  if (openLinkInNewTab) {
@@ -197,6 +226,82 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
197
226
  // Keep timestamps consistent between Timestamp component and aria-label
198
227
  const date = new Date();
199
228
  const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
229
+
230
+ const renderMessage = () => {
231
+ if (isLoading) {
232
+ return <MessageLoading loadingWord={loadingWord} />;
233
+ }
234
+ if (isEditable) {
235
+ return (
236
+ <>
237
+ {beforeMainContent && <>{beforeMainContent}</>}
238
+ <MessageInput
239
+ content={content}
240
+ editPlaceholder={editPlaceholder}
241
+ updateWord={updateWord}
242
+ cancelWord={cancelWord}
243
+ onEditUpdate={(event, text) => {
244
+ onEditUpdate && onEditUpdate(event);
245
+ setMessageText(text);
246
+ }}
247
+ onEditCancel={onEditCancel}
248
+ {...editFormProps}
249
+ />
250
+ </>
251
+ );
252
+ }
253
+ return (
254
+ <>
255
+ {beforeMainContent && <>{beforeMainContent}</>}
256
+ {error ? (
257
+ <ErrorMessage {...error} />
258
+ ) : (
259
+ <Markdown
260
+ components={{
261
+ p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
262
+ code: ({ children, ...props }) => (
263
+ <CodeBlockMessage {...props} {...codeBlockProps}>
264
+ {children}
265
+ </CodeBlockMessage>
266
+ ),
267
+ h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
268
+ h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
269
+ h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
270
+ h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
271
+ h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
272
+ h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
273
+ blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
274
+ ul: (props) => <UnorderedListMessage {...props} />,
275
+ ol: (props) => <OrderedListMessage {...props} />,
276
+ li: (props) => <ListItemMessage {...props} />,
277
+ table: (props) => <TableMessage {...props} {...tableProps} />,
278
+ tbody: (props) => <TbodyMessage {...props} />,
279
+ thead: (props) => <TheadMessage {...props} />,
280
+ tr: (props) => <TrMessage {...props} />,
281
+ td: (props) => {
282
+ // Conflicts with Td type
283
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
284
+ const { width, ...rest } = props;
285
+ return <TdMessage {...rest} />;
286
+ },
287
+ th: (props) => <ThMessage {...props} />,
288
+ img: (props) => <ImageMessage {...props} />,
289
+ a: (props) => (
290
+ <LinkMessage href={props.href} rel={props.rel} target={props.target} {...linkProps}>
291
+ {props.children}
292
+ </LinkMessage>
293
+ )
294
+ }}
295
+ remarkPlugins={[remarkGfm]}
296
+ rehypePlugins={rehypePlugins}
297
+ >
298
+ {messageText}
299
+ </Markdown>
300
+ )}
301
+ </>
302
+ );
303
+ };
304
+
200
305
  return (
201
306
  <section
202
307
  aria-label={`Message from ${role} - ${dateString}`}
@@ -229,59 +334,8 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
229
334
  </div>
230
335
  <div className="pf-chatbot__message-response">
231
336
  <div className="pf-chatbot__message-and-actions">
232
- {isLoading ? (
233
- <MessageLoading loadingWord={loadingWord} />
234
- ) : (
235
- <>
236
- {beforeMainContent && <>{beforeMainContent}</>}
237
- {error ? (
238
- <ErrorMessage {...error} />
239
- ) : (
240
- <Markdown
241
- components={{
242
- p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
243
- code: ({ children, ...props }) => (
244
- <CodeBlockMessage {...props} {...codeBlockProps}>
245
- {children}
246
- </CodeBlockMessage>
247
- ),
248
- h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
249
- h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
250
- h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
251
- h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
252
- h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
253
- h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
254
- blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
255
- ul: (props) => <UnorderedListMessage {...props} />,
256
- ol: (props) => <OrderedListMessage {...props} />,
257
- li: (props) => <ListItemMessage {...props} />,
258
- table: (props) => <TableMessage {...props} {...tableProps} />,
259
- tbody: (props) => <TbodyMessage {...props} />,
260
- thead: (props) => <TheadMessage {...props} />,
261
- tr: (props) => <TrMessage {...props} />,
262
- td: (props) => {
263
- // Conflicts with Td type
264
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
265
- const { width, ...rest } = props;
266
- return <TdMessage {...rest} />;
267
- },
268
- th: (props) => <ThMessage {...props} />,
269
- img: (props) => <ImageMessage {...props} />,
270
- a: (props) => (
271
- <LinkMessage href={props.href} rel={props.rel} target={props.target} {...linkProps}>
272
- {props.children}
273
- </LinkMessage>
274
- )
275
- }}
276
- remarkPlugins={[remarkGfm]}
277
- rehypePlugins={rehypePlugins}
278
- >
279
- {content}
280
- </Markdown>
281
- )}
282
- {afterMainContent && <>{afterMainContent}</>}
283
- </>
284
- )}
337
+ {renderMessage()}
338
+ {afterMainContent && <>{afterMainContent}</>}
285
339
  {!isLoading && sources && <SourcesCard {...sources} />}
286
340
  {quickStarts && quickStarts.quickStart && (
287
341
  <QuickStartTile
package/src/Message/MessageInput.tsx ADDED
@@ -0,0 +1,59 @@
1
+ // ============================================================================
2
+ // Chatbot Main - Message Input
3
+ // ============================================================================
4
+
5
+ import React from 'react';
6
+ import { ActionGroup, Button, Form, FormProps, TextArea } from '@patternfly/react-core';
7
+
8
+ export interface MessageInputProps extends FormProps {
9
+ /** Placeholder for edit input */
10
+ editPlaceholder?: string;
11
+ /** Label for the English word "Update" used in edit mode. */
12
+ updateWord?: string;
13
+ /** Label for the English word "Cancel" used in edit mode. */
14
+ cancelWord?: string;
15
+ /** Callback function for when edit mode update button is clicked */
16
+ onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
17
+ /** Callback functionf or when edit cancel update button is clicked */
18
+ onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
19
+ /** Message text */
20
+ content?: string;
21
+ }
22
+
23
+ const MessageInput: React.FunctionComponent<MessageInputProps> = ({
24
+ editPlaceholder = 'Edit prompt message...',
25
+ updateWord = 'Update',
26
+ cancelWord = 'Cancel',
27
+ onEditUpdate,
28
+ onEditCancel,
29
+ content,
30
+ ...props
31
+ }: MessageInputProps) => {
32
+ const [messageText, setMessageText] = React.useState(content ?? '');
33
+
34
+ const onChange = (event: React.FormEvent<HTMLTextAreaElement>, value: string) => {
35
+ setMessageText(value);
36
+ };
37
+
38
+ return (
39
+ <Form {...props}>
40
+ <TextArea
41
+ placeholder={editPlaceholder}
42
+ value={messageText}
43
+ onChange={onChange}
44
+ aria-label={editPlaceholder}
45
+ autoResize
46
+ />
47
+ <ActionGroup className="pf-chatbot__message-edit-buttons">
48
+ <Button variant="primary" onClick={(event) => onEditUpdate && onEditUpdate(event, messageText)}>
49
+ {updateWord}
50
+ </Button>
51
+ <Button variant="secondary" onClick={onEditCancel}>
52
+ {cancelWord}
53
+ </Button>
54
+ </ActionGroup>
55
+ </Form>
56
+ );
57
+ };
58
+
59
+ export default MessageInput;