feat(chat): add copy button in chat (#41)

Author: gespispace

src/common/chat/utils/useHighlightedTextAsContext.ts

@@ -55,9 +55,10 @@ Instructions:
 - If the answer expects any code examples, please provide examples. 
 
 Rules for code in response:
-- Suggest only changes. 
+- Suggest only changes.
 - Provide only the necessary code.
 - Write as less as possible comments.
+- Wrap in Markdown with type of language.
 `;
 
 export const humanMessageWithCodePrompt = new PromptTemplate({

webviews/src/components/ChatMessage/index.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
+import { VSCodeButton, VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
 import Markdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { vscDarkPlus as vscodeHighlightStyle } from "react-syntax-highlighter/dist/esm/styles/prism";
@@ -16,15 +16,31 @@ export const ChatMessage = memo((props: { role: string; content: string }) => {
             code(props) {
               const { children, className, node, ...rest } = props;
               const match = /language-(\w+)/.exec(className || "");
+
               return match ? (
-                // @ts-ignore
-                <SyntaxHighlighter
-                  {...rest}
-                  PreTag="div"
-                  children={String(children).replace(/\n$/, "")}
-                  language={match[1]}
-                  style={vscodeHighlightStyle}
-                />
+                <div className={styles["code-container"]}>
+                  <div className={styles["copy-container"]}>
+                    <VSCodeButton
+                      appearance="icon"
+                      onClick={() =>
+                        navigator.clipboard.writeText(
+                          String(children).replace(/\n$/, "")
+                        )
+                      }
+                    >
+                      <span className="codicon codicon-copy"></span>
+                    </VSCodeButton>
+                  </div>
+
+                  {/* @ts-ignore */}
+                  <SyntaxHighlighter
+                    {...rest}
+                    PreTag="div"
+                    children={String(children).replace(/\n$/, "")}
+                    language={match[1]}
+                    style={vscodeHighlightStyle}
+                  />
+                </div>
               ) : (
                 <code {...rest} className={className}>
                   {children}

webviews/src/components/ChatMessage/styles.module.css

@@ -1,3 +1,13 @@
 .chat-message {
-   padding: 0px 20px;
-}
+  padding: 0px 20px;
+}
+
+.code-container {
+  position: relative;
+}
+
+.copy-container {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}