@patternfly/chatbot 6.3.0-prerelease.1 → 6.3.0-prerelease.2

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

@@ -28,10 +28,14 @@ export interface MessageBarProps extends TextAreaProps {
     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;
     /** 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 */

package/dist/cjs/MessageBar/MessageBar.js

@@ -24,7 +24,7 @@ const AttachButton_1 = require("./AttachButton");
 const AttachMenu_1 = __importDefault(require("../AttachMenu"));
 const StopButton_1 = __importDefault(require("./StopButton"));
 const MessageBar = (_a) => {
-    var { onSendMessage, className, alwayShowSendButton, hasAttachButton = true, hasMicrophoneButton, handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "hasAttachButton", "hasMicrophoneButton", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value"]);
+    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value"]);
     // Text Input
     // --------------------------------------------------------------------------
     const [message, setMessage] = react_1.default.useState(value !== null && value !== void 0 ? value : '');
@@ -186,7 +186,7 @@ const MessageBar = (_a) => {
     };
     const messageBarContents = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "pf-chatbot__message-bar-input" },
-            react_1.default.createElement(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? 'Listening' : 'Send a message...', placeholder: isListeningMessage ? 'Listening' : 'Send a message...', ref: textareaRef, onKeyDown: handleKeyDown }, props))),
+            react_1.default.createElement(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown }, props))),
         react_1.default.createElement("div", { className: "pf-chatbot__message-bar-actions" }, renderButtons())));
     if (attachMenuProps) {
         return (react_1.default.createElement(AttachMenu_1.default, Object.assign({ toggle: (toggleRef) => (react_1.default.createElement("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}` }, messageBarContents)), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {

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

@@ -76,6 +76,12 @@ describe('Message bar', () => {
         expect(spy).toHaveBeenCalledTimes(1);
         expect(spy).toHaveBeenCalledWith(expect.any(Object), 'A');
     }));
+    it('can use specified placeholder text', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, placeholder: "test placeholder" }));
+        const input = react_2.screen.getByRole('textbox', { name: /test placeholder/i });
+        yield user_event_1.default.type(input, 'Hello world');
+        expect(input).toHaveTextContent('Hello world');
+    }));
     // Send button
     // --------------------------------------------------------------------------
     it('shows send button when text is input', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -229,6 +235,13 @@ describe('Message bar', () => {
         yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Microphone button' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
     }));
+    it('can customize the listening placeholder', () => __awaiter(void 0, void 0, void 0, function* () {
+        mockSpeechRecognition();
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, listeningText: "I am listening" }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Microphone button' }));
+        const input = react_2.screen.getByRole('textbox', { name: /I am listening/i });
+        expect(input).toBeTruthy();
+    }));
     it('can handle buttonProps props appropriately for microphone', () => __awaiter(void 0, void 0, void 0, function* () {
         mockSpeechRecognition();
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { props: { 'aria-label': 'Test' } } } }));

package/dist/esm/MessageBar/MessageBar.d.ts

@@ -28,10 +28,14 @@ export interface MessageBarProps extends TextAreaProps {
     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;
     /** 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 */

package/dist/esm/MessageBar/MessageBar.js

@@ -18,7 +18,7 @@ import { AttachButton } from './AttachButton';
 import AttachMenu from '../AttachMenu';
 import StopButton from './StopButton';
 export const MessageBar = (_a) => {
-    var { onSendMessage, className, alwayShowSendButton, hasAttachButton = true, hasMicrophoneButton, handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "hasAttachButton", "hasMicrophoneButton", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value"]);
+    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value"]);
     // Text Input
     // --------------------------------------------------------------------------
     const [message, setMessage] = React.useState(value !== null && value !== void 0 ? value : '');
@@ -180,7 +180,7 @@ export const MessageBar = (_a) => {
     };
     const messageBarContents = (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "pf-chatbot__message-bar-input" },
-            React.createElement(TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? 'Listening' : 'Send a message...', placeholder: isListeningMessage ? 'Listening' : 'Send a message...', ref: textareaRef, onKeyDown: handleKeyDown }, props))),
+            React.createElement(TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown }, props))),
         React.createElement("div", { className: "pf-chatbot__message-bar-actions" }, renderButtons())));
     if (attachMenuProps) {
         return (React.createElement(AttachMenu, Object.assign({ toggle: (toggleRef) => (React.createElement("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}` }, messageBarContents)), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {

package/dist/esm/MessageBar/MessageBar.test.js

@@ -71,6 +71,12 @@ describe('Message bar', () => {
         expect(spy).toHaveBeenCalledTimes(1);
         expect(spy).toHaveBeenCalledWith(expect.any(Object), 'A');
     }));
+    it('can use specified placeholder text', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(MessageBar, { onSendMessage: jest.fn, placeholder: "test placeholder" }));
+        const input = screen.getByRole('textbox', { name: /test placeholder/i });
+        yield userEvent.type(input, 'Hello world');
+        expect(input).toHaveTextContent('Hello world');
+    }));
     // Send button
     // --------------------------------------------------------------------------
     it('shows send button when text is input', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -224,6 +230,13 @@ describe('Message bar', () => {
         yield userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
         expect(screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
     }));
+    it('can customize the listening placeholder', () => __awaiter(void 0, void 0, void 0, function* () {
+        mockSpeechRecognition();
+        render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, listeningText: "I am listening" }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+        const input = screen.getByRole('textbox', { name: /I am listening/i });
+        expect(input).toBeTruthy();
+    }));
     it('can handle buttonProps props appropriately for microphone', () => __awaiter(void 0, void 0, void 0, function* () {
         mockSpeechRecognition();
         render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { props: { 'aria-label': 'Test' } } } }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.3.0-prerelease.1",
+  "version": "6.3.0-prerelease.2",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/MessageBar/MessageBar.test.tsx

@@ -96,6 +96,12 @@ describe('Message bar', () => {
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(expect.any(Object), 'A');
   });
+  it('can use specified placeholder text', async () => {
+    render(<MessageBar onSendMessage={jest.fn} placeholder="test placeholder" />);
+    const input = screen.getByRole('textbox', { name: /test placeholder/i });
+    await userEvent.type(input, 'Hello world');
+    expect(input).toHaveTextContent('Hello world');
+  });
 
   // Send button
   // --------------------------------------------------------------------------
@@ -304,6 +310,13 @@ describe('Message bar', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
     expect(screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
   });
+  it('can customize the listening placeholder', async () => {
+    mockSpeechRecognition();
+    render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton listeningText="I am listening" />);
+    await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+    const input = screen.getByRole('textbox', { name: /I am listening/i });
+    expect(input).toBeTruthy();
+  });
   it('can handle buttonProps props appropriately for microphone', async () => {
     mockSpeechRecognition();
     render(

package/src/MessageBar/MessageBar.tsx

@@ -37,10 +37,14 @@ export interface MessageBarProps extends TextAreaProps {
   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;
   /** 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 */
@@ -78,8 +82,10 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   onSendMessage,
   className,
   alwayShowSendButton,
+  placeholder = 'Send a message...',
   hasAttachButton = true,
   hasMicrophoneButton,
+  listeningText = 'Listening',
   handleAttach,
   attachMenuProps,
   isSendButtonDisabled,
@@ -322,8 +328,8 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
           className="pf-chatbot__message-textarea"
           value={message}
           onChange={handleChange}
-          aria-label={isListeningMessage ? 'Listening' : 'Send a message...'}
-          placeholder={isListeningMessage ? 'Listening' : 'Send a message...'}
+          aria-label={isListeningMessage ? listeningText : placeholder}
+          placeholder={isListeningMessage ? listeningText : placeholder}
           ref={textareaRef}
           onKeyDown={handleKeyDown}
           {...props}