Does the copy button not work?

[dee1024]

When I click the copy button or copy the code, it doesn't work.

[dornfeld-capital]

Works for me. Do you have steps to reproduce?

[kornatskyi]

Doesn't work while code ouput is still going

[dornfeld-capital]

I see. We should render the copy button after the text has finished streaming.

[kornatskyi]

I've been using the project for several days, I can try to make a PR for this fix. I would be happy to contribute @dornfeld-capital

[dornfeld-capital]

@kornatskyi That would be great.

[dee1024]

When I run on my local computer, the copy function works fine, but when I deploy to my Azure server via docker, the copy problem keeps appearing. In my environment, this is a necessary question.

[dee1024]

When I debug the code, I find that the value "navigator.clipboard" in ChatMessage.tsx is false. But i don't know how to fix it.

[dee1024]

When I use an SSL certificate to access my website, everything works fine.

[kornatskyi]

I've been looking into this issue, and it seems like it has two parts to it. First is what @dee1024 mentioned. And another is that you can't copy code because CodeBlock component is being constantly re-rendered by MemoizedReactMarkdown

So copy button works intermittently, if there are enough time between re-rendering, you can copy more easily when GPT4 responding, because it prints tokens slower. Also each update resets selection, so it's hard to select and copy when code is still rendering

[YIKAILucas]

How to fix the problem?

[HunterGerlach]

Even though this is closed, here's a working solution for anyone who stumbles on this in the future....

Replace the copyToCliboard method with the following in CodeBlock.tsx:

const copyToClipboard = () => {
    console.log('Attempting to copy to clipboard:', value);

    if (!navigator.clipboard || !navigator.clipboard.writeText) {
      console.error('Clipboard API not available.');
      copyToClipboardFallback(value);
      return;
    }

    navigator.clipboard
      .writeText(value)
      .then(() => {
        console.log('Copy successful');
        setIsCopied(true);
        setTimeout(() => setIsCopied(false), 2000);
      })
      .catch((err) => console.error('Copy failed', err));
  };

  const copyToClipboardFallback = (textToCopy: string) => {
    const textArea = document.createElement('textarea');
    textArea.value = textToCopy;
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      const successful = document.execCommand('copy');
      const msg = successful ? 'successful' : 'unsuccessful';
      console.log('Fallback: Copying text command was ' + msg);
    } catch (err) {
      console.error('Fallback: Oops, unable to copy', err);
    }
    document.body.removeChild(textArea);
  };

[decolygs]

When I use an SSL certificate to access my website, everything works fine.

This is very interesting, please let me know.

What is WebServer with SSL,
・Next.js with HTTPS?
or
・Did you build a separate Web Server (Nginx, Cadyy, etc.)?
Which is it?