fix: Fix Canvas Console Warning and AI Node Model Selection Component Usage (#6759)

Author: shaohuzhang1

ui/src/api/admin/workspace/model/model.ts

@@ -42,8 +42,6 @@ const putPauseModelDownload = (modelId: string) => {
   return put<undefined, boolean>(`${getPrefix()}/${modelId}/pause_download`)
 }
 
-
-
 export default {
   deleteModel,
   getModelDetail,

ui/src/components/business/model-select/index.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { Check } from '@element-plus/icons-vue'
-import ProviderApi from '@/api/admin/workspace/model/provider'
 import { MODEL_STATUS } from '@/api/enums'
 import type { ModelProviderItem, ModelItem } from '@/api/types'
-
+import { groupBy } from 'lodash'
 defineOptions({
   name: 'ModelSelect',
   inheritAttrs: false,
 })
 
-type ModelOptions = Record<string, ModelItem[]>
-
 interface ModelOptionGroup {
   icon: string
   models: ModelItem[]
@@ -21,23 +18,24 @@ interface ModelOptionGroup {
 
 const props = withDefaults(
   defineProps<{
-    modelType?: string
     modelValue: string
-    options: ModelOptions | null
+    options: ModelItem[]
+    providerOptions: ModelProviderItem[]
   }>(),
   {
-    modelType: '',
     modelValue: '',
-    options: null,
+    options: () => [],
+    providerOptions: () => [],
   },
 )
-
+const _options = computed(() => {
+  return groupBy(props.options, 'provider')
+})
 const emit = defineEmits<{
   change: [modelId: string]
   'update:modelValue': [modelId: string]
 }>()
 
-const providerOptions = ref<ModelProviderItem[]>([])
 const loading = ref(false)
 
 const selectedModelId = computed({
@@ -50,10 +48,10 @@ const selectedModelId = computed({
 
 const modelOptionGroups = computed<ModelOptionGroup[]>(() => {
   const providerMap = new Map(
-    providerOptions.value.map((provider) => [provider.provider, provider]),
+    props.providerOptions.map((provider) => [provider.provider, provider]),
   )
 
-  return Object.entries(props.options ?? {}).map(([provider, models]) => {
+  return Object.entries(_options.value ?? {}).map(([provider, models]) => {
     const providerOption = providerMap.get(provider)
     return {
       icon: providerOption?.icon ?? '',
@@ -74,25 +72,6 @@ const selectedProviderIcon = computed(
       models.some(({ id }) => id === selectedModelId.value),
     )?.icon ?? '',
 )
-
-function loadProviderOptions() {
-  loading.value = true
-
-  return ProviderApi.getProviderList()
-    .then((providers) => {
-      providerOptions.value = providers
-    })
-    .catch(() => {
-      providerOptions.value = []
-    })
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-onMounted(() => {
-  loadProviderOptions()
-})
 </script>
 
 <template>

ui/src/views/workflow/ApplicationWorkflowView.vue

@@ -46,6 +46,10 @@ function handleSave() {
       loading.value = false
     })
 }
+const defaultWorkflow = {
+  nodes: [],
+  deges: [],
+}
 
 function loadApplicationDetail() {
   loading.value = true

ui/src/workflow-canvas/core/CustomLine.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { BaseEdgeModel } from '@logicflow/core'
-
-const props = defineProps<{ model: BaseEdgeModel }>()
+import { inject } from 'vue'
+const getModel = inject('getModel') as () => BaseEdgeModel
+const model = getModel()
 const deleteEdge = () => {
-  props.model.graphModel.deleteEdgeById(props.model.id)
+  model.graphModel.deleteEdgeById(model.id)
 }
 </script>
 <template>
-  <div class="custom-edge cursor" @mouseup.stop @click.stop v-show="props.model.isHovered">
+  <div class="custom-edge cursor" @mouseup.stop @click.stop v-show="model.isHovered">
     <svg
       @click="deleteEdge"
       width="22"

ui/src/workflow-canvas/core/edge.ts

@@ -6,8 +6,7 @@ import {
   type GraphModel,
 } from '@logicflow/core'
 import type { App } from 'vue'
-import { createApp, h as vh } from 'vue'
-import { isActive, connect, disconnect } from './teleport'
+import { connect, disconnect } from './teleport'
 import CustomLine from './CustomLine.vue'
 
 function isMouseInElement(element: Element, event: PointerEvent) {
@@ -47,25 +46,12 @@ class CustomEdge2 extends BezierEdge {
   protected renderVueComponent(root: HTMLDivElement) {
     this.unmountVueComponent()
     this.root = root
-    const { graphModel } = this.props
     if (root) {
-      if (isActive()) {
-        connect(
-          this.targetId(),
-          CustomLine,
-          root,
-          this.props.model,
-          graphModel,
-          (node: BaseEdgeModel, graph: GraphModel) => {
-            return { model: node, graph }
-          },
-        )
-      } else {
-        this.customLineApp = createApp({
-          render: () => vh(CustomLine, { model: this.props.model }),
-        })
-        this.customLineApp?.mount(root)
-      }
+      connect(this.targetId(), CustomLine, root, () => {
+        return {
+          getModel: () => this.props.model,
+        }
+      })
     }
   }
   protected targetId() {
@@ -78,9 +64,7 @@ class CustomEdge2 extends BezierEdge {
     if (super.componentWillUnmount) {
       super.componentWillUnmount()
     }
-    if (isActive()) {
-      disconnect(this.targetId())
-    }
+    disconnect(this.targetId())
     this.unmountVueComponent()
   }
   /**

ui/src/workflow-canvas/index.vue

@@ -28,8 +28,8 @@ const props = withDefaults(
 const nodeModules = import.meta.glob<{ default: LogicFlow.RegisterConfig }>('./nodes/**/index.ts', {
   eager: true,
 })
-const workflow_mode = inject('workflowMode') || WorkflowMode.Application
-const loop_workflow_mode = inject('loopWorkflowMode') || WorkflowMode.ApplicationLoop
+const workflow_mode = inject('workflowMode', WorkflowMode.Application)
+const loop_workflow_mode = inject('loopWorkflowMode', WorkflowMode.ApplicationLoop)
 
 const TeleportContainer = getTeleport()
 const lf = shallowRef<LogicFlow>()
@@ -69,7 +69,6 @@ function renderGraphData(data: LogicFlow.GraphConfigData = props.data ?? {}) {
   })
 
   initDefaultShortcut(lf.value, lf.value.graphModel)
-  console.log(Object.values(nodeModules).map(({ default: node }) => node))
   lf.value.batchRegister([...Object.values(nodeModules).map(({ default: node }) => node), AppEdge])
   lf.value.setDefaultEdgeType('app-edge')
   lf.value.render(data ? data : {})
@@ -82,6 +81,7 @@ function renderGraphData(data: LogicFlow.GraphConfigData = props.data ?? {}) {
     getGraph: () => graph,
     workflowMode: workflow_mode,
     loopWorkflowMode: loop_workflow_mode,
+    apiType: 'workspace',
   })
   lf.value.graphModel.eventCenter.on('delete_edge', (edgeIds: string[]) => {
     edgeIds.forEach((edgeId) => lf.value?.deleteEdge(edgeId))

ui/src/workflow-canvas/nodes/ai-chat-node/index.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, useTemplateRef } from 'vue'
-
-import { set } from 'lodash'
+import { computed, inject, onMounted, ref, useTemplateRef } from 'vue'
+import ModelSelect from '@/components/business/model-select/index.vue'
+import { groupBy, set } from 'lodash'
 import type { FormInstance } from 'element-plus'
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
 import NodeContainer from '@/workflow-canvas/core/NodeContainer.vue'
 import type { BaseNodeModel } from '@logicflow/core'
+import { useWorkflowStore } from '@/workflow-canvas/store'
+import type { ModelItem } from '@/api/types'
 
 defineOptions({ name: 'WorkflowAiChatNode' })
 const getModel = inject('getModel') as () => BaseNodeModel
+const apiType = (inject('apiType') as string) || 'workspace'
 const model = getModel()
 interface AiChatNodeForm {
   model_id: string
@@ -47,8 +50,22 @@ function validate() {
     formRef.value?.validate(),
   ]).catch((error) => Promise.reject({ node: model, errMessage: error }))
 }
-
-onMounted(() => set(model, 'validate', validate))
+const store = useWorkflowStore(apiType)
+const modelList = ref<Array<ModelItem>>([])
+const providerOptions = ref<Array<any>>([])
+onMounted(() => {
+  set(model, 'validate', validate)
+  store
+    .getModelList({
+      model_type: 'LLM',
+    })
+    .then((data) => {
+      modelList.value = data
+    })
+  store.getProviderList().then((data) => {
+    providerOptions.value = data
+  })
+})
 </script>
 
 <template>
@@ -88,7 +105,13 @@ onMounted(() => set(model, 'validate', validate))
           class="w-full"
           placeholder="请选择变量"
         />
-        <el-input v-else v-model="formData.model_id" placeholder="请输入 AI 模型 ID" />
+        <ModelSelect
+          v-else
+          placeholder="请输入 AI 模型 ID"
+          :options="modelList"
+          :provider-options="providerOptions"
+          v-model="formData.model_id"
+        ></ModelSelect>
       </el-form-item>
 
       <el-form-item label="系统提示词">

ui/src/workflow-canvas/store/api/shared/index.ts

@@ -0,0 +1 @@
+export default {}

ui/src/workflow-canvas/store/api/system/index.ts

@@ -0,0 +1,4 @@
+import modelAPI from '@/api/admin/workspace/model/model'
+export default {
+  getModelList: modelAPI.getModelList,
+}

ui/src/workflow-canvas/store/api/workspace-shared/index.ts

@@ -0,0 +1 @@
+export default {}