ui: remove generation interrupted message (#3949)
This commit is contained in:
parent
1ad897782c
commit
ff123d50f2
@ -1,11 +1,11 @@
|
|||||||
// ErrorMessage.test.tsx
|
// ErrorMessage.test.tsx
|
||||||
import React from 'react';
|
import React from 'react'
|
||||||
import { render, screen, fireEvent } from '@testing-library/react';
|
import { render, screen, fireEvent } from '@testing-library/react'
|
||||||
import '@testing-library/jest-dom';
|
import '@testing-library/jest-dom'
|
||||||
import ErrorMessage from './index';
|
import ErrorMessage from './index'
|
||||||
import { ThreadMessage, MessageStatus, ErrorCode } from '@janhq/core';
|
import { ThreadMessage, MessageStatus, ErrorCode } from '@janhq/core'
|
||||||
import { useAtomValue, useSetAtom } from 'jotai';
|
import { useAtomValue, useSetAtom } from 'jotai'
|
||||||
import useSendChatMessage from '@/hooks/useSendChatMessage';
|
import useSendChatMessage from '@/hooks/useSendChatMessage'
|
||||||
|
|
||||||
// Mock the dependencies
|
// Mock the dependencies
|
||||||
jest.mock('jotai', () => {
|
jest.mock('jotai', () => {
|
||||||
@ -20,35 +20,24 @@ jest.mock('jotai', () => {
|
|||||||
jest.mock('@/hooks/useSendChatMessage', () => ({
|
jest.mock('@/hooks/useSendChatMessage', () => ({
|
||||||
__esModule: true,
|
__esModule: true,
|
||||||
default: jest.fn(),
|
default: jest.fn(),
|
||||||
}));
|
}))
|
||||||
|
|
||||||
describe('ErrorMessage Component', () => {
|
describe('ErrorMessage Component', () => {
|
||||||
const mockSetMainState = jest.fn();
|
const mockSetMainState = jest.fn()
|
||||||
const mockSetSelectedSettingScreen = jest.fn();
|
const mockSetSelectedSettingScreen = jest.fn()
|
||||||
const mockSetModalTroubleShooting = jest.fn();
|
const mockSetModalTroubleShooting = jest.fn()
|
||||||
const mockResendChatMessage = jest.fn();
|
const mockResendChatMessage = jest.fn()
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
jest.clearAllMocks();
|
jest.clearAllMocks()
|
||||||
(useAtomValue as jest.Mock).mockReturnValue([]);
|
;(useAtomValue as jest.Mock).mockReturnValue([])
|
||||||
(useSetAtom as jest.Mock).mockReturnValue(mockSetMainState);
|
;(useSetAtom as jest.Mock).mockReturnValue(mockSetMainState)
|
||||||
(useSetAtom as jest.Mock).mockReturnValue(mockSetSelectedSettingScreen);
|
;(useSetAtom as jest.Mock).mockReturnValue(mockSetSelectedSettingScreen)
|
||||||
(useSetAtom as jest.Mock).mockReturnValue(mockSetModalTroubleShooting);
|
;(useSetAtom as jest.Mock).mockReturnValue(mockSetModalTroubleShooting)
|
||||||
(useSendChatMessage as jest.Mock).mockReturnValue({ resendChatMessage: mockResendChatMessage });
|
;(useSendChatMessage as jest.Mock).mockReturnValue({
|
||||||
});
|
resendChatMessage: mockResendChatMessage,
|
||||||
|
})
|
||||||
it('renders stopped message correctly', () => {
|
})
|
||||||
const message: ThreadMessage = {
|
|
||||||
id: '1',
|
|
||||||
status: MessageStatus.Stopped,
|
|
||||||
content: [{ text: { value: 'Test message' } }],
|
|
||||||
} as ThreadMessage;
|
|
||||||
|
|
||||||
render(<ErrorMessage message={message} />);
|
|
||||||
|
|
||||||
expect(screen.getByText("Oops! The generation was interrupted. Let's give it another go!")).toBeInTheDocument();
|
|
||||||
expect(screen.getByText('Regenerate')).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders error message with InvalidApiKey correctly', () => {
|
it('renders error message with InvalidApiKey correctly', () => {
|
||||||
const message: ThreadMessage = {
|
const message: ThreadMessage = {
|
||||||
@ -56,13 +45,13 @@ describe('ErrorMessage Component', () => {
|
|||||||
status: MessageStatus.Error,
|
status: MessageStatus.Error,
|
||||||
error_code: ErrorCode.InvalidApiKey,
|
error_code: ErrorCode.InvalidApiKey,
|
||||||
content: [{ text: { value: 'Invalid API Key' } }],
|
content: [{ text: { value: 'Invalid API Key' } }],
|
||||||
} as ThreadMessage;
|
} as ThreadMessage
|
||||||
|
|
||||||
render(<ErrorMessage message={message} />);
|
render(<ErrorMessage message={message} />)
|
||||||
|
|
||||||
expect(screen.getByTestId('invalid-API-key-error')).toBeInTheDocument();
|
expect(screen.getByTestId('invalid-API-key-error')).toBeInTheDocument()
|
||||||
expect(screen.getByText('Settings')).toBeInTheDocument();
|
expect(screen.getByText('Settings')).toBeInTheDocument()
|
||||||
});
|
})
|
||||||
|
|
||||||
it('renders general error message correctly', () => {
|
it('renders general error message correctly', () => {
|
||||||
const message: ThreadMessage = {
|
const message: ThreadMessage = {
|
||||||
@ -70,26 +59,15 @@ describe('ErrorMessage Component', () => {
|
|||||||
status: MessageStatus.Error,
|
status: MessageStatus.Error,
|
||||||
error_code: ErrorCode.Unknown,
|
error_code: ErrorCode.Unknown,
|
||||||
content: [{ text: { value: 'Unknown error occurred' } }],
|
content: [{ text: { value: 'Unknown error occurred' } }],
|
||||||
} as ThreadMessage;
|
} as ThreadMessage
|
||||||
|
|
||||||
render(<ErrorMessage message={message} />);
|
render(<ErrorMessage message={message} />)
|
||||||
|
|
||||||
expect(screen.getByText("Apologies, something’s amiss!")).toBeInTheDocument();
|
expect(
|
||||||
expect(screen.getByText('troubleshooting assistance')).toBeInTheDocument();
|
screen.getByText('Apologies, something’s amiss!')
|
||||||
});
|
).toBeInTheDocument()
|
||||||
|
expect(screen.getByText('troubleshooting assistance')).toBeInTheDocument()
|
||||||
it('calls regenerateMessage when Regenerate button is clicked', () => {
|
})
|
||||||
const message: ThreadMessage = {
|
|
||||||
id: '1',
|
|
||||||
status: MessageStatus.Stopped,
|
|
||||||
content: [{ text: { value: 'Test message' } }],
|
|
||||||
} as ThreadMessage;
|
|
||||||
|
|
||||||
render(<ErrorMessage message={message} />);
|
|
||||||
|
|
||||||
fireEvent.click(screen.getByText('Regenerate'));
|
|
||||||
expect(mockResendChatMessage).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('opens troubleshooting modal when link is clicked', () => {
|
it('opens troubleshooting modal when link is clicked', () => {
|
||||||
const message: ThreadMessage = {
|
const message: ThreadMessage = {
|
||||||
@ -97,11 +75,11 @@ describe('ErrorMessage Component', () => {
|
|||||||
status: MessageStatus.Error,
|
status: MessageStatus.Error,
|
||||||
error_code: ErrorCode.Unknown,
|
error_code: ErrorCode.Unknown,
|
||||||
content: [{ text: { value: 'Unknown error occurred' } }],
|
content: [{ text: { value: 'Unknown error occurred' } }],
|
||||||
} as ThreadMessage;
|
} as ThreadMessage
|
||||||
|
|
||||||
render(<ErrorMessage message={message} />);
|
render(<ErrorMessage message={message} />)
|
||||||
|
|
||||||
fireEvent.click(screen.getByText('troubleshooting assistance'));
|
fireEvent.click(screen.getByText('troubleshooting assistance'))
|
||||||
expect(mockSetModalTroubleShooting).toHaveBeenCalledWith(true);
|
expect(mockSetModalTroubleShooting).toHaveBeenCalledWith(true)
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|||||||
@ -4,9 +4,8 @@ import {
|
|||||||
MessageStatus,
|
MessageStatus,
|
||||||
ThreadMessage,
|
ThreadMessage,
|
||||||
} from '@janhq/core'
|
} from '@janhq/core'
|
||||||
import { Button } from '@janhq/joi'
|
|
||||||
import { useAtomValue, useSetAtom } from 'jotai'
|
import { useAtomValue, useSetAtom } from 'jotai'
|
||||||
import { RefreshCcw } from 'lucide-react'
|
|
||||||
|
|
||||||
import AutoLink from '@/containers/AutoLink'
|
import AutoLink from '@/containers/AutoLink'
|
||||||
import ModalTroubleShooting, {
|
import ModalTroubleShooting, {
|
||||||
@ -15,27 +14,17 @@ import ModalTroubleShooting, {
|
|||||||
|
|
||||||
import { MainViewState } from '@/constants/screens'
|
import { MainViewState } from '@/constants/screens'
|
||||||
|
|
||||||
import useSendChatMessage from '@/hooks/useSendChatMessage'
|
|
||||||
|
|
||||||
import { mainViewStateAtom } from '@/helpers/atoms/App.atom'
|
import { mainViewStateAtom } from '@/helpers/atoms/App.atom'
|
||||||
import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
|
|
||||||
import { selectedSettingAtom } from '@/helpers/atoms/Setting.atom'
|
import { selectedSettingAtom } from '@/helpers/atoms/Setting.atom'
|
||||||
import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
|
import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
|
||||||
|
|
||||||
const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
|
const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
|
||||||
const messages = useAtomValue(getCurrentChatMessagesAtom)
|
|
||||||
const { resendChatMessage } = useSendChatMessage()
|
|
||||||
const setModalTroubleShooting = useSetAtom(modalTroubleShootingAtom)
|
const setModalTroubleShooting = useSetAtom(modalTroubleShootingAtom)
|
||||||
const setMainState = useSetAtom(mainViewStateAtom)
|
const setMainState = useSetAtom(mainViewStateAtom)
|
||||||
const setSelectedSettingScreen = useSetAtom(selectedSettingAtom)
|
const setSelectedSettingScreen = useSetAtom(selectedSettingAtom)
|
||||||
const activeThread = useAtomValue(activeThreadAtom)
|
const activeThread = useAtomValue(activeThreadAtom)
|
||||||
|
|
||||||
const regenerateMessage = async () => {
|
|
||||||
const lastMessageIndex = messages.length - 1
|
|
||||||
const message = messages[lastMessageIndex]
|
|
||||||
resendChatMessage(message)
|
|
||||||
}
|
|
||||||
|
|
||||||
const getErrorTitle = () => {
|
const getErrorTitle = () => {
|
||||||
switch (message.error_code) {
|
switch (message.error_code) {
|
||||||
case ErrorCode.Unknown:
|
case ErrorCode.Unknown:
|
||||||
@ -77,23 +66,6 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mt-10">
|
<div className="mt-10">
|
||||||
{message.status === MessageStatus.Stopped && (
|
|
||||||
<div key={message.id} className="flex flex-col items-center">
|
|
||||||
<span className="mb-3 text-center font-medium text-[hsla(var(--text-secondary))]">
|
|
||||||
Oops! The generation was interrupted. Let's give it another go!
|
|
||||||
</span>
|
|
||||||
<Button
|
|
||||||
className="w-min"
|
|
||||||
theme="ghost"
|
|
||||||
variant="outline"
|
|
||||||
onClick={regenerateMessage}
|
|
||||||
>
|
|
||||||
<RefreshCcw size={14} className="" />
|
|
||||||
<span className="w-2" />
|
|
||||||
Regenerate
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{message.status === MessageStatus.Error && (
|
{message.status === MessageStatus.Error && (
|
||||||
<div
|
<div
|
||||||
key={message.id}
|
key={message.id}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user