From f9fd234cf8fb850c8f1d681a56f4897b1838bd64 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 19 Jan 2026 15:38:43 +0800
Subject: [PATCH] feat: support expand the selected file struct

---
 .../plugins/file-picker-panel.tsx             | 27 ++++++++++++++++---
 .../file-reference-block/component.tsx        |  6 ++++-
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
index 14b1f71b31..d52bc12085 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
@@ -13,7 +13,7 @@ import Loading from '@/app/components/base/loading'
 import TreeGuideLines from '@/app/components/workflow/skill/file-tree/tree-guide-lines'
 import { useSkillAssetTreeData } from '@/app/components/workflow/skill/hooks/use-skill-asset-tree'
 import { getFileIconType } from '@/app/components/workflow/skill/utils/file-utils'
-import { toOpensObject } from '@/app/components/workflow/skill/utils/tree-utils'
+import { findNodeById, getAncestorIds, toOpensObject } from '@/app/components/workflow/skill/utils/tree-utils'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
 
@@ -109,9 +109,15 @@ FilePickerTreeNode.displayName = 'FilePickerTreeNode'
 
 type FilePickerPanelProps = {
   onSelectNode: (node: TreeNodeData) => void
+  focusNodeId?: string
+  syncExpandedState?: boolean
 }
 
-const FilePickerPanel: FC<FilePickerPanelProps> = ({ onSelectNode }) => {
+const FilePickerPanel: FC<FilePickerPanelProps> = ({
+  onSelectNode,
+  focusNodeId,
+  syncExpandedState = true,
+}) => {
   const { t } = useTranslation('workflow')
   const { data: treeData, isLoading, error } = useSkillAssetTreeData()
   const expandedFolderIds = useStore(s => s.expandedFolderIds)
@@ -120,7 +126,19 @@ const FilePickerPanel: FC<FilePickerPanelProps> = ({ onSelectNode }) => {
   const containerSize = useSize(containerRef)
 
   const treeNodes = useMemo(() => treeData?.children || [], [treeData?.children])
-  const initialOpenState = useMemo(() => toOpensObject(expandedFolderIds), [expandedFolderIds])
+  const initialOpenState = useMemo(() => {
+    const nextState = syncExpandedState ? toOpensObject(expandedFolderIds) : {}
+    if (!focusNodeId || treeNodes.length === 0)
+      return nextState
+
+    const focusNode = findNodeById(treeNodes, focusNodeId)
+    const ancestorIds = getAncestorIds(focusNodeId, treeNodes)
+    ancestorIds.forEach(id => (nextState[id] = true))
+    if (focusNode?.node_type === 'folder')
+      nextState[focusNode.id] = true
+
+    return nextState
+  }, [expandedFolderIds, focusNodeId, syncExpandedState, treeNodes])
 
   const renderNode = useCallback((props: NodeRendererProps<TreeNodeData>) => (
     <FilePickerTreeNode {...props} onSelectNode={onSelectNode} />
@@ -171,7 +189,8 @@ const FilePickerPanel: FC<FilePickerPanelProps> = ({ onSelectNode }) => {
             openByDefault={false}
             initialOpenState={initialOpenState}
             onToggle={(id) => {
-              storeApi.getState().toggleFolder(id)
+              if (syncExpandedState)
+                storeApi.getState().toggleFolder(id)
             }}
             disableDrag
             disableDrop
diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx
index d0f33f7ad7..2bda0275f7 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx
@@ -80,7 +80,11 @@ const FileReferenceBlock: FC<FileReferenceBlockProps> = ({ nodeKey, resourceId }
         </span>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-[1000]">
-        <FilePickerPanel onSelectNode={handleSelect} />
+        <FilePickerPanel
+          onSelectNode={handleSelect}
+          focusNodeId={resourceId}
+          syncExpandedState={false}
+        />
       </PortalToFollowElemContent>
     </PortalToFollowElem>
   )