refactor: use hook useTemporaryValue in Table, CitationList, TranslatePage (#9134)

src/renderer/src/pages/home/Markdown/Table.tsx

@@ -1,9 +1,10 @@
 import { CopyIcon } from '@renderer/components/Icons'
+import { useTemporaryValue } from '@renderer/hooks/useTemporaryValue'
 import store from '@renderer/store'
 import { messageBlocksSelectors } from '@renderer/store/messageBlock'
 import { Tooltip } from 'antd'
 import { Check } from 'lucide-react'
-import React, { memo, useCallback, useState } from 'react'
+import React, { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -18,7 +19,7 @@ interface Props {
  */
 const Table: React.FC<Props> = ({ children, node, blockId }) => {
   const { t } = useTranslation()
-  const [copied, setCopied] = useState(false)
+  const [copied, setCopied] = useTemporaryValue(false, 2000)
 
   const handleCopyTable = useCallback(() => {
     const tableMarkdown = extractTableMarkdown(blockId ?? '', node?.position)
@@ -28,12 +29,11 @@ const Table: React.FC<Props> = ({ children, node, blockId }) => {
       .writeText(tableMarkdown)
       .then(() => {
         setCopied(true)
-        setTimeout(() => setCopied(false), 2000)
       })
       .catch((error) => {
         window.message?.error({ content: `${t('message.copy.failed')}: ${error}`, key: 'copy-table-error' })
       })
-  }, [node, blockId, t])
+  }, [blockId, node?.position, setCopied, t])
 
   return (
     <TableWrapper className="table-wrapper">

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

@@ -1,13 +1,14 @@
 import ContextMenu from '@renderer/components/ContextMenu'
 import Favicon from '@renderer/components/Icons/FallbackFavicon'
 import Scrollbar from '@renderer/components/Scrollbar'
+import { useTemporaryValue } from '@renderer/hooks/useTemporaryValue'
 import { Citation } from '@renderer/types'
 import { fetchWebContent } from '@renderer/utils/fetch'
 import { cleanMarkdownContent } from '@renderer/utils/formats'
 import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'
 import { Button, message, Popover, Skeleton } from 'antd'
 import { Check, Copy, FileSearch } from 'lucide-react'
-import React, { useState } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -116,7 +117,7 @@ const handleLinkClick = (url: string, event: React.MouseEvent) => {
 }
 
 const CopyButton: React.FC<{ content: string }> = ({ content }) => {
-  const [copied, setCopied] = useState(false)
+  const [copied, setCopied] = useTemporaryValue(false, 2000)
   const { t } = useTranslation()
 
   const handleCopy = () => {
@@ -126,7 +127,6 @@ const CopyButton: React.FC<{ content: string }> = ({ content }) => {
       .then(() => {
         setCopied(true)
         window.message.success(t('common.copied'))
-        setTimeout(() => setCopied(false), 2000)
       })
       .catch(() => {
         message.error(t('message.copy.failed'))

src/renderer/src/pages/translate/TranslatePage.tsx

@@ -1,6 +1,7 @@
-import { CheckOutlined, SendOutlined, SwapOutlined } from '@ant-design/icons'
+import { SendOutlined, SwapOutlined } from '@ant-design/icons'
 import { loggerService } from '@logger'
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
+import { CopyIcon } from '@renderer/components/Icons'
 import LanguageSelect from '@renderer/components/LanguageSelect'
 import ModelSelectButton from '@renderer/components/ModelSelectButton'
 import { isEmbeddingModel, isRerankModel, isTextToImageModel } from '@renderer/config/models'
@@ -25,7 +26,7 @@ import {
 import { Button, Flex, Popover, Tooltip, Typography } from 'antd'
 import TextArea, { TextAreaRef } from 'antd/es/input/TextArea'
 import { isEmpty, throttle } from 'lodash'
-import { CopyIcon, FolderClock, Settings2 } from 'lucide-react'
+import { Check, FolderClock, Settings2 } from 'lucide-react'
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -473,7 +474,7 @@ const TranslatePage: FC = () => {
               className="copy-button"
               onClick={onCopy}
               disabled={!translatedContent}
-              icon={copied ? <CheckOutlined style={{ color: 'var(--color-primary)' }} /> : <CopyIcon size={16} />}
+              icon={copied ? <Check size={16} color="var(--color-primary)" /> : <CopyIcon size={16} />}
             />
             <OutputText ref={outputTextRef} onScroll={handleOutputScroll} className={'selectable'}>
               {!translatedContent ? (