fix: Reduce ineffective triggering of the clipboard

components/chat-message-actions.tsx

@@ -18,6 +18,11 @@ export function ChatMessageActions({
 }: ChatMessageActionsProps) {
   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 })
 
+  const onCopy = () => {
+    if (isCopied) return
+    copyToClipboard(message.content)
+  }
+
   return (
     <div
       className={cn(
@@ -26,11 +31,7 @@ export function ChatMessageActions({
       )}
       {...props}
     >
-      <Button
+      <Button variant="ghost" size="icon" onClick={onCopy}>
-        variant="ghost"
-        size="icon"
-        onClick={() => copyToClipboard(message.content)}
-      >
         {isCopied ? <IconCheck /> : <IconCopy />}
         <span className="sr-only">Copy message</span>
       </Button>

components/ui/codeblock.tsx

@@ -84,6 +84,11 @@ const CodeBlock: FC<Props> = memo(({ language, value }) => {
     URL.revokeObjectURL(url)
   }
 
+  const onCopy = () => {
+    if (isCopied) return
+    copyToClipboard(value)
+  }
+
   return (
     <div className="codeblock relative w-full bg-zinc-950 font-sans">
       <div className="flex w-full items-center justify-between bg-zinc-800 px-6 py-2 pr-4 text-zinc-100">
@@ -102,7 +107,7 @@ const CodeBlock: FC<Props> = memo(({ language, value }) => {
             variant="ghost"
             size="icon"
             className="text-xs hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0"
-            onClick={() => copyToClipboard(value)}
+            onClick={onCopy}
           >
             {isCopied ? <IconCheck /> : <IconCopy />}
             <span className="sr-only">Copy code</span>

lib/hooks/use-copy-to-clipboard.tsx

@@ -12,11 +12,11 @@ export function useCopyToClipboard({
   const [isCopied, setIsCopied] = React.useState<Boolean>(false)
 
   const copyToClipboard = (value: string) => {
-    if (
+    if (typeof window === 'undefined' || !navigator.clipboard?.writeText) {
-      typeof window === 'undefined' ||
+      return
-      !navigator.clipboard ||
+    }
-      !navigator.clipboard.writeText
+
-    ) {
+    if (!value) {
       return
     }