Skip to content

Commit

Permalink
fix: disable chatbot button when assistant is loading, improve error …
Browse files Browse the repository at this point in the history
…messages
Fernando Pauer authored and fpauer committed Nov 26, 2024

Verified

This commit was signed with the committer’s verified signature.
DanielSchiavini Daniel Schiavini
1 parent 135bc48 commit 18385e6
Showing 7 changed files with 72 additions and 7 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { type CSSProperties, useEffect } from 'react';
import { type CSSProperties, useEffect, useState } from 'react';
import { AssistantButton } from './assistantButton';
import {
borderRadiusButton,
@@ -41,7 +41,8 @@ export const AssistantFloatingMenu = ({
messageOverrides: DashboardMessages;
}) => {
const dispatch = useDispatch();
const { startAction, clearAll } = useAssistant({});
const [isAssistantLoading, setAssistantLoading] = useState<boolean>(false);
const { startAction, clearAll, messages } = useAssistant({});
const assistantState = useSelector(
(state: DashboardState) => state.assistant
);
@@ -50,6 +51,15 @@ export const AssistantFloatingMenu = ({
? CHATBOT_OPENED_WIDTH
: CHATBOT_CLOSED_WIDTH;

useEffect(() => {
const lastMessage = messages[messages.length - 1];
if (lastMessage) {
setAssistantLoading(
lastMessage.sender === 'user' || !!lastMessage.loading
);
}
}, [messages]);

useEffect(() => {
clearAll();
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -185,7 +195,9 @@ export const AssistantFloatingMenu = ({
label={assistant.floatingMenu.buttonGenerateSummary}
onClick={handleSummary}
disabled={
totalSelected === 0 || totalSelected > MAX_ITEMS_SELECTED
totalSelected === 0 ||
totalSelected > MAX_ITEMS_SELECTED ||
isAssistantLoading
}
/>
</div>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -148,7 +148,9 @@ describe(Chatbot, () => {
onSubmit={() => {}}
/>
);
expect(getByText(content)).toBeInTheDocument();
expect(
getByText(/Access Denied Exception/, { exact: false })
).toBeInTheDocument();
});

it('should render prompts and be able to click on it', async () => {
@@ -212,6 +214,38 @@ describe(Chatbot, () => {
expect(mockOnCLick).toBeCalledWith(message);
});

it('should not allow submit user message when assistant is loading', async () => {
const user = ue.setup();
const mockOnCLick = jest.fn();
const message = 'What is the root cause of the alarm?';

const { getByPlaceholderText, getByTestId } = render(
<Chatbot
height={400}
messages={[
{
content: '',
sender: 'assistant',
type: MessageType.TEXT,
id: 'UniqueID',
loading: true,
},
]}
onSubmit={mockOnCLick}
/>
);

const textarea = getByPlaceholderText(
'Ask me anything about your IoT data'
);
expect(textarea).toBeInTheDocument();
await user.type(textarea!, message);

const inputButton = getByTestId('assistant-chatbot-input-button');
expect(inputButton).toBeInTheDocument();
expect(inputButton).toBeDisabled();
});

it('should call onClose callback when chatbot is closed', async () => {
const user = ue.setup();
const mockOnClose = vi.fn();
Original file line number Diff line number Diff line change
@@ -112,7 +112,7 @@ export const ChatbotInputBox = ({
iconName='send'
variant='icon'
onClick={handleClick}
disabled={!value}
disabled={disabled || !value}
data-testid='assistant-chatbot-input-button'
/>
</div>
Original file line number Diff line number Diff line change
@@ -1,17 +1,31 @@
import Box from '@cloudscape-design/components/box';
import Alert from '@cloudscape-design/components/alert';
import { useIntl } from 'react-intl';

export interface AssistantErrorProps {
message: string;
}

export const AssistantError = ({ message }: AssistantErrorProps) => {
const intl = useIntl();
return (
<div className='message-row'>
<Box variant='div' padding='s'>
&nbsp;
</Box>
<Alert statusIconAriaLabel='Error' type='error'>
<Alert
header={intl.formatMessage({
id: 'assistant-chatbot.error.header',
defaultMessage: 'Assitant failure',
})}
statusIconAriaLabel='Error'
type='error'
>
{intl.formatMessage({
id: 'assistant-chatbot.error.header',
defaultMessage:
'An unexpected error occurred when the assistant was processing. Please try again in few seconds.',
})}
{message}
</Alert>
</div>
Original file line number Diff line number Diff line change
@@ -8,7 +8,9 @@ export type AssistantChatbotMessageKeys =
| 'assistant-chatbot.newChat'
| 'assistant-chatbot.message.copy'
| 'assistant-chatbot.message.copyError'
| 'assistant-chatbot.message.copySuccess';
| 'assistant-chatbot.message.copySuccess'
| 'assistant-chatbot.error.header'
| 'assistant-chatbot.error.defaultMessage';

export const AssistantActionPanel: Messages<AssistantChatbotMessageKeys> = {
en: {
@@ -21,5 +23,8 @@ export const AssistantActionPanel: Messages<AssistantChatbotMessageKeys> = {
'assistant-chatbot.message.copy': 'Copy',
'assistant-chatbot.message.copyError': 'Failed to copy',
'assistant-chatbot.message.copySuccess': 'Content copied',
'assistant-chatbot.error.header': 'Assistant failure',
'assistant-chatbot.error.defaultMessage':
'An unexpected error occurred when the assistant was processing. Please try again in few seconds.',
},
};

0 comments on commit 18385e6

Please sign in to comment.