feat: add MessageErrorBoundary component

src/renderer/src/i18n/locales/en-us.json

@@ -150,7 +150,11 @@
       "backup.file_format": "Backup file format error",
       "chat.response": "Something went wrong. Please check if you have set your API key in the Settings > Providers",
       "no_api_key": "API key is not configured",
-      "provider_disabled": "Model provider is not enabled"
+      "provider_disabled": "Model provider is not enabled",
+      "render": {
+        "title": "Render Error",
+        "description": "Failed to render formula. Please check if the formula format is correct"
+      }
     },
     "export": {
       "assistant": "Assistant",

src/renderer/src/i18n/locales/ru-ru.json

@@ -150,7 +150,11 @@
       "backup.file_format": "Ошибка формата файла резервной копии",
       "chat.response": "Что-то пошло не так. Пожалуйста, проверьте, установлен ли ваш ключ API в Настройки > Провайдеры",
       "no_api_key": "Ключ API не настроен",
-      "provider_disabled": "Провайдер моделей не включен"
+      "provider_disabled": "Провайдер моделей не включен",
+      "render": {
+        "title": "Ошибка рендеринга",
+        "description": "Не удалось рендерить формулу. Пожалуйста, проверьте, правильно ли формат формулы"
+      }
     },
     "export": {
       "assistant": "Ассистент",

src/renderer/src/i18n/locales/zh-cn.json

@@ -150,7 +150,11 @@
       "backup.file_format": "备份文件格式错误",
       "chat.response": "出错了，如果没有配置 API 密钥，请前往设置 > 模型提供商中配置密钥",
       "no_api_key": "API 密钥未配置",
-      "provider_disabled": "模型提供商未启用"
+      "provider_disabled": "模型提供商未启用",
+      "render": {
+        "title": "渲染错误",
+        "description": "渲染公式失败，请检查公式格式是否正确"
+      }
     },
     "export": {
       "assistant": "助手",

src/renderer/src/i18n/locales/zh-tw.json

@@ -150,7 +150,11 @@
       "backup.file_format": "備份文件格式錯誤",
       "chat.response": "出現錯誤。如果尚未配置 API 密鑰，請前往設定 > 模型提供者中配置密鑰",
       "no_api_key": "API 密鑰未配置",
-      "provider_disabled": "模型提供商未啟用"
+      "provider_disabled": "模型提供商未啟用",
+      "render": {
+        "title": "渲染錯誤",
+        "description": "渲染公式失敗，請檢查公式格式是否正確"
+      }
     },
     "export": {
       "assistant": "助手",

src/renderer/src/pages/home/Messages/Message.tsx

@@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import MessageContent from './MessageContent'
+import MessageErrorBoundary from './MessageErrorBoundary'
 import MessageHeader from './MessageHeader'
 import MessageMenubar from './MessageMenubar'
 import MessageTokens from './MessageTokens'
@@ -151,7 +152,9 @@ const MessageItem: FC<Props> = ({
       <MessageContentContainer
         className="message-content-container"
         style={{ fontFamily, fontSize, background: messageBackground }}>
+        <MessageErrorBoundary>
           <MessageContent message={message} model={model} />
+        </MessageErrorBoundary>
         {showMenubar && (
           <MessageFooter
             style={{

src/renderer/src/pages/home/Messages/MessageErrorBoundary.tsx

@@ -0,0 +1,41 @@
+import { Alert } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface Props {
+  fallback?: React.ReactNode
+  children: React.ReactNode
+}
+
+interface State {
+  hasError: boolean
+}
+
+const ErrorFallback = ({ fallback }: { fallback?: React.ReactNode }) => {
+  const { t } = useTranslation()
+  return (
+    fallback || (
+      <Alert message={t('error.render.title')} description={t('error.render.description')} type="error" showIcon />
+    )
+  )
+}
+
+class MessageErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <ErrorFallback fallback={this.props.fallback} />
+    }
+    return this.props.children
+  }
+}
+
+export default MessageErrorBoundary