mirror of
https://github.com/langgenius/dify.git
synced 2026-02-13 07:01:23 -05:00
76484406a2
Implement ReadOnlyFilePreview to render sandbox files by type (code, markdown, image, video, SQLite, unsupported) using existing skill viewer components with readOnly support. Add useSandboxFileDownloadUrl and useFetchTextContent hooks for data fetching, and generalize useFileTypeInfo to accept any file-like object.
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import type { OnMount } from '@monaco-editor/react'
|
|
import { loader } from '@monaco-editor/react'
|
|
import * as React from 'react'
|
|
import { useCallback, useRef, useState } from 'react'
|
|
import useTheme from '@/hooks/use-theme'
|
|
import { Theme } from '@/types/app'
|
|
import { basePath } from '@/utils/var'
|
|
import CodeFileEditor from '../editor/code-file-editor'
|
|
|
|
if (typeof window !== 'undefined')
|
|
loader.config({ paths: { vs: `${window.location.origin}${basePath}/vs` } })
|
|
|
|
type ReadOnlyCodePreviewProps = {
|
|
value: string
|
|
language: string
|
|
}
|
|
|
|
const ReadOnlyCodePreview = ({ value, language }: ReadOnlyCodePreviewProps) => {
|
|
const { theme: appTheme } = useTheme()
|
|
const [isMounted, setIsMounted] = useState(false)
|
|
const editorRef = useRef<Parameters<OnMount>[0] | null>(null)
|
|
|
|
const theme = appTheme === Theme.light ? 'light' : 'vs-dark'
|
|
|
|
const handleMount: OnMount = useCallback((editor, monaco) => {
|
|
editorRef.current = editor
|
|
monaco.editor.setTheme(appTheme === Theme.light ? 'light' : 'vs-dark')
|
|
setIsMounted(true)
|
|
}, [appTheme])
|
|
|
|
const noop = useCallback(() => {}, [])
|
|
|
|
return (
|
|
<CodeFileEditor
|
|
language={language}
|
|
theme={isMounted ? theme : 'default-theme'}
|
|
value={value}
|
|
onChange={noop}
|
|
onMount={handleMount}
|
|
readOnly
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default React.memo(ReadOnlyCodePreview)
|