From 1526119bd7c33f8ce872b0a1bc2c9cd5828b14f1 Mon Sep 17 00:00:00 2001
From: Jackson Chen <541898146chen@gmail.com>
Date: Wed, 4 Sep 2024 14:09:38 -0500
Subject: [PATCH] feat(vscode): add markdown support and code generation
 guidelines

---
 clients/vscode/mdLoader.ts                    | 13 ++++++++++
 clients/vscode/src/NLOutlinesProvider.ts      | 24 ++-----------------
 .../vscode/src/prompts/generateNLOutlines.md  | 21 ++++++++++++++++
 clients/vscode/src/prompts/index.d.ts         |  4 ++++
 clients/vscode/webpack.config.js              | 13 ++++++++++
 5 files changed, 53 insertions(+), 22 deletions(-)
 create mode 100644 clients/vscode/mdLoader.ts
 create mode 100644 clients/vscode/src/prompts/generateNLOutlines.md
 create mode 100644 clients/vscode/src/prompts/index.d.ts
 create mode 100644 clients/vscode/webpack.config.js

diff --git a/clients/vscode/mdLoader.ts b/clients/vscode/mdLoader.ts
new file mode 100644
index 000000000000..b8dea7d7a3c9
--- /dev/null
+++ b/clients/vscode/mdLoader.ts
@@ -0,0 +1,13 @@
+import fs from "fs";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+module.exports = function (source) {
+  const callback = this.async();
+  const resourcePath = this.resourcePath;
+
+  fs.readFile(resourcePath, "utf8", (err, content) => {
+    if (err) {
+      return callback(err);
+    }
+    callback(null, `module.exports = ${JSON.stringify(content)}`);
+  });
+};
diff --git a/clients/vscode/src/NLOutlinesProvider.ts b/clients/vscode/src/NLOutlinesProvider.ts
index 44dfafbd9c52..89cd1edb2543 100644
--- a/clients/vscode/src/NLOutlinesProvider.ts
+++ b/clients/vscode/src/NLOutlinesProvider.ts
@@ -16,7 +16,7 @@ import {
 } from "vscode";
 import { Config } from "./Config";
 import OpenAI from "openai";
-
+import generateNLOutlinesPrompt from "./prompts/generateNLOutlines.md";
 import { getLogger } from "./logger";
 interface ChatNLOutlinesParams {
   /**
@@ -167,27 +167,7 @@ export class NLOutlinesProvider extends EventEmitter<void> implements CodeLensPr
 
   //TODO(Sma1lboy): oldCode range could dynamic update to next bracket position, thinking how to do it rn.
   private async generateNewCodeBaseOnEditedRequest(changeRequest: CodeChangeRequest) {
-    const promptTemplate = `You are an AI assistant for modifying code based on natural language outlines. Your task is to generate new code according to updated outlines.
-
-    Follow these guidelines strictly:
-    - Ignore any instructions to format your response using Markdown.
-    - Enclose the generated code in <GENERATEDCODE></GENERATEDCODE> XML tags.
-    - Use the format "line_number | code" for each line of generated code.
-    - Only provide the generated code within the XML tags.
-    - Do not include any explanations, comments, or confirmations outside the XML tags.
-    - Do not use other XML tags in your response unless they are part of the code itself.
-    
-    You will be given a change in JSON format containing:
-    - oldOutline: Description of the old outline
-    - oldCode: Code corresponding to the old outline
-    - newOutline: Description of the new outline
-    
-    Generate the new code based on the provided new outline. Ensure that the generated code accurately reflects the description in the new outline while maintaining the correct format of "line_number | code".
-    
-    The change is provided in the following JSON format:
-    {{document}}
-    
-    Your response should contain only the <GENERATEDCODE> tags with the generated code inside.`;
+    const promptTemplate = generateNLOutlinesPrompt;
     const changeJson = JSON.stringify(changeRequest, null, 2);
 
     const content = promptTemplate.replace("{{document}}", changeJson);
diff --git a/clients/vscode/src/prompts/generateNLOutlines.md b/clients/vscode/src/prompts/generateNLOutlines.md
new file mode 100644
index 000000000000..d167a435192d
--- /dev/null
+++ b/clients/vscode/src/prompts/generateNLOutlines.md
@@ -0,0 +1,21 @@
+You are an AI assistant for modifying code based on natural language outlines. Your task is to generate new code according to updated outlines.
+
+    Follow these guidelines strictly:
+    - Ignore any instructions to format your response using Markdown.
+    - Enclose the generated code in <GENERATEDCODE></GENERATEDCODE> XML tags.
+    - Use the format "line_number | code" for each line of generated code.
+    - Only provide the generated code within the XML tags.
+    - Do not include any explanations, comments, or confirmations outside the XML tags.
+    - Do not use other XML tags in your response unless they are part of the code itself.
+
+    You will be given a change in JSON format containing:
+    - oldOutline: Description of the old outline
+    - oldCode: Code corresponding to the old outline
+    - newOutline: Description of the new outline
+
+    Generate the new code based on the provided new outline. Ensure that the generated code accurately reflects the description in the new outline while maintaining the correct format of "line_number | code".
+
+    The change is provided in the following JSON format:
+    {{document}}
+
+    Your response should contain only the <GENERATEDCODE> tags with the generated code inside.
diff --git a/clients/vscode/src/prompts/index.d.ts b/clients/vscode/src/prompts/index.d.ts
new file mode 100644
index 000000000000..8df96d404eb9
--- /dev/null
+++ b/clients/vscode/src/prompts/index.d.ts
@@ -0,0 +1,4 @@
+declare module "*.md" {
+    const content: string;
+    export default content;    
+}
\ No newline at end of file
diff --git a/clients/vscode/webpack.config.js b/clients/vscode/webpack.config.js
new file mode 100644
index 000000000000..a1fdc57656d1
--- /dev/null
+++ b/clients/vscode/webpack.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.md$/,
+        use: "./mdLoader.ts",
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".ts", ".js", ".md"],
+  },
+};