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.

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)

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} />