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
-
{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;
+}