diff --git 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 index 588cbebde8..012ec30c14 100644 --- 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 @@ -4,15 +4,17 @@ import type { ToolValue } from '@/app/components/workflow/block-selector/types' import type { ToolWithProvider } from '@/app/components/workflow/types' import type { AppAssetTreeView } from '@/types/app-asset' import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' +import Link from 'next/link' import * as React from 'react' import { 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 { InfoCircle } from '@/app/components/base/icons/src/vender/line/general' import Modal from '@/app/components/base/modal' import { useSelectOrDelete } from '@/app/components/base/prompt-editor/hooks' +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' @@ -207,6 +209,8 @@ const ToolBlockComponent = ({ const resultMetadata = fileMetadata.get(activeTabId) as SkillFileMetadata | undefined return resultMetadata?.tools?.[configId] }, [activeTabId, configId, fileMetadata, isUsingExternalMetadata, metadata]) + const isToolMissing = !currentProvider || !currentTool + const missingFieldCount = toolConfigFromMetadata?.configuration?.fields?.length ?? 0 const isInteractive = editor.isEditable() @@ -350,6 +354,13 @@ const ToolBlockComponent = ({ }, [currentProvider]) const renderIcon = () => { + if (isToolMissing) { + return ( + + + + ) + } if (!resolvedIcon) return null const iconNode = (() => { @@ -408,6 +419,27 @@ const ToolBlockComponent = ({ ) } + const missingTooltipContent = useMemo(() => { + if (!isToolMissing) + return null + return ( +