feat: tool group handle missing

2026-02-22 19:15:47 +08:00 · 2026-02-10 13:49:44 +08:00
parent 1502121125
commit 1af4e5dda2
2 changed files with 106 additions and 39 deletions
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
@ -210,7 +210,6 @@ const ToolBlockComponent = ({
    return resultMetadata?.tools?.[configId]
  }, [activeTabId, configId, fileMetadata, isUsingExternalMetadata, metadata])
  const isToolMissing = !currentProvider || !currentTool
-  const missingFieldCount = toolConfigFromMetadata?.configuration?.fields?.length ?? 0

  const isInteractive = editor.isEditable()

@ -339,6 +338,12 @@ const ToolBlockComponent = ({
  }, [isSettingOpen, portalContainer, ref, useModalValue])

  const displayLabel = label || toolMeta?.label || tool
+  const missingDisplayLabel = useMemo(() => {
+    if (!isToolMissing)
+      return displayLabel
+    const firstSegment = displayLabel.split('/').map(item => item.trim()).filter(Boolean)[0]
+    return firstSegment || displayLabel
+  }, [displayLabel, isToolMissing])
  const resolvedIcon = (() => {
    const fromNode = theme === Theme.dark ? iconDark : icon
    if (fromNode)
@ -623,13 +628,10 @@ const ToolBlockComponent = ({
          >
            {renderIcon()}
            <span className={cn('max-w-[180px] truncate system-xs-medium', (needAuthorization || isToolMissing) ? 'text-text-warning' : 'text-text-accent')}>
-              {displayLabel}
+              {isToolMissing ? missingDisplayLabel : displayLabel}
            </span>
            {isToolMissing && (
              <>
-                <span className="flex h-4 min-w-4 items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 text-text-tertiary system-2xs-medium-uppercase">
-                  {missingFieldCount}
-                </span>
                <span className="flex h-4 items-center justify-center p-[2px] text-text-warning">
                  <span className="i-ri-alert-fill h-3 w-3" />
                </span>
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx
@ -4,15 +4,17 @@ import type { ToolParameter } from '@/app/components/tools/types'
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import Link from 'next/link'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import AppIcon from '@/app/components/base/app-icon'
 import Modal from '@/app/components/base/modal'
 import { useSelectOrDelete } from '@/app/components/base/prompt-editor/hooks'
 import Switch from '@/app/components/base/switch'
+import Tooltip from '@/app/components/base/tooltip'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import ToolAuthorizationSection from '@/app/components/plugins/plugin-detail-panel/tool-selector/sections/tool-authorization-section'
 import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
@ -195,6 +197,21 @@ const ToolGroupBlockComponent = ({
      }
    })
  }, [currentProvider, language, tools])
+  const missingToolCount = useMemo(() => {
+    if (!tools.length)
+      return 0
+    if (!currentProvider)
+      return tools.length
+    const availableToolNames = new Set(currentProvider.tools?.map(item => item.name) || [])
+    return tools.reduce((count, item) => count + (availableToolNames.has(item.tool) ? 0 : 1), 0)
+  }, [currentProvider, tools])
+  const isToolMissing = missingToolCount > 0
+  const missingDisplayLabel = useMemo(() => {
+    if (!isToolMissing)
+      return providerLabel
+    const firstSegment = providerLabel.split('/').map(item => item.trim()).filter(Boolean)[0]
+    return firstSegment || providerLabel
+  }, [isToolMissing, providerLabel])

  const activeToolItem = useMemo(() => {
    if (!expandedToolId)
@ -530,6 +547,13 @@ const ToolGroupBlockComponent = ({
  }, [activeTabId, currentProvider?.type, fileMetadata, isUsingExternalMetadata, metadata, onMetadataChange, storeApi])

  const renderIcon = () => {
+    if (isToolMissing) {
+      return (
+        <span className="flex size-4 items-center justify-center p-px">
+          <span className="i-ri-equalizer-2-line h-[14px] w-[14px] text-text-warning" />
+        </span>
+      )
+    }
    if (!resolvedIcon)
      return null
    const iconNode = (() => {
@ -563,7 +587,7 @@ const ToolGroupBlockComponent = ({
      <span
        className={cn(
          'i-ri-equalizer-2-line hidden size-[14px]',
-          needAuthorization ? 'text-text-warning' : 'text-text-accent',
+          (needAuthorization || isToolMissing) ? 'text-text-warning' : 'text-text-accent',
          isInteractive && 'group-hover:block',
        )}
      />
@ -588,6 +612,27 @@ const ToolGroupBlockComponent = ({
    )
  }

+  const missingTooltipContent = useMemo(() => {
+    if (!isToolMissing)
+      return null
+    return (
+      <div className="rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 shadow-lg backdrop-blur-[10px]">
+        <div className="text-text-secondary system-xs-medium">
+          {t('skillEditor.toolMissing', { ns: 'workflow' })}
+        </div>
+        <div className="mt-0.5 text-text-tertiary system-xs-regular">
+          <Trans
+            i18nKey="skillEditor.toolMissingDesc"
+            ns="workflow"
+            components={{
+              Plugins: <Link href="/plugins" className="text-text-accent" />,
+            }}
+          />
+        </div>
+      </div>
+    )
+  }, [isToolMissing, t])
+
  const renderProviderHeaderIcon = () => {
    if (!resolvedIcon)
      return null
@ -823,39 +868,59 @@ const ToolGroupBlockComponent = ({

  return (
    <>
-      <span
-        ref={ref}
-        className={cn(
-          'inline-flex items-center gap-[2px] rounded-[5px] border px-px py-[1px] shadow-xs',
-          isInteractive ? 'group cursor-pointer' : 'cursor-default',
-          needAuthorization ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
-          isSelected && 'border-text-accent',
-        )}
-        title={providerLabel}
-        onMouseDown={() => {
-          if (!isInteractive)
-            return
-          if (!toolItems.length)
-            return
-          setIsSettingOpen(true)
-        }}
-      >
-        {renderIcon()}
-        <span className={cn('max-w-[160px] truncate system-xs-medium', needAuthorization ? 'text-text-warning' : 'text-text-accent')}>
-          {providerLabel}
-        </span>
-        {needAuthorization
-          ? (
-              <span className="flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning system-2xs-medium-uppercase">
-                {authBadgeLabel}
-                <span className="i-ri-alert-fill h-3 w-3" />
-              </span>
-            )
-          : (
-              <span className="flex h-4 items-center rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1 text-text-accent-secondary system-2xs-medium-uppercase">
-                {displayEnabledCount}
-              </span>
+      <span ref={ref} className="inline-flex">
+        <Tooltip
+          disabled={!isToolMissing}
+          offset={4}
+          noDecoration
+          popupClassName="bg-transparent p-0"
+          popupContent={missingTooltipContent}
+        >
+          <span
+            className={cn(
+              'inline-flex items-center gap-[2px] rounded-[5px] border px-px py-[1px] shadow-xs',
+              isInteractive ? 'group cursor-pointer' : 'cursor-default',
+              (needAuthorization || isToolMissing) ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
+              isSelected && 'border-text-accent',
            )}
+            title={providerLabel}
+            onMouseDown={() => {
+              if (!isInteractive)
+                return
+              if (!toolItems.length)
+                return
+              setIsSettingOpen(true)
+            }}
+          >
+            {renderIcon()}
+            <span className={cn('max-w-[160px] truncate system-xs-medium', (needAuthorization || isToolMissing) ? 'text-text-warning' : 'text-text-accent')}>
+              {isToolMissing ? missingDisplayLabel : providerLabel}
+            </span>
+            {isToolMissing
+              ? (
+                  <>
+                    <span className="flex h-4 min-w-4 items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 text-text-tertiary system-2xs-medium-uppercase">
+                      {missingToolCount}
+                    </span>
+                    <span className="flex h-4 items-center justify-center p-[2px] text-text-warning">
+                      <span className="i-ri-alert-fill h-3 w-3" />
+                    </span>
+                  </>
+                )
+              : needAuthorization
+                ? (
+                    <span className="flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning system-2xs-medium-uppercase">
+                      {authBadgeLabel}
+                      <span className="i-ri-alert-fill h-3 w-3" />
+                    </span>
+                  )
+                : (
+                    <span className="flex h-4 items-center rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1 text-text-accent-secondary system-2xs-medium-uppercase">
+                      {displayEnabledCount}
+                    </span>
+                  )}
+          </span>
+        </Tooltip>
      </span>
      {useModalValue && (
        <Modal