feat: enhance model plugin workflow checks and model provider management UX (#33289)

Signed-off-by: yyh <yuanyouhuilyz@gmail.com>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: CodingOnStar <hanxujiang@dify.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Coding On Star <447357187@qq.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: statxc <tyleradams93226@gmail.com>

web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/variable-block.spec.tsx

@@ -53,7 +53,7 @@ const createSelectorWithTransientPrefix = (prefix: string, suffix: string): stri
 }
 
 const hasErrorIcon = (container: HTMLElement) => {
-  return container.querySelector('svg.text-text-destructive') !== null
+  return container.querySelector('svg.text-text-warning') !== null
 }
 
 const renderVariableBlock = (props: {

web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx

@@ -14,7 +14,7 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useReactFlow, useStoreApi } from 'reactflow'
-import Tooltip from '@/app/components/base/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { isConversationVar, isENV, isGlobalVar, isRagVariableVar, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import VarFullPathPanel from '@/app/components/workflow/nodes/_base/components/variable/var-full-path-panel'
 import {
@@ -28,6 +28,7 @@ import {
   UPDATE_WORKFLOW_NODES_MAP,
 } from './index'
 import { WorkflowVariableBlockNode } from './node'
+import { useLlmModelPluginInstalled } from './use-llm-model-plugin-installed'
 
 type WorkflowVariableBlockComponentProps = {
   nodeKey: string
@@ -68,6 +69,8 @@ const WorkflowVariableBlockComponent = ({
   const node = localWorkflowNodesMap![variables[isRagVar ? 1 : 0]]
 
   const isException = isExceptionVariable(varName, node?.type)
+  const sourceNodeId = variables[isRagVar ? 1 : 0]
+  const isLlmModelInstalled = useLlmModelPluginInstalled(sourceNodeId, localWorkflowNodesMap)
   const variableValid = useMemo(() => {
     let variableValid = true
     const isEnv = isENV(variables)
@@ -144,7 +147,13 @@ const WorkflowVariableBlockComponent = ({
         handleVariableJump()
       }}
       isExceptionVariable={isException}
-      errorMsg={!variableValid ? t('errorMsg.invalidVariable', { ns: 'workflow' }) : undefined}
+      errorMsg={
+        !variableValid
+          ? t('errorMsg.invalidVariable', { ns: 'workflow' })
+          : !isLlmModelInstalled
+              ? t('errorMsg.modelPluginNotInstalled', { ns: 'workflow' })
+              : undefined
+      }
       isSelected={isSelected}
       ref={ref}
       notShowFullPath={isShowAPart}
@@ -155,9 +164,9 @@ const WorkflowVariableBlockComponent = ({
     return Item
 
   return (
-    <Tooltip
-      noDecoration
-      popupContent={(
+    <Tooltip>
+      <TooltipTrigger disabled={!isShowAPart} render={<div>{Item}</div>} />
+      <TooltipContent variant="plain">
         <VarFullPathPanel
           nodeName={node.title}
           path={variables.slice(1)}
@@ -169,10 +178,7 @@ const WorkflowVariableBlockComponent = ({
             : Type.string}
           nodeType={node?.type}
         />
-      )}
-      disabled={!isShowAPart}
-    >
-      <div>{Item}</div>
+      </TooltipContent>
     </Tooltip>
   )
 }

web/app/components/base/prompt-editor/plugins/workflow-variable-block/use-llm-model-plugin-installed.spec.ts

@@ -0,0 +1,75 @@
+import type { WorkflowNodesMap } from '@/app/components/base/prompt-editor/types'
+import { renderHook } from '@testing-library/react'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { useLlmModelPluginInstalled } from './use-llm-model-plugin-installed'
+
+let mockModelProviders: Array<{ provider: string }> = []
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContextSelector: <T>(selector: (state: { modelProviders: Array<{ provider: string }> }) => T): T =>
+    selector({ modelProviders: mockModelProviders }),
+}))
+
+const createWorkflowNodesMap = (node: Record<string, unknown>): WorkflowNodesMap =>
+  ({
+    target: {
+      title: 'Target',
+      type: BlockEnum.Start,
+      ...node,
+    },
+  } as unknown as WorkflowNodesMap)
+
+describe('useLlmModelPluginInstalled', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockModelProviders = []
+  })
+
+  it('should return true when the node is missing', () => {
+    const { result } = renderHook(() => useLlmModelPluginInstalled('target', undefined))
+
+    expect(result.current).toBe(true)
+  })
+
+  it('should return true when the node is not an LLM node', () => {
+    const workflowNodesMap = createWorkflowNodesMap({
+      id: 'target',
+      type: BlockEnum.Start,
+    })
+
+    const { result } = renderHook(() => useLlmModelPluginInstalled('target', workflowNodesMap))
+
+    expect(result.current).toBe(true)
+  })
+
+  it('should return true when the matching model plugin is installed', () => {
+    mockModelProviders = [
+      { provider: 'langgenius/openai/openai' },
+      { provider: 'langgenius/anthropic/claude' },
+    ]
+    const workflowNodesMap = createWorkflowNodesMap({
+      id: 'target',
+      type: BlockEnum.LLM,
+      modelProvider: 'langgenius/openai/gpt-4.1',
+    })
+
+    const { result } = renderHook(() => useLlmModelPluginInstalled('target', workflowNodesMap))
+
+    expect(result.current).toBe(true)
+  })
+
+  it('should return false when the matching model plugin is not installed', () => {
+    mockModelProviders = [
+      { provider: 'langgenius/anthropic/claude' },
+    ]
+    const workflowNodesMap = createWorkflowNodesMap({
+      id: 'target',
+      type: BlockEnum.LLM,
+      modelProvider: 'langgenius/openai/gpt-4.1',
+    })
+
+    const { result } = renderHook(() => useLlmModelPluginInstalled('target', workflowNodesMap))
+
+    expect(result.current).toBe(false)
+  })
+})

web/app/components/base/prompt-editor/plugins/workflow-variable-block/use-llm-model-plugin-installed.ts

@@ -0,0 +1,23 @@
+import type { WorkflowNodesMap } from '@/app/components/base/prompt-editor/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { extractPluginId } from '@/app/components/workflow/utils/plugin'
+import { useProviderContextSelector } from '@/context/provider-context'
+
+export function useLlmModelPluginInstalled(
+  nodeId: string,
+  workflowNodesMap: WorkflowNodesMap | undefined,
+): boolean {
+  const node = workflowNodesMap?.[nodeId]
+  const modelProvider = node?.type === BlockEnum.LLM
+    ? node.modelProvider
+    : undefined
+  const modelPluginId = modelProvider ? extractPluginId(modelProvider) : undefined
+
+  return useProviderContextSelector((state) => {
+    if (!modelPluginId)
+      return true
+    return state.modelProviders.some(p =>
+      extractPluginId(p.provider) === modelPluginId,
+    )
+  })
+}