fix(web): support clipboard copy in HTTP environments (#624)

Author: zijiren233

web/package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
+    "test": "vitest run",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -69,10 +70,12 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "jsdom": "^26.1.0",
     "tw-animate-css": "^1.2.8",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.26.1",
-    "vite": "^6.3.1"
+    "vite": "^6.3.1",
+    "vitest": "^3.2.4"
   },
   "packageManager": "pnpm@10.32.0+sha512.9b2634bb3fed5601c33633f2d92593f506270a3963b8c51d2b2d6a828da615ce4e9deebef9614ccebbc13ac8d3c0f9c9ccceb583c69c8578436fa477dbb20d70"
 }

web/pnpm-lock.yaml

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { Check, Copy } from 'lucide-react'
+import { writeTextToClipboard } from '@/lib/clipboard'
 
 interface CopyButtonProps {
   text: string
@@ -11,9 +12,10 @@ export const CopyButton = ({ text, className }: CopyButtonProps) => {
   const [copied, setCopied] = useState(false)
 
   const copyToClipboard = () => {
-    navigator.clipboard.writeText(text)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
+    writeTextToClipboard(text).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }).catch(() => {})
   }
 
   return (
@@ -26,4 +28,4 @@ export const CopyButton = ({ text, className }: CopyButtonProps) => {
       {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
     </Button>
   )
-} 
+}

web/src/components/common/CopyButton.tsx

@@ -23,6 +23,7 @@ import { Loader2 } from 'lucide-react'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { tokenApi } from '@/api/token'
 import { toast } from 'sonner'
+import { writeTextToClipboard } from '@/lib/clipboard'
 
 interface CreateGroupTokenDialogProps {
     open: boolean
@@ -59,8 +60,10 @@ export function CreateGroupTokenDialog({
             queryClient.invalidateQueries({ queryKey: ['groups'] })
             toast.success(t('common.success'))
             if (data?.key) {
-                navigator.clipboard.writeText(data.key).then(() => {
+                writeTextToClipboard(data.key).then(() => {
                     toast.success(t('common.copied'))
+                }).catch(() => {
+                    toast.error(t('common.copyFailed'))
                 })
             }
             resetForm()

web/src/feature/group/components/CreateGroupTokenDialog.tsx

@@ -25,6 +25,7 @@ import { PriceDisplay } from '@/components/price/PriceDisplay'
 import { toast } from 'sonner'
 import { Copy, Search } from 'lucide-react'
 import { useGroupModelMetrics } from '@/feature/monitor/runtime-hooks'
+import { writeTextToClipboard } from '@/lib/clipboard'
 
 interface GroupModelsTabProps {
     groupId: string
@@ -79,7 +80,7 @@ export function GroupModelsTab({ groupId }: GroupModelsTabProps) {
     }, [models, searchKeyword, ownerFilter])
     const { data: runtimeMetrics } = useGroupModelMetrics(groupId, !!groupId && filteredModels.length > 0)
     const copyToClipboard = (text: string) => {
-        navigator.clipboard.writeText(text).then(() => {
+        writeTextToClipboard(text).then(() => {
             toast.success(t('common.copied'))
         }).catch(() => {
             toast.error(t('common.copyFailed'))

web/src/feature/group/components/GroupModelsTab.tsx

@@ -29,6 +29,7 @@ import { cn } from '@/lib/utils'
 import { toast } from 'sonner'
 import { useGroupTokenMetrics } from '@/feature/monitor/runtime-hooks'
 import { format } from 'date-fns'
+import { writeTextToClipboard } from '@/lib/clipboard'
 
 // Mask API key - show prefix and last 4 chars
 const maskApiKey = (key: string): string => {
@@ -168,7 +169,7 @@ export function GroupTokensTab({ groupId, onNavigateDashboard }: GroupTokensTabP
     }
 
     const copyToClipboard = (text: string) => {
-        navigator.clipboard.writeText(text).then(() => {
+        writeTextToClipboard(text).then(() => {
             toast.success(t('common.copied'))
         }).catch(() => {
             toast.error(t('common.copyFailed'))

web/src/feature/group/components/GroupTokensTab.tsx

@@ -12,6 +12,7 @@ import { ChannelDialog } from '@/feature/channel/components/ChannelDialog'
 import type { Channel } from '@/types/channel'
 import { toast } from 'sonner'
 import { openResourceDialog, showDeletedResourceToast } from '@/utils/resource-dialog'
+import { writeTextToClipboard } from '@/lib/clipboard'
 
 // Format price with unit
 const formatPrice = (price: number, unit: number): string => {
@@ -99,7 +100,7 @@ export const ExpandedLogContent = ({ log }: { log: LogRecord }) => {
 
     const copyToClipboard = (text?: string) => {
         if (!text) return
-        navigator.clipboard.writeText(text).then(() => {
+        writeTextToClipboard(text).then(() => {
             toast.success(t('common.copied'))
         }).catch(() => {
             toast.error(t('common.copyFailed'))

web/src/feature/log/components/ExpandedLogContent.tsx

@@ -13,6 +13,7 @@ import { Button } from '@/components/ui/button'
 import { ExpandedLogContent } from './ExpandedLogContent'
 import { toast } from 'sonner'
 import type { LogRecord } from '@/types/log'
+import { writeTextToClipboard } from '@/lib/clipboard'
 
 const columnHelper = createColumnHelper<LogRecord>()
 
@@ -55,7 +56,7 @@ export function LogTable({
     }
 
     const copyToClipboard = useCallback((text: string) => {
-        navigator.clipboard.writeText(text).then(() => {
+        writeTextToClipboard(text).then(() => {
             toast.success(t('common.copied'))
         }).catch(() => {
             toast.error(t('common.copyFailed'))

web/src/feature/log/components/LogTable.tsx

@@ -63,6 +63,7 @@ import { toast } from "sonner";
 import { useQueryClient } from "@tanstack/react-query";
 import { openResourceDialog, showDeletedResourceToast } from "@/utils/resource-dialog";
 import { getChannelModelMetric } from "@/utils/runtime-metrics";
+import { writeTextToClipboard } from "@/lib/clipboard";
 
 export function ModelTable() {
   const { t } = useTranslation();
@@ -213,8 +214,10 @@ export function ModelTable() {
         <div
           className="font-medium cursor-pointer hover:text-primary transition-colors"
           onClick={() => {
-            navigator.clipboard.writeText(row.original.model).then(() => {
+            writeTextToClipboard(row.original.model).then(() => {
               toast.success(t("common.copied"));
+            }).catch(() => {
+              toast.error(t("common.copyFailed"));
             });
           }}
         >

web/src/feature/model/components/ModelTable.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next'
 import CodeBlock from './CodeHight'
 import { toast } from 'sonner'
 import { TFunction } from 'i18next'
+import { writeTextToClipboard } from '@/lib/clipboard'
 
 interface ApiDocContent {
     title: string
@@ -1002,7 +1003,7 @@ const ApiDocDrawer: React.FC<ApiDocDrawerProps> = ({ isOpen, onClose, modelConfi
 
                                     <Button
                                         onClick={() => {
-                                            navigator.clipboard.writeText(apiDoc.requestExample).then(
+                                            writeTextToClipboard(apiDoc.requestExample).then(
                                                 () => {
                                                     toast.success(t('common.copied'))
                                                 },
@@ -1124,7 +1125,7 @@ const ApiDocDrawer: React.FC<ApiDocDrawerProps> = ({ isOpen, onClose, modelConfi
 
                                     <Button
                                         onClick={() => {
-                                            navigator.clipboard.writeText(apiDoc.responseExample).then(
+                                            writeTextToClipboard(apiDoc.responseExample).then(
                                                 () => {
                                                     toast.success(t('common.copied'))
                                                 },