From ff123d50f21591050450d7b4aee83b7d681b1ce4 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 6 Nov 2024 10:17:39 +0700
Subject: [PATCH] ui: remove generation interrupted message (#3949)

---
 web/containers/ErrorMessage/index.test.tsx | 118 +++++++++------------
 web/containers/ErrorMessage/index.tsx      |  32 +-----
 2 files changed, 50 insertions(+), 100 deletions(-)

diff --git a/web/containers/ErrorMessage/index.test.tsx b/web/containers/ErrorMessage/index.test.tsx
index 99dad5415..d2ae5aa81 100644
--- a/web/containers/ErrorMessage/index.test.tsx
+++ b/web/containers/ErrorMessage/index.test.tsx
@@ -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} />);
-    
-    expect(screen.getByTestId('invalid-API-key-error')).toBeInTheDocument();
-    expect(screen.getByText('Settings')).toBeInTheDocument();
-  });
+    render(<ErrorMessage message={message} />)
+
+    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} />);
-    
-    expect(screen.getByText("Apologies, something’s amiss!")).toBeInTheDocument();
-    expect(screen.getByText('troubleshooting assistance')).toBeInTheDocument();
-  });
+    render(<ErrorMessage message={message} />)
 
-  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} />);
-    
-    fireEvent.click(screen.getByText('troubleshooting assistance'));
-    expect(mockSetModalTroubleShooting).toHaveBeenCalledWith(true);
-  });
-});
+    render(<ErrorMessage message={message} />)
+
+    fireEvent.click(screen.getByText('troubleshooting assistance'))
+    expect(mockSetModalTroubleShooting).toHaveBeenCalledWith(true)
+  })
+})
diff --git a/web/containers/ErrorMessage/index.tsx b/web/containers/ErrorMessage/index.tsx
index bcd056b93..add2bd89b 100644
--- a/web/containers/ErrorMessage/index.tsx
+++ b/web/containers/ErrorMessage/index.tsx
@@ -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}