feat(MessageTools): add error handling and status indicator for tool responses (#4712)

* feat(MessageTools): add error handling and status indicator for tool responses

* feat(i18n): add error message for tool invocation in English, Japanese, and Russian locales

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

@@ -556,7 +556,8 @@
       "switch.disabled": "Please wait for the current reply to complete",
       "tools": {
         "completed": "Completed",
-        "invoking": "Invoking"
+        "invoking": "Invoking",
+        "error": "Error occurred"
       },
       "topic.added": "New topic added",
       "upgrade.success.button": "Restart",

src/renderer/src/i18n/locales/ja-jp.json

@@ -555,7 +555,8 @@
       "switch.disabled": "現在の応答が完了するまで切り替えを無効にします",
       "tools": {
         "completed": "完了",
-        "invoking": "呼び出し中"
+        "invoking": "呼び出し中",
+        "error": "エラーが発生しました"
       },
       "topic.added": "新しいトピックが追加されました",
       "upgrade.success.button": "再起動",

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

@@ -556,7 +556,8 @@
       "switch.disabled": "Пожалуйста, дождитесь завершения текущего ответа",
       "tools": {
         "completed": "Завершено",
-        "invoking": "Вызов"
+        "invoking": "Вызов",
+        "error": "Произошла ошибка"
       },
       "topic.added": "Новый топик добавлен",
       "upgrade.success.button": "Перезапустить",

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

@@ -556,7 +556,8 @@
       "switch.disabled": "请等待当前回复完成后操作",
       "tools": {
         "completed": "已完成",
-        "invoking": "调用中"
+        "invoking": "调用中",
+        "error": "发生错误"
       },
       "topic.added": "话题添加成功",
       "upgrade.success.button": "重启",

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

@@ -556,7 +556,8 @@
       "switch.disabled": "請等待當前回覆完成",
       "tools": {
         "completed": "已完成",
-        "invoking": "調用中"
+        "invoking": "調用中",
+        "error": "發生錯誤"
       },
       "topic.added": "新話題已新增",
       "upgrade.success.button": "重新啟動",

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

@@ -1,4 +1,4 @@
-import { CheckOutlined, ExpandOutlined, LoadingOutlined } from '@ant-design/icons'
+import { CheckOutlined, ExpandOutlined, LoadingOutlined, WarningOutlined } from '@ant-design/icons'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { Message } from '@renderer/types'
 import { Collapse, message as antdMessage, Modal, Tooltip } from 'antd'
@@ -48,6 +48,7 @@ const MessageTools: FC<Props> = ({ message }) => {
       const { id, tool, status, response } = toolResponse
       const isInvoking = status === 'invoking'
       const isDone = status === 'done'
+      const hasError = isDone && response?.isError === true
       const result = {
         params: tool.inputSchema,
         response: toolResponse.response
@@ -59,10 +60,15 @@ const MessageTools: FC<Props> = ({ message }) => {
           <MessageTitleLabel>
             <TitleContent>
               <ToolName>{tool.name}</ToolName>
-              <StatusIndicator $isInvoking={isInvoking}>
-                {isInvoking ? t('message.tools.invoking') : t('message.tools.completed')}
+              <StatusIndicator $isInvoking={isInvoking} $hasError={hasError}>
+                {isInvoking
+                  ? t('message.tools.invoking')
+                  : hasError
+                    ? t('message.tools.error')
+                    : t('message.tools.completed')}
                 {isInvoking && <LoadingOutlined spin style={{ marginLeft: 6 }} />}
-                {isDone && <CheckOutlined style={{ marginLeft: 6 }} />}
+                {isDone && !hasError && <CheckOutlined style={{ marginLeft: 6 }} />}
+                {hasError && <WarningOutlined style={{ marginLeft: 6 }} />}
               </StatusIndicator>
             </TitleContent>
             <ActionButtonsContainer>
@@ -195,8 +201,12 @@ const ToolName = styled.span`
   font-size: 13px;
 `
 
-const StatusIndicator = styled.span<{ $isInvoking: boolean }>`
-  color: ${(props) => (props.$isInvoking ? 'var(--color-primary)' : 'var(--color-success, #52c41a)')};
+const StatusIndicator = styled.span<{ $isInvoking: boolean; $hasError?: boolean }>`
+  color: ${(props) => {
+    if (props.$hasError) return 'var(--color-error, #ff4d4f)'
+    if (props.$isInvoking) return 'var(--color-primary)'
+    return 'var(--color-success, #52c41a)'
+  }};
   font-size: 11px;
   display: flex;
   align-items: center;