fix: text copy issue (#723)

web/app/components/app/overview/embedded/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import copy from 'copy-to-clipboard'
 import style from './style.module.css'
 import Modal from '@/app/components/base/modal'
-import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'
 import copyStyle from '@/app/components/app/chat/copy-btn/style.module.css'
 import Tooltip from '@/app/components/base/tooltip'
 import { useAppContext } from '@/context/app-context'
@@ -52,7 +52,6 @@ const Embedded = ({ isShow, onClose, appBaseUrl, accessToken }: Props) => {
   const { t } = useTranslation()
   const [option, setOption] = useState<Option>('iframe')
   const [isCopied, setIsCopied] = useState<OptionStatus>({ iframe: false, scripts: false })
-  const [_, copy] = useCopyToClipboard()
 
   const { langeniusVersionInfo } = useAppContext()
   const isTestEnv = langeniusVersionInfo.current_env === 'TESTING' || langeniusVersionInfo.current_env === 'DEVELOPMENT'

web/app/components/app/overview/share-link.tsx

@@ -6,9 +6,9 @@ import {
   LinkIcon,
 } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
+import copy from 'copy-to-clipboard'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
-import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'
 
 import './style.css'
 
@@ -24,7 +24,6 @@ const ShareLinkModal: FC<IShareLinkProps> = ({
   onClose,
   onGenerateCode,
 }) => {
-  const [_, copy] = useCopyToClipboard()
   const [genLoading, setGenLoading] = useState(false)
   const { t } = useTranslation()
   return <Modal

web/app/components/develop/secret-key/secret-key-modal.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { PlusIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import useSWR, { useSWRConfig } from 'swr'
 import { useContext } from 'use-context-selector'
+import copy from 'copy-to-clipboard'
 import SecretKeyGenerateModal from './secret-key-generate'
 import s from './style.module.css'
 import Modal from '@/app/components/base/modal'
@@ -16,7 +17,6 @@ import type { CreateApiKeyResponse } from '@/models/app'
 import Tooltip from '@/app/components/base/tooltip'
 import Loading from '@/app/components/base/loading'
 import Confirm from '@/app/components/base/confirm'
-import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'
 import I18n from '@/context/i18n'
 
 type ISecretKeyModalProps = {
@@ -39,7 +39,6 @@ const SecretKeyModal = ({
   const { data: apiKeysList } = useSWR(commonParams, fetchApiKeysList)
 
   const [delKeyID, setDelKeyId] = useState('')
-  const [_, copy] = useCopyToClipboard()
 
   const { locale } = useContext(I18n)
 

web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx

@@ -1,9 +1,9 @@
 'use client'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { t } from 'i18next'
+import copy from 'copy-to-clipboard'
 import s from './index.module.css'
 import Tooltip from '@/app/components/base/tooltip'
-import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'
 import { randomString } from '@/app/components/app-sidebar/basic'
 
 type IInvitationLinkProps = {
@@ -15,12 +15,11 @@ const InvitationLink = ({
 }: IInvitationLinkProps) => {
   const [isCopied, setIsCopied] = useState(false)
   const selector = useRef(`invite-link-${randomString(4)}`)
-  const [_, copy] = useCopyToClipboard()
 
   const copyHandle = useCallback(() => {
     copy(value)
     setIsCopied(true)
-  }, [value, copy])
+  }, [value])
 
   useEffect(() => {
     if (isCopied) {

web/app/components/share/text-generation/result/header.tsx

@@ -3,13 +3,12 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { ClipboardDocumentIcon, HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline'
-import { Feedbacktype } from '@/app/components/app/chat'
+import copy from 'copy-to-clipboard'
+import type { Feedbacktype } from '@/app/components/app/chat/type'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'
 import Tooltip from '@/app/components/base/tooltip'
 
-// import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'
-import copy from 'copy-to-clipboard'
 type IResultHeaderProps = {
   result: string
   showFeedback: boolean
@@ -49,7 +48,7 @@ const Header: FC<IResultHeaderProps> = ({
             <div
               onClick={() => {
                 onFeedback({
-                  rating: null
+                  rating: null,
                 })
               }}
               className='flex w-7 h-7 items-center justify-center rounded-md cursor-pointer  !text-primary-600 border border-primary-200 bg-primary-100 hover:border-primary-300 hover:bg-primary-200'>
@@ -66,7 +65,7 @@ const Header: FC<IResultHeaderProps> = ({
             <div
               onClick={() => {
                 onFeedback({
-                  rating: null
+                  rating: null,
                 })
               }}
               className='flex w-7 h-7 items-center justify-center rounded-md cursor-pointer  !text-red-600 border border-red-200 bg-red-100 hover:border-red-300 hover:bg-red-200'>
@@ -84,7 +83,7 @@ const Header: FC<IResultHeaderProps> = ({
               <div
                 onClick={() => {
                   onFeedback({
-                    rating: 'like'
+                    rating: 'like',
                   })
                 }}
                 className='flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-gray-100'>
@@ -98,7 +97,7 @@ const Header: FC<IResultHeaderProps> = ({
               <div
                 onClick={() => {
                   onFeedback({
-                    rating: 'dislike'
+                    rating: 'dislike',
                   })
                 }}
                 className='flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-gray-100'>

web/hooks/use-copy-to-clipboard.ts

@@ -1,26 +0,0 @@
-import { useCallback, useState } from 'react'
-import writeText from 'copy-to-clipboard'
-
-type CopiedValue = string | null
-type CopyFn = (text: string) => Promise<boolean>
-
-function useCopyToClipboard(): [CopiedValue, CopyFn] {
-  const [copiedText, setCopiedText] = useState<CopiedValue>(null)
-
-  const copy: CopyFn = useCallback(async (text: string) => {
-    try {
-      writeText(text)
-      setCopiedText(text)
-      return true
-    }
-    catch (error) {
-      console.warn('Copy failed', error)
-      setCopiedText(null)
-      return false
-    }
-  }, [])
-
-  return [copiedText, copy]
-}
-
-export default useCopyToClipboard