youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-04 01:18:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into feat/model-plugins-implementing

Browse Source
This commit is contained in:
yyh
2026-03-17 12:58:05 +08:00
parent bdaa139674 18af5fc8c7
commit be366278da
150 changed files with 54290 additions and 380379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/app/components/base/modern-monaco/hoisted-config.ts
View File

@ -1,12 +0,0 @@
// This file is generated by scripts/hoist-modern-monaco.ts.
// Do not edit it manually.
export const HOIST_BASE_PATH = '/hoisted-modern-monaco' as const
export const TM_THEMES_VERSION = '1.12.1' as const
export const TM_GRAMMARS_VERSION = '1.31.2' as const
export const HOIST_THEME_IDS = ['light-plus', 'dark-plus'] as const
export const HOIST_LANGUAGE_IDS = ['javascript', 'json', 'python', 'html', 'css'] as const
export const MODERN_MONACO_IMPORT_MAP = {
'modern-monaco/editor-core': '/hoisted-modern-monaco/modern-monaco/editor-core.mjs',
'modern-monaco/lsp': '/hoisted-modern-monaco/modern-monaco/lsp/index.mjs',
} as const

38
web/app/components/base/modern-monaco/import-map.tsx
View File

@ -1,38 +0,0 @@
import { headers } from 'next/headers'
import { env } from '@/env'
import { MODERN_MONACO_IMPORT_MAP } from './hoisted-config'
function withBasePath(pathname: string) {
return `${env.NEXT_PUBLIC_BASE_PATH}${pathname}`
}
function getRequestOrigin(requestHeaders: Headers) {
const protocol = requestHeaders.get('x-forwarded-proto') ?? 'http'
const host = requestHeaders.get('x-forwarded-host') ?? requestHeaders.get('host')
if (!host)
return null
return `${protocol}://${host}`
}
const MonacoImportMap = async () => {
const requestHeaders = await headers()
const nonce = process.env.NODE_ENV === 'production' ? requestHeaders.get('x-nonce') ?? '' : ''
const requestOrigin = getRequestOrigin(requestHeaders)
const importMap = JSON.stringify({
imports: Object.fromEntries(
Object.entries(MODERN_MONACO_IMPORT_MAP).map(([specifier, pathname]) => {
const modulePath = withBasePath(pathname)
const moduleUrl = requestOrigin ? new URL(modulePath, requestOrigin).toString() : modulePath
return [specifier, moduleUrl]
}),
),
})
return (
<script nonce={nonce || undefined} type="importmap" data-modern-monaco-importmap="">
{importMap}
</script>
)
}
export default MonacoImportMap

35
web/app/components/base/modern-monaco/init.ts
View File

@ -1,35 +0,0 @@
import type { InitOptions } from 'modern-monaco'
import { basePath } from '@/utils/var'
import {
HOIST_BASE_PATH,
HOIST_LANGUAGE_IDS,
HOIST_THEME_IDS,
TM_GRAMMARS_VERSION,
TM_THEMES_VERSION,
} from './hoisted-config'
export const LIGHT_THEME_ID = 'light-plus'
export const DARK_THEME_ID = 'dark-plus'
const assetPath = (pathname: string) => `${basePath}${HOIST_BASE_PATH}${pathname}`
const themeAssetPath = (themeId: string) => assetPath(`/tm-themes@${TM_THEMES_VERSION}/themes/${themeId}.json`)
const grammarAssetPath = (languageId: string) => assetPath(`/tm-grammars@${TM_GRAMMARS_VERSION}/grammars/${languageId}.json`)
const DEFAULT_INIT_OPTIONS: InitOptions = {
defaultTheme: themeAssetPath(DARK_THEME_ID),
themes: HOIST_THEME_IDS.map(themeAssetPath),
langs: HOIST_LANGUAGE_IDS.map(grammarAssetPath),
}
let monacoInitPromise: Promise<typeof import('modern-monaco/editor-core') | null> | null = null
export const initMonaco = async () => {
if (!monacoInitPromise) {
monacoInitPromise = (async () => {
const { init } = await import('modern-monaco')
return init(DEFAULT_INIT_OPTIONS)
})()
}
return monacoInitPromise
}

250
web/app/components/base/modern-monaco/modern-monaco-editor.tsx
View File

@ -1,250 +0,0 @@
'use client'
import type { editor as MonacoEditor } from 'modern-monaco/editor-core'
import type { FC } from 'react'
import * as React from 'react'
import { useEffect, useMemo, useRef, useState } from 'react'
import useTheme from '@/hooks/use-theme'
import { Theme } from '@/types/app'
import { cn } from '@/utils/classnames'
import { DARK_THEME_ID, initMonaco, LIGHT_THEME_ID } from './init'
type ModernMonacoEditorProps = {
value: string
language: string
readOnly?: boolean
options?: MonacoEditor.IEditorOptions
onChange?: (value: string) => void
onFocus?: () => void
onBlur?: () => void
onReady?: (editor: MonacoEditor.IStandaloneCodeEditor, monaco: typeof import('modern-monaco/editor-core')) => void
loading?: React.ReactNode
className?: string
style?: React.CSSProperties
}
type MonacoModule = typeof import('modern-monaco/editor-core')
type EditorCallbacks = Pick<ModernMonacoEditorProps, 'onBlur' | 'onChange' | 'onFocus' | 'onReady'>
type EditorSetup = {
editorOptions: MonacoEditor.IEditorOptions
language: string
resolvedTheme: string
}
const syncEditorValue = (
editor: MonacoEditor.IStandaloneCodeEditor,
monaco: MonacoModule,
model: MonacoEditor.ITextModel,
value: string,
preventTriggerChangeEventRef: React.RefObject<boolean>,
) => {
const currentValue = model.getValue()
if (currentValue === value)
return
if (editor.getOption(monaco.editor.EditorOption.readOnly)) {
editor.setValue(value)
return
}
preventTriggerChangeEventRef.current = true
try {
editor.executeEdits('', [{
range: model.getFullModelRange(),
text: value,
forceMoveMarkers: true,
}])
editor.pushUndoStop()
}
finally {
preventTriggerChangeEventRef.current = false
}
}
const bindEditorCallbacks = (
editor: MonacoEditor.IStandaloneCodeEditor,
monaco: MonacoModule,
callbacksRef: React.RefObject<EditorCallbacks>,
preventTriggerChangeEventRef: React.RefObject<boolean>,
) => {
const changeDisposable = editor.onDidChangeModelContent(() => {
if (preventTriggerChangeEventRef.current)
return
callbacksRef.current.onChange?.(editor.getValue())
})
const keydownDisposable = editor.onKeyDown((event) => {
const { key, code } = event.browserEvent
if (key === ' ' || code === 'Space')
event.stopPropagation()
})
const focusDisposable = editor.onDidFocusEditorText(() => {
callbacksRef.current.onFocus?.()
})
const blurDisposable = editor.onDidBlurEditorText(() => {
callbacksRef.current.onBlur?.()
})
return () => {
blurDisposable.dispose()
focusDisposable.dispose()
keydownDisposable.dispose()
changeDisposable.dispose()
}
}
export const ModernMonacoEditor: FC<ModernMonacoEditorProps> = ({
value,
language,
readOnly = false,
options,
onChange,
onFocus,
onBlur,
onReady,
loading,
className,
style,
}) => {
const { theme: appTheme } = useTheme()
const resolvedTheme = appTheme === Theme.light ? LIGHT_THEME_ID : DARK_THEME_ID
const [isEditorReady, setIsEditorReady] = useState(false)
const containerRef = useRef<HTMLDivElement>(null)
const editorRef = useRef<MonacoEditor.IStandaloneCodeEditor | null>(null)
const modelRef = useRef<MonacoEditor.ITextModel | null>(null)
const monacoRef = useRef<MonacoModule | null>(null)
const preventTriggerChangeEventRef = useRef(false)
const valueRef = useRef(value)
const callbacksRef = useRef<EditorCallbacks>({ onChange, onFocus, onBlur, onReady })
const editorOptions = useMemo<MonacoEditor.IEditorOptions>(() => ({
automaticLayout: true,
readOnly,
domReadOnly: true,
minimap: { enabled: false },
wordWrap: 'on',
fixedOverflowWidgets: true,
tabFocusMode: false,
...options,
}), [readOnly, options])
const setupRef = useRef<EditorSetup>({
editorOptions,
language,
resolvedTheme,
})
useEffect(() => {
valueRef.current = value
}, [value])
useEffect(() => {
callbacksRef.current = { onChange, onFocus, onBlur, onReady }
}, [onChange, onFocus, onBlur, onReady])
useEffect(() => {
setupRef.current = {
editorOptions,
language,
resolvedTheme,
}
}, [editorOptions, language, resolvedTheme])
useEffect(() => {
let disposed = false
let cleanup: (() => void) | undefined
const setup = async () => {
const monaco = await initMonaco()
if (!monaco || disposed || !containerRef.current)
return
monacoRef.current = monaco
const editor = monaco.editor.create(containerRef.current, setupRef.current.editorOptions)
editorRef.current = editor
const model = monaco.editor.createModel(valueRef.current, setupRef.current.language)
modelRef.current = model
editor.setModel(model)
monaco.editor.setTheme(setupRef.current.resolvedTheme)
const disposeCallbacks = bindEditorCallbacks(
editor,
monaco,
callbacksRef,
preventTriggerChangeEventRef,
)
const resizeObserver = new ResizeObserver(() => {
editor.layout()
})
resizeObserver.observe(containerRef.current)
callbacksRef.current.onReady?.(editor, monaco)
setIsEditorReady(true)
cleanup = () => {
resizeObserver.disconnect()
disposeCallbacks()
editor.dispose()
model.dispose()
setIsEditorReady(false)
}
}
setup()
return () => {
disposed = true
cleanup?.()
}
}, [])
useEffect(() => {
const editor = editorRef.current
if (!editor)
return
editor.updateOptions(editorOptions)
}, [editorOptions])
useEffect(() => {
const monaco = monacoRef.current
const model = modelRef.current
if (!monaco || !model)
return
monaco.editor.setModelLanguage(model, language)
}, [language])
useEffect(() => {
const monaco = monacoRef.current
if (!monaco)
return
monaco.editor.setTheme(resolvedTheme)
}, [resolvedTheme])
useEffect(() => {
const editor = editorRef.current
const monaco = monacoRef.current
const model = modelRef.current
if (!editor || !monaco || !model)
return
syncEditorValue(editor, monaco, model, value, preventTriggerChangeEventRef)
}, [value])
return (
<div
className={cn('relative h-full w-full', className)}
style={style}
>
<div
ref={containerRef}
className="h-full w-full"
/>
{!isEditorReady && !!loading && (
<div className="absolute inset-0 flex items-center justify-center">
{loading}
</div>
)}
</div>
)
}

59
web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
View File

@ -1,18 +1,24 @@
'use client'
import type { FC } from 'react'
import Editor, { loader } from '@monaco-editor/react'
import { noop } from 'es-toolkit/function'
import * as React from 'react'
import { useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useEffect, useMemo, useRef, useState } from 'react'
import {
getFilesInLogs,
} from '@/app/components/base/file-uploader/utils'
import { ModernMonacoEditor } from '@/app/components/base/modern-monaco/modern-monaco-editor'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import useTheme from '@/hooks/use-theme'
import { Theme } from '@/types/app'
import { cn } from '@/utils/classnames'
import { basePath } from '@/utils/var'
import Base from '../base'
import './style.css'
// load file from local instead of cdn https://github.com/suren-atoyan/monaco-react/issues/482
if (typeof window !== 'undefined')
loader.config({ paths: { vs: `${window.location.origin}${basePath}/vs` } })
const CODE_EDITOR_LINE_HEIGHT = 18
export type Props = {
@ -66,10 +72,15 @@ const CodeEditor: FC<Props> = ({
tip,
footer,
}) => {
const { t } = useTranslation()
const [isFocus, setIsFocus] = React.useState(false)
const [isMounted, setIsMounted] = React.useState(false)
const minHeight = height || 200
const [editorContentHeight, setEditorContentHeight] = useState(56)
const { theme: appTheme } = useTheme()
const valueRef = useRef(value)
useEffect(() => {
valueRef.current = value
}, [value])
const fileList = useMemo(() => {
if (typeof value === 'object')
@ -95,15 +106,18 @@ const CodeEditor: FC<Props> = ({
const handleEditorDidMount = (editor: any, monaco: any) => {
editorRef.current = editor
resizeEditorToContent()
editor.onDidFocusEditorText(() => {
setIsFocus(true)
})
editor.onDidBlurEditorText(() => {
setIsFocus(false)
})
monaco.editor.setTheme(appTheme === Theme.light ? 'light' : 'vs-dark') // Fix: sometimes not load the default theme
onMount?.(editor, monaco)
}
const handleEditorFocus = () => {
setIsFocus(true)
}
const handleEditorBlur = () => {
setIsFocus(false)
setIsMounted(true)
}
const outPutValue = (() => {
@ -117,23 +131,31 @@ const CodeEditor: FC<Props> = ({
}
})()
const theme = useMemo(() => {
if (appTheme === Theme.light)
return 'light'
return 'vs-dark'
}, [appTheme])
const main = (
<>
<ModernMonacoEditor
{/* https://www.npmjs.com/package/@monaco-editor/react */}
<Editor
// className='min-h-[100%]' // h-full
// language={language === CodeLanguage.javascript ? 'javascript' : 'python'}
language={languageMap[language] || 'javascript'}
theme={isMounted ? theme : 'default-theme'} // sometimes not load the default theme
value={outPutValue}
readOnly={readOnly}
loading={<span className="text-text-primary">Loading...</span>}
onChange={handleEditorChange}
onFocus={handleEditorFocus}
onBlur={handleEditorBlur}
onReady={handleEditorDidMount}
loading={<span className="text-text-primary">{t('loading', { ns: 'common' })}</span>}
// https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOptions.html
options={{
readOnly,
domReadOnly: true,
quickSuggestions: false,
minimap: { enabled: false },
lineNumbersMinChars: 1, // would change line num width
wordWrap: 'on', // auto line wrap
// lineNumbers: (num) => {
// return <div>{num}</div>
// }
@ -143,6 +165,7 @@ const CodeEditor: FC<Props> = ({
},
stickyScroll: { enabled: false },
}}
onMount={handleEditorDidMount}
/>
{!outPutValue && !isFocus && <div className="pointer-events-none absolute left-[36px] top-0 text-[13px] font-normal leading-[18px] text-components-input-text-placeholder">{placeholder}</div>}
</>

89
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
View File

@ -1,11 +1,13 @@
import type { FC } from 'react'
import { Editor } from '@monaco-editor/react'
import { RiClipboardLine, RiIndentIncrease } from '@remixicon/react'
import copy from 'copy-to-clipboard'
import * as React from 'react'
import { useCallback, useRef } from 'react'
import { useCallback, useEffect, useMemo, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { ModernMonacoEditor } from '@/app/components/base/modern-monaco/modern-monaco-editor'
import Tooltip from '@/app/components/base/tooltip'
import useTheme from '@/hooks/use-theme'
import { Theme } from '@/types/app'
import { cn } from '@/utils/classnames'
type CodeEditorProps = {
@ -33,11 +35,54 @@ const CodeEditor: FC<CodeEditorProps> = ({
onBlur,
}) => {
const { t } = useTranslation()
const { theme } = useTheme()
const monacoRef = useRef<any>(null)
const editorRef = useRef<any>(null)
const [isMounted, setIsMounted] = React.useState(false)
const containerRef = useRef<HTMLDivElement>(null)
const handleEditorReady = useCallback((editor: any) => {
useEffect(() => {
if (monacoRef.current) {
if (theme === Theme.light)
monacoRef.current.editor.setTheme('light-theme')
else
monacoRef.current.editor.setTheme('dark-theme')
}
}, [theme])
const handleEditorDidMount = useCallback((editor: any, monaco: any) => {
editorRef.current = editor
editor.getModel()?.updateOptions({ tabSize: 2 })
monacoRef.current = monaco
editor.onDidFocusEditorText(() => {
onFocus?.()
})
editor.onDidBlurEditorText(() => {
onBlur?.()
})
monaco.editor.defineTheme('light-theme', {
base: 'vs',
inherit: true,
rules: [],
colors: {
'editor.background': '#00000000',
'editor.lineHighlightBackground': '#00000000',
'focusBorder': '#00000000',
},
})
monaco.editor.defineTheme('dark-theme', {
base: 'vs-dark',
inherit: true,
rules: [],
colors: {
'editor.background': '#00000000',
'editor.lineHighlightBackground': '#00000000',
'focusBorder': '#00000000',
},
})
monaco.editor.setTheme('light-theme')
setIsMounted(true)
}, [])
const formatJsonContent = useCallback(() => {
@ -50,11 +95,29 @@ const CodeEditor: FC<CodeEditorProps> = ({
onUpdate?.(value)
}, [onUpdate])
const editorTheme = useMemo(() => {
if (theme === Theme.light)
return 'light-theme'
return 'dark-theme'
}, [theme])
useEffect(() => {
const resizeObserver = new ResizeObserver(() => {
editorRef.current?.layout()
})
if (containerRef.current)
resizeObserver.observe(containerRef.current)
return () => {
resizeObserver.disconnect()
}
}, [])
return (
<div className={cn('flex h-full flex-col overflow-hidden bg-components-input-bg-normal', hideTopMenu && 'pt-2', className)}>
{!hideTopMenu && (
<div className="flex items-center justify-between pl-2 pr-1 pt-1">
<div className="py-0.5 text-text-secondary system-xs-semibold-uppercase">
<div className="system-xs-semibold-uppercase py-0.5 text-text-secondary">
<span className="px-1 py-0.5">JSON</span>
</div>
<div className="flex items-center gap-x-0.5">
@ -83,17 +146,19 @@ const CodeEditor: FC<CodeEditorProps> = ({
)}
{topContent}
<div className={cn('relative overflow-hidden', editorWrapperClassName)}>
<ModernMonacoEditor
language="json"
<Editor
defaultLanguage="json"
theme={isMounted ? editorTheme : 'default-theme'} // sometimes not load the default theme
value={value}
readOnly={readOnly}
onChange={handleEditorChange}
onReady={handleEditorReady}
onFocus={onFocus}
onBlur={onBlur}
loading={<span className="text-text-primary">{t('loading', { ns: 'common' })}</span>}
onMount={handleEditorDidMount}
options={{
readOnly,
domReadOnly: true,
minimap: { enabled: false },
tabSize: 2,
scrollBeyondLastLine: false,
wordWrap: 'on',
wrappingIndent: 'same',
overviewRulerBorder: false,
hideCursorInOverviewRuler: true,

10
web/app/components/workflow/utils/__tests__/common.spec.ts
View File

@ -146,16 +146,6 @@ describe('isEventTargetInputArea', () => {
expect(isEventTargetInputArea(el)).toBe(true)
})
it('should return true for monaco editor descendants', () => {
const wrapper = document.createElement('div')
wrapper.className = 'monaco-editor'
const child = document.createElement('div')
wrapper.appendChild(child)
document.body.appendChild(wrapper)
expect(isEventTargetInputArea(child)).toBe(true)
wrapper.remove()
})
it('should return undefined for non-input elements', () => {
const el = document.createElement('div')
expect(isEventTargetInputArea(el)).toBeUndefined()

3
web/app/components/workflow/utils/common.ts
View File

@ -32,9 +32,6 @@ export const isEventTargetInputArea = (target: HTMLElement) => {
if (target.contentEditable === 'true')
return true
if (target.closest?.('.monaco-editor, .monaco-diff-editor'))
return true
}
/**

2
web/app/layout.tsx
View File

@ -8,7 +8,6 @@ import GlobalPublicStoreProvider from '@/context/global-public-context'
import { TanstackQueryInitializer } from '@/context/query-client'
import { getDatasetMap } from '@/env'
import { getLocaleOnServer } from '@/i18n-config/server'
import MonacoImportMap from './components/base/modern-monaco/import-map'
import { ToastProvider } from './components/base/toast'
import { TooltipProvider } from './components/base/ui/tooltip'
import BrowserInitializer from './components/browser-initializer'
@ -38,7 +37,6 @@ const LocaleLayout = async ({
return (
<html lang={locale ?? 'en'} className="h-full" suppressHydrationWarning>
<head>
<MonacoImportMap />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#1C64F2" />
<meta name="mobile-web-app-capable" content="yes" />