@patternfly/chatbot 1.0.0

package/dist/cjs/Message/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rehypeCodeBlockToggle = exports.default = void 0;
+var Message_1 = require("./Message");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Message_1).default; } });
+var rehypeCodeBlockToggle_1 = require("./Plugins/rehypeCodeBlockToggle");
+Object.defineProperty(exports, "rehypeCodeBlockToggle", { enumerable: true, get: function () { return rehypeCodeBlockToggle_1.rehypeCodeBlockToggle; } });
+__exportStar(require("./ErrorMessage/ErrorMessage"), exports);
+__exportStar(require("./MessageAndActions"), exports);
+__exportStar(require("./MessageAttachments"), exports);
+__exportStar(require("./Message"), exports);
+__exportStar(require("./MessageLoading"), exports);
+__exportStar(require("./MessageInput"), exports);
+__exportStar(require("./QuickResponse"), exports);
+__exportStar(require("./QuickStarts"), exports);
+__exportStar(require("./UserFeedback"), exports);

package/dist/cjs/MessageBar/AttachButton.d.ts

@@ -0,0 +1,47 @@
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
+export interface AttachButtonProps extends ButtonProps {
+    /** Callback for when button is clicked */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Callback function for AttachButton when an attachment is made */
+    onAttachAccepted?: (data: File[], event: DropEvent) => void;
+    /** Specifies the file types accepted by the attachment upload component.
+     *  Files that don't match the accepted types will be disabled in the file picker.
+     *  For example,
+     *  allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
+     **/
+    allowedFileTypes?: Accept;
+    /** Class name for AttachButton */
+    className?: string;
+    /** Props to control if the AttachButton should be disabled */
+    isDisabled?: boolean;
+    /** Props to control the PF Tooltip component */
+    tooltipProps?: Omit<TooltipProps, 'content'>;
+    /** Ref applied to AttachButton and used in tooltip */
+    innerRef?: React.Ref<any>;
+    /** English text "Attach" used in the tooltip */
+    tooltipContent?: string;
+    /** Test id applied to input */
+    inputTestId?: string;
+    /** Whether button is compact */
+    isCompact?: boolean;
+    /** Minimum file size allowed */
+    minSize?: number;
+    /** Max file size allowed */
+    maxSize?: number;
+    /** Max number of files allowed */
+    maxFiles?: number;
+    /** Whether attachments are disabled */
+    isAttachmentDisabled?: boolean;
+    /** Callback when file(s) are attached */
+    onAttach?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
+    /** Callback function for AttachButton when an attachment fails */
+    onAttachRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
+    /** Validator for files; see https://react-dropzone.js.org/#!/Custom%20validation for more information */
+    validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
+    /** Additional props passed to react-dropzone */
+    dropzoneProps?: DropzoneOptions;
+    /** Icon displayed in attach button */
+    icon?: React.ReactNode;
+}
+export declare const AttachButton: import("react").ForwardRefExoticComponent<AttachButtonProps & import("react").RefAttributes<any>>;

package/dist/cjs/MessageBar/AttachButton.js

@@ -0,0 +1,30 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttachButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// Import PatternFly components
+const react_core_1 = require("@patternfly/react-core");
+const react_dropzone_1 = require("react-dropzone");
+const paperclip_icon_1 = require("@patternfly/react-icons/dist/esm/icons/paperclip-icon");
+const AttachButtonBase = (_a) => {
+    var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId, isCompact, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps, icon = (0, jsx_runtime_1.jsx)(paperclip_icon_1.PaperclipIcon, {}) } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps", "icon"]);
+    const { open, getInputProps } = (0, react_dropzone_1.useDropzone)(Object.assign({ multiple: true, onDropAccepted: onAttachAccepted, accept: allowedFileTypes, minSize,
+        maxSize,
+        maxFiles, disabled: isAttachmentDisabled, onDrop: onAttach, onDropRejected: onAttachRejected, validator }, dropzoneProps));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ "data-testid": inputTestId }, getInputProps(), { hidden: true })), (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--attach", content: tooltipContent, position: "top", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
+                // prevents VO announcements of both aria label and tooltip
+                aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ variant: "plain", ref: innerRef, className: `pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true, children: icon }), size: isCompact ? 'sm' : undefined }, props)) }))] }));
+};
+exports.AttachButton = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(AttachButtonBase, Object.assign({ innerRef: ref }, props))));

package/dist/cjs/MessageBar/AttachButton.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/cjs/MessageBar/AttachButton.test.js

@@ -0,0 +1,152 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const AttachButton_1 = require("./AttachButton");
+describe('Attach button', () => {
+    it('should render button correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, {}));
+        expect(react_1.screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+    });
+    it('should handle isDisabled prop', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { isDisabled: true }));
+        expect(react_1.screen.getByRole('button', { name: 'Attach' })).toBeDisabled();
+    });
+    it('should handle spread props, including aria-label', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { "aria-label": "test" }));
+        expect(react_1.screen.getByRole('button', { name: 'test' }));
+    });
+    it('should handle onClick', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { onClick: spy }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Attach' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should handle className prop', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { className: "test" }));
+        expect(react_1.screen.getByRole('button', { name: 'Attach' })).toHaveClass('test');
+    });
+    it('should handle custom tooltip correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { onClick: jest.fn, tooltipContent: "Test" }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Attach' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+    }));
+    it('should handle tooltipProps prop', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { tooltipProps: { id: 'test' } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Attach' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Attach' })).toHaveAttribute('id', 'test');
+    }));
+    // Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
+    // See also https://developer.mozilla.org/en-US/docs/Web/API/File/File for what that file variable is doing
+    it('should handle onAttachAccepted prop', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { onAttachAccepted: spy, inputTestId: "input" }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Attach' }));
+        const file = new File(['test'], 'test.json');
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(input.files).toHaveLength(1);
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should handle isCompact', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { isCompact: true, "data-testid": "button" }));
+        expect(react_1.screen.getByTestId('button')).toHaveClass('pf-m-compact');
+    });
+    it('should set correct accept attribute on file input', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", allowedFileTypes: { 'text/plain': ['.txt'] } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Attach' }));
+        const input = react_1.screen.getByTestId('input');
+        expect(input).toHaveAttribute('accept', 'text/plain,.txt');
+    }));
+    it('should call onAttachAccepted when file type is accepted', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachAccepted = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", allowedFileTypes: { 'text/plain': ['.txt'] }, onAttachAccepted: onAttachAccepted }));
+        const file = new File(['hello'], 'example.txt', { type: 'text/plain' });
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(onAttachAccepted).toHaveBeenCalled();
+        const [attachedFile] = onAttachAccepted.mock.calls[0][0];
+        expect(attachedFile).toEqual(file);
+    }));
+    it('should not call onAttachAccepted when file type is not accepted', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachAccepted = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", allowedFileTypes: { 'text/plain': ['.txt'] }, onAttachAccepted: onAttachAccepted }));
+        const file = new File(['[]'], 'example.json', { type: 'application/json' });
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(onAttachAccepted).not.toHaveBeenCalled();
+    }));
+    it('should respect minSize restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", minSize: 1000, onAttachRejected: onAttachRejected }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should respect maxSize restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", maxSize: 100, onAttachRejected: onAttachRejected }));
+        const largeContent = 'x'.repeat(200);
+        const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should respect maxFiles restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", maxFiles: 1, onAttachRejected: onAttachRejected }));
+        const files = [
+            new File(['Test1'], 'example1.txt', { type: 'text/plain' }),
+            new File(['Test2'], 'example2.txt', { type: 'text/plain' })
+        ];
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, files);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should be disabled when isAttachmentDisabled is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onFileDrop = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", isAttachmentDisabled: true }));
+        const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(onFileDrop).not.toHaveBeenCalled();
+    }));
+    it('should call onAttach when files are attached', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttach = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", onAttach: onAttach }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(onAttach).toHaveBeenCalled();
+    }));
+    it('should use custom validator when provided', () => __awaiter(void 0, void 0, void 0, function* () {
+        const validator = jest.fn().mockReturnValue({ message: 'Custom error' });
+        const onAttachRejected = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", validator: validator, onAttachRejected: onAttachRejected }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(validator).toHaveBeenCalledWith(file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should handle icon prop', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { icon: (0, jsx_runtime_1.jsx)("img", { alt: "", src: "" }) }));
+        expect(react_1.screen.getByRole('img')).toBeVisible();
+    });
+});

package/dist/cjs/MessageBar/MessageBar.d.ts

@@ -0,0 +1,124 @@
+import type { FunctionComponent } from 'react';
+import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
+import { ButtonProps, MenuSearchInputProps, MenuSearchProps, SearchInputProps, TextAreaProps, TooltipProps } from '@patternfly/react-core';
+import { AttachButtonProps } from './AttachButton';
+import { ChatbotDisplayMode } from '../Chatbot';
+export interface MessageBarWithAttachMenuProps {
+    /** Flag to enable whether attach menu is open */
+    isAttachMenuOpen: boolean;
+    /** Callback to close attach menu */
+    setIsAttachMenuOpen: (isOpen: boolean) => void;
+    /** Items in menu */
+    attachMenuItems: React.ReactNode;
+    /** A callback for when the attachment menu toggle is clicked */
+    onAttachMenuToggleClick: () => void;
+    /** A callback for when the input value in the menu changes. */
+    onAttachMenuInputChange?: (value: string) => void;
+    /** Function callback called when user selects item in menu. */
+    onAttachMenuSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void;
+    /** Placeholder for search input */
+    attachMenuInputPlaceholder?: string;
+    /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
+    onAttachMenuOnOpenChangeKeys?: string[];
+    /** Callback to change the open state of the menu. Triggered by clicking outside of the menu. */
+    onAttachMenuOpenChange?: (isOpen: boolean) => void;
+    /** Additional props passed to MenuSearch component in attach menu */
+    menuSearchProps?: Omit<MenuSearchProps, 'ref'>;
+    /** Additional props passed to MenuSearchInput component in attach menu */
+    menuSearchInputProps?: Omit<MenuSearchInputProps, 'ref'>;
+    /** Additional props passed to SearchInput component in attach menu */
+    searchInputProps?: SearchInputProps;
+}
+export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
+    /** Callback to get the value of input message by user */
+    onSendMessage: (message: string | number) => void;
+    /** Class Name for the MessageBar component */
+    className?: string;
+    /** Flag to always to show the send button. By default send button is shown when there is a message in the input field */
+    alwayShowSendButton?: boolean;
+    /** Placeholder for message input */
+    placeholder?: string;
+    /** Flag to disable/enable the Attach button  */
+    hasAttachButton?: boolean;
+    /** Whether the attach button is rendered before or after the message input. */
+    attachButtonPosition?: 'start' | 'end';
+    /** Flag to enable the Microphone button  */
+    hasMicrophoneButton?: boolean;
+    /** Placeholder text when listening */
+    listeningText?: string;
+    /** Flag to enable the Stop button, used for streaming content */
+    hasStopButton?: boolean;
+    /** Callback function for when stop button is clicked */
+    handleStopButton?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Callback function for when attach button is used to upload a file */
+    handleAttach?: (data: File[], event: DropEvent) => void;
+    /** Specifies the file types accepted by the attachment upload component.
+     *  Files that don't match the accepted types will be disabled in the file picker.
+     *  For example,
+     *   allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
+     **/
+    allowedFileTypes?: Accept;
+    /** Minimum file size allowed */
+    minSize?: number;
+    /** Max file size allowed */
+    maxSize?: number;
+    /** Max number of files allowed */
+    maxFiles?: number;
+    /** Whether attachments are disabled */
+    isAttachmentDisabled?: boolean;
+    /** Callback when file(s) are attached */
+    onAttach?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
+    /** Callback function for AttachButton when an attachment fails */
+    onAttachRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
+    /** Validator for files; see https://react-dropzone.js.org/#!/Custom%20validation for more information */
+    validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
+    /** Additional props passed to react-dropzone */
+    dropzoneProps?: DropzoneOptions;
+    /** Props to enable a menu that opens when the Attach button is clicked, instead of the attachment window */
+    attachMenuProps?: MessageBarWithAttachMenuProps;
+    /** Flag to provide manual control over whether send button is disabled */
+    isSendButtonDisabled?: boolean;
+    /** Prop to allow passage of additional props to buttons */
+    buttonProps?: {
+        attach?: AttachButtonProps & {
+            props?: ButtonProps;
+        };
+        stop?: {
+            tooltipContent?: string;
+            props?: ButtonProps;
+            tooltipProps?: Omit<TooltipProps, 'content'>;
+        };
+        send?: {
+            tooltipContent?: string;
+            props?: ButtonProps;
+            tooltipProps?: Omit<TooltipProps, 'content'>;
+        };
+        microphone?: {
+            tooltipContent?: {
+                active?: string;
+                inactive?: string;
+            };
+            language?: string;
+            props?: ButtonProps;
+            tooltipProps?: Omit<TooltipProps, 'content'>;
+        };
+    };
+    /** A callback for when the text area value changes. */
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string | number) => void;
+    /** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
+    displayMode?: ChatbotDisplayMode;
+    /** Whether message bar is compact */
+    isCompact?: boolean;
+    /** Ref applied to message bar textarea, for use with focus or other custom behaviors  */
+    innerRef?: React.Ref<HTMLTextAreaElement>;
+    /** Sets background color to primary */
+    isPrimary?: boolean;
+    /** Additional actions to render for the message bar. This will force a multiline layout, and the actions will render at the start of the container.  */
+    additionalActions?: React.ReactNode;
+    /** Flag indicating whether a multiline layout for the message input and actions should be forced. This can be used to always render actions below the message input. */
+    forceMultilineLayout?: boolean;
+}
+export declare const MessageBarBase: FunctionComponent<MessageBarProps>;
+declare const MessageBar: import("react").ForwardRefExoticComponent<MessageBarProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export { MessageBar };
+export default MessageBar;