feat: can show file preview

web/app/components/base/prompt-editor/index.tsx

@@ -34,6 +34,7 @@ import * as React from 'react'
 import { useEffect } from 'react'
 import { Trans } from 'react-i18next'
 import { FileReferenceNode } from '@/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/node'
+import { FilePreviewContextProvider } from '@/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/preview-context'
 import FileReferenceReplacementBlock from '@/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/replacement-block'
 import {
   ToolBlock,
@@ -316,47 +317,33 @@ const PromptEditor: FC<PromptEditorProps> = ({
   return (
     <LexicalComposer initialConfig={{ ...initialConfig, editable }}>
       <ToolBlockContextProvider value={toolBlockContextValue}>
-        <div
-          className={cn('relative', wrapperClassName)}
-          data-skill-editor-root={isSupportSandbox ? 'true' : undefined}
-        >
-          <RichTextPlugin
-            contentEditable={(
-              <ContentEditable
-                className={cn(
-                  'text-text-secondary outline-none',
-                  compact ? 'text-[13px] leading-5' : 'text-sm leading-6',
-                  className,
-                )}
-                style={style || {}}
-              />
-            )}
-            placeholder={(
-              <Placeholder
-                value={placeholder || sandboxPlaceHolder}
-                className={cn('truncate', placeholderClassName)}
-                compact={compact}
-              />
-            )}
-            ErrorBoundary={LexicalErrorBoundary}
-          />
-          <ComponentPickerBlock
-            triggerString="/"
-            contextBlock={contextBlock}
-            historyBlock={historyBlock}
-            queryBlock={queryBlock}
-            variableBlock={variableBlock}
-            externalToolBlock={externalToolBlock}
-            workflowVariableBlock={workflowVariableBlock}
-            currentBlock={currentBlock}
-            errorMessageBlock={errorMessageBlock}
-            lastRunBlock={lastRunBlock}
-            isSupportFileVar={isSupportFileVar}
-            isSupportSandbox={isSupportSandbox}
-          />
-          {!isSupportSandbox && (!agentBlock || agentBlock.show) && (
+        <FilePreviewContextProvider value={{ enabled: Boolean(isSupportSandbox) }}>
+          <div
+            className={cn('relative', wrapperClassName)}
+            data-skill-editor-root={isSupportSandbox ? 'true' : undefined}
+          >
+            <RichTextPlugin
+              contentEditable={(
+                <ContentEditable
+                  className={cn(
+                    'text-text-secondary outline-none',
+                    compact ? 'text-[13px] leading-5' : 'text-sm leading-6',
+                    className,
+                  )}
+                  style={style || {}}
+                />
+              )}
+              placeholder={(
+                <Placeholder
+                  value={placeholder || sandboxPlaceHolder}
+                  className={cn('truncate', placeholderClassName)}
+                  compact={compact}
+                />
+              )}
+              ErrorBoundary={LexicalErrorBoundary}
+            />
             <ComponentPickerBlock
-              triggerString="@"
+              triggerString="/"
               contextBlock={contextBlock}
               historyBlock={historyBlock}
               queryBlock={queryBlock}
@@ -366,110 +353,126 @@ const PromptEditor: FC<PromptEditorProps> = ({
               currentBlock={currentBlock}
               errorMessageBlock={errorMessageBlock}
               lastRunBlock={lastRunBlock}
-              agentBlock={agentBlock}
               isSupportFileVar={isSupportFileVar}
+              isSupportSandbox={isSupportSandbox}
             />
-          )}
-          {isSupportSandbox && (
-            <>
-              <ToolBlock />
-              <ToolGroupBlockReplacementBlock />
-              <ToolBlockReplacementBlock />
-              {editable && !disableToolBlocks && <ToolPickerBlock />}
-            </>
-          )}
-          <ComponentPickerBlock
-            triggerString="{"
-            contextBlock={contextBlock}
-            historyBlock={historyBlock}
-            queryBlock={queryBlock}
-            variableBlock={variableBlock}
-            externalToolBlock={externalToolBlock}
-            workflowVariableBlock={workflowVariableBlock}
-            currentBlock={currentBlock}
-            errorMessageBlock={errorMessageBlock}
-            lastRunBlock={lastRunBlock}
-            isSupportFileVar={isSupportFileVar}
-            isSupportSandbox={isSupportSandbox}
-          />
-          {
-            contextBlock?.show && (
+            {!isSupportSandbox && (!agentBlock || agentBlock.show) && (
+              <ComponentPickerBlock
+                triggerString="@"
+                contextBlock={contextBlock}
+                historyBlock={historyBlock}
+                queryBlock={queryBlock}
+                variableBlock={variableBlock}
+                externalToolBlock={externalToolBlock}
+                workflowVariableBlock={workflowVariableBlock}
+                currentBlock={currentBlock}
+                errorMessageBlock={errorMessageBlock}
+                lastRunBlock={lastRunBlock}
+                agentBlock={agentBlock}
+                isSupportFileVar={isSupportFileVar}
+              />
+            )}
+            {isSupportSandbox && (
               <>
-                <ContextBlock {...contextBlock} />
-                <ContextBlockReplacementBlock {...contextBlock} />
+                <ToolBlock />
+                <ToolGroupBlockReplacementBlock />
+                <ToolBlockReplacementBlock />
+                {editable && !disableToolBlocks && <ToolPickerBlock />}
               </>
-            )
-          }
-          {
-            queryBlock?.show && (
-              <>
-                <QueryBlock {...queryBlock} />
-                <QueryBlockReplacementBlock />
-              </>
-            )
-          }
-          {
-            historyBlock?.show && (
-              <>
-                <HistoryBlock {...historyBlock} />
-                <HistoryBlockReplacementBlock {...historyBlock} />
-              </>
-            )
-          }
-          {
-            (variableBlock?.show || externalToolBlock?.show) && (
-              <>
-                <VariableBlock />
+            )}
+            <ComponentPickerBlock
+              triggerString="{"
+              contextBlock={contextBlock}
+              historyBlock={historyBlock}
+              queryBlock={queryBlock}
+              variableBlock={variableBlock}
+              externalToolBlock={externalToolBlock}
+              workflowVariableBlock={workflowVariableBlock}
+              currentBlock={currentBlock}
+              errorMessageBlock={errorMessageBlock}
+              lastRunBlock={lastRunBlock}
+              isSupportFileVar={isSupportFileVar}
+              isSupportSandbox={isSupportSandbox}
+            />
+            {
+              contextBlock?.show && (
+                <>
+                  <ContextBlock {...contextBlock} />
+                  <ContextBlockReplacementBlock {...contextBlock} />
+                </>
+              )
+            }
+            {
+              queryBlock?.show && (
+                <>
+                  <QueryBlock {...queryBlock} />
+                  <QueryBlockReplacementBlock />
+                </>
+              )
+            }
+            {
+              historyBlock?.show && (
+                <>
+                  <HistoryBlock {...historyBlock} />
+                  <HistoryBlockReplacementBlock {...historyBlock} />
+                </>
+              )
+            }
+            {
+              (variableBlock?.show || externalToolBlock?.show) && (
+                <>
+                  <VariableBlock />
+                  <VariableValueBlock />
+                </>
+              )
+            }
+            {
+              workflowVariableBlock?.show && (
+                <>
+                  <WorkflowVariableBlock {...workflowVariableBlock} />
+                  <WorkflowVariableBlockReplacementBlock {...workflowVariableBlock} />
+                </>
+              )
+            }
+            {isSupportSandbox && <FileReferenceReplacementBlock />}
+            {
+              currentBlock?.show && (
+                <>
+                  <CurrentBlock {...currentBlock} />
+                  <CurrentBlockReplacementBlock {...currentBlock} />
+                </>
+              )
+            }
+            {
+              errorMessageBlock?.show && (
+                <>
+                  <ErrorMessageBlock {...errorMessageBlock} />
+                  <ErrorMessageBlockReplacementBlock {...errorMessageBlock} />
+                </>
+              )
+            }
+            {
+              lastRunBlock?.show && (
+                <>
+                  <LastRunBlock {...lastRunBlock} />
+                  <LastRunReplacementBlock {...lastRunBlock} />
+                </>
+              )
+            }
+            {
+              isSupportFileVar && (
                 <VariableValueBlock />
-              </>
-            )
-          }
-          {
-            workflowVariableBlock?.show && (
-              <>
-                <WorkflowVariableBlock {...workflowVariableBlock} />
-                <WorkflowVariableBlockReplacementBlock {...workflowVariableBlock} />
-              </>
-            )
-          }
-          {isSupportSandbox && <FileReferenceReplacementBlock />}
-          {
-            currentBlock?.show && (
-              <>
-                <CurrentBlock {...currentBlock} />
-                <CurrentBlockReplacementBlock {...currentBlock} />
-              </>
-            )
-          }
-          {
-            errorMessageBlock?.show && (
-              <>
-                <ErrorMessageBlock {...errorMessageBlock} />
-                <ErrorMessageBlockReplacementBlock {...errorMessageBlock} />
-              </>
-            )
-          }
-          {
-            lastRunBlock?.show && (
-              <>
-                <LastRunBlock {...lastRunBlock} />
-                <LastRunReplacementBlock {...lastRunBlock} />
-              </>
-            )
-          }
-          {
-            isSupportFileVar && (
-              <VariableValueBlock />
-            )
-          }
-          <ValueSyncPlugin value={value} />
-          <OnChangePlugin onChange={handleEditorChange} />
-          <EnterCommandPlugin onEnter={onEnter} />
-          <OnBlurBlock onBlur={onBlur} onFocus={onFocus} />
-          <UpdateBlock instanceId={instanceId} />
-          <HistoryPlugin />
-          {/* <TreeView /> */}
-        </div>
+              )
+            }
+            <ValueSyncPlugin value={value} />
+            <OnChangePlugin onChange={handleEditorChange} />
+            <EnterCommandPlugin onEnter={onEnter} />
+            <OnBlurBlock onBlur={onBlur} onFocus={onFocus} />
+            <UpdateBlock instanceId={instanceId} />
+            <HistoryPlugin />
+            {/* <TreeView /> */}
+          </div>
+        </FilePreviewContextProvider>
       </ToolBlockContextProvider>
     </LexicalComposer>
   )

web/app/components/workflow/nodes/_base/components/prompt/editor.tsx

@@ -168,7 +168,16 @@ const Editor: FC<Props> = ({
 
   return (
     <Wrap className={cn(className, wrapClassName)} style={wrapStyle} isInNode isExpand={isExpand}>
-      <div ref={ref} className={cn(isFocus ? (gradientBorder && 'bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2') : 'bg-transparent hover:bg-divider-regular', isExpand && 'h-full', '!rounded-[9px] p-0.5 transition-colors', containerClassName)}>
+      <div
+        ref={ref}
+        data-prompt-editor-panel="true"
+        className={cn(
+          isFocus ? (gradientBorder && 'bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2') : 'bg-transparent hover:bg-divider-regular',
+          isExpand && 'h-full',
+          '!rounded-[9px] p-0.5 transition-colors',
+          containerClassName,
+        )}
+      >
         <div className={cn(isFocus ? 'bg-background-default' : 'bg-components-input-bg-normal', isExpand && 'flex h-full flex-col', 'rounded-lg', containerClassName)}>
           <div className={cn('flex items-center justify-between pl-3 pr-2 pt-1', headerClassName)}>
             <div className="flex gap-2">

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -517,6 +517,7 @@ const BasePanel: FC<BasePanelProps> = ({
       </div>
       <div
         ref={containerRef}
+        data-workflow-node-panel="true"
         className={cn('flex h-full flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg transition-[width] ease-linear', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
         style={{
           width: `${nodePanelWidth}px`,

web/app/components/workflow/skill/editor/skill-editor/index.tsx

@@ -22,6 +22,7 @@ import { cn } from '@/utils/classnames'
 import styles from './line-numbers.module.css'
 import FilePickerBlock from './plugins/file-picker-block'
 import { FileReferenceNode } from './plugins/file-reference-block/node'
+import { FilePreviewContextProvider } from './plugins/file-reference-block/preview-context'
 import FileReferenceReplacementBlock from './plugins/file-reference-block/replacement-block'
 import { LocalCursorPlugin, SkillRemoteCursors } from './plugins/remote-cursors'
 import {
@@ -97,50 +98,52 @@ const SkillEditor = ({
 
   return (
     <LexicalComposer initialConfig={{ ...initialConfig, editable }}>
-      <div
-        className={cn('relative', showLineNumbers && styles.lineNumbersScope, wrapperClassName)}
-        data-skill-editor-root="true"
-      >
-        <RichTextPlugin
-          contentEditable={(
-            <ContentEditable
-              className={cn(
-                'text-text-secondary outline-none',
-                compact ? 'text-[13px] leading-5' : 'text-sm leading-6',
-                showLineNumbers && styles.lineNumbers,
-                className,
-              )}
-              style={style || {}}
-            />
-          )}
-          placeholder={(
-            <Placeholder
-              value={placeholder}
-              className={cn(
-                'truncate',
-                showLineNumbers && styles.lineNumbersPlaceholder,
-                placeholderClassName,
-              )}
-              compact={compact}
-            />
-          )}
-          ErrorBoundary={LexicalErrorBoundary}
-        />
-        <>
-          <ToolBlock />
-          <ToolGroupBlockReplacementBlock />
-          <ToolBlockReplacementBlock />
-          <FileReferenceReplacementBlock />
-          {editable && <FilePickerBlock />}
-          {editable && <ToolPickerBlock scope={toolPickerScope} />}
-        </>
-        <OnChangePlugin onChange={handleEditorChange} />
-        <OnBlurBlock onBlur={onBlur} onFocus={onFocus} />
-        <UpdateBlock instanceId={instanceId} />
-        <LocalCursorPlugin fileId={instanceId} enabled={collaborationEnabled} />
-        <SkillRemoteCursors fileId={instanceId} enabled={collaborationEnabled} />
-        <HistoryPlugin />
-      </div>
+      <FilePreviewContextProvider value={{ enabled: false }}>
+        <div
+          className={cn('relative', showLineNumbers && styles.lineNumbersScope, wrapperClassName)}
+          data-skill-editor-root="true"
+        >
+          <RichTextPlugin
+            contentEditable={(
+              <ContentEditable
+                className={cn(
+                  'text-text-secondary outline-none',
+                  compact ? 'text-[13px] leading-5' : 'text-sm leading-6',
+                  showLineNumbers && styles.lineNumbers,
+                  className,
+                )}
+                style={style || {}}
+              />
+            )}
+            placeholder={(
+              <Placeholder
+                value={placeholder}
+                className={cn(
+                  'truncate',
+                  showLineNumbers && styles.lineNumbersPlaceholder,
+                  placeholderClassName,
+                )}
+                compact={compact}
+              />
+            )}
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+          <>
+            <ToolBlock />
+            <ToolGroupBlockReplacementBlock />
+            <ToolBlockReplacementBlock />
+            <FileReferenceReplacementBlock />
+            {editable && <FilePickerBlock />}
+            {editable && <ToolPickerBlock scope={toolPickerScope} />}
+          </>
+          <OnChangePlugin onChange={handleEditorChange} />
+          <OnBlurBlock onBlur={onBlur} onFocus={onFocus} />
+          <UpdateBlock instanceId={instanceId} />
+          <LocalCursorPlugin fileId={instanceId} enabled={collaborationEnabled} />
+          <SkillRemoteCursors fileId={instanceId} enabled={collaborationEnabled} />
+          <HistoryPlugin />
+        </div>
+      </FilePreviewContextProvider>
     </LexicalComposer>
   )
 }

web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx

@@ -5,7 +5,8 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { RiFolderLine } from '@remixicon/react'
 import { $getNodeByKey } from 'lexical'
 import * as React from 'react'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
 import {
   PortalToFollowElem,
@@ -17,6 +18,8 @@ import { useSkillAssetNodeMap } from '@/app/components/workflow/skill/hooks/use-
 import { getFileIconType } from '@/app/components/workflow/skill/utils/file-utils'
 import { cn } from '@/utils/classnames'
 import { FilePickerPanel } from '../file-picker-panel'
+import FilePreviewPanel from './file-preview-panel'
+import { useFilePreviewContext } from './preview-context'
 
 type FileReferenceBlockProps = {
   nodeKey: string
@@ -28,6 +31,10 @@ const FileReferenceBlock = ({ nodeKey, resourceId }: FileReferenceBlockProps) =>
   const [ref, isSelected] = useSelectOrDelete(nodeKey)
   const { data: nodeMap } = useSkillAssetNodeMap()
   const [open, setOpen] = useState(false)
+  const [previewOpen, setPreviewOpen] = useState(false)
+  const [previewStyle, setPreviewStyle] = useState<React.CSSProperties | null>(null)
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const { enabled: isPreviewEnabled } = useFilePreviewContext()
 
   const currentNode = useMemo(() => nodeMap?.get(resourceId), [nodeMap, resourceId])
   const isFolder = currentNode?.node_type === 'folder'
@@ -46,7 +53,69 @@ const FileReferenceBlock = ({ nodeKey, resourceId }: FileReferenceBlockProps) =>
     setOpen(false)
   }, [editor, nodeKey])
 
-  return (
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+  }, [])
+
+  const handlePreviewEnter = useCallback(() => {
+    clearCloseTimer()
+    setPreviewOpen(true)
+  }, [clearCloseTimer])
+
+  const handlePreviewLeave = useCallback(() => {
+    clearCloseTimer()
+    closeTimerRef.current = setTimeout(() => {
+      setPreviewOpen(false)
+    }, 120)
+  }, [clearCloseTimer])
+
+  useEffect(() => {
+    return () => {
+      clearCloseTimer()
+    }
+  }, [clearCloseTimer])
+
+  const updatePreviewPosition = useCallback(() => {
+    const anchor = ref.current?.closest('[data-workflow-node-panel="true"]') as HTMLElement | null
+      || ref.current?.closest('[data-prompt-editor-panel="true"]') as HTMLElement | null
+      || ref.current?.closest('[data-skill-editor-root="true"]') as HTMLElement | null
+    if (!anchor)
+      return
+    const rect = anchor.getBoundingClientRect()
+    const width = 400
+    const gap = 4
+    const left = Math.max(8, rect.left - gap - width)
+    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+    setPreviewStyle(_prev => ({
+      position: 'fixed',
+      top: rect.top,
+      left,
+      height: rect.height,
+    }))
+  }, [ref])
+
+  useEffect(() => {
+    if (!previewOpen || !isPreviewEnabled)
+      return
+    updatePreviewPosition()
+    const handleUpdate = () => updatePreviewPosition()
+    window.addEventListener('scroll', handleUpdate, true)
+    window.addEventListener('resize', handleUpdate)
+    const anchor = ref.current?.closest('[data-skill-editor-root="true"]') as HTMLElement | null
+    const resizeObserver = anchor ? new ResizeObserver(handleUpdate) : null
+    if (anchor && resizeObserver)
+      resizeObserver.observe(anchor)
+    return () => {
+      window.removeEventListener('scroll', handleUpdate, true)
+      window.removeEventListener('resize', handleUpdate)
+      resizeObserver?.disconnect()
+    }
+  }, [isPreviewEnabled, previewOpen, ref, updatePreviewPosition])
+
+  const fileBlock = (
     <PortalToFollowElem
       open={open}
       onOpenChange={setOpen}
@@ -86,6 +155,36 @@ const FileReferenceBlock = ({ nodeKey, resourceId }: FileReferenceBlockProps) =>
       </PortalToFollowElemContent>
     </PortalToFollowElem>
   )
+
+  if (!isPreviewEnabled)
+    return fileBlock
+
+  return (
+    <>
+      <span
+        className="inline-flex"
+        onMouseEnter={handlePreviewEnter}
+        onMouseLeave={handlePreviewLeave}
+      >
+        {fileBlock}
+      </span>
+      {previewOpen && previewStyle && typeof document !== 'undefined' && createPortal(
+        <div
+          className="z-[1001]"
+          style={previewStyle}
+          onMouseEnter={handlePreviewEnter}
+          onMouseLeave={handlePreviewLeave}
+        >
+          <FilePreviewPanel
+            resourceId={resourceId}
+            currentNode={currentNode}
+            onClose={() => setPreviewOpen(false)}
+          />
+        </div>,
+        document.body,
+      )}
+    </>
+  )
 }
 
 export default React.memo(FileReferenceBlock)

web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx

@@ -0,0 +1,160 @@
+import type { FileAppearanceType } from '@/app/components/base/file-uploader/types'
+import type { AppAssetTreeView } from '@/types/app-asset'
+import { RiCloseLine, RiExternalLinkLine, RiFolderLine } from '@remixicon/react'
+import * as React from 'react'
+import { useCallback, useContext, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
+import Loading from '@/app/components/base/loading'
+import { WorkflowContext } from '@/app/components/workflow/context'
+import SkillEditor from '@/app/components/workflow/skill/editor/skill-editor'
+import { useFileTypeInfo } from '@/app/components/workflow/skill/hooks/use-file-type-info'
+import { getFileIconType } from '@/app/components/workflow/skill/utils/file-utils'
+import { useGetAppAssetFileContent } from '@/service/use-app-asset'
+import { cn } from '@/utils/classnames'
+
+type FilePreviewPanelProps = {
+  resourceId: string
+  currentNode?: AppAssetTreeView
+  className?: string
+  style?: React.CSSProperties
+  onClose?: () => void
+}
+
+const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }: FilePreviewPanelProps) => {
+  const { t } = useTranslation(['workflow', 'common'])
+  const workflowStore = useContext(WorkflowContext)
+  const appId = useAppStore(s => s.appDetail?.id || '')
+
+  const isFolder = currentNode?.node_type === 'folder'
+  const fileTypeInfo = useFileTypeInfo(isFolder ? undefined : currentNode)
+  const canPreviewText = !isFolder && fileTypeInfo.isEditable
+
+  const { data: fileContent, isLoading, error } = useGetAppAssetFileContent(appId, resourceId, {
+    enabled: canPreviewText,
+  })
+
+  const content = useMemo(() => {
+    if (!canPreviewText || !fileContent)
+      return ''
+    if (typeof fileContent?.content === 'string')
+      return fileContent.content
+    return JSON.stringify(fileContent, null, 2)
+  }, [canPreviewText, fileContent])
+
+  const pathSegments = useMemo(
+    () => (currentNode?.path ?? '').split('/').filter(Boolean),
+    [currentNode?.path],
+  )
+
+  const folderName = isFolder
+    ? (currentNode?.name ?? resourceId)
+    : (pathSegments.length > 1 ? pathSegments[0] : null)
+  const fileName = isFolder
+    ? null
+    : (pathSegments[pathSegments.length - 1] ?? currentNode?.name ?? resourceId)
+  const iconType = !isFolder && currentNode
+    ? getFileIconType(currentNode.name, currentNode.extension)
+    : null
+
+  const canOpenInEditor = Boolean(resourceId && !isFolder && workflowStore)
+
+  const handleOpenInEditor = useCallback(() => {
+    if (!canOpenInEditor || !workflowStore)
+      return
+    workflowStore.getState().openTab(resourceId)
+  }, [canOpenInEditor, workflowStore, resourceId])
+
+  return (
+    <div
+      className={cn(
+        'flex h-full w-[400px] max-w-[80vw] flex-col overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-[0px_20px_24px_-4px_rgba(9,9,11,0.08),0px_8px_8px_-4px_rgba(9,9,11,0.03)]',
+        className,
+      )}
+      style={style}
+    >
+      <div className="flex w-full items-center gap-2 px-4 pb-2 pt-4">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          {folderName && (
+            <div className="flex items-center gap-1.5">
+              <RiFolderLine className="size-5 text-text-secondary" aria-hidden="true" />
+              <span className="text-[13px] font-medium leading-4 text-text-primary">
+                {folderName}
+              </span>
+            </div>
+          )}
+          {folderName && fileName && (
+            <span className="text-[13px] leading-4 text-text-tertiary">/</span>
+          )}
+          {fileName && (
+            <div className="flex min-w-0 items-center gap-1.5">
+              <FileTypeIcon
+                type={(iconType || 'document') as FileAppearanceType}
+                size="sm"
+                className="!size-5"
+              />
+              <span className="truncate text-[13px] font-medium leading-4 text-text-primary">
+                {fileName}
+              </span>
+            </div>
+          )}
+        </div>
+        <button
+          type="button"
+          onClick={handleOpenInEditor}
+          disabled={!canOpenInEditor}
+          className={cn(
+            'inline-flex size-6 items-center justify-center rounded-md text-text-tertiary transition hover:bg-state-base-hover',
+            !canOpenInEditor && 'cursor-not-allowed opacity-40 hover:bg-transparent',
+          )}
+          aria-label={t('nodes.note.editor.openLink')}
+        >
+          <RiExternalLinkLine className="size-4" />
+        </button>
+        <button
+          type="button"
+          onClick={onClose}
+          className="inline-flex size-6 items-center justify-center rounded-md text-text-tertiary transition hover:bg-state-base-hover"
+          aria-label={t('operation.close', { ns: 'common' })}
+        >
+          <RiCloseLine className="size-4" />
+        </button>
+      </div>
+      <div className="flex min-h-0 w-full flex-1 gap-2 overflow-auto pb-4 pl-4 pr-3 pt-1">
+        {isFolder && (
+          <div className="system-sm-regular text-text-tertiary">
+            {t('skillEditor.previewUnavailable')}
+          </div>
+        )}
+        {!isFolder && !fileTypeInfo.isEditable && (
+          <div className="system-sm-regular text-text-tertiary">
+            {t('skillEditor.unsupportedPreview')}
+          </div>
+        )}
+        {canPreviewText && isLoading && (
+          <div className="flex w-full items-center justify-center py-6">
+            <Loading type="area" />
+          </div>
+        )}
+        {canPreviewText && error && (
+          <div className="system-sm-regular text-text-tertiary">
+            {t('skillSidebar.loadError')}
+          </div>
+        )}
+        {canPreviewText && !isLoading && !error && (
+          <SkillEditor
+            value={content}
+            editable={false}
+            compact
+            showLineNumbers
+            className="text-[14px] leading-[22px] text-text-primary"
+            placeholderClassName="hidden"
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(FilePreviewPanel)

web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/preview-context.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+type FilePreviewContextValue = {
+  enabled: boolean
+}
+
+const FilePreviewContext = React.createContext<FilePreviewContextValue>({ enabled: false })
+
+export const FilePreviewContextProvider = FilePreviewContext.Provider
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useFilePreviewContext = () => {
+  return React.useContext(FilePreviewContext)
+}