feat: basic ability and agent mode

Author: hexqi

designer-demo/src/composable/http/index.js

@@ -16,6 +16,7 @@ const procession = {
 let loginVM = null
 
 const showError = (url, message) => {
+  if (message === 'canceled') return // 取消请求场景不报错
   globalNotify({
     type: 'error',
     title: '接口报错',

packages/configurator/src/select-icon-configurator/SelectIconConfigurator.vue

@@ -54,11 +54,11 @@ export default {
       iconSearchValue: '',
       icon: {
         name: props.modelValue,
-        component: props.modelValue && SvgICons[props.modelValue]()
+        component: props.modelValue && SvgICons[props.modelValue]?.()
       },
       defaultIcon: {
         name: props.modelValue,
-        component: props.modelValue && SvgICons[props.modelValue]()
+        component: props.modelValue && SvgICons[props.modelValue]?.()
       }
     })
 

packages/plugins/robot/assets/failed.svg

@@ -25,18 +25,19 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
-    "@opentiny/tiny-engine-meta-register": "workspace:*",
     "@opentiny/tiny-engine-common": "workspace:*",
+    "@opentiny/tiny-engine-meta-register": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
     "@opentiny/tiny-robot": "0.3.0-rc.5",
     "@opentiny/tiny-robot-kit": "0.3.0-rc.5",
     "@opentiny/tiny-robot-svgs": "0.3.0-rc.5",
     "@opentiny/tiny-schema-renderer": "1.0.0-beta.6",
-    "fast-json-patch": "~3.1.1",
+    "@vueuse/core": "^9.13.0",
     "dompurify": "^3.0.1",
+    "fast-json-patch": "~3.1.1",
     "highlight.js": "^11.11.1",
-    "markdown-it": "^14.1.0",
-    "jsonrepair": "3.13.0"
+    "jsonrepair": "3.13.0",
+    "markdown-it": "^14.1.0"
   },
   "devDependencies": {
     "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:*",

packages/plugins/robot/assets/success.svg

@@ -1,9 +1,9 @@
 <template>
   <div class="build-loading-renderer">
-    <img src="../assets/loading.webp" alt="loading" />
+    <img :src="getIconUrl(statusData.icon)" :alt="status" />
     <div class="build-loading-renderer-content">
-      <div class="build-loading-renderer-content-header">页面生成中，请稍等片刻</div>
-      <div class="build-loading-renderer-content-body">{{ renderContent }}</div>
+      <div class="build-loading-renderer-content-header">{{ statusData.title }}</div>
+      <div class="build-loading-renderer-content-body">{{ statusData.content }}</div>
     </div>
   </div>
 </template>
@@ -16,15 +16,46 @@ export default {
     content: {
       type: String,
       required: true
+    },
+    status: {
+      type: String,
+      default: 'loading'
     }
   },
   setup(props) {
-    const renderContent = computed(() => {
-      return props.content.slice(-30)
+    const getIconUrl = (icon: string) => {
+      return new URL(`../assets/${icon}`, import.meta.url).href
+    }
+
+    const statusDataMap = {
+      loading: {
+        title: '页面生成中，请稍等片刻',
+        icon: 'loading.webp',
+        content: () => props.content?.slice(-30)
+      },
+      success: {
+        title: '已生成新页面效果',
+        content: '您可以继续问答更新页面效果',
+        icon: 'success.svg'
+      },
+      failed: {
+        title: '页面生成失败',
+        content: '页面生成失败',
+        icon: 'failed.svg'
+      }
+    }
+
+    const statusData = computed(() => {
+      const data = statusDataMap[props.status as keyof typeof statusDataMap] || statusDataMap.loading
+      return {
+        ...data,
+        content: typeof data.content === 'function' ? data.content() : data.content
+      }
     })
 
     return {
-      renderContent
+      statusData,
+      getIconUrl
     }
   }
 }

packages/plugins/robot/assets/test.png

@@ -10,9 +10,12 @@
     <Teleport v-if="showTeleport" defer :to="fullscreen ? 'body' : '.tiny-engine-right-robot'">
       <div class="robot-chat-container" :class="{ 'robot-chat-container-fullscreen': fullscreen }">
         <robot-chat
-          :ref="robotChatRef"
+          ref="robotChatRef"
           :prompt-items="promptItems"
-          :allowFiles="isVisualModel() && aiType === AI_MODES.Agent"
+          :bubbleRenderers="
+            aiMode === CHAT_MODE.Agent ? { markdown: BuildLoadingRenderer, loading: BuildLoadingRenderer } : {}
+          "
+          :allowFiles="isVisualModel() && aiMode === CHAT_MODE.Agent"
           @fileSelected="handleFileSelected"
         >
           <template #operations>
@@ -25,24 +28,21 @@
             >
               <robot-setting-popover
                 v-if="showSettingPopover"
-                @changeType="changeModel"
+                @changeType="handleChatModeChange"
                 @close="closePanel"
               ></robot-setting-popover>
               <template #reference>
-                <span class="chat-title-dropdown" @click.stop="showSettingPopover = true">
+                <span class="setting-icon" @click.stop="showSettingPopover = !showSettingPopover">
                   <svg-icon name="setting" class="operations-setting ml8"> </svg-icon>
                 </span>
               </template>
             </tiny-popover>
           </template>
           <template #footer-left>
-            <robot-type-select :aiType="aiType" @typeChange="typeChange"></robot-type-select>
-            <mcp-server :position="mcpDrawerPosition" v-if="aiType === AI_MODES.Chat"></mcp-server>
+            <robot-type-select :aiMode="aiMode" @typeChange="typeChange"></robot-type-select>
+            <mcp-server :position="mcpDrawerPosition" v-if="aiMode === CHAT_MODE.Chat"></mcp-server>
           </template>
         </robot-chat>
-        <tiny-dialog-box v-model:visible="showPreview" title="当前AI渲染效果" width="80%">
-          <schema-renderer v-if="showPreview" :schema="currentSchema"></schema-renderer>
-        </tiny-dialog-box>
       </div>
     </Teleport>
   </div>
@@ -53,16 +53,17 @@ import { computed, h, onMounted, ref } from 'vue'
 import { ToolbarBase } from '@opentiny/tiny-engine-common'
 import RobotChat from './components/RobotChat.vue'
 import RobotSettingPopover from './components/RobotSettingPopover.vue'
-import { TinyPopover, TinyDialogBox } from '@opentiny/vue'
+import { TinyPopover } from '@opentiny/vue'
 import { useRobot, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import McpIconComponent from './icons/mcp-icon.vue'
 import PageIconComponent from './icons/page-icon.vue'
 import StudyIconComponent from './icons/study-icon.vue'
 import type { PromptProps } from '@opentiny/tiny-robot'
-import SchemaRenderer from '@opentiny/tiny-schema-renderer'
 import RobotTypeSelect from './components/RobotTypeSelect.vue'
 import McpServer from './mcp/McpServer.vue'
+import BuildLoadingRenderer from './BuildLoadingRenderer.vue'
 import { updateLLMConfig } from './client'
+import useChat from './composables/useChat'
 
 const { options } = defineProps({
   options: {
@@ -71,7 +72,7 @@ const { options } = defineProps({
   }
 })
 
-const robotChatRef = ref('robotChatRef')
+const robotChatRef = ref(null)
 
 const fullscreen = computed(() => {
   return robotChatRef.value?.fullscreen
@@ -107,54 +108,30 @@ const promptItems: PromptProps[] = [
   }
 ]
 
-const showPreview = ref(false)
-const currentSchema = ref(null)
 const showTeleport = ref(false)
 const showSettingPopover = ref(false)
 
-const { robotSettingState, AI_MODES, AIModelOptions } = useRobot()
+const { robotSettingState, CHAT_MODE, AIModelOptions, aiMode } = useRobot()
+const { inputMessage } = useChat()
 
 const isVisualModel = () => {
   const platform = AIModelOptions.find((option) => option.value === robotSettingState.selectedModel.baseUrl)
-  const modelAbility = platform.model.find((item) => item.value === robotSettingState.selectedModel.model)
+  const modelAbility = platform?.model.find((item) => item.value === robotSettingState.selectedModel.model)
   return modelAbility?.ability?.includes('visual') || false
 }
 
-const aiType = ref(AI_MODES.Agent)
-
 const typeChange = (type: string) => {
-  aiType.value = type
+  aiMode.value = type
   robotChatRef.value?.createConversation()
   updateLLMConfig({
-    apiUrl: type === AI_MODES.Agent ? '/app-center/api/ai/chat' : '/app-center/api/chat/completions'
+    apiUrl: type === CHAT_MODE.Agent ? '/app-center/api/ai/chat' : '/app-center/api/chat/completions'
   })
 }
 
-const changeApiKey = () => {
-  localStorage.removeItem('aiChat')
-}
-
-const changeModel = (model) => {
-  robotSettingState.selectedModel = {
-    label: model.label || model.model,
-    activeName: model.activeName,
-    baseUrl: model.baseUrl,
-    model: model.model,
-    completeModel: model.completeModel,
-    apiKey: model.apiKey
-  }
+const handleChatModeChange = () => {
   // singleAttachmentItems.value = []
   // imageUrl.value = ''
   // endContent()
-
-  if (
-    robotSettingState.selectedModel.apiKey !== model.apiKey &&
-    robotSettingState.selectedModel.baseUrl === model.baseUrl &&
-    robotSettingState.selectedModel.model === model.model
-  ) {
-    robotSettingState.selectedModel.apiKey = model.apiKey
-    changeApiKey()
-  }
 }
 
 const closePanel = () => {
@@ -175,6 +152,9 @@ const handleFileSelected = (formData: unknown, updateAttachment: (resourceUrl: s
       })
       .then((res: any) => {
         updateAttachment(res?.resourceUrl)
+        if (!inputMessage.value) {
+          inputMessage.value = '生成图片中UI效果'
+        }
       })
   } catch (error) {
     // eslint-disable-next-line no-console
@@ -203,6 +183,10 @@ onMounted(async () => {
   }
 }
 
+.setting-icon {
+  cursor: pointer;
+}
+
 .operations-setting {
   font-size: 28px;
   padding: 4px;