gnong/dify-mirror
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-02-09 15:10:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: in editor preview support change the same to file preview

Browse Source
This commit is contained in:
Joel
2026-02-09 16:44:40 +08:00
parent 3c0b50ee77
commit 3a1eefa477
1 changed files with 20 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,10 +8,9 @@ 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 Tooltip from '@/app/components/base/tooltip'
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 ReadOnlyFilePreview from '@/app/components/workflow/skill/viewer/read-only-file-preview'
import { useGetAppAssetFileDownloadUrl } from '@/service/use-app-asset'
import { cn } from '@/utils/classnames'
type FilePreviewPanelProps = {
@@ -27,21 +26,11 @@ const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }
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 isPreviewEnabled = !isFolder && Boolean(appId && resourceId)
const { data: downloadUrlData, isLoading, error } = useGetAppAssetFileDownloadUrl(appId, resourceId, {
enabled: isPreviewEnabled,
})
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],
@@ -57,6 +46,8 @@ const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }
? getFileIconType(currentNode.name, currentNode.extension)
: null
const downloadUrl = downloadUrlData?.download_url || ''
const displayFileName = fileName ?? currentNode?.name ?? resourceId
const canOpenInEditor = Boolean(resourceId && !isFolder && typeof window !== 'undefined')
const handleOpenInEditor = useCallback(() => {
@@ -134,31 +125,29 @@ const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }
{t('skillEditor.previewUnavailable')}
</div>
)}
{!isFolder && !fileTypeInfo.isEditable && (
<div className="system-sm-regular text-text-tertiary">
{t('skillEditor.unsupportedPreview')}
</div>
)}
{canPreviewText && isLoading && (
{isPreviewEnabled && isLoading && (
<div className="flex w-full items-center justify-center py-6">
<Loading type="area" />
</div>
)}
{canPreviewText && error && (
{isPreviewEnabled && 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"
{isPreviewEnabled && !isLoading && !error && downloadUrl && (
<ReadOnlyFilePreview
downloadUrl={downloadUrl}
fileName={displayFileName}
extension={currentNode?.extension}
fileSize={currentNode?.size ?? undefined}
/>
)}
{isPreviewEnabled && !isLoading && !error && !downloadUrl && (
<div className="system-sm-regular text-text-tertiary">
{t('skillSidebar.loadError')}
</div>
)}
</div>
</div>
)