diff --git a/src/renderer/src/components/TranslateButton.tsx b/src/renderer/src/components/TranslateButton.tsx index 60f86746cb..6084f6bb15 100644 --- a/src/renderer/src/components/TranslateButton.tsx +++ b/src/renderer/src/components/TranslateButton.tsx @@ -1,27 +1,41 @@ -import { TranslationOutlined } from '@ant-design/icons' +import { LoadingOutlined, TranslationOutlined } from '@ant-design/icons' import { useDefaultModel } from '@renderer/hooks/useAssistant' import { fetchTranslate } from '@renderer/services/ApiService' import { getDefaultTopic, getDefaultTranslateAssistant } from '@renderer/services/AssistantService' import { getUserMessage } from '@renderer/services/MessagesService' -import { Button } from 'antd' -import { FC, useState } from 'react' +import { Button, Tooltip } from 'antd' +import { FC, useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' +import styled from 'styled-components' interface Props { text?: string onTranslated: (translatedText: string) => void disabled?: boolean style?: React.CSSProperties + isLoading?: boolean } -const TranslateButton: FC = ({ text, onTranslated, disabled, style }) => { +const TranslateButton: FC = ({ text, onTranslated, disabled, style, isLoading }) => { const { t } = useTranslation() const { translateModel } = useDefaultModel() const [isTranslating, setIsTranslating] = useState(false) + const translateConfirm = () => { + return window?.modal?.confirm({ + title: t('translate.confirm.title'), + content: t('translate.confirm.content'), + centered: true + }) + } + const handleTranslate = async () => { if (!text?.trim()) return + if (!(await translateConfirm())) { + return + } + if (!translateModel) { window.message.error({ content: t('translate.error.not_configured'), @@ -55,16 +69,53 @@ const TranslateButton: FC = ({ text, onTranslated, disabled, style }) => } } + useEffect(() => { + setIsTranslating(isLoading ?? false) + }, [isLoading]) + return ( -