From add9e10945de6d5d7fb6865b8fab0f4b6c6cc457 Mon Sep 17 00:00:00 2001
From: Rankin Zheng <runjin@merico.dev>
Date: Mon, 5 Jun 2023 22:18:51 +0800
Subject: [PATCH] Enhancement: Display error messages in ChatPanel using Alert
 component

In this commit, we updated the ChatPanel component to display error messages using the Alert component from the Mantine library. This change improves the user experience by providing a clear and consistent way to display error messages in the chat interface. The error message is now stored as a string in the hasError state, and the Alert component is conditionally rendered based on the presence of an error message.
---
 src/views/ChatPanel/index.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/views/ChatPanel/index.tsx b/src/views/ChatPanel/index.tsx
index b67c4bf..1add727 100644
--- a/src/views/ChatPanel/index.tsx
+++ b/src/views/ChatPanel/index.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { useState, useEffect, useRef } from 'react';
-import { Center, Container, Stack, px } from '@mantine/core';
+import { Alert, Center, Container, Stack, px } from '@mantine/core';
 import { ScrollArea } from '@mantine/core';
 import { Button } from '@mantine/core';
 import { useListState, useResizeObserver, useTimeout, useViewportSize } from '@mantine/hooks';
-import { IconPlayerStop, IconRotateDot } from '@tabler/icons-react';
+import { IconAlertCircle, IconPlayerStop, IconRotateDot } from '@tabler/icons-react';
 import messageUtil from '../../util/MessageUtil';
 
 import InputMessage from './InputMessage';
@@ -17,7 +17,7 @@ const chatPanel = () => {
     const [currentMessage, setCurrentMessage] = useState('');
     const [generating, setGenerating] = useState(false);
     const [responsed, setResponsed] = useState(false);
-    const [hasError, setHasError] = useState(false);
+    const [hasError, setHasError] = useState('');
     const { height, width } = useViewportSize();
     const [scrollPosition, onScrollPositionChange] = useState({ x: 0, y: 0 });
     const [stopScrolling, setStopScrolling] = useState(false);
@@ -42,11 +42,10 @@ const chatPanel = () => {
             setResponsed(true);
         });
         messageUtil.registerHandler('receiveMessage', (message: { text: string; isError: boolean }) => {
-            setCurrentMessage(message.text);
             setGenerating(false);
             setResponsed(true);
             if (message.isError) {
-                setHasError(true);
+                setHasError(message.text);
             }
         });
         messageUtil.registerHandler('loadHistoryMessages', (message: { command: string; entries: [{ hash: '', user: '', date: '', request: '', response: '', context: [{ content: '', role: '' }] }] }) => {
@@ -121,7 +120,7 @@ const chatPanel = () => {
                     command: 'regeneration'
                 });
                 messageHandlers.pop();
-                setHasError(false);
+                setHasError('');
                 setGenerating(true);
                 setResponsed(false);
                 setCurrentMessage('');
@@ -182,6 +181,11 @@ const chatPanel = () => {
                 // onScrollPositionChange={onScrollPositionChange}
                 viewportRef={scrollViewport}>
                 <MessageContainer width={chatContainerRect.width} generating={generating} messages={messages} responsed={responsed} />
+                {hasError &&
+                    <Alert w={chatContainerRect.width} mb={20} color="red" variant="filled">
+                        {hasError}
+                    </Alert>
+                }
             </ScrollArea>
             <Stack
                 spacing={5}