Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: remove generation interrupted message (#3949)

Browse Source
This commit is contained in:
Faisal Amir 2024-11-06 10:17:39 +07:00 committed by GitHub
parent 1ad897782c
commit ff123d50f2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 50 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
web/containers/ErrorMessage/index.test.tsx
View File

@ -1,54 +1,43 @@
// 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', () => {
const originalModule = jest.requireActual('jotai') const originalModule = jest.requireActual('jotai')
return { return {
...originalModule, ...originalModule,
useAtomValue: jest.fn(), useAtomValue: jest.fn(),
useSetAtom: jest.fn(), useSetAtom: jest.fn(),
} }
}) })
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(screen.getByText('troubleshooting assistance')).toBeInTheDocument();
});
it('calls regenerateMessage when Regenerate button is clicked', () => { expect(
const message: ThreadMessage = { screen.getByText('Apologies, something’s amiss!')
id: '1', ).toBeInTheDocument()
status: MessageStatus.Stopped, expect(screen.getByText('troubleshooting assistance')).toBeInTheDocument()
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)
}); })
}); })

32
web/containers/ErrorMessage/index.tsx
View File

@ -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&apos;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}