Merge branch 'feat/model-plugins-implementing' into deploy/dev

# Conflicts:
#	api/tests/unit_tests/services/test_conversation_variable_updater.py

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

@@ -1,24 +1,18 @@
 '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 { useEffect, useMemo, useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 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 = {
@@ -72,15 +66,10 @@ 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')
@@ -106,18 +95,15 @@ 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)
-    setIsMounted(true)
+  }
+
+  const handleEditorFocus = () => {
+    setIsFocus(true)
+  }
+
+  const handleEditorBlur = () => {
+    setIsFocus(false)
   }
 
   const outPutValue = (() => {
@@ -131,31 +117,23 @@ const CodeEditor: FC<Props> = ({
     }
   })()
 
-  const theme = useMemo(() => {
-    if (appTheme === Theme.light)
-      return 'light'
-    return 'vs-dark'
-  }, [appTheme])
-
   const main = (
     <>
-      {/* https://www.npmjs.com/package/@monaco-editor/react */}
-      <Editor
+      <ModernMonacoEditor
         // 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}
-        loading={<span className="text-text-primary">Loading...</span>}
+        readOnly={readOnly}
         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>
           // }
@@ -165,7 +143,6 @@ 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>}
     </>

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

@@ -1,13 +1,11 @@
 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, useEffect, useMemo, useRef } from 'react'
+import { useCallback, 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 = {
@@ -35,54 +33,11 @@ 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)
 
-  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) => {
+  const handleEditorReady = useCallback((editor: any) => {
     editorRef.current = editor
-    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)
+    editor.getModel()?.updateOptions({ tabSize: 2 })
   }, [])
 
   const formatJsonContent = useCallback(() => {
@@ -95,24 +50,6 @@ 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 && (
@@ -146,19 +83,17 @@ const CodeEditor: FC<CodeEditorProps> = ({
       )}
       {topContent}
       <div className={cn('relative overflow-hidden', editorWrapperClassName)}>
-        <Editor
-          defaultLanguage="json"
-          theme={isMounted ? editorTheme : 'default-theme'} // sometimes not load the default theme
+        <ModernMonacoEditor
+          language="json"
           value={value}
+          readOnly={readOnly}
           onChange={handleEditorChange}
-          onMount={handleEditorDidMount}
+          onReady={handleEditorReady}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          loading={<span className="text-text-primary">{t('loading', { ns: 'common' })}</span>}
           options={{
-            readOnly,
-            domReadOnly: true,
-            minimap: { enabled: false },
-            tabSize: 2,
             scrollBeyondLastLine: false,
-            wordWrap: 'on',
             wrappingIndent: 'same',
             overviewRulerBorder: false,
             hideCursorInOverviewRuler: true,

web/app/components/workflow/utils/__tests__/common.spec.ts

@@ -146,6 +146,16 @@ 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()

web/app/components/workflow/utils/common.ts

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