Perplexica/src/components/MessageActions/Copy.tsx

import { Check, ClipboardList } from 'lucide-react';
import { Message } from '../ChatWindow';
import { useState } from 'react';
import { Section } from '@/lib/hooks/useChat';

const Copy = ({
  section,
  initialMessage,
}: {
  section: Section;
  initialMessage: string;
}) => {
  const [copied, setCopied] = useState(false);

  return (
    <button
      onClick={() => {
        const contentToCopy = `${initialMessage}${
          section?.message.responseBlocks.filter((b) => b.type === 'source')
            ?.length > 0 &&
          `\n\nCitations:\n${section.message.responseBlocks
            .filter((b) => b.type === 'source')
            ?.map((source: any, i: any) => `[${i + 1}] ${source.metadata.url}`)
            .join(`\n`)}`
        }`;
        navigator.clipboard.writeText(contentToCopy);
        setCopied(true);
        setTimeout(() => setCopied(false), 1000);
      }}
      className="p-2 text-black/70 dark:text-white/70 rounded-full hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white"
    >
      {copied ? <Check size={16} /> : <ClipboardList size={16} />}
    </button>
  );
};

export default Copy;