feat: Add code copy button

[iRedScarf]

Description

1. Refer to chatgpt-demo/src/components/MessageItem.tsx, add a copy button to the rendered code block in src/components/Markdown.tsx, and the icon uses i-c Arbon-copy, the emerald green will be displayed when the mouse is hovered, and it will become the i-carbon-checkmark icon after clicking.

2. The code-copy-btn and code-copy-tips styles have been added to unocss.config.ts for the code copy button.

3. package.json has added solidjs-use to implement the code copy function.

4. By the way, the setting switch of Vercel Analytics has been added to astro.config.mjs.

Linked Issues

#48

Additional context

BUG: Initially, the mouse hover to display tips was set for the code copy button, but the hover will be triggered to display tips when the mouse covers the text interface, instead of the expected mouse cover to display when copying the button.

const result = `<div relative>
  <div data-code=${encodeURIComponent(code)} data-index=${index} class="code-copy-btn group">
    ${copied()[index] === true ? '<i class="i-carbon-checkmark"></i>' : '<i class="i-carbon-copy"></i>'}
    <div class="group-hover:op-90 code-copy-tips">
      ${copied()[index] ? 'Copied' : 'Copy'}
    </div>
  </div>
  ${match}
</div>`

And the code that implements code copy is all placed in Markdown.tsx, which makes Markdown.tsx look less beautiful.

Demo

https://anse-tree.vercel.app

[netlify]

✅ Deploy Preview for chatgpt-demo-v2 ready!

Name	Link
🔨 Latest commit	d53a63c
🔍 Latest deploy log	https://app.netlify.com/sites/chatgpt-demo-v2/deploys/6501a32dc2333b00084f2d52
😎 Deploy Preview	https://deploy-preview-97--chatgpt-demo-v2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[iRedScarf]

Although the implementation is not very elegant and lacks the function of hover description, the code copy button works.

[ddiu8081]

Big thanks! I made a few changes, mainly removing the use of solidjs-use and replacing it with solid-primitives.