From 87b74db9fc113cd84a626f474f1f7985809afb10 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Thu, 7 Aug 2025 14:06:32 +0800
Subject: [PATCH] feat(ErrorBlock): enhance error handling with closable alerts
 and message integration

- Added message prop to ErrorBlock for improved context.
- Implemented closable alerts for error messages, allowing users to remove error blocks.
- Updated MessageErrorInfo component to handle message and block props effectively.
---
 .../pages/home/Messages/Blocks/ErrorBlock.tsx | 34 +++++++++++++++----
 .../src/pages/home/Messages/Blocks/index.tsx  |  2 +-
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/pages/home/Messages/Blocks/ErrorBlock.tsx b/src/renderer/src/pages/home/Messages/Blocks/ErrorBlock.tsx
index 9d4a68201b..86d6525e15 100644
--- a/src/renderer/src/pages/home/Messages/Blocks/ErrorBlock.tsx
+++ b/src/renderer/src/pages/home/Messages/Blocks/ErrorBlock.tsx
@@ -1,5 +1,7 @@
 import { getHttpMessageLabel } from '@renderer/i18n/label'
-import type { ErrorMessageBlock } from '@renderer/types/newMessage'
+import { useAppDispatch } from '@renderer/store'
+import { removeBlocksThunk } from '@renderer/store/thunk/messageThunk'
+import type { ErrorMessageBlock, Message } from '@renderer/types/newMessage'
 import { Alert as AntdAlert } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -7,33 +9,51 @@ import styled from 'styled-components'
 
 interface Props {
   block: ErrorMessageBlock
+  message: Message
 }
 
-const ErrorBlock: React.FC<Props> = ({ block }) => {
-  return <MessageErrorInfo block={block} />
+const ErrorBlock: React.FC<Props> = ({ block, message }) => {
+  return <MessageErrorInfo block={block} message={message} />
 }
 
-const MessageErrorInfo: React.FC<{ block: ErrorMessageBlock }> = ({ block }) => {
+const MessageErrorInfo: React.FC<{ block: ErrorMessageBlock; message: Message }> = ({ block, message }) => {
   const { t, i18n } = useTranslation()
+  const dispatch = useAppDispatch()
 
   const HTTP_ERROR_CODES = [400, 401, 403, 404, 429, 500, 502, 503, 504]
 
+  const onRemoveBlock = () => {
+    setTimeout(() => dispatch(removeBlocksThunk(message.topicId, message.id, [block.id])), 350)
+  }
+
   if (block.error && HTTP_ERROR_CODES.includes(block.error?.status)) {
-    return <Alert description={getHttpMessageLabel(block.error.status)} message={block.error?.message} type="error" />
+    return (
+      <Alert
+        description={getHttpMessageLabel(block.error.status)}
+        message={block.error?.message}
+        type="error"
+        closable
+        onClose={onRemoveBlock}
+      />
+    )
   }
 
   if (block?.error?.message) {
     const errorKey = `error.${block.error.message}`
     const pauseErrorLanguagePlaceholder = i18n.exists(errorKey) ? t(errorKey) : block.error.message
-    return <Alert description={pauseErrorLanguagePlaceholder} type="error" />
+    return <Alert description={pauseErrorLanguagePlaceholder} type="error" closable onClose={onRemoveBlock} />
   }
 
-  return <Alert description={t('error.chat.response')} type="error" />
+  return <Alert description={t('error.chat.response')} type="error" closable onClose={onRemoveBlock} />
 }
 
 const Alert = styled(AntdAlert)`
   margin: 0.5rem 0 !important;
   padding: 10px;
   font-size: 12px;
+  & .ant-alert-close-icon {
+    margin: 5px;
+  }
 `
+
 export default React.memo(ErrorBlock)
diff --git a/src/renderer/src/pages/home/Messages/Blocks/index.tsx b/src/renderer/src/pages/home/Messages/Blocks/index.tsx
index 3da83aeec7..f19386c3af 100644
--- a/src/renderer/src/pages/home/Messages/Blocks/index.tsx
+++ b/src/renderer/src/pages/home/Messages/Blocks/index.tsx
@@ -138,7 +138,7 @@ const MessageBlockRenderer: React.FC<Props> = ({ blocks, message }) => {
             blockComponent = <CitationBlock key={block.id} block={block} />
             break
           case MessageBlockType.ERROR:
-            blockComponent = <ErrorBlock key={block.id} block={block} />
+            blockComponent = <ErrorBlock key={block.id} block={block} message={message} />
             break
           case MessageBlockType.THINKING:
             blockComponent = <ThinkingBlock key={block.id} block={block} />