feat: JS plugin add code completions(opentiny#1647)

Author: betterdancing

packages/builtinComponent/src/components/BaseForm.vue

@@ -185,7 +185,7 @@ const deleteApi = (evidence = { id: modelData.value?.id }) => {
 
 const initFormData = () => {
  modelData.value = Object.fromEntries(
- (formModel.value.parameters || []).map((item) => {
+ (formModel.value?.parameters || []).map((item) => {
  return [
  item.prop,
  item?.isModel

packages/common/js/completion-files/context.md

@@ -0,0 +1,51 @@
+你是一个JavaScript代码补全器，可以使用JS和ES的语法
+
+以下是一些通用的协议：
+常规属性如：{ width: '300px' }
+一. 变量引用
+{ width: { type: 'JSExpression', value: 'this.state.xxx' }
+即当type为JSExpression，取其value并将value的值当做变量调用
+二. 方法引用
+{ onClickNew: { type: 'JSFunction', value: 'function onClickNew() {}' }
+即当type为JSFunction，取其value并将value的值函数调用
+以下是一些依赖，调用均以this.开头:
+1. 数据源
+数据源是定义的数据模型
+const dataSource=$dataSource$
+调用方式为： this.dataSource.xxx
+2. 工具类
+工具类是通用的调用方法或npm依赖
+const utils=$utils$
+调用方式为： this.utils.xxx 
+utils有两种类型
+type为npm时，读取content内容，可构造如下引用，例如content中package（依赖包名）为@opentiny/vue，destructuring(解构)为true，exportName（导出组件名称）为Notify，实际引用方式是import { Notify } from '@opentiny/vue';
+type为function时，读取content内容，当content.type为JSFunction则将value视为JS方法并调用，其他可参考通用的协议
+3. 全局变量
+全局变量是使用pinia创建的变量
+const stores=$globalState$
+调用方式为： this.stores.xxx
+4. JS变量
+js变量
+const state=$state$
+调用方式为： this.state.xxx
+5. JS方法
+js方法
+const methods=$methods$
+调用方式为： this.xxx
+
+以上依赖中没有的，则不能调用，如utils中没有axios，则axios不能使用
+
+以下是当前选中的组件
+$currentSchema$
+请理解当前组件，componentName为组件名称，组件包括tinyVue组件、ElementPlus组件，和基本html元素
+对象中的ref属性即vue组件的ref属性，如ref值为testForm，使用方式为this.$('testForm')
+props表示组件的属性，是一个对象，对应vue组件的defineProps和defineEmits中的内容
+props中以on开头的表示其传递的是方法，如onClick，其值可以参考通用协议
+props中没有以on开头的则是普通属性，如tinyInput组件中的placeholder
+props的属性中值为对象，且包含type和value属性，type为JSExpression和JSFunction时，value的值则参考通用协议取用
+
+直接上下文如下：
+$codeBeforeCursor$<cursor>$codeAfterCursor$
+请从<cursor>（光标位置）后进行补全
+注意如果是函数时，须以function关键字开头，不使用箭头函数
+请只返回代码，且只返回一个示例，不需要思考过程和解释

packages/common/js/completion.js

@@ -9,8 +9,16 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
-
-import { useCanvas, useResource } from '@opentiny/tiny-engine-meta-register'
+import { ref } from 'vue'
+import {
+ useCanvas,
+ useResource,
+ useRobot,
+ getMergeMeta,
+ getMetaApi,
+ META_SERVICE
+} from '@opentiny/tiny-engine-meta-register'
+import completion from './completion-files/context.md?raw'
 
 const keyWords = [
  'state',
@@ -172,6 +180,135 @@ const getRange = (position, words) => ({
  endColumn: words[words.length - 1].endColumn
 })
 
+const generateBaseReference = () => {
+ const { dataSource = [], utils = [], globalState = [] } = useResource().appSchemaState
+ const { state, methods } = useCanvas().getPageSchema()
+ const currentSchema = useCanvas().getCurrentSchema()
+ let referenceContext = completion
+ referenceContext = referenceContext.replace('$dataSource$', JSON.stringify(dataSource))
+ referenceContext = referenceContext.replace('$utils$', JSON.stringify(utils))
+ referenceContext = referenceContext.replace('$globalState$', JSON.stringify(globalState))
+ referenceContext = referenceContext.replace('$state$', JSON.stringify(state))
+ referenceContext = referenceContext.replace('$methods$', JSON.stringify(methods))
+ referenceContext = referenceContext.replace('$currentSchema$', JSON.stringify(currentSchema))
+ return referenceContext
+}
+
+const fetchAiInlineCompletion = (codeBeforeCursor, codeAfterCursor) => {
+ const { completeModel, apiKey, baseUrl } = useRobot().robotSettingState?.selectedModel || {}
+ if (!completeModel || !apiKey || !baseUrl) {
+ return
+ }
+ const referenceContext = generateBaseReference()
+ return getMetaApi(META_SERVICE.Http).post(
+ '/app-center/api/chat/completions',
+ {
+ model: completeModel,
+ messages: [
+ {
+ role: 'user',
+ content: referenceContext
+ .replace('$codeBeforeCursor$', codeBeforeCursor)
+ .replace('$codeAfterCursor$', codeAfterCursor)
+ }
+ ],
+ baseUrl,
+ stream: false
+ },
+ {
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${apiKey}`
+ }
+ }
+ )
+}
+
+const initInlineCompletion = (monacoInstance, editorModel) => {
+ const requestAllowed = ref(true)
+ const timer = ref()
+ const inlineCompletionProvider = {
+ provideInlineCompletions(model, position, _context, _token) {
+ if (editorModel && model.id !== editorModel.id) {
+ return new Promise((resolve) => {
+ resolve({ items: [] })
+ })
+ }
+
+ if (timer.value) {
+ clearTimeout(timer.value)
+ }
+
+ const words = getWords(model, position)
+ const range = getRange(position, words)
+ const wordContent = words.map((item) => item.word).join('')
+ if (!wordContent || wordContent.lastIndexOf('}') === 0 || wordContent.length < 4) {
+ return new Promise((resolve) => {
+ resolve({ items: [] })
+ })
+ }
+ if (!requestAllowed.value) {
+ return new Promise((resolve) => {
+ resolve({
+ items: [
+ {
+ insertText: '',
+ range
+ }
+ ]
+ })
+ })
+ }
+ const codeBeforeCursor = model.getValueInRange({
+ startLineNumber: 1,
+ startColumn: 1,
+ endLineNumber: position.lineNumber,
+ endColumn: position.column
+ })
+ const codeAfterCursor = model.getValueInRange({
+ startLineNumber: position.lineNumber,
+ startColumn: position.column,
+ endLineNumber: model.getLineCount(),
+ endColumn: model.getLineMaxColumn(model.getLineCount())
+ })
+ return new Promise((resolve) => {
+ // 延迟请求800ms
+ timer.value = setTimeout(() => {
+ // 节流操作，防止接口一直被请求
+ requestAllowed.value = false
+ fetchAiInlineCompletion(codeBeforeCursor, codeAfterCursor)
+ .then((res) => {
+ let insertText = res.choices[0].message.content.trim()
+ const wordContentIndex = insertText.indexOf(wordContent)
+ if (wordContentIndex === -1) {
+ insertText = `${wordContent}${insertText}\n`
+ }
+ if (wordContentIndex > 0) {
+ insertText = insertText.slice(wordContentIndex)
+ }
+ requestAllowed.value = true
+ resolve({
+ items: [
+ {
+ insertText,
+ range
+ }
+ ]
+ })
+ })
+ .catch(() => {
+ requestAllowed.value = true
+ })
+ }, 800)
+ })
+ },
+ freeInlineCompletions() {}
+ }
+ return ['javascript', 'typescript'].map((lang) =>
+ monacoInstance.languages.registerInlineCompletionsProvider(lang, inlineCompletionProvider)
+ )
+}
+
 export const initCompletion = (monacoInstance, editorModel, conditionFn) => {
  const completionItemProvider = {
  provideCompletionItems(model, position, _context, _token) {
@@ -198,8 +335,12 @@ export const initCompletion = (monacoInstance, editorModel, conditionFn) => {
  },
  triggerCharacters: ['.']
  }
-
- return ['javascript', 'typescript'].map((lang) =>
- monacoInstance.languages.registerCompletionItemProvider(lang, completionItemProvider)
- )
+ const completions = ['javascript', 'typescript'].map((lang) => {
+ return monacoInstance.languages.registerCompletionItemProvider(lang, completionItemProvider)
+ })
+ const { enableAICompletion } = getMergeMeta('engine.plugins.pagecontroller')?.options || {}
+ if (enableAICompletion) {
+ return completions.concat(initInlineCompletion(monacoInstance, editorModel))
+ }
+ return completions
 }

packages/plugins/script/meta.js

@@ -5,5 +5,8 @@ export default {
  icon: 'plugin-icon-js',
  width: 600,
  widthResizable: true,
+ options: {
+ enableAICompletion: true
+ },
  confirm: 'close' // 当点击插件栏切换或关闭前是否需要确认, 会调用插件中confirm值指定的方法，e.g. 此处指向 close方法，会调用插件的close方法执行确认逻辑
 }