✨ feat: ChatGPT Prompt 支持配置在单独文件里

Author: wjkang

README.md

@@ -26,9 +26,9 @@
 
 ![gpt1.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c121c1cf260e4f96b2b68bbcdc3cd5d4~tplv-k3u1fbpfcp-zoom-1.image?)
 
-拉到最底部，配置 chatGPT 字段：
+配置 chatGPT 字段：
 
-![gpt2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9366c6928c445eb984e9eb036c3d55d~tplv-k3u1fbpfcp-zoom-1.image?)
+![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5552fb27cb3947b89fb91d948ca3e0aa~tplv-k3u1fbpfcp-zoom-1.image?)
 
 commandPrompt 既右键菜单选择模板后发送的内容，支持 EJS 模板语法。
 

package.json

@@ -3,7 +3,7 @@
 	"displayName": "lowcode",
 	"description": "lowcode tool, support ChatGPT",
 	"author": "wjkang <[email protected]>",
-	"version": "1.4.4",
+	"version": "1.4.5",
 	"icon": "asset/icon.png",
 	"publisher": "wjkang",
 	"repository": "https://github.com/lowcoding/lowcode-vscode",
@@ -290,4 +290,4 @@
 		"tar": "^6.0.5",
 		"typescript-json-schema": "^0.50.1"
 	}
-}
+}

src/commands/chatGPT.ts

@@ -31,7 +31,9 @@ export const registerChatGPTCommand = (context: vscode.ExtensionContext) => {
       'lowcode.askChatGPTWithTemplate',
       async () => {
         const templateList = getSnippets().filter(
-          (s) => s.preview.chatGPT && s.preview.chatGPT.commandPrompt,
+          (s) =>
+            s.commandPrompt ||
+            (s.preview.chatGPT && s.preview.chatGPT.commandPrompt),
         );
         if (templateList.length === 0) {
           vscode.window.showErrorMessage('请配置 Prompt 模板');
@@ -50,7 +52,7 @@ export const registerChatGPTCommand = (context: vscode.ExtensionContext) => {
           rawClipboardText: getClipboardText() || '',
         };
         const code = compileEjs(
-          template!.preview.chatGPT?.commandPrompt!,
+          template?.commandPrompt || template!.preview.chatGPT?.commandPrompt!,
           model as Model,
         );
         showChatGPTView({

src/utils/materials.ts

@@ -32,15 +32,24 @@ export const getLocalMaterials = (
         viewPrompt?: string;
       };
     };
+    commandPrompt?: string; // 优先级比 preview.chatGPT 高
+    viewPrompt?: string; // 优先级比 preview.chatGPT 高
     template: string;
   }[] = [];
   try {
     materials = fs.readdirSync(materialsFullPath).map((s) => {
       const fullPath = path.join(materialsFullPath, s);
       let model = {} as any;
       let schema = {} as any;
-      let preview = { img: '', category: [], schema: 'form-render' };
+      let preview = {
+        img: '',
+        category: [],
+        schema: 'form-render',
+        chatGPT: { commandPrompt: '', viewPrompt: '' },
+      };
       let template = '';
+      let commandPrompt = '';
+      let viewPrompt = '';
       try {
         model = JSON.parse(
           getFileContent(path.join(fullPath, 'config', 'model.json'), true),
@@ -56,13 +65,32 @@ export const getLocalMaterials = (
           getFileContent(path.join(fullPath, 'config', 'preview.json'), true),
         );
       } catch {}
+      try {
+        commandPrompt = getFileContent(
+          path.join(fullPath, 'config', 'commandPrompt.ejs'),
+          true,
+        );
+      } catch {}
+      try {
+        viewPrompt = getFileContent(
+          path.join(fullPath, 'config', 'viewPrompt.ejs'),
+          true,
+        );
+      } catch {}
       if (!preview.img) {
         preview.img =
           'https://gitee.com/img-host/img-host/raw/master/2020/11/05/1604587962875.jpg';
       }
       if (!preview.schema) {
         preview.schema = 'form-render';
       }
+      if (!commandPrompt) {
+        commandPrompt = preview.chatGPT?.commandPrompt;
+      }
+      if (!viewPrompt) {
+        viewPrompt = preview.chatGPT?.viewPrompt;
+      }
+
       if (type === 'snippets') {
         try {
           template = getFileContent(
@@ -100,6 +128,8 @@ export const getLocalMaterials = (
         schema,
         preview,
         template,
+        commandPrompt,
+        viewPrompt,
       };
     });
   } catch {}
@@ -127,7 +157,7 @@ export const getCodeTemplateListFromFiles = () => {
 };
 
 /**
- * 获取 codeTemplate 目录下ejs文件作为代码模板并且合并代码片段
+ * 获取 codeTemplate 目录下ejs文件作为代码模板并且合并代码片段 (兼容以前旧代码)
  *
  * @export
  * @returns
@@ -152,6 +182,8 @@ export function getSnippets() {
         viewPrompt?: string;
       };
     };
+    commandPrompt?: string; // 优先级比 preview.chatGPT 高
+    viewPrompt?: string; // 优先级比 preview.chatGPT 高
     template: string;
   }[] = getCodeTemplateListFromFiles().map((s) => ({
     path: s.name,

src/webview/controllers/block.ts

@@ -10,6 +10,8 @@ export const createBlock = (
     model: string;
     schema: string;
     preview: string;
+    commandPrompt: string;
+    viewPrompt: string;
   }>,
 ) => {
   const blockPath = path.join(blockMaterialsPath, message.data.name);
@@ -32,6 +34,14 @@ export const createBlock = (
     path.join(blockPath, 'config', 'preview.json'),
     message.data.preview,
   );
+  fs.outputFileSync(
+    path.join(blockPath, 'config', 'commandPrompt.ejs'),
+    message.data.commandPrompt,
+  );
+  fs.outputFileSync(
+    path.join(blockPath, 'config', 'viewPrompt.ejs'),
+    message.data.viewPrompt,
+  );
   fs.outputFileSync(
     path.join(blockPath, 'script', 'index.js'),
     `const path = require("path");

src/webview/controllers/snippet.ts

@@ -15,6 +15,8 @@ export const addSnippets = (
     model: string;
     schema: string;
     preview: string;
+    commandPrompt: string;
+    viewPrompt: string;
   }>,
 ) => {
   const snippetPath = path.join(snippetMaterialsPath, message.data.name);
@@ -34,6 +36,14 @@ export const addSnippets = (
     path.join(snippetPath, 'config', 'preview.json'),
     message.data.preview,
   );
+  fs.outputFileSync(
+    path.join(snippetPath, 'config', 'commandPrompt.ejs'),
+    message.data.commandPrompt,
+  );
+  fs.outputFileSync(
+    path.join(snippetPath, 'config', 'viewPrompt.ejs'),
+    message.data.viewPrompt,
+  );
   fs.outputFileSync(
     path.join(snippetPath, 'script', 'index.js'),
     `const path = require("path");

webview-react/src/components/HeaderControl/presenter.tsx

@@ -6,7 +6,7 @@ import { useModel } from './model';
 export const defaultSchema: Record<string, { model: string; schema: string }> =
   {
     'form-render': {
-      model: JSON.stringify({ name: '6666' }, null, 2),
+      model: JSON.stringify({ name: 'lowcode' }, null, 2),
       schema: JSON.stringify(
         {
           formSchema: {
@@ -37,7 +37,7 @@ export const defaultSchema: Record<string, { model: string; schema: string }> =
       ),
     },
     amis: {
-      model: JSON.stringify({ name: '6666' }, null, 2),
+      model: JSON.stringify({ name: 'lowcode' }, null, 2),
       schema: JSON.stringify(
         {
           formSchema: {
@@ -139,16 +139,14 @@ export const usePresenter = () => {
           ],
           category: [],
           schema: model.blockModal.schemaType,
-          chatGPT: {
-            commandPrompt:
-              '<%- rawSelectedText || rawClipboardText %> 解释这段代码的意思',
-            viewPrompt:
-              '<%- model %> \r\n将这段 json 中，中文 key 翻译为英文，使用驼峰语法，返回翻译后的markdown语法的代码块',
-          },
         },
         null,
         2,
       ),
+      commandPrompt:
+        '<%- rawSelectedText || rawClipboardText %>\r\n解释这段代码的意思',
+      viewPrompt:
+        '<%- model %> \r\n将这段 json 中，中文 key 翻译为英文，使用驼峰语法，\r\n返回翻译后的markdown语法的代码块',
     })
       .then(() => {
         closeBlockModal();

webview-react/src/pages/blocks/Detail/model.ts

@@ -11,9 +11,9 @@ const useModel = () => {
       description?: string;
       img?: string | string[];
       schema?: 'form-render' | 'formily' | 'amis';
-      chatGPT?: { viewPrompt?: string };
     };
     template: string;
+    viewPrompt?: string;
   }>({ schema: {}, model: {} } as any);
   const [materials, setMaterials] = useState<typeof selectedMaterial[]>([]);
   const [formData, setData] = useState({});

webview-react/src/pages/blocks/Detail/useController.tsx

@@ -42,12 +42,11 @@ const useController = () => {
   };
 
   const handleAskChatGPT = () => {
-    if (!model.selectedMaterial.preview.chatGPT?.viewPrompt) {
-      message.warn('未配置 preview.chatGPT.viewPrompt');
+    if (!model.selectedMaterial.viewPrompt) {
+      message.warn('未配置 viewPrompt，直接输入 model');
     }
     askChatGPTWithEjsTemplate({
-      template:
-        model.selectedMaterial.preview.chatGPT?.viewPrompt || '<%- model %>',
+      template: model.selectedMaterial.viewPrompt || '<%- model %>',
       model: { model: JSON.stringify(model.selectedMaterial.model, null, 2) },
     });
   };

webview-react/src/pages/snippets/AddSnippet/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Form, Input, message, Select, Space } from 'antd';
+import { Button, Form, Input, message, Select } from 'antd';
 import { history, useModel } from 'umi';
 import CodeMirror from '@/components/CodeMirror';
 import useController from './useController';
@@ -14,12 +14,7 @@ export default () => {
 
   return (
     <div>
-      <Form
-        {...{
-          labelCol: { span: 4 },
-          wrapperCol: { span: 14 },
-        }}
-      >
+      <Form layout="vertical">
         <Form.Item label="名称" required>
           <Input
             value={model.formData.name}
@@ -46,6 +41,35 @@ export default () => {
             }}
           />
         </Form.Item>
+        <Form.Item label="ChatGPT CommandPrompt" tooltip="右键菜单 Prompt 模板">
+          <CodeMirror
+            domId="commandPromptCodeMirror"
+            lint={false}
+            value={model.formData.commandPrompt}
+            onChange={(value) => {
+              model.setFormData((s) => ({
+                ...s,
+                commandPrompt: value,
+              }));
+            }}
+          />
+        </Form.Item>
+        <Form.Item
+          label="ChatGPT ViewPrompt"
+          tooltip="可视化动态表单 Prompt 模板"
+        >
+          <CodeMirror
+            domId="viewPromptCodeMirror"
+            lint={false}
+            value={model.formData.viewPrompt}
+            onChange={(value) => {
+              model.setFormData((s) => ({
+                ...s,
+                viewPrompt: value,
+              }));
+            }}
+          />
+        </Form.Item>
         <Form.Item label="模板数据">
           <CodeMirror
             domId="modelCodeMirror"