fix: copy button not working on API Server and API Key pages (langgenius#34515)

Co-authored-by: Brian Wang <BrianWang1990@users.noreply.github.com>
Co-authored-by: test <test@testdeMac-mini.local>
Co-authored-by: BrianWang1990 <512dabing99@163.com>
Co-authored-by: Stephen Zhou <hi@hyoban.cc>
Co-authored-by: Stephen Zhou <38493346+hyoban@users.noreply.github.com>

Author: 4 people

pnpm-lock.yaml

@@ -129,6 +129,7 @@ catalog:
   ahooks: 3.9.7
   autoprefixer: 10.4.27
   class-variance-authority: 0.7.1
+  client-only: 0.0.1
   clsx: 2.1.1
   cmdk: 1.1.1
   code-inspector-plugin: 1.5.1
@@ -154,7 +155,6 @@ catalog:
   eslint-plugin-sonarjs: 4.0.2
   eslint-plugin-storybook: 10.3.5
   fast-deep-equal: 3.1.3
-  foxact: 0.3.0
   happy-dom: 20.8.9
   hast-util-to-jsx-runtime: 2.3.6
   hono: 4.12.12

pnpm-workspace.yaml

@@ -5,7 +5,7 @@ const mockCopy = vi.fn()
 const mockReset = vi.fn()
 let mockCopied = false
 
-vi.mock('foxact/use-clipboard', () => ({
+vi.mock('@/hooks/use-clipboard', () => ({
   useClipboard: () => ({
     copy: mockCopy,
     reset: mockReset,

web/app/components/base/copy-feedback/__tests__/index.spec.tsx

@@ -3,11 +3,11 @@ import {
   RiClipboardFill,
   RiClipboardLine,
 } from '@remixicon/react'
-import { useClipboard } from 'foxact/use-clipboard'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
+import { useClipboard } from '@/hooks/use-clipboard'
 import copyStyle from './style.module.css'
 
 type Props = {

web/app/components/base/copy-feedback/index.tsx

@@ -5,7 +5,7 @@ const copy = vi.fn()
 const reset = vi.fn()
 let copied = false
 
-vi.mock('foxact/use-clipboard', () => ({
+vi.mock('@/hooks/use-clipboard', () => ({
   useClipboard: () => ({
     copy,
     reset,

web/app/components/base/copy-icon/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
 'use client'
-import { useClipboard } from 'foxact/use-clipboard'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useClipboard } from '@/hooks/use-clipboard'
 import Tooltip from '../tooltip'
 
 type Props = {

web/app/components/base/copy-icon/index.tsx

@@ -6,7 +6,7 @@ const mockCopy = vi.fn()
 let mockCopied = false
 const mockReset = vi.fn()
 
-vi.mock('foxact/use-clipboard', () => ({
+vi.mock('@/hooks/use-clipboard', () => ({
   useClipboard: () => ({
     copy: mockCopy,
     copied: mockCopied,

web/app/components/base/input-with-copy/__tests__/index.spec.tsx

@@ -1,8 +1,8 @@
 'use client'
 import type { InputProps } from '../input'
-import { useClipboard } from 'foxact/use-clipboard'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { useClipboard } from '@/hooks/use-clipboard'
 import { cn } from '@/utils/classnames'
 import ActionButton from '../action-button'
 import Tooltip from '../tooltip'

web/app/components/base/input-with-copy/index.tsx

@@ -0,0 +1,7 @@
+type Noop = {
+  // eslint-disable-next-line ts/no-explicit-any
+  (...args: any[]): any
+}
+
+/** @see https://foxact.skk.moe/noop */
+export const noop: Noop = () => { /* noop */ }

web/hooks/noop.ts

@@ -0,0 +1,72 @@
+import { useRef, useState } from 'react'
+import { writeTextToClipboard } from '@/utils/clipboard'
+import { noop } from './noop'
+import { useStableHandler } from './use-stable-handler-only-when-you-know-what-you-are-doing-or-you-will-be-fired'
+import { useCallback } from './use-typescript-happy-callback'
+import 'client-only'
+
+type UseClipboardOption = {
+  timeout?: number
+  usePromptAsFallback?: boolean
+  promptFallbackText?: string
+  onCopyError?: (error: Error) => void
+}
+
+/** @see https://foxact.skk.moe/use-clipboard */
+export function useClipboard({
+  timeout = 1000,
+  usePromptAsFallback = false,
+  promptFallbackText = 'Failed to copy to clipboard automatically, please manually copy the text below.',
+  onCopyError,
+}: UseClipboardOption = {}) {
+  const [error, setError] = useState<Error | null>(null)
+  const [copied, setCopied] = useState(false)
+  const copyTimeoutRef = useRef<number | null>(null)
+
+  const stablizedOnCopyError = useStableHandler<[e: Error], void>(onCopyError || noop)
+
+  const handleCopyResult = useCallback((isCopied: boolean) => {
+    if (copyTimeoutRef.current) {
+      clearTimeout(copyTimeoutRef.current)
+    }
+    if (isCopied) {
+      copyTimeoutRef.current = window.setTimeout(() => setCopied(false), timeout)
+    }
+    setCopied(isCopied)
+  }, [timeout])
+
+  const handleCopyError = useCallback((e: Error) => {
+    setError(e)
+    stablizedOnCopyError(e)
+  }, [stablizedOnCopyError])
+
+  const copy = useCallback(async (valueToCopy: string) => {
+    try {
+      await writeTextToClipboard(valueToCopy)
+    }
+    catch (e) {
+      if (usePromptAsFallback) {
+        try {
+          // eslint-disable-next-line no-alert -- prompt as fallback in case of copy error
+          window.prompt(promptFallbackText, valueToCopy)
+        }
+        catch (e2) {
+          handleCopyError(e2 as Error)
+        }
+      }
+      else {
+        handleCopyError(e as Error)
+      }
+    }
+  }, [handleCopyResult, promptFallbackText, handleCopyError, usePromptAsFallback])
+
+  const reset = useCallback(() => {
+    setCopied(false)
+    setError(null)
+    if (copyTimeoutRef.current) {
+      clearTimeout(copyTimeoutRef.current)
+    }
+  }, [])
+
+  return { copy, reset, error, copied }
+}