chore: copy button

web/app/components/plugins/base/key-value-item.tsx

@@ -1,13 +1,14 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import copy from 'copy-to-clipboard'
 
 import {
   RiClipboardLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Toast from '../../base/toast'
+import { ClipboardCheck } from '../../base/icons/src/vender/line/files'
+import Tooltip from '../../base/tooltip'
 import ActionButton from '@/app/components/base/action-button'
 type Props = {
   label: string
@@ -19,11 +20,25 @@ const KeyValueItem: FC<Props> = ({
   value,
 }) => {
   const { t } = useTranslation()
+  const [isCopied, setIsCopied] = useState(false)
   const handleCopy = useCallback(() => {
     copy(value)
-    Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
+    setIsCopied(true)
   }, [value])
 
+  useEffect(() => {
+    if (isCopied) {
+      const timer = setTimeout(() => {
+        setIsCopied(false)
+      }, 2000)
+      return () => {
+        clearTimeout(timer)
+      }
+    }
+  }, [isCopied])
+
+  const CopyIcon = isCopied ? ClipboardCheck : RiClipboardLine
+
   return (
     <div className='flex items-center gap-1 self-stretch'>
       <span className='flex w-10 flex-col justify-center items-start text-text-tertiary system-xs-medium'>{label}</span>
@@ -31,9 +46,11 @@ const KeyValueItem: FC<Props> = ({
         <span className='system-xs-medium text-text-secondary'>
           {value}
         </span>
+        <Tooltip popupContent={t(`common.operation.${isCopied ? 'copied' : 'copy'}`)} position='top'>
           <ActionButton onClick={handleCopy}>
-          <RiClipboardLine className='w-3.5 h-3.5 text-text-tertiary' />
+            <CopyIcon className='w-3.5 h-3.5 text-text-tertiary' />
           </ActionButton>
+        </Tooltip>
       </div>
     </div>
   )

web/i18n/en-US/common.ts

@@ -23,6 +23,7 @@ const translation = {
     remove: 'Remove',
     send: 'Send',
     copy: 'Copy',
+    copied: 'Copied',
     lineBreak: 'Line break',
     sure: 'I\'m sure',
     download: 'Download',

web/i18n/zh-Hans/common.ts

@@ -23,6 +23,7 @@ const translation = {
     remove: '移除',
     send: '发送',
     copy: '复制',
+    copied: ' 已复制',
     lineBreak: '换行',
     sure: '我确定',
     download: '下载',