feat: add chat message translate copy button (#4620)

* feat: add chat message translate copy button * Update MessageMenubar.tsx * fix: copy button display
2025-04-19 10:36:57 +08:00 · 2025-04-19 10:36:57 +08:00 · 8b462935b4
commit 8b462935b4
parent d907344ca7
8 changed files with 90 additions and 59 deletions
--- a/src/renderer/src/hooks/useMessageOperations.ts
+++ b/src/renderer/src/hooks/useMessageOperations.ts
@ -1,5 +1,6 @@
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { estimateMessageUsage } from '@renderer/services/TokenService'
+import { translateText } from '@renderer/services/TranslateService'
 import store, { useAppDispatch, useAppSelector } from '@renderer/store'
 import {
  clearStreamMessage,
@ -18,8 +19,10 @@ import {
 import type { Assistant, Message, Topic } from '@renderer/types'
 import { abortCompletion } from '@renderer/utils/abortController'
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'

 import { TopicManager } from './useTopic'
+
 /**
 * 自定义Hook，提供消息操作相关的功能
 *
@ -28,6 +31,7 @@ import { TopicManager } from './useTopic'
 */
 export function useMessageOperations(topic: Topic) {
  const dispatch = useAppDispatch()
+  const { t } = useTranslation()

  /**
   * 删除单个消息
@ -60,8 +64,7 @@ export function useMessageOperations(topic: Topic) {
        const message = messages?.find((m) => m.id === messageId)
        if (message) {
          const updatedMessage = { ...message, ...updates }
-          const usage = await estimateMessageUsage(updatedMessage)
-          updates.usage = usage
+          updates.usage = await estimateMessageUsage(updatedMessage)
        }
      }
      await dispatch(updateMessageThunk(topic.id, messageId, updates))
@ -128,7 +131,7 @@ export function useMessageOperations(topic: Topic) {
  const clearTopicMessagesAction = useCallback(
    async (_topicId?: string) => {
      const topicId = _topicId || topic.id
-      await dispatch(clearTopicMessages(topicId))
+      dispatch(clearTopicMessages(topicId))
      await TopicManager.clearTopicMessages(topicId)
    },
    [dispatch, topic.id]
@ -148,7 +151,7 @@ export function useMessageOperations(topic: Topic) {
   * 创建新的上下文（clear message）
   */
  const createNewContext = useCallback(async () => {
-    EventEmitter.emit(EVENT_NAMES.NEW_CONTEXT)
+    await EventEmitter.emit(EVENT_NAMES.NEW_CONTEXT)
  }, [])

  const displayCount = useAppSelector(selectDisplayCount)
@ -190,6 +193,28 @@ export function useMessageOperations(topic: Topic) {
    dispatch(setTopicLoading({ topicId: topic.id, loading: false }))
  }, [topic.id, dispatch])

+  const translateMessage = useCallback(
+    async (messageId: string, language: string) => {
+      const messages = store.getState().messages.messagesByTopic[topic.id]
+      const message = messages?.find((m) => m.id === messageId)
+      if (!message) return
+
+      translateText(message.content, language, (text) => {
+        setStreamMessageAction({ ...message, translatedContent: text })
+      })
+        .then(() => {
+          commitStreamMessageAction(messageId)
+        })
+        .catch((error) => {
+          console.error('Translation failed:', error)
+          window.message.error({ content: t('translate.error.failed'), key: 'translate-message' })
+          editMessage(messageId, { translatedContent: undefined })
+          clearStreamMessageAction(messageId)
+        })
+    },
+    [topic.id, editMessage, t, clearStreamMessageAction, setStreamMessageAction, commitStreamMessageAction]
+  )
+
  /**
   * 恢复/重发消息
   * 暂时不需要
@ -216,16 +241,15 @@ export function useMessageOperations(topic: Topic) {
    clearTopicMessages: clearTopicMessagesAction,
    // pauseMessage,
    pauseMessages,
-    resumeMessage
+    resumeMessage,
+    translateMessage
  }
 }

 export const useTopicMessages = (topic: Topic) => {
-  const messages = useAppSelector((state) => selectTopicMessages(state, topic.id))
-  return messages
+  return useAppSelector((state) => selectTopicMessages(state, topic.id))
 }

 export const useTopicLoading = (topic: Topic) => {
-  const loading = useAppSelector((state) => selectTopicLoading(state, topic.id))
-  return loading
+  return useAppSelector((state) => selectTopicLoading(state, topic.id))
 }
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@ -561,6 +561,7 @@
        "error": "Error occurred"
      },
      "topic.added": "New topic added",
+      "translation.copied": "Translation copied",
      "upgrade.success.button": "Restart",
      "upgrade.success.content": "Please restart the application to complete the upgrade",
      "upgrade.success.title": "Upgrade successfully",
@ -1407,6 +1408,7 @@
        "content": "Translation will replace the original text, continue?",
        "title": "Translation Confirmation"
      },
+      "copy": "Copy",
      "error.failed": "Translation failed",
      "error.not_configured": "Translation model is not configured",
      "history": {
--- a/src/renderer/src/i18n/locales/ja-jp.json
+++ b/src/renderer/src/i18n/locales/ja-jp.json
@ -560,6 +560,7 @@
        "error": "エラーが発生しました"
      },
      "topic.added": "新しいトピックが追加されました",
+      "translation.copied": "翻訳結果をコピーしました",
      "upgrade.success.button": "再起動",
      "upgrade.success.content": "アップグレードを完了するためにアプリケーションを再起動してください",
      "upgrade.success.title": "アップグレードに成功しました",
@ -1407,6 +1408,7 @@
        "content": "翻訳すると元のテキストが上書きされます。続行しますか？",
        "title": "翻訳確認"
      },
+      "copy": "翻訳をコピー",
      "error.failed": "翻訳に失敗しました",
      "error.not_configured": "翻訳モデルが設定されていません",
      "history": {
--- a/src/renderer/src/i18n/locales/ru-ru.json
+++ b/src/renderer/src/i18n/locales/ru-ru.json
@ -561,6 +561,7 @@
        "error": "Произошла ошибка"
      },
      "topic.added": "Новый топик добавлен",
+      "translation.copied": "Перевод скопирован",
      "upgrade.success.button": "Перезапустить",
      "upgrade.success.content": "Пожалуйста, перезапустите приложение для завершения обновления",
      "upgrade.success.title": "Обновление успешно",
@ -1407,6 +1408,7 @@
        "content": "Перевод заменит исходный текст, продолжить?",
        "title": "Перевод подтверждение"
      },
+      "copy": "Копировать перевод",
      "error.failed": "Перевод не удалось",
      "error.not_configured": "Модель перевода не настроена",
      "history": {
--- a/src/renderer/src/i18n/locales/zh-cn.json
+++ b/src/renderer/src/i18n/locales/zh-cn.json
@ -561,6 +561,7 @@
        "error": "发生错误"
      },
      "topic.added": "话题添加成功",
+      "translation.copied": "翻译已复制",
      "upgrade.success.button": "重启",
      "upgrade.success.content": "重启用以完成升级",
      "upgrade.success.title": "升级成功",
@ -1407,6 +1408,7 @@
        "content": "翻译后将覆盖原文，是否继续？",
        "title": "翻译确认"
      },
+      "copy": "复制翻译",
      "error.failed": "翻译失败",
      "error.not_configured": "翻译模型未配置",
      "history": {
--- a/src/renderer/src/i18n/locales/zh-tw.json
+++ b/src/renderer/src/i18n/locales/zh-tw.json
@ -560,6 +560,7 @@
        "invoking": "調用中",
        "error": "發生錯誤"
      },
+      "translation.copied": "翻譯已複製",
      "topic.added": "新話題已新增",
      "upgrade.success.button": "重新啟動",
      "upgrade.success.content": "請重新啟動程式以完成升級",
@ -1407,6 +1408,7 @@
        "content": "翻譯後將覆蓋原文，是否繼續？",
        "title": "翻譯確認"
      },
+      "copy": "複製翻譯",
      "error.failed": "翻譯失敗",
      "error.not_configured": "翻譯模型未設定",
      "history": {
--- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
+++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
@ -181,7 +181,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
      return
    }

-    EventEmitter.emit(EVENT_NAMES.SEND_MESSAGE)
+    await EventEmitter.emit(EVENT_NAMES.SEND_MESSAGE)

    try {
      // Dispatch the sendMessage action with all options
@ -209,7 +209,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
      userMessage.usage = await estimateMessageUsage(userMessage)
      currentMessageId.current = userMessage.id

-      dispatch(
+      await dispatch(
        _sendMessage(userMessage, assistant, topic, {
          mentions: mentionModels
        })
@ -525,7 +525,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
      await onPause()
      await delay(1)
    }
-    EventEmitter.emit(EVENT_NAMES.CLEAR_MESSAGES)
+    await EventEmitter.emit(EVENT_NAMES.CLEAR_MESSAGES)
  }

  const onNewContext = () => {
--- a/src/renderer/src/pages/home/Messages/MessageMenubar.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageMenubar.tsx
@ -7,7 +7,6 @@ import { TranslateLanguageOptions } from '@renderer/config/translate'
 import { useMessageOperations, useTopicLoading } from '@renderer/hooks/useMessageOperations'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { getMessageTitle, resetAssistantMessage } from '@renderer/services/MessagesService'
-import { translateText } from '@renderer/services/TranslateService'
 import { RootState } from '@renderer/store'
 import type { Message, Model } from '@renderer/types'
 import type { Assistant, Topic } from '@renderer/types'
@ -37,7 +36,7 @@ import {
  ThumbsUp,
  Trash
 } from 'lucide-react'
-import { FC, memo, useCallback, useMemo, useState } from 'react'
+import React, { FC, memo, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import styled from 'styled-components'
@ -60,12 +59,11 @@ const MessageMenubar: FC<Props> = (props) => {
    props
  const { t } = useTranslation()
  const [copied, setCopied] = useState(false)
-  const [isTranslating, setIsTranslating] = useState(false)
+  const [translationCopied, setTranslationCopied] = useState(false)
  const [showRegenerateTooltip, setShowRegenerateTooltip] = useState(false)
  const [showDeleteTooltip, setShowDeleteTooltip] = useState(false)
  const assistantModel = assistant?.model
-  const { editMessage, setStreamMessage, deleteMessage, resendMessage, commitStreamMessage, clearStreamMessage } =
-    useMessageOperations(topic)
+  const { editMessage, deleteMessage, resendMessage, translateMessage } = useMessageOperations(topic)
  const loading = useTopicLoading(topic)

  const isUserMessage = message.role === 'user'
@ -92,9 +90,23 @@ const MessageMenubar: FC<Props> = (props) => {
    [message, t]
  )

+  const onCopyTranslation = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+
+      if (message.translatedContent) {
+        navigator.clipboard.writeText(removeTrailingDoubleSpaces(message.translatedContent.trimStart()))
+        window.message.success({ content: t('message.translation.copied'), key: 'copy-translation' })
+        setTranslationCopied(true)
+        setTimeout(() => setTranslationCopied(false), 2000)
+      }
+    },
+    [message.translatedContent, t]
+  )
+
  const onNewBranch = useCallback(async () => {
    if (loading) return
-    EventEmitter.emit(EVENT_NAMES.NEW_BRANCH, index)
+    await EventEmitter.emit(EVENT_NAMES.NEW_BRANCH, index)
    window.message.success({ content: t('chat.message.new.branch.created'), key: 'new-branch' })
  }, [index, t, loading])

@ -144,7 +156,7 @@ const MessageMenubar: FC<Props> = (props) => {

    if (editedText && editedText !== textToEdit) {
      // 解析编辑后的文本，提取图片 URL
-      const imageRegex = /!\[image-\d+\]\((.*?)\)/g
+      const imageRegex = /!\[image-\d+]\((.*?)\)/g
      const imageUrls: string[] = []
      let match
      let content = editedText
@ -170,7 +182,7 @@ const MessageMenubar: FC<Props> = (props) => {
      })

      resendMessage &&
-        handleResendUserMessage({
+        (await handleResendUserMessage({
          ...message,
          content: content.trim(),
          metadata: {
@ -183,38 +195,10 @@ const MessageMenubar: FC<Props> = (props) => {
                  }
                : undefined
          }
-        })
+        }))
    }
  }, [message, editMessage, handleResendUserMessage, t])

-  const handleTranslate = useCallback(
-    async (language: string) => {
-      if (isTranslating) return
-
-      editMessage(message.id, { translatedContent: t('translate.processing') })
-
-      setIsTranslating(true)
-
-      try {
-        await translateText(message.content, language, (text) => {
-          // 使用 setStreamMessage 来更新翻译内容
-          setStreamMessage({ ...message, translatedContent: text })
-        })
-
-        // 翻译完成后，提交流消息
-        commitStreamMessage(message.id)
-      } catch (error) {
-        console.error('Translation failed:', error)
-        window.message.error({ content: t('translate.error.failed'), key: 'translate-message' })
-        editMessage(message.id, { translatedContent: undefined })
-        clearStreamMessage(message.id)
-      } finally {
-        setIsTranslating(false)
-      }
-    },
-    [isTranslating, message, editMessage, setStreamMessage, commitStreamMessage, clearStreamMessage, t]
-  )
-
  const dropdownItems = useMemo(
    () => [
      {
@ -281,7 +265,7 @@ const MessageMenubar: FC<Props> = (props) => {
            onClick: async () => {
              const markdown = messageToMarkdown(message)
              const title = await getMessageTitle(message)
-              window.api.export.toWord(markdown, title)
+              await window.api.export.toWord(markdown, title)
            }
          },
          exportMenuOptions.notion && {
@ -290,7 +274,7 @@ const MessageMenubar: FC<Props> = (props) => {
            onClick: async () => {
              const title = await getMessageTitle(message)
              const markdown = messageToMarkdown(message)
-              exportMarkdownToNotion(title, markdown)
+              await exportMarkdownToNotion(title, markdown)
            }
          },
          exportMenuOptions.yuque && {
@ -299,7 +283,7 @@ const MessageMenubar: FC<Props> = (props) => {
            onClick: async () => {
              const title = await getMessageTitle(message)
              const markdown = messageToMarkdown(message)
-              exportMarkdownToYuque(title, markdown)
+              await exportMarkdownToYuque(title, markdown)
            }
          },
          exportMenuOptions.obsidian && {
@ -317,7 +301,7 @@ const MessageMenubar: FC<Props> = (props) => {
            onClick: async () => {
              const title = await getMessageTitle(message)
              const markdown = messageToMarkdown(message)
-              exportMarkdownToJoplin(title, markdown)
+              await exportMarkdownToJoplin(title, markdown)
            }
          },
          exportMenuOptions.siyuan && {
@ -326,7 +310,7 @@ const MessageMenubar: FC<Props> = (props) => {
            onClick: async () => {
              const title = await getMessageTitle(message)
              const markdown = messageToMarkdown(message)
-              exportMarkdownToSiyuan(title, markdown)
+              await exportMarkdownToSiyuan(title, markdown)
            }
          }
        ].filter(Boolean)
@ -340,8 +324,8 @@ const MessageMenubar: FC<Props> = (props) => {
    if (loading) return
    const selectedModel = isGrouped ? model : assistantModel
    const _message = resetAssistantMessage(message, selectedModel)
-    editMessage(message.id, { ..._message })
-    resendMessage(_message, assistant)
+    await editMessage(message.id, { ..._message })
+    await resendMessage(_message, assistant)
  }

  const onMentionModel = async (e: React.MouseEvent) => {
@ -349,7 +333,7 @@ const MessageMenubar: FC<Props> = (props) => {
    if (loading) return
    const selectedModel = await SelectModelPopup.show({ model })
    if (!selectedModel) return
-    resendMessage(message, { ...assistant, model: selectedModel }, true)
+    await resendMessage(message, { ...assistant, model: selectedModel }, true)
  }

  const onUseful = useCallback(
@ -414,13 +398,26 @@ const MessageMenubar: FC<Props> = (props) => {
              ...TranslateLanguageOptions.map((item) => ({
                label: item.emoji + ' ' + item.label,
                key: item.value,
-                onClick: () => handleTranslate(item.value)
+                onClick: () => translateMessage(message.id, item.value)
              })),
              {
                label: '✖ ' + t('translate.close'),
                key: 'translate-close',
                onClick: () => editMessage(message.id, { translatedContent: undefined })
-              }
+              },
+              ...(message.translatedContent
+                ? [
+                    {
+                      label: '📋 ' + t('translate.copy'),
+                      key: 'translate-copy',
+                      icon: translationCopied ? <CheckOutlined style={{ color: 'var(--color-primary)' }} /> : null,
+                      onClick: (e) => {
+                        e.domEvent.stopPropagation()
+                        onCopyTranslation(e.domEvent as unknown as React.MouseEvent)
+                      }
+                    }
+                  ]
+                : [])
            ],
            onClick: (e) => e.domEvent.stopPropagation()
          }}