deer-flow/frontend/src/components/workspace/copy-button.tsx

import { CheckIcon, CopyIcon } from "lucide-react";
import { useCallback, useState, type ComponentProps } from "react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { writeTextToClipboard } from "@/core/clipboard";
import { useI18n } from "@/core/i18n/hooks";

import { Tooltip } from "./tooltip";

export function CopyButton({
  clipboardData,
  ...props
}: ComponentProps<typeof Button> & {
  clipboardData: string;
}) {
  const { t } = useI18n();
  const [copied, setCopied] = useState(false);
  const handleCopy = useCallback(() => {
    void (async () => {
      const didCopy = await writeTextToClipboard(clipboardData);
      if (!didCopy) {
        toast.error(t.clipboard.failedToCopyToClipboard);
        return;
      }

      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    })().catch(() => {
      toast.error(t.clipboard.failedToCopyToClipboard);
    });
  }, [clipboardData, t.clipboard.failedToCopyToClipboard]);
  return (
    <Tooltip content={t.clipboard.copyToClipboard}>
      <Button
        aria-label={
          copied ? t.clipboard.copiedToClipboard : t.clipboard.copyToClipboard
        }
        size="icon-sm"
        type="button"
        variant="ghost"
        onClick={handleCopy}
        {...props}
      >
        {copied ? (
          <CheckIcon className="size-4 text-green-500" />
        ) : (
          <CopyIcon className="size-4" />
        )}
      </Button>
    </Tooltip>
  );
}