Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -329,16 +329,6 @@ To enable the stop button, set `hasStopButton` to `true` and pass in a `handleSt

```

### Message bar with AI indicator styles

To add a more pronounced AI indicator style to the message bar, pass `hasAiIndicator` to the `<MessageBar>` component. You can also enable a "thinking" animation by passing in `isThinking`.

This example shows a simplified method of handling the "thinking" animation: after a user sends a message, the `isThinking` property is set to `true` to trigger the animation, then returns to `false` after 10 seconds to halt the animation.

```ts file="./ChatbotMessageBarIndicatorThinking.tsx" isBeta

```

## Chat history

### Chat history drawer
Expand Down
12 changes: 0 additions & 12 deletions packages/module/src/MessageBar/MessageBar.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -477,18 +477,6 @@ describe('Message bar', () => {
expect(container.querySelector('.pf-m-primary')).toBeTruthy();
});

it('Renders with class pf-v6-m-ai-indicator when hasAiIndicator is true', () => {
render(<MessageBar onSendMessage={jest.fn} hasAiIndicator />);

expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-ai-indicator');
});

it('Renders with class pf-v6-m-thinking when isThinking is true', () => {
render(<MessageBar onSendMessage={jest.fn} isThinking />);

expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-thinking');
});

it('Renders with flex-basis of auto by default', () => {
render(<MessageBar onSendMessage={jest.fn} />);

Expand Down
8 changes: 0 additions & 8 deletions packages/module/src/MessageBar/MessageBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -122,10 +122,6 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
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;
/** @beta Flag indicating whether the message bar has an AI indicator border. */
hasAiIndicator?: boolean;
/** @beta Flag indicating whether the chatbot is thinking in response to a query, adding an animation to the message bar. */
isThinking?: boolean;
}

export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
Expand Down Expand Up @@ -160,8 +156,6 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
isPrimary,
additionalActions,
forceMultilineLayout = false,
hasAiIndicator,
isThinking,
...props
}: MessageBarProps) => {
// Text Input
Expand Down Expand Up @@ -539,8 +533,6 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
className={css(
'pf-chatbot__message-bar',
isPrimary && 'pf-m-primary',
hasAiIndicator && 'pf-v6-m-ai-indicator',
isThinking && 'pf-v6-m-thinking',
isMultiline && 'pf-m-multiline',
className
)}
Expand Down
Loading