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

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

@ -1,54 +1,43 @@
// ErrorMessage.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import ErrorMessage from './index';
import { ThreadMessage, MessageStatus, ErrorCode } from '@janhq/core';
import { useAtomValue, useSetAtom } from 'jotai';
import useSendChatMessage from '@/hooks/useSendChatMessage';
import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import ErrorMessage from './index'
import { ThreadMessage, MessageStatus, ErrorCode } from '@janhq/core'
import { useAtomValue, useSetAtom } from 'jotai'
import useSendChatMessage from '@/hooks/useSendChatMessage'
// Mock the dependencies
jest.mock('jotai', () => {
const originalModule = jest.requireActual('jotai')
return {
...originalModule,
useAtomValue: jest.fn(),
useSetAtom: jest.fn(),
}
})
const originalModule = jest.requireActual('jotai')
return {
...originalModule,
useAtomValue: jest.fn(),
useSetAtom: jest.fn(),
}
})
jest.mock('@/hooks/useSendChatMessage', () => ({
__esModule: true,
default: jest.fn(),
}));
}))
describe('ErrorMessage Component', () => {
const mockSetMainState = jest.fn();
const mockSetSelectedSettingScreen = jest.fn();
const mockSetModalTroubleShooting = jest.fn();
const mockResendChatMessage = jest.fn();
const mockSetMainState = jest.fn()
const mockSetSelectedSettingScreen = jest.fn()
const mockSetModalTroubleShooting = jest.fn()
const mockResendChatMessage = jest.fn()
beforeEach(() => {
jest.clearAllMocks();
(useAtomValue as jest.Mock).mockReturnValue([]);
(useSetAtom as jest.Mock).mockReturnValue(mockSetMainState);
(useSetAtom as jest.Mock).mockReturnValue(mockSetSelectedSettingScreen);
(useSetAtom as jest.Mock).mockReturnValue(mockSetModalTroubleShooting);
(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();
});
jest.clearAllMocks()
;(useAtomValue as jest.Mock).mockReturnValue([])
;(useSetAtom as jest.Mock).mockReturnValue(mockSetMainState)
;(useSetAtom as jest.Mock).mockReturnValue(mockSetSelectedSettingScreen)
;(useSetAtom as jest.Mock).mockReturnValue(mockSetModalTroubleShooting)
;(useSendChatMessage as jest.Mock).mockReturnValue({
resendChatMessage: mockResendChatMessage,
})
})
it('renders error message with InvalidApiKey correctly', () => {
const message: ThreadMessage = {
@ -56,13 +45,13 @@ describe('ErrorMessage Component', () => {
status: MessageStatus.Error,
error_code: ErrorCode.InvalidApiKey,
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.getByText('Settings')).toBeInTheDocument();
});
expect(screen.getByTestId('invalid-API-key-error')).toBeInTheDocument()
expect(screen.getByText('Settings')).toBeInTheDocument()
})
it('renders general error message correctly', () => {
const message: ThreadMessage = {
@ -70,26 +59,15 @@ describe('ErrorMessage Component', () => {
status: MessageStatus.Error,
error_code: ErrorCode.Unknown,
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', () => {
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();
});
expect(
screen.getByText('Apologies, something’s amiss!')
).toBeInTheDocument()
expect(screen.getByText('troubleshooting assistance')).toBeInTheDocument()
})
it('opens troubleshooting modal when link is clicked', () => {
const message: ThreadMessage = {
@ -97,11 +75,11 @@ describe('ErrorMessage Component', () => {
status: MessageStatus.Error,
error_code: ErrorCode.Unknown,
content: [{ text: { value: 'Unknown error occurred' } }],
} as ThreadMessage;
} as ThreadMessage
render(<ErrorMessage message={message} />);
render(<ErrorMessage message={message} />)
fireEvent.click(screen.getByText('troubleshooting assistance'));
expect(mockSetModalTroubleShooting).toHaveBeenCalledWith(true);
});
});
fireEvent.click(screen.getByText('troubleshooting assistance'))
expect(mockSetModalTroubleShooting).toHaveBeenCalledWith(true)
})
})

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

@ -4,9 +4,8 @@ import {
MessageStatus,
ThreadMessage,
} from '@janhq/core'
import { Button } from '@janhq/joi'
import { useAtomValue, useSetAtom } from 'jotai'
import { RefreshCcw } from 'lucide-react'
import AutoLink from '@/containers/AutoLink'
import ModalTroubleShooting, {
@ -15,27 +14,17 @@ import ModalTroubleShooting, {
import { MainViewState } from '@/constants/screens'
import useSendChatMessage from '@/hooks/useSendChatMessage'
import { mainViewStateAtom } from '@/helpers/atoms/App.atom'
import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
import { selectedSettingAtom } from '@/helpers/atoms/Setting.atom'
import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
const messages = useAtomValue(getCurrentChatMessagesAtom)
const { resendChatMessage } = useSendChatMessage()
const setModalTroubleShooting = useSetAtom(modalTroubleShootingAtom)
const setMainState = useSetAtom(mainViewStateAtom)
const setSelectedSettingScreen = useSetAtom(selectedSettingAtom)
const activeThread = useAtomValue(activeThreadAtom)
const regenerateMessage = async () => {
const lastMessageIndex = messages.length - 1
const message = messages[lastMessageIndex]
resendChatMessage(message)
}
const getErrorTitle = () => {
switch (message.error_code) {
case ErrorCode.Unknown:
@ -77,23 +66,6 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
return (
<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 && (
<div
key={message.id}