feat(web): snippet graph data fetching

web/app/components/workflow/block-selector/snippets/snippet-detail-card.tsx

@@ -1,6 +1,10 @@
 import type { FC } from 'react'
 import type { SnippetListItem } from '@/types/snippet'
+import { useMemo } from 'react'
 import AppIcon from '@/app/components/base/app-icon'
+import { useSnippetPublishedWorkflow } from '@/service/use-snippet-workflows'
+import BlockIcon from '../../block-icon'
+import { BlockEnum } from '../../types'
 
 export type PublishedSnippetListItem = SnippetListItem
 
@@ -12,6 +16,39 @@ const SnippetDetailCard: FC<SnippetDetailCardProps> = ({
   snippet,
 }) => {
   const { author, description, icon_info, name } = snippet
+  const { data: workflow } = useSnippetPublishedWorkflow(snippet.id)
+
+  const blockTypes = useMemo(() => {
+    const graph = workflow?.graph
+    if (!graph || typeof graph !== 'object')
+      return []
+
+    const graphRecord = graph as Record<string, unknown>
+    if (!Array.isArray(graphRecord.nodes))
+      return []
+
+    const availableBlockTypes = new Set(Object.values(BlockEnum))
+
+    return graphRecord.nodes.reduce<BlockEnum[]>((result, node) => {
+      if (!node || typeof node !== 'object')
+        return result
+
+      const nodeRecord = node as Record<string, unknown>
+      if (!nodeRecord.data || typeof nodeRecord.data !== 'object')
+        return result
+
+      const dataRecord = nodeRecord.data as Record<string, unknown>
+      const blockType = dataRecord.type
+      if (typeof blockType !== 'string' || !availableBlockTypes.has(blockType as BlockEnum))
+        return result
+
+      const normalizedBlockType = blockType as BlockEnum
+      if (!result.includes(normalizedBlockType))
+        result.push(normalizedBlockType)
+
+      return result
+    }, [])
+  }, [workflow?.graph])
 
   return (
     <div className="w-[224px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-3 pb-4 pt-3 shadow-lg backdrop-blur-[5px]">
@@ -31,6 +68,17 @@ const SnippetDetailCard: FC<SnippetDetailCardProps> = ({
             {description}
           </div>
         )}
+        {!!blockTypes.length && (
+          <div className="flex items-center gap-0.5 pt-1">
+            {blockTypes.map(blockType => (
+              <BlockIcon
+                key={blockType}
+                type={blockType}
+                size="sm"
+              />
+            ))}
+          </div>
+        )}
       </div>
       {!!author && (
         <div className="pt-3 text-text-tertiary system-xs-regular">

web/service/use-snippet-workflows.ts

@@ -1,10 +1,3 @@
-import type {
-  SnippetDraftNodeRunPayload,
-  SnippetDraftRunPayload,
-  SnippetDraftSyncPayload,
-  SnippetIterationNodeRunPayload,
-  SnippetLoopNodeRunPayload,
-} from '@/types/snippet'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { consoleQuery } from '@/service/client'
 
@@ -175,11 +168,3 @@ export const useStopSnippetWorkflowTaskMutation = (snippetId: string) => {
     }),
   })
 }
-
-export type {
-  SnippetDraftNodeRunPayload,
-  SnippetDraftRunPayload,
-  SnippetDraftSyncPayload,
-  SnippetIterationNodeRunPayload,
-  SnippetLoopNodeRunPayload,
-}