+
{rowContent}
+
+ {({ payload }) => (
+
+ )}
+
)
}
+type ModelSelectorPreviewCardProps = {
+ capabilitiesLabel: string
+ language: string
+ payload?: ModelSelectorPreviewPayload
+}
+
+function ModelSelectorPreviewCard({
+ capabilitiesLabel,
+ language,
+ payload,
+}: ModelSelectorPreviewCardProps) {
+ if (!payload)
+ return null
+
+ const { provider, modelItem } = payload
+
+ return (
+
+
+
+
+
{modelItem.label[language] || modelItem.label.en_US}
+
+
+ {!!modelItem.model_type && (
+
+ {modelTypeFormat(modelItem.model_type)}
+
+ )}
+ {!!modelItem.model_properties.mode && (
+
+ {(modelItem.model_properties.mode as string).toLocaleUpperCase()}
+
+ )}
+ {!!modelItem.model_properties.context_size && (
+
+ {sizeFormat(modelItem.model_properties.context_size as number)}
+
+ )}
+
+ {[ModelTypeEnum.textGeneration, ModelTypeEnum.textEmbedding, ModelTypeEnum.rerank].includes(modelItem.model_type as ModelTypeEnum)
+ && modelItem.features?.some(feature => [ModelFeatureEnum.vision, ModelFeatureEnum.audio, ModelFeatureEnum.video, ModelFeatureEnum.document].includes(feature))
+ && (
+
+
{capabilitiesLabel}
+
+ {modelItem.features?.map(feature => (
+
+ ))}
+
+
+ )}
+
+ )
+}
+
export default Popup
diff --git a/web/app/components/workflow/block-selector/blocks.tsx b/web/app/components/workflow/block-selector/blocks.tsx
index 8258e4d450..40fcc073f6 100644
--- a/web/app/components/workflow/block-selector/blocks.tsx
+++ b/web/app/components/workflow/block-selector/blocks.tsx
@@ -1,6 +1,7 @@
import type { NodeDefault } from '../types'
import type { BlockClassificationEnum } from './types'
import {
+ createPreviewCardHandle,
PreviewCard,
PreviewCardContent,
PreviewCardTrigger,
@@ -25,6 +26,10 @@ type BlocksProps = {
availableBlocksTypes?: BlockEnum[]
blocks?: NodeDefault[]
}
+type BlockPreviewPayload = {
+ block: NodeDefault
+}
+
const Blocks = ({
searchText,
onSelect,
@@ -34,6 +39,7 @@ const Blocks = ({
const { t } = useTranslation()
const store = useStoreApi()
const blocksFromHooks = useBlocks()
+ const previewCardHandle = useMemo(() => createPreviewCardHandle
(), [])
// Use external blocks if provided, otherwise fallback to hook-based blocks
const blocks = blocksFromProps || blocksFromHooks.map(block => ({
@@ -101,51 +107,38 @@ const Blocks = ({
// hover/focus-only activation is a11y-safe. See
// packages/dify-ui/AGENTS.md → Overlay Primitive Selection.
filteredList.map(block => (
-
- onSelect(block.metaData.type)}
- >
-
- {block.metaData.title}
- {
- block.metaData.type === BlockEnum.LoopEnd && (
-
- )
- }
-