From 06f4ba64c37d082eb207183263a79c3dac3fa1d2 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Fri, 8 May 2026 21:00:49 +0800
Subject: [PATCH] tweaks

---
 .../deployments/detail/access-tab/common.tsx  | 22 +++++++------
 .../detail/access-tab/use-copy-feedback.ts    | 31 -------------------
 2 files changed, 13 insertions(+), 40 deletions(-)
 delete mode 100644 web/features/deployments/detail/access-tab/use-copy-feedback.ts

diff --git a/web/features/deployments/detail/access-tab/common.tsx b/web/features/deployments/detail/access-tab/common.tsx
index e248d9eb1e..956174e307 100644
--- a/web/features/deployments/detail/access-tab/common.tsx
+++ b/web/features/deployments/detail/access-tab/common.tsx
@@ -3,8 +3,9 @@
 import type { ReactNode } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 import { toast } from '@langgenius/dify-ui/toast'
+import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useCopyFeedback } from './use-copy-feedback'
+import { useClipboard } from '@/hooks/use-clipboard'
 
 type SectionProps = {
   title: string
@@ -39,17 +40,20 @@ type CopyPillProps = {
 
 export function CopyPill({ label, value, prefix, className }: CopyPillProps) {
   const { t } = useTranslation('deployments')
-  const { copied, showCopied } = useCopyFeedback()
+  const copyFailedRef = useRef(false)
+  const { copied, copy } = useClipboard({
+    timeout: 1500,
+    onCopyError: () => {
+      copyFailedRef.current = true
+      toast.error(t('access.copyFailed'))
+    },
+  })
 
   const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(value)
-      showCopied()
+    copyFailedRef.current = false
+    await copy(value)
+    if (!copyFailedRef.current)
       toast.success(t('access.copyToast'))
-    }
-    catch {
-      toast.error(t('access.copyFailed'))
-    }
   }
 
   return (
diff --git a/web/features/deployments/detail/access-tab/use-copy-feedback.ts b/web/features/deployments/detail/access-tab/use-copy-feedback.ts
deleted file mode 100644
index 8bc3e1c68c..0000000000
--- a/web/features/deployments/detail/access-tab/use-copy-feedback.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
-
-export function useCopyFeedback(resetDelay = 1500) {
-  const [copied, setCopied] = useState(false)
-  const resetTimerRef = useRef<number | undefined>(undefined)
-
-  function showCopied() {
-    if (resetTimerRef.current !== undefined)
-      window.clearTimeout(resetTimerRef.current)
-
-    setCopied(true)
-    resetTimerRef.current = window.setTimeout(() => {
-      setCopied(false)
-      resetTimerRef.current = undefined
-    }, resetDelay)
-  }
-
-  useEffect(() => {
-    return () => {
-      if (resetTimerRef.current !== undefined)
-        window.clearTimeout(resetTimerRef.current)
-    }
-  }, [])
-
-  return {
-    copied,
-    showCopied,
-  }
-}