diff --git a/src/common/chat/utils/useHighlightedTextAsContext.ts b/src/common/chat/utils/useHighlightedTextAsContext.ts index 036271f..0df4f72 100644 --- a/src/common/chat/utils/useHighlightedTextAsContext.ts +++ b/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({ diff --git a/webviews/src/components/ChatMessage/index.tsx b/webviews/src/components/ChatMessage/index.tsx index 0179745..df9b4d9 100644 --- a/webviews/src/components/ChatMessage/index.tsx +++ b/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 - +
+
+ + navigator.clipboard.writeText( + String(children).replace(/\n$/, "") + ) + } + > + + +
+ + {/* @ts-ignore */} + +
) : ( {children} diff --git a/webviews/src/components/ChatMessage/styles.module.css b/webviews/src/components/ChatMessage/styles.module.css index 386f922..c45f43a 100644 --- a/webviews/src/components/ChatMessage/styles.module.css +++ b/webviews/src/components/ChatMessage/styles.module.css @@ -1,3 +1,13 @@ .chat-message { - padding: 0px 20px; -} \ No newline at end of file + padding: 0px 20px; +} + +.code-container { + position: relative; +} + +.copy-container { + position: absolute; + right: 10px; + top: 10px; +}