Merge branch 'feat/plugins' of github.com:langgenius/dify into feat/plugins

web/.eslintignore

@@ -1,7 +0,0 @@
-/**/node_modules/*
-node_modules/
-
-dist/
-build/
-out/
-.next/

web/.eslintrc.json

@@ -1,32 +0,0 @@
-{
-  "root": true,
-  "extends": [
-    "next",
-    "@antfu",
-    "plugin:storybook/recommended"
-  ],
-  "rules": {
-    "@typescript-eslint/consistent-type-definitions": [
-      "error",
-      "type"
-    ],
-    "@typescript-eslint/no-var-requires": "off",
-    "no-console": "off",
-    "indent": "off",
-    "@typescript-eslint/indent": [
-      "error",
-      2,
-      {
-        "SwitchCase": 1,
-        "flatTernaryExpressions": false,
-        "ignoredNodes": [
-          "PropertyDefinition[decorators]",
-          "TSUnionType",
-          "FunctionExpression[params]:has(Identifier[decorators])"
-        ]
-      }
-    ],
-    "react-hooks/exhaustive-deps": "warn",
-    "react/display-name": "warn"
-  }
-}

web/.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import type { Preview } from '@storybook/react'
-import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import { withThemeByDataAttribute } from '@storybook/addon-themes'
 import I18nServer from '../app/components/i18n-server'
 
 import '../app/styles/globals.css'
@@ -16,12 +16,12 @@ export const decorators = [
       defaultTheme: 'light',
       attributeName: 'data-theme',
     }),
-    Story => {
+    (Story) => {
       return <I18nServer>
         <Story />
       </I18nServer>
     }
-  ];
+  ]
 
 const preview: Preview = {
   parameters: {

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/develop/page.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { type Locale } from '@/i18n'
+import type { Locale } from '@/i18n'
 import DevelopMain from '@/app/components/develop'
 
 export type IDevelopProps = {

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx

@@ -8,12 +8,11 @@ import { useBoolean } from 'ahooks'
 import {
   Cog8ToothIcon,
   // CommandLineIcon,
-  Squares2X2Icon,
-  // eslint-disable-next-line sort-imports
-  PuzzlePieceIcon,
   DocumentTextIcon,
   PaperClipIcon,
+  PuzzlePieceIcon,
   QuestionMarkCircleIcon,
+  Squares2X2Icon,
 } from '@heroicons/react/24/outline'
 import {
   Cog8ToothIcon as Cog8ToothSolidIcon,

web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx

@@ -9,7 +9,7 @@ import ConfirmAddVar from './confirm-add-var'
 import s from './style.module.css'
 import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
 import cn from '@/utils/classnames'
-import { type PromptVariable } from '@/models/debug'
+import type { PromptVariable } from '@/models/debug'
 import Tooltip from '@/app/components/base/tooltip'
 import type { CompletionParams } from '@/types/app'
 import { AppType } from '@/types/app'

web/app/components/app/configuration/config/index.tsx

@@ -19,7 +19,7 @@ import AgentTools from './agent/agent-tools'
 import ConfigContext from '@/context/debug-configuration'
 import ConfigPrompt from '@/app/components/app/configuration/config-prompt'
 import ConfigVar from '@/app/components/app/configuration/config-var'
-import { type CitationConfig, type ModelConfig, type ModerationConfig, type MoreLikeThisConfig, type PromptVariable, type SpeechToTextConfig, type SuggestedQuestionsAfterAnswerConfig, type TextToSpeechConfig } from '@/models/debug'
+import type { CitationConfig, ModelConfig, ModerationConfig, MoreLikeThisConfig, PromptVariable, SpeechToTextConfig, SuggestedQuestionsAfterAnswerConfig, TextToSpeechConfig } from '@/models/debug'
 import type { AppType } from '@/types/app'
 import { ModelModeType } from '@/types/app'
 import { useModalContext } from '@/context/modal-context'
@@ -134,11 +134,11 @@ const Config: FC = () => {
     annotation: annotationConfig.enabled,
     setAnnotation: async (value) => {
       if (value) {
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        // eslint-disable-next-line ts/no-use-before-define
         setIsShowAnnotationConfigInit(true)
       }
       else {
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        // eslint-disable-next-line ts/no-use-before-define
         await handleDisableAnnotation(annotationConfig.embedding_model)
       }
     },

web/app/components/app/configuration/index.tsx

@@ -55,7 +55,7 @@ import ModelParameterModal from '@/app/components/header/account-setting/model-p
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { fetchCollectionList } from '@/service/tools'
-import { type Collection } from '@/app/components/tools/types'
+import type { Collection } from '@/app/components/tools/types'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import {
   getMultipleRetrievalConfig,
@@ -142,7 +142,7 @@ const Configuration: FC = () => {
   const setCompletionParams = (value: FormValue) => {
     const params = { ...value }
 
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    // eslint-disable-next-line ts/no-use-before-define
     if ((!params.stop || params.stop.length === 0) && (modeModeTypeRef.current === ModelModeType.completion)) {
       params.stop = getTempStop()
       setTempStop([])
@@ -331,7 +331,7 @@ const Configuration: FC = () => {
   const [canReturnToSimpleMode, setCanReturnToSimpleMode] = useState(true)
   const setPromptMode = async (mode: PromptMode) => {
     if (mode === PromptMode.advanced) {
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      // eslint-disable-next-line ts/no-use-before-define
       await migrateToDefaultPrompt()
       setCanReturnToSimpleMode(true)
     }
@@ -523,7 +523,6 @@ const Configuration: FC = () => {
             sensitive_word_avoidance: modelConfig.sensitive_word_avoidance,
             external_data_tools: modelConfig.external_data_tools,
             dataSets: datasets || [],
-            // eslint-disable-next-line multiline-ternary
             agentConfig: res.mode === 'agent-chat' ? {
               max_iteration: DEFAULT_AGENT_SETTING.max_iteration,
               ...modelConfig.agent_mode,

web/app/components/app/overview/apikey-info-panel/progress/index.tsx

@@ -20,7 +20,7 @@ const Progress: FC<IProgressProps> = ({
         className={cn(s.bar, exhausted && s['bar-error'], 'absolute top-0 left-0 right-0 bottom-0')}
         style={{ width: `${value}%` }}
       />
-      {Array(10).fill(0).map((i, k) => (
+      {Array.from({ length: 10 }).fill(0).map((i, k) => (
         <div key={k} className={s['bar-item']} />
       ))}
     </div>

web/app/components/base/audio-btn/audio.player.manager.ts

@@ -1,6 +1,6 @@
 import AudioPlayer from '@/app/components/base/audio-btn/audio'
 declare global {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  // eslint-disable-next-line ts/consistent-type-definitions
   interface AudioPlayerManager {
     instance: AudioPlayerManager
   }
@@ -12,6 +12,7 @@ export class AudioPlayerManager {
   private audioPlayers: AudioPlayer | null = null
   private msgId: string | undefined
 
+  // eslint-disable-next-line
   private constructor() {
   }
 

web/app/components/base/audio-btn/audio.ts

@@ -2,7 +2,7 @@ import Toast from '@/app/components/base/toast'
 import { textToAudioStream } from '@/service/share'
 
 declare global {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  // eslint-disable-next-line ts/consistent-type-definitions
   interface Window {
     ManagedMediaSource: any
   }

web/app/components/base/audio-gallery/AudioPlayer.tsx

@@ -55,7 +55,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src }) => {
     audio.load()
 
     // Delayed generation of waveform data
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    // eslint-disable-next-line ts/no-use-before-define
     const timer = setTimeout(() => generateWaveformData(src), 1000)
 
     return () => {

web/app/components/base/auto-height-textarea/common.tsx

@@ -49,4 +49,6 @@ const AutoHeightTextarea = forwardRef<HTMLTextAreaElement, AutoHeightTextareaPro
   },
 )
 
+AutoHeightTextarea.displayName = 'AutoHeightTextarea'
+
 export default AutoHeightTextarea

web/app/components/base/emoji-picker/Inner.tsx

@@ -12,8 +12,9 @@ import Divider from '@/app/components/base/divider'
 import { searchEmoji } from '@/utils/emoji'
 
 declare global {
+  // eslint-disable-next-line ts/no-namespace
   namespace JSX {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+    // eslint-disable-next-line ts/consistent-type-definitions
     interface IntrinsicElements {
       'em-emoji': React.DetailedHTMLProps< React.HTMLAttributes<HTMLElement>, HTMLElement >
     }

web/app/components/base/icons/IconBase.tsx

@@ -28,4 +28,6 @@ const IconBase = forwardRef<React.MutableRefObject<HTMLOrSVGElement>, IconBasePr
   })
 })
 
+IconBase.displayName = 'IconBase'
+
 export default IconBase

web/app/components/base/markdown.tsx

@@ -75,7 +75,6 @@ export function PreCode(props: { children: any }) {
   )
 }
 
-// eslint-disable-next-line unused-imports/no-unused-vars
 const useLazyLoad = (ref: RefObject<Element>): boolean => {
   const [isIntersecting, setIntersecting] = useState<boolean>(false)
 
@@ -297,11 +296,11 @@ export default class ErrorBoundary extends Component {
   }
 
   render() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // eslint-disable-next-line ts/ban-ts-comment
     // @ts-expect-error
     if (this.state.hasError)
       return <div>Oops! An error occurred. This could be due to an ECharts runtime error or invalid SVG content. <br />(see the browser console for more information)</div>
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // eslint-disable-next-line ts/ban-ts-comment
     // @ts-expect-error
     return this.props.children
   }

web/app/components/base/mermaid/index.tsx

@@ -44,7 +44,7 @@ const Flowchart = React.forwardRef((props: {
   const chartId = useRef(`flowchart_${CryptoJS.MD5(props.PrimitiveCode).toString()}`)
   const prevPrimitiveCode = usePrevious(props.PrimitiveCode)
   const [isLoading, setIsLoading] = useState(true)
-  const timeRef = useRef<NodeJS.Timeout>()
+  const timeRef = useRef<number>()
   const [errMsg, setErrMsg] = useState('')
 
   const renderFlowchart = async (PrimitiveCode: string) => {
@@ -74,15 +74,15 @@ const Flowchart = React.forwardRef((props: {
       return
     }
     if (timeRef.current)
-      clearTimeout(timeRef.current)
+      window.clearTimeout(timeRef.current)
 
-    timeRef.current = setTimeout(() => {
+    timeRef.current = window.setTimeout(() => {
       renderFlowchart(props.PrimitiveCode)
     }, 300)
   }, [props.PrimitiveCode])
 
   return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // eslint-disable-next-line ts/ban-ts-comment
     // @ts-expect-error
     <div ref={ref}>
       {
@@ -108,4 +108,6 @@ const Flowchart = React.forwardRef((props: {
   )
 })
 
+Flowchart.displayName = 'Flowchart'
+
 export default Flowchart

web/app/components/base/popover/index.tsx

@@ -34,15 +34,15 @@ export default function CustomPopover({
   disabled = false,
 }: IPopover) {
   const buttonRef = useRef<HTMLButtonElement>(null)
-  const timeOutRef = useRef<NodeJS.Timeout | null>(null)
+  const timeOutRef = useRef<number | null>(null)
 
   const onMouseEnter = (isOpen: boolean) => {
-    timeOutRef.current && clearTimeout(timeOutRef.current)
+    timeOutRef.current && window.clearTimeout(timeOutRef.current)
     !isOpen && buttonRef.current?.click()
   }
 
   const onMouseLeave = (isOpen: boolean) => {
-    timeOutRef.current = setTimeout(() => {
+    timeOutRef.current = window.setTimeout(() => {
       isOpen && buttonRef.current?.click()
     }, timeoutDuration)
   }

web/app/components/base/prompt-editor/plugins/custom-text/node.tsx

@@ -1,4 +1,4 @@
-import type { EditorConfig, NodeKey, SerializedTextNode } from 'lexical'
+import type { EditorConfig, SerializedTextNode } from 'lexical'
 import { $createTextNode, TextNode } from 'lexical'
 
 export class CustomTextNode extends TextNode {
@@ -10,9 +10,9 @@ export class CustomTextNode extends TextNode {
     return new CustomTextNode(node.__text, node.__key)
   }
 
-  constructor(text: string, key?: NodeKey) {
+  // constructor(text: string, key?: NodeKey) {
-    super(text, key)
+  //   super(text, key)
-  }
+  // }
 
   createDOM(config: EditorConfig) {
     const dom = super.createDOM(config)

web/app/components/base/prompt-editor/plugins/variable-value-block/node.tsx

@@ -1,7 +1,6 @@
 import type {
   EditorConfig,
   LexicalNode,
-  NodeKey,
   SerializedTextNode,
 } from 'lexical'
 import {
@@ -18,9 +17,9 @@ export class VariableValueBlockNode extends TextNode {
     return new VariableValueBlockNode(node.__text, node.__key)
   }
 
-  constructor(text: string, key?: NodeKey) {
+  // constructor(text: string, key?: NodeKey) {
-    super(text, key)
+  //   super(text, key)
-  }
+  // }
 
   createDOM(config: EditorConfig): HTMLElement {
     const element = super.createDOM(config)

web/app/components/base/tag-management/index.tsx

@@ -30,7 +30,7 @@ const TagManagementModal = ({ show, type }: TagManagementModalProps) => {
     setTagList(res)
   }
 
-  const [pending, setPending] = useState<Boolean>(false)
+  const [pending, setPending] = useState<boolean>(false)
   const [name, setName] = useState<string>('')
   const createNewTag = async () => {
     if (!name)

web/app/components/base/tag-management/selector.tsx

@@ -54,7 +54,7 @@ const Panel = (props: PanelProps) => {
     return tagList.filter(tag => tag.type === type && !value.includes(tag.id) && tag.name.includes(keywords))
   }, [type, tagList, value, keywords])
 
-  const [creating, setCreating] = useState<Boolean>(false)
+  const [creating, setCreating] = useState<boolean>(false)
   const createNewTag = async () => {
     if (!keywords)
       return

web/app/components/base/tag-management/tag-item-editor.tsx

@@ -78,7 +78,7 @@ const TagItemEditor: FC<TagItemEditorProps> = ({
     }
   }
   const [showRemoveModal, setShowRemoveModal] = useState(false)
-  const [pending, setPending] = useState<Boolean>(false)
+  const [pending, setPending] = useState<boolean>(false)
   const removeTag = async (tagID: string) => {
     if (pending)
       return

web/app/components/datasets/create/step-one/index.tsx

@@ -21,7 +21,7 @@ import VectorSpaceFull from '@/app/components/billing/vector-space-full'
 type IStepOneProps = {
   datasetId?: string
   dataSourceType?: DataSourceType
-  dataSourceTypeDisable: Boolean
+  dataSourceTypeDisable: boolean
   hasConnection: boolean
   onSetting: () => void
   files: FileItem[]

web/app/components/datasets/create/step-two/index.tsx

@@ -28,7 +28,7 @@ import Loading from '@/app/components/base/loading'
 import FloatRightContainer from '@/app/components/base/float-right-container'
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
 import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
-import { type RetrievalConfig } from '@/types/app'
+import type { RetrievalConfig } from '@/types/app'
 import { ensureRerankModelSelected, isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import Toast from '@/app/components/base/toast'
 import { formatNumber } from '@/utils/format'
@@ -202,7 +202,7 @@ const StepTwo = ({
   }
 
   const fetchFileIndexingEstimate = async (docForm = DocForm.TEXT, language?: string) => {
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    // eslint-disable-next-line ts/no-use-before-define
     const res = await didFetchFileIndexingEstimate(getFileIndexingEstimateParams(docForm, language)!)
     if (segmentationType === SegmentType.CUSTOM)
       setCustomFileIndexingEstimate(res)
@@ -344,7 +344,7 @@ const StepTwo = ({
         doc_form: docForm,
         doc_language: docLanguage,
         process_rule: getProcessRule(),
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        // eslint-disable-next-line ts/no-use-before-define
         retrieval_model: retrievalConfig, // Readonly. If want to changed, just go to settings page.
         embedding_model: embeddingModel.model, // Readonly
         embedding_model_provider: embeddingModel.provider, // Readonly
@@ -357,7 +357,7 @@ const StepTwo = ({
           rerankDefaultModel,
           isRerankDefaultModelValid: !!isRerankDefaultModelValid,
           rerankModelList,
-          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          // eslint-disable-next-line ts/no-use-before-define
           retrievalConfig,
           indexMethod: indexMethod as string,
         })
@@ -367,7 +367,7 @@ const StepTwo = ({
       }
       const postRetrievalConfig = ensureRerankModelSelected({
         rerankDefaultModel: rerankDefaultModel!,
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        // eslint-disable-next-line ts/no-use-before-define
         retrievalConfig,
         indexMethod: indexMethod as string,
       })

web/app/components/datasets/external-api/external-api-modal/Form.tsx

@@ -87,4 +87,6 @@ const Form: FC<FormProps> = React.memo(({
   )
 })
 
+Form.displayName = 'Form'
+
 export default Form

web/app/components/datasets/settings/form/index.tsx

@@ -18,7 +18,7 @@ import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/d
 import { updateDatasetSetting } from '@/service/datasets'
 import type { DataSetListResponse } from '@/models/datasets'
 import DatasetDetailContext from '@/context/dataset-detail'
-import { type RetrievalConfig } from '@/types/app'
+import type { RetrievalConfig } from '@/types/app'
 import { useAppContext } from '@/context/app-context'
 import { ensureRerankModelSelected, isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'

web/app/components/header/app-nav/index.tsx

@@ -11,7 +11,7 @@ import {
   RiRobot2Line,
 } from '@remixicon/react'
 import Nav from '../nav'
-import { type NavItem } from '../nav/nav-selector'
+import type { NavItem } from '../nav/nav-selector'
 import { fetchAppList } from '@/service/apps'
 import CreateAppTemplateDialog from '@/app/components/app/create-app-dialog'
 import CreateAppModal from '@/app/components/app/create-app-modal'

web/app/components/share/text-generation/index.tsx

@@ -132,9 +132,9 @@ const TextGeneration: FC<IMainProps> = ({
   const handleSend = () => {
     setIsCallBatchAPI(false)
     setControlSend(Date.now())
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    // eslint-disable-next-line ts/no-use-before-define
     setAllTaskList([]) // clear batch task running status
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    // eslint-disable-next-line ts/no-use-before-define
     showResSidebar()
   }
 
@@ -314,7 +314,7 @@ const TextGeneration: FC<IMainProps> = ({
     setControlSend(Date.now())
     // clear run once task status
     setControlStopResponding(Date.now())
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    // eslint-disable-next-line ts/no-use-before-define
     showResSidebar()
   }
   const handleCompleted = (completionRes: string, taskId?: number, isSuccess?: boolean) => {

web/app/components/tools/workflow-tool/index.tsx

@@ -37,7 +37,7 @@ const WorkflowToolAsModal: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
 
-  const [showEmojiPicker, setShowEmojiPicker] = useState<Boolean>(false)
+  const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false)
   const [emoji, setEmoji] = useState<Emoji>(payload.icon)
   const [label, setLabel] = useState<string>(payload.label)
   const [name, setName] = useState(payload.name)

web/app/components/workflow/block-selector/all-tools.tsx

@@ -89,6 +89,7 @@ const AllTools = ({
           onSelect={onSelect}
           viewType={activeView}
         />
+        {/* Plugins from marketplace */}
         <PluginList wrapElemRef={wrapElemRef} list={[toolNotion, extensionDallE, modelGPT4] as any} ref={pluginRef} />
       </div>
     </div>

web/app/components/workflow/block-selector/market-place-plugin/action.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useRef, useState } from 'react'
+import React, { useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiMoreFill } from '@remixicon/react'
 import ActionButton from '@/app/components/base/action-button'
@@ -13,16 +13,20 @@ import {
 import cn from '@/utils/classnames'
 
 type Props = {
+  open: boolean
+  onOpenChange: (v: boolean) => void
 }
 
-const OperationDropdown: FC<Props> = () => {
+const OperationDropdown: FC<Props> = ({
+  open,
+  onOpenChange,
+}) => {
   const { t } = useTranslation()
-  const [open, doSetOpen] = useState(false)
   const openRef = useRef(open)
   const setOpen = useCallback((v: boolean) => {
-    doSetOpen(v)
+    onOpenChange(v)
     openRef.current = v
-  }, [doSetOpen])
+  }, [onOpenChange])
 
   const handleTrigger = useCallback(() => {
     setOpen(!openRef.current)

web/app/components/workflow/block-selector/market-place-plugin/item.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
 import Action from './action'
 import type { Plugin } from '@/app/components/plugins/types.ts'
 import I18n from '@/context/i18n'
+import cn from '@/utils/classnames'
 
 import { formatNumber } from '@/utils/format'
 
@@ -23,6 +24,7 @@ const Item: FC<Props> = ({
   payload,
 }) => {
   const { t } = useTranslation()
+  const [open, setOpen] = React.useState(false)
   const { locale } = useContext(I18n)
 
   return (
@@ -42,9 +44,12 @@ const Item: FC<Props> = ({
           </div>
         </div>
         {/* Action */}
-        <div className='hidden group-hover/plugin:flex  items-center space-x-1 h-4 text-components-button-secondary-accent-text system-xs-medium'>
+        <div className={cn(!open ? 'hidden' : 'flex', 'group-hover/plugin:flex  items-center space-x-1 h-4 text-components-button-secondary-accent-text system-xs-medium')}>
           <div className='px-1.5'>{t('plugin.installAction')}</div>
-          <Action />
+          <Action
+            open={open}
+            onOpenChange={setOpen}
+          />
         </div>
       </div>
 

web/app/components/workflow/block-selector/market-place-plugin/list.tsx

@@ -39,17 +39,25 @@ const List = ({
     handleScroll,
   }))
 
+  const scrollToView = () => {
+    if (scrollPosition !== ScrollPosition.belowTheWrap)
+      return
+
+    nextToStickyELemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+
   return (
     <>
       <div
         className={cn('sticky z-10 flex h-8 px-4 py-1 text-text-primary system-sm-medium', stickyClassName)}
+        onClick={scrollToView}
       >
         <span>{t('plugin.fromMarketplace')}</span>
         {/* {scrollPosition === ScrollPosition.belowTheWrap && (
           <RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
         )} */}
       </div>
-      <div className='p-1 pb-[500px]' ref={nextToStickyELemRef}>
+      <div className='p-1' ref={nextToStickyELemRef}>
         {list.map((item, index) => (
           <Item
             key={index}

web/app/components/workflow/block-selector/tools.tsx

@@ -12,6 +12,7 @@ import ToolItem from './tool-item'
 import { ViewType } from './view-type-select'
 import Empty from '@/app/components/tools/add-tool-modal/empty'
 import { useGetLanguage } from '@/context/i18n'
+import cn from '@/utils/classnames'
 
 type ToolsProps = {
   showWorkflowEmpty: boolean
@@ -30,7 +31,7 @@ const Blocks = ({
   const isListView = viewType === ViewType.list
   const isTreeView = viewType === ViewType.tree
 
-  const { letters, groups: groupedTools } = groupItems(tools, tool => tool.label[language][0])
+  const { letters, groups: groupedTools } = groupItems(tools, tool => (tool as any).label[language][0])
   const toolRefs = useRef({})
 
   const renderGroup = useCallback((toolWithProvider: ToolWithProvider) => {
@@ -50,7 +51,7 @@ const Blocks = ({
           list.map(tool => (
             <ToolItem
               key={tool.name}
-              className={isListView && 'mr-6'}
+              className={cn(isListView && 'mr-6')}
               isToolPlugin={toolWithProvider.type === CollectionType.builtIn}
               provider={toolWithProvider}
               payload={tool}
@@ -62,12 +63,12 @@ const Blocks = ({
     )
   }, [onSelect, language])
 
-  const renderLetterGroup = (letter) => {
+  const renderLetterGroup = (letter: string) => {
     const tools = groupedTools[letter]
     return (
       <div
         key={letter}
-        ref={el => (toolRefs.current[letter] = el)}
+        ref={el => ((toolRefs as any).current[letter] = el) as any}
       >
         {tools.map(renderGroup)}
       </div>

web/app/components/workflow/nodes/_base/components/variable/utils.ts

@@ -582,7 +582,7 @@ export const getNodeUsedVars = (node: Node): ValueSelector[] => {
       break
     }
     case BlockEnum.LLM: {
-      const payload = (data as LLMNodeType)
+      const payload = data as LLMNodeType
       const isChatModel = payload.model?.mode === 'chat'
       let prompts: string[] = []
       if (isChatModel) {
@@ -620,19 +620,19 @@ export const getNodeUsedVars = (node: Node): ValueSelector[] => {
       break
     }
     case BlockEnum.QuestionClassifier: {
-      const payload = (data as QuestionClassifierNodeType)
+      const payload = data as QuestionClassifierNodeType
       res = [payload.query_variable_selector]
       const varInInstructions = matchNotSystemVars([payload.instruction || ''])
       res.push(...varInInstructions)
       break
     }
     case BlockEnum.HttpRequest: {
-      const payload = (data as HttpNodeType)
+      const payload = data as HttpNodeType
       res = matchNotSystemVars([payload.url, payload.headers, payload.params, payload.body.data])
       break
     }
     case BlockEnum.Tool: {
-      const payload = (data as ToolNodeType)
+      const payload = data as ToolNodeType
       const mixVars = matchNotSystemVars(Object.keys(payload.tool_parameters)?.filter(key => payload.tool_parameters[key].type === ToolVarType.mixed).map(key => payload.tool_parameters[key].value) as string[])
       const vars = Object.keys(payload.tool_parameters).filter(key => payload.tool_parameters[key].type === ToolVarType.variable).map(key => payload.tool_parameters[key].value as string) || []
       res = [...(mixVars as ValueSelector[]), ...(vars as any)]
@@ -650,7 +650,7 @@ export const getNodeUsedVars = (node: Node): ValueSelector[] => {
     }
 
     case BlockEnum.ParameterExtractor: {
-      const payload = (data as ParameterExtractorNodeType)
+      const payload = data as ParameterExtractorNodeType
       res = [payload.query]
       const varInInstructions = matchNotSystemVars([payload.instruction || ''])
       res.push(...varInInstructions)
@@ -672,7 +672,7 @@ export const getNodeUsedVarPassToServerKey = (node: Node, valueSelector: ValueSe
   let res: string | string[] = ''
   switch (type) {
     case BlockEnum.LLM: {
-      const payload = (data as LLMNodeType)
+      const payload = data as LLMNodeType
       res = [`#${valueSelector.join('.')}#`]
       if (payload.context?.variable_selector.join('.') === valueSelector.join('.'))
         res.push('#context#')

web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx

@@ -127,7 +127,7 @@ const Item: FC<ItemProps> = ({
         zIndex: 100,
       }}>
         {isObj && (
-          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          // eslint-disable-next-line ts/no-use-before-define
           <ObjectChildren
             nodeId={nodeId}
             title={title}

web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts

@@ -42,6 +42,7 @@ const { checkValid: checkVariableAssignerValid } = VariableAssigner
 const { checkValid: checkParameterExtractorValid } = ParameterExtractorDefault
 const { checkValid: checkIterationValid } = IterationDefault
 
+// eslint-disable-next-line ts/no-unsafe-function-type
 const checkValidFns: Record<BlockEnum, Function> = {
   [BlockEnum.LLM]: checkLLMValid,
   [BlockEnum.KnowledgeRetrieval]: checkKnowledgeRetrievalValid,

web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react'
 import produce from 'immer'
 import { useBoolean } from 'ahooks'
-import { type OutputVar } from '../../code/types'
+import type { OutputVar } from '../../code/types'
 import type { ValueSelector } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
 import {

web/app/components/workflow/nodes/assigner/node.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { useNodes } from 'reactflow'
 import { useTranslation } from 'react-i18next'
 import NodeVariableItem from '../variable-assigner/components/node-variable-item'
-import { type AssignerNodeType } from './types'
+import type { AssignerNodeType } from './types'
 import { isConversationVar, isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import { BlockEnum, type Node, type NodeProps } from '@/app/components/workflow/types'
 

web/app/components/workflow/nodes/assigner/panel.tsx

@@ -8,7 +8,7 @@ import useConfig from './use-config'
 import { WriteMode } from './types'
 import type { AssignerNodeType } from './types'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
-import { type NodePanelProps } from '@/app/components/workflow/types'
+import type { NodePanelProps } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.assigner'

web/app/components/workflow/nodes/end/default.ts

@@ -1,6 +1,6 @@
 import { BlockEnum } from '../../types'
 import type { NodeDefault } from '../../types'
-import { type EndNodeType } from './types'
+import type { EndNodeType } from './types'
 import { ALL_CHAT_AVAILABLE_BLOCKS, ALL_COMPLETION_AVAILABLE_BLOCKS } from '@/app/components/workflow/constants'
 
 const nodeDefault: NodeDefault<EndNodeType> = {

web/app/components/workflow/nodes/end/panel.tsx

@@ -1,4 +1,4 @@
-import { type FC } from 'react'
+import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import useConfig from './use-config'
@@ -6,7 +6,7 @@ import type { EndNodeType } from './types'
 import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import AddButton from '@/app/components/base/button/add-button'
-import { type NodePanelProps } from '@/app/components/workflow/types'
+import type { NodePanelProps } from '@/app/components/workflow/types'
 
 const i18nPrefix = 'workflow.nodes.end'
 

web/app/components/workflow/nodes/http/components/edit-body/index.tsx

@@ -54,7 +54,7 @@ const EditBody: FC<Props> = ({
       type: newType,
       data: '',
     })
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    // eslint-disable-next-line ts/no-use-before-define
     setBody([])
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onChange])

web/app/components/workflow/nodes/tool/use-config.ts

@@ -162,7 +162,7 @@ const useConfig = (id: string, payload: ToolNodeType) => {
   const [inputVarValues, doSetInputVarValues] = useState<Record<string, any>>({})
   const setInputVarValues = (value: Record<string, any>) => {
     doSetInputVarValues(value)
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    // eslint-disable-next-line ts/no-use-before-define
     setRunInputData(value)
   }
   // fill single run form variable with constant value first time

web/app/components/workflow/nodes/variable-assigner/panel.tsx

@@ -7,7 +7,7 @@ import useConfig from './use-config'
 import type { VariableAssignerNodeType } from './types'
 import VarGroupItem from './components/var-group-item'
 import cn from '@/utils/classnames'
-import { type NodePanelProps } from '@/app/components/workflow/types'
+import type { NodePanelProps } from '@/app/components/workflow/types'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import Switch from '@/app/components/base/switch'

web/app/signin/_header.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { useContext } from 'use-context-selector'
 import Select from '@/app/components/base/select/locale'
 import { languages } from '@/i18n/language'
-import { type Locale } from '@/i18n'
+import type { Locale } from '@/i18n'
 import I18n from '@/context/i18n'
 import LogoSite from '@/app/components/base/logo/logo-site'
 

web/context/modal-context.tsx

@@ -78,7 +78,6 @@ export const useModalContext = () => useContext(ModalContext)
 
 // Adding a dangling comma to avoid the generic parsing issue in tsx, see:
 // https://github.com/microsoft/TypeScript/issues/15713
-// eslint-disable-next-line @typescript-eslint/comma-dangle
 export const useModalContextSelector = <T,>(selector: (state: ModalContextState) => T): T =>
   useContextSelector(ModalContext, selector)
 

web/context/provider-context.tsx

@@ -70,7 +70,6 @@ export const useProviderContext = () => useContext(ProviderContext)
 
 // Adding a dangling comma to avoid the generic parsing issue in tsx, see:
 // https://github.com/microsoft/TypeScript/issues/15713
-// eslint-disable-next-line @typescript-eslint/comma-dangle
 export const useProviderContextSelector = <T,>(selector: (state: ProviderContextState) => T): T =>
   useContextSelector(ProviderContext, selector)
 

web/eslint.config.mjs

@@ -0,0 +1,175 @@
+import {
+  GLOB_JSX, GLOB_TESTS, GLOB_TSX, combine, javascript, node,
+  stylistic, typescript, unicorn
+ } from '@antfu/eslint-config'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+import globals from 'globals'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+// storybook plugin not support v9, so add its recommended rules here
+const storybook = [
+  {
+    plugins: ['storybook'],
+    files: ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)', '*.story.@(ts|tsx|js|jsx|mjs|cjs)'],
+      rules: {
+        'react-hooks/rules-of-hooks': 'off',
+        'import/no-anonymous-default-export': 'off',
+        'storybook/await-interactions': 'error',
+        'storybook/context-in-play-function': 'error',
+        'storybook/default-exports': 'error',
+        'storybook/hierarchy-separator': 'warn',
+        'storybook/no-redundant-story-name': 'warn',
+        'storybook/prefer-pascal-case': 'warn',
+        'storybook/story-exports': 'error',
+        'storybook/use-storybook-expect': 'error',
+        'storybook/use-storybook-testing-library': 'error',
+      }
+  },
+  {
+    plugins: ['storybook'],
+    files: ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)', '*.story.@(ts|tsx|js|jsx|mjs|cjs)'],
+      rules: {
+        'storybook/no-uninstalled-addons': 'error',
+      }
+  }
+]
+
+export default combine(
+  stylistic({
+    lessOpinionated: true,
+    // original @antfu/eslint-config does not support jsx
+    jsx: false,
+    overrides: {
+      // original config
+      "style/indent": "off",
+
+      // these options does not exist in old version
+      // maybe useless
+      "style/indent-binary-ops": "off",
+      "style/multiline-ternary": "off",
+
+      // not exist in old version, and big change
+      "style/quote-props": "off",
+      "style/member-delimiter-style": "off",
+      "style/quotes": "off",
+      "style/comma-dangle": "off",
+    }
+  }),
+  typescript({
+    overrides: {
+      // useful, but big change
+      "ts/no-empty-object-type": "off",
+    }
+  }),
+  javascript({
+    overrides: {
+      // handled by unused-imports/no-unused-vars
+      'no-unused-vars': 'off',
+
+      // useless
+      'no-use-before-define': 'warn'
+    }
+  }),
+  unicorn(),
+  node(),
+  ...process.env.ESLINT_CONFIG_INSPECTOR
+    ? []
+    // TODO: remove this when upgrade to nextjs 15
+    : [compat.extends('next')],
+  {
+    ignores: [
+      '**/node_modules/*',
+      '**/node_modules/',
+      '**/dist/',
+      '**/build/',
+      '**/out/',
+      '**/.next/',
+      '**/public/*',
+      '**/*.json',
+    ]
+  },
+  {
+    // orignal config
+    rules: {
+      // from old version of antfu/eslint-config
+      // typescript will handle this, see https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+      "no-undef": "off",
+
+      'ts/consistent-type-definitions': ['error', 'type'],
+      // orignal ts/no-var-requires
+      'ts/no-require-imports': 'off',
+      "no-console": 'off',
+      "react-hooks/exhaustive-deps": "warn",
+      "react/display-name": "off",
+
+      // orignal config, but removed in new version antfu/eslint-config
+      // big change
+      "curly": "off",
+
+      // antfu use eslint-plugin-perfectionist to replace this
+      // will cause big change, so keep the original
+      // sort-imports
+      "sort-imports": [
+        'error',
+        {
+          ignoreCase: false,
+          ignoreDeclarationSort: true,
+          ignoreMemberSort: false,
+          memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
+          allowSeparatedGroups: false,
+        },
+      ],
+
+      // antfu migrate to eslint-plugin-unused-imports
+      "unused-imports/no-unused-vars": "warn",
+      "unused-imports/no-unused-imports": "warn",
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.es2025,
+        ...globals.node,
+        'React': 'readable',
+        'JSX': 'readable',
+      }
+    }
+  },
+  storybook,
+  // need futher research
+  {
+    rules: {
+      // not exist in old version
+      "antfu/consistent-list-newline": "off",
+      'node/prefer-global/process': 'off',
+      'node/prefer-global/buffer': 'off',
+      'node/no-callback-literal': 'off',
+
+      // useful, but big change
+      "unicorn/prefer-number-properties": "warn",
+      "unicorn/no-new-array": "warn"
+    }
+  },
+  // suppress error for `no-undef` rule
+  {
+    files: GLOB_TESTS,
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+        ...globals.node,
+        ...globals.jest,
+      },
+    },
+  },
+)

web/i18n/hi-IN/share-app.ts

@@ -3,6 +3,8 @@ const translation = {
     welcome: 'आपका स्वागत है',
     appUnavailable: 'ऐप उपलब्ध नहीं है',
     appUnknownError: 'अज्ञात त्रुटि, कृपया पुनः प्रयास करें',
+    // @ts-expect-error TODO: fix this
+    // eslint-disable-next-line no-dupe-keys
     appUnknownError: 'ऐप अनुपलब्ध है',
   },
   chat: {

web/package.json

@@ -53,6 +53,7 @@
     "echarts-for-react": "^3.0.2",
     "emoji-mart": "^5.5.2",
     "fast-deep-equal": "^3.1.3",
+    "globals": "^15.11.0",
     "i18next": "^22.4.13",
     "i18next-resources-to-backend": "^1.1.3",
     "immer": "^9.0.19",
@@ -108,8 +109,11 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.36.0",
+    "@antfu/eslint-config": "^3.8.0",
     "@chromatic-com/storybook": "^1.9.0",
+    "@eslint-react/eslint-plugin": "^1.15.0",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.13.0",
     "@faker-js/faker": "^7.6.0",
     "@rgrove/parse-xml": "^4.1.0",
     "@storybook/addon-essentials": "^8.3.5",
@@ -145,8 +149,10 @@
     "bing-translate-api": "^4.0.2",
     "code-inspector-plugin": "^0.13.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.36.0",
+    "eslint": "^9.13.0",
-    "eslint-config-next": "^14.0.4",
+    "eslint-config-next": "^15.0.0-canary.202",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.12",
     "eslint-plugin-storybook": "^0.9.0",
     "husky": "^8.0.3",
     "jest": "^29.7.0",

web/service/base.ts

@@ -559,7 +559,8 @@ export const ssePost = (
         }
         onData?.(str, isFirstMessage, moreInfo)
       }, onCompleted, onThought, onMessageEnd, onMessageReplace, onFile, onWorkflowStarted, onWorkflowFinished, onNodeStarted, onNodeFinished, onIterationStart, onIterationNext, onIterationFinish, onParallelBranchStarted, onParallelBranchFinished, onTextChunk, onTTSChunk, onTTSEnd, onTextReplace)
-    }).catch((e) => {
+    })
+    .catch((e) => {
       if (e.toString() !== 'AbortError: The user aborted a request.' && !e.toString().errorMessage.includes('TypeError: Cannot assign to read only property'))
         Toast.notify({ type: 'error', message: e })
       onError?.(e)