Ospp 2024/optimize schema generation

packages/plugins/robot/docs/README.md

@@ -32,4 +32,10 @@
 
 # 通过继续提问，让AI修改生成的页面
 
-如需对生成的页面进行调整，只需继续提问。AI 将根据您的新指令对页面进行迭代修改，帮助您逐步完善设计与功能。
+
+如需对生成的页面进行调整，只需继续提问。AI 将根据您的新指令对页面进行迭代修改，帮助您逐步完善设计与功能。
+
+# 演示视频
+
+[AI插件搭建能力增强功能演示视频](https://www.bilibili.com/video/BV11PxpefEsK/?share_source=copy_web&vd_source=269fa603804b1bac348290de346b943c)
+

packages/plugins/robot/src/Main.vue

@@ -124,6 +124,7 @@ import { getBlockContent, initBlockList, AIModelOptions } from './js/robotSettin
 import DialogContent from './ContentDialog.vue'
 import useSpeechRecognition from './js/useSpeechRecognition'
 import TokenDialog from './TokenDialog.vue'
+import { codeRules as importedCodeRules } from './js/codeRules'
 
 export default {
   components: {
@@ -182,7 +183,7 @@ export default {
       )
     }
 
-    // TODO：返回schema格式的代码
+
     // eslint-disable-next-line no-unused-vars
     const createNewPage = (schema) => {
       if (!(pageSettingState.isNew && pageSettingState.isAIPage)) {
@@ -209,18 +210,10 @@ export default {
       useHistory().addHistory()
     }
 
-    const codeRules = `
-      从现在开始，请扮演一名前端专家。如果需要根据图片或者描述生成前端代码，代码中的所有组件必须使用 Vue 3 框架和 TinyVue 组件库进行编写。例如，如果你想使用按钮组件，应该使用 TinyVue 组件库中的 \`TinyButton\`。
-      以下是 TinyVue 组件库的文档，请通读并遵循其中的指导来生成代码：[TinyVue 组件库文档](https://opentiny.design/tiny-vue/zh-CN/os-theme/overview)
-      生成代码时遵从以下几条要求:
-      ###
-      1. 回复中只能有一个代码块
-      2. 所有生成的代码都是基于 Vue 3 框架
-      3. 所有组件都来自 TinyVue 组件库，避免使用原生组件或其他第三方库
-      4. 参考并遵循 TinyVue 文档中的组件使用方式
-      5. 所有的组件都遵循了首字母大写的命名约定，例如用TinyForm、TinyFormItem、Text等。
-      ###
-    `
+
+    // prompt
+    const codeRules = ref(importedCodeRules)
+
 
     // 在每一次发送请求之前，都把引入区块的内容，给放到第一条消息中
     // 为了不污染存储在localstorage里的用户的原始消息，这里进行了简单的对象拷贝
@@ -230,7 +223,7 @@ export default {
       const firstMessage = sendProcess.messages[0]
       firstMessage.content
       sendProcess.messages = [
-        { ...firstMessage, content: `${getBlockContent()}\n${codeRules}\n${firstMessage.content}` },
+        { ...firstMessage, content: `${getBlockContent()}\n${codeRules.value}\n${firstMessage.content}` },
         ...sendProcess.messages.slice(1)
       ]
       delete sendProcess.displayMessages
@@ -249,34 +242,27 @@ export default {
         .post('/app-center/api/ai/chat', getSendSeesionProcess(), { timeout: 600000 })
         .then((res) => {
           const { originalResponse, schema } = res
-          const responseMessage = getAiRespMessage(
-            originalResponse.choices?.[0]?.message.role,
-            originalResponse.choices?.[0]?.message.content
-          )
-          const respDisplayMessage = getAiRespMessage(
-            originalResponse.choices?.[0]?.message.role,
-            originalResponse.choices?.[0]?.message.content
-          )
+
+          const responseMessage = getAiRespMessage(originalResponse.role, originalResponse.content)
+          const respDisplayMessage = getAiRespMessage(originalResponse.role, originalResponse.content)
+
 
           sessionProcess.messages.push(responseMessage)
           sessionProcess.displayMessages.push(respDisplayMessage)
-          messages.value[messages.value.length - 1].content = originalResponse.choices?.[0]?.message.content
+          messages.value[messages.value.length - 1].content = originalResponse.content
           setContextSession()
-          if (schema?.schema) {
-            createNewPage(schema.schema)
+
+          if (schema) {
+            createNewPage(schema)
           }
           inProcessing.value = false
           connectedFailed.value = false
         })
-        .catch((error) => {
-          switch (error.code) {
-            case 'CM001':
-              localStorage.removeItem(currentModel.modelKey)
-              tokenDialogVisible.value = true
-              break
-            default:
-              break
-          }
+        .catch(() => {
+          // 若后续接入的 AI 的 token 有失效则需清除
+          // localStorage.removeItem(currentModel.modelKey)
+          // tokenDialogVisible.value = true
+
           messages.value[messages.value.length - 1].content = '连接失败'
           localStorage.removeItem('aiChat')
           inProcessing.value = false
@@ -654,6 +640,7 @@ export default {
   .arrow-down {
     margin-left: 5px;
   }
+
 }
 .tiny-dropdown .tiny-dropdown__trigger:not(.tiny-button) .tiny-svg {
   vertical-align: middle;

packages/plugins/robot/src/TokenDialog.vue

@@ -62,13 +62,9 @@ export default {
     const submitKeyForm = () => {
       keyFormRef.value.validate((valid) => {
         if (valid) {
-          try {
-            localStorage.setItem(props.currentModel.modelKey, keyForm.value.token)
-            emit('token-status', true)
-            closeKeyFormDialog()
-          } catch (error) {
-            emit('token-status', false)
-          }
+          localStorage.setItem(props.currentModel.modelKey, keyForm.value.token)
+          emit('token-status', true)
+          closeKeyFormDialog()
         }
       })
     }
@@ -100,7 +96,8 @@ export default {
       <tiny-alert
         :icon="TinyIconCommission"
         :closable="false"
-        :description="`尝试用自己的 ${model.modelKey} 开启 AI 对话功能吧！`"
+        :description="`尝试用自己的 ${model.modelKey} 开启AI对话功能吧！`"
+
       ></tiny-alert>
       <tiny-form-item label="" prop="token">
         <tiny-input