feat(web): differentiate invalid variable tooltips by model plugin status

Replace the generic "Invalid variable" message in prompt editor variable
labels with two context-aware messages: one for missing nodes and another
for uninstalled model plugins. Add useLlmModelPluginInstalled hook that
checks LLM node model providers against installed providers via
useProviderContextSelector. Migrate Tooltip usage to base-ui primitives
and replace RiErrorWarningFill with Warning icon in warning color.
This commit is contained in:
yyh
2026-03-09 14:02:26 +08:00
parent 1a26e1669b
commit 1abbaf9fd5
8 changed files with 63 additions and 44 deletions

View File

@ -240,7 +240,7 @@ const Editor: FC<Props> = ({
<div className={cn('pb-2', isExpand && 'flex grow flex-col')}>
{!(isSupportJinja && editionType === EditionType.jinja2)
? (
<div className={cn(isExpand ? 'grow' : 'max-h-[536px]', 'relative min-h-[56px] overflow-y-auto px-3', editorContainerClassName)}>
<div className={cn(isExpand ? 'grow' : 'max-h-[536px]', 'relative min-h-[56px] overflow-y-auto px-3', editorContainerClassName)}>
<PromptEditor
key={controlPromptEditorRerenderKey}
placeholder={placeholder}
@ -278,6 +278,9 @@ const Editor: FC<Props> = ({
width: node.width,
height: node.height,
position: node.position,
...(node.data.type === BlockEnum.LLM && {
modelProvider: (node.data as { model?: ModelConfig }).model?.provider,
}),
}
if (node.data.type === BlockEnum.Start) {
acc.sys = {
@ -301,7 +304,7 @@ const Editor: FC<Props> = ({
</div>
)
: (
<div className={cn(isExpand ? 'grow' : 'max-h-[536px]', 'relative min-h-[56px] overflow-y-auto px-3', editorContainerClassName)}>
<div className={cn(isExpand ? 'grow' : 'max-h-[536px]', 'relative min-h-[56px] overflow-y-auto px-3', editorContainerClassName)}>
<CodeEditor
availableVars={nodesOutputVars || []}
varList={varList}

View File

@ -1,11 +1,8 @@
import type { VariablePayload } from '../types'
import {
RiErrorWarningFill,
RiMoreLine,
} from '@remixicon/react'
import { capitalize } from 'es-toolkit/string'
import { memo } from 'react'
import Tooltip from '@/app/components/base/tooltip'
import { Warning } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
import { cn } from '@/utils/classnames'
import { isConversationVar, isENV, isGlobalVar, isRagVariableVar } from '../../utils'
import { useVarColor } from '../hooks'
@ -46,8 +43,8 @@ const VariableLabel = ({
{
notShowFullPath && (
<>
<RiMoreLine className="h-3 w-3 shrink-0 text-text-secondary" />
<div className="system-xs-regular shrink-0 text-divider-deep">/</div>
<span className="i-ri-more-line h-3 w-3 shrink-0 text-text-secondary" />
<div className="shrink-0 text-divider-deep system-xs-regular">/</div>
</>
)
}
@ -62,18 +59,16 @@ const VariableLabel = ({
/>
{
!!variableType && (
<div className="system-xs-regular shrink-0 text-text-tertiary">
<div className="shrink-0 text-text-tertiary system-xs-regular">
{capitalize(variableType)}
</div>
)
}
{
!!errorMsg && (
<Tooltip
popupContent={errorMsg}
asChild
>
<RiErrorWarningFill className="h-3 w-3 shrink-0 text-text-destructive" />
<Tooltip>
<TooltipTrigger render={<Warning className="h-3 w-3 shrink-0 text-text-warning" />} />
<TooltipContent>{errorMsg}</TooltipContent>
</Tooltip>
)
}