chore: jsx to react.jsx

web/app/components/app/annotation/filter.tsx

@@ -6,15 +6,15 @@ import useSWR from 'swr'
 import Input from '@/app/components/base/input'
 import { fetchAnnotationsCount } from '@/service/log'
 
-export interface QueryParam {
+export type QueryParam = {
   keyword?: string
 }
 
-interface IFilterProps {
+type IFilterProps = {
   appId: string
   queryParams: QueryParam
   setQueryParams: (v: QueryParam) => void
-  children: JSX.Element
+  children: React.JSX.Element
 }
 
 const Filter: FC<IFilterProps> = ({

web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx

@@ -9,8 +9,8 @@ type Props = {
   height: number
   minHeight: number
   onHeightChange: (height: number) => void
-  children: JSX.Element
+  children: React.JSX.Element
-  footer?: JSX.Element
+  footer?: React.JSX.Element
   hideResize?: boolean
 }
 

web/app/components/app/configuration/config-var/config-modal/field.tsx

@@ -3,10 +3,10 @@ import type { FC } from 'react'
 import React from 'react'
 import cn from '@/utils/classnames'
 
-interface Props {
+type Props = {
   className?: string
   title: string
-  children: JSX.Element
+  children: React.JSX.Element
 }
 
 const Field: FC<Props> = ({

web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx

@@ -5,10 +5,10 @@ import cn from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 type Props = {
   className?: string
-  icon: JSX.Element
+  icon: React.JSX.Element
   name: string
   description: string
-  children: JSX.Element
+  children: React.JSX.Element
 }
 
 const ItemPanel: FC<Props> = ({

web/app/components/app/create-app-modal/index.tsx

@@ -279,7 +279,7 @@ const CreateAppModal = ({ show, onClose, onSuccess, onCreateFromTemplate }: Crea
 export default CreateAppModal
 
 type AppTypeCardProps = {
-  icon: JSX.Element
+  icon: React.JSX.Element
   beta?: boolean
   title: string
   description: string

web/app/components/base/drawer-plus/index.tsx

@@ -14,10 +14,10 @@ type Props = {
   contentClassName?: string
   headerClassName?: string
   height?: number | string
-  title: string | JSX.Element
+  title: string | React.JSX.Element
-  titleDescription?: string | JSX.Element
+  titleDescription?: string | React.JSX.Element
-  body: JSX.Element
+  body: React.JSX.Element
-  foot?: JSX.Element
+  foot?: React.JSX.Element
   isShowMask?: boolean
   clickOutsideNotOpen?: boolean
   positionCenter?: boolean

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

@@ -11,7 +11,7 @@ import {
 
 export type Item = {
   value: string | number
-  text: string | JSX.Element
+  text: string | React.JSX.Element
 }
 type DropdownProps = {
   items: Item[]

web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import Tooltip from '@/app/components/base/tooltip'
 
-export const Item: FC<{ title: string; tooltip: string; children: JSX.Element }> = ({
+export const Item: FC<{ title: string; tooltip: string; children: React.JSX.Element }> = ({
   title,
   tooltip,
   children,

web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx

@@ -23,7 +23,7 @@ import { TransferMethod } from '@/types/app'
 type Option = {
   value: string
   label: string
-  icon: JSX.Element
+  icon: React.JSX.Element
 }
 type FileUploaderInAttachmentProps = {
   fileConfig: FileUpload

web/app/components/base/image-uploader/uploader.tsx

@@ -5,7 +5,7 @@ import type { ImageFile } from '@/types/app'
 import { ALLOW_FILE_EXTENSIONS } from '@/types/app'
 
 type UploaderProps = {
-  children: (hovering: boolean) => JSX.Element
+  children: (hovering: boolean) => React.JSX.Element
   onUpload: (imageFile: ImageFile) => void
   closePopover?: () => void
   limit?: number

web/app/components/base/prompt-editor/plugins/component-picker-block/menu.tsx

@@ -19,7 +19,7 @@ export class PickerBlockMenuOption extends MenuOption {
       key: string
       group?: string
       onSelect?: () => void
-      render: (menuRenderProps: MenuOptionRenderProps) => JSX.Element
+      render: (menuRenderProps: MenuOptionRenderProps) => React.JSX.Element
     },
   ) {
     super(data.key)

web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react'
 
 type PromptMenuItemMenuItemProps = {
-  icon: JSX.Element
+  icon: React.JSX.Element
   title: string
   disabled?: boolean
   isSelected: boolean

web/app/components/base/prompt-editor/plugins/component-picker-block/variable-option.tsx

@@ -2,8 +2,8 @@ import { memo } from 'react'
 
 type VariableMenuItemProps = {
   title: string
-  icon?: JSX.Element
+  icon?: React.JSX.Element
-  extraElement?: JSX.Element
+  extraElement?: React.JSX.Element
   isSelected: boolean
   queryString: string | null
   onClick: () => void

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

@@ -5,7 +5,7 @@ import type { Dataset } from './index'
 
 export type SerializedNode = SerializedLexicalNode & { datasets: Dataset[]; onAddContext: () => void; canNotAddContext: boolean }
 
-export class ContextBlockNode extends DecoratorNode<JSX.Element> {
+export class ContextBlockNode extends DecoratorNode<React.JSX.Element> {
   __datasets: Dataset[]
   __onAddContext: () => void
   __canNotAddContext: boolean
@@ -40,7 +40,7 @@ export class ContextBlockNode extends DecoratorNode<JSX.Element> {
     return false
   }
 
-  decorate(): JSX.Element {
+  decorate(): React.JSX.Element {
     return (
       <ContextBlockComponent
         nodeKey={this.getKey()}

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

@@ -5,7 +5,7 @@ import type { RoleName } from './index'
 
 export type SerializedNode = SerializedLexicalNode & { roleName: RoleName; onEditRole: () => void }
 
-export class HistoryBlockNode extends DecoratorNode<JSX.Element> {
+export class HistoryBlockNode extends DecoratorNode<React.JSX.Element> {
   __roleName: RoleName
   __onEditRole: () => void
 
@@ -38,7 +38,7 @@ export class HistoryBlockNode extends DecoratorNode<JSX.Element> {
     return false
   }
 
-  decorate(): JSX.Element {
+  decorate(): React.JSX.Element {
     return (
       <HistoryBlockComponent
         nodeKey={this.getKey()}

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

@@ -4,7 +4,7 @@ import QueryBlockComponent from './component'
 
 export type SerializedNode = SerializedLexicalNode
 
-export class QueryBlockNode extends DecoratorNode<JSX.Element> {
+export class QueryBlockNode extends DecoratorNode<React.JSX.Element> {
   static getType(): string {
     return 'query-block'
   }
@@ -27,7 +27,7 @@ export class QueryBlockNode extends DecoratorNode<JSX.Element> {
     return false
   }
 
-  decorate(): JSX.Element {
+  decorate(): React.JSX.Element {
     return <QueryBlockComponent nodeKey={this.getKey()} />
   }
 

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

@@ -9,7 +9,7 @@ export type SerializedNode = SerializedLexicalNode & {
   workflowNodesMap: WorkflowNodesMap
 }
 
-export class WorkflowVariableBlockNode extends DecoratorNode<JSX.Element> {
+export class WorkflowVariableBlockNode extends DecoratorNode<React.JSX.Element> {
   __variables: string[]
   __workflowNodesMap: WorkflowNodesMap
 
@@ -42,7 +42,7 @@ export class WorkflowVariableBlockNode extends DecoratorNode<JSX.Element> {
     return false
   }
 
-  decorate(): JSX.Element {
+  decorate(): React.JSX.Element {
     return (
       <WorkflowVariableBlockComponent
         nodeKey={this.getKey()}

web/app/components/base/radio-card/simple/index.tsx

@@ -6,12 +6,12 @@ import cn from '@/utils/classnames'
 
 type Props = {
   className?: string
-  title: string | JSX.Element | null
+  title: string | React.JSX.Element | null
   description: string
   isChosen: boolean
   onChosen: () => void
   chosenConfig?: React.ReactNode
-  icon?: JSX.Element
+  icon?: React.JSX.Element
   extra?: React.ReactNode
 }
 

web/app/components/base/radio/component/group/index.tsx

@@ -10,7 +10,7 @@ export type TRadioGroupProps = {
   onChange?: (value: any) => void
 }
 
-export default function Group({ children, value, onChange, className = '' }: TRadioGroupProps): JSX.Element {
+export default function Group({ children, value, onChange, className = '' }: TRadioGroupProps): React.JSX.Element {
   const onRadioChange = (value: any) => {
     onChange?.(value)
   }

web/app/components/base/radio/component/radio/index.tsx

@@ -23,7 +23,7 @@ export default function Radio({
   value,
   disabled,
   onChange,
-}: IRadioProps): JSX.Element {
+}: IRadioProps): React.JSX.Element {
   const groupContext = useContext(RadioGroupContext)
   const labelId = useId()
   const handleChange = (e: IRadioProps['value']) => {

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

@@ -31,7 +31,7 @@ export type Item = {
 export type ISelectProps = {
   className?: string
   wrapperClassName?: string
-  renderTrigger?: (value: Item | null) => JSX.Element | null
+  renderTrigger?: (value: Item | null) => React.JSX.Element | null
   items?: Item[]
   defaultValue?: number | string
   disabled?: boolean
@@ -292,7 +292,7 @@ type PortalSelectProps = {
   items: Item[]
   placeholder?: string
   installedValue?: string | number
-  renderTrigger?: (value?: Item) => JSX.Element | null
+  renderTrigger?: (value?: Item) => React.JSX.Element | null
   triggerClassName?: string
   triggerClassNameFn?: (open: boolean) => string
   popupClassName?: string

web/app/components/base/tab-slider-plain/index.tsx

@@ -5,7 +5,7 @@ import cn from '@/utils/classnames'
 
 type Option = {
   value: string
-  text: string | JSX.Element
+  text: string | React.JSX.Element
 }
 
 type ItemProps = {

web/app/components/header/account-setting/index.tsx

@@ -45,8 +45,8 @@ type GroupItem = {
   key: string
   name: string
   description?: string
-  icon: JSX.Element
+  icon: React.JSX.Element
-  activeIcon: JSX.Element
+  activeIcon: React.JSX.Element
 }
 
 export default function AccountSetting({

web/app/components/header/account-setting/plugin-page/index.tsx

@@ -10,7 +10,7 @@ const PluginPage = () => {
   const { t } = useTranslation()
   const { data: plugins, mutate } = useSWR('/workspaces/current/tool-providers', fetchPluginProviders)
 
-  const Plugin_MAP: Record<string, (plugin: PluginProvider) => JSX.Element> = {
+  const Plugin_MAP: Record<string, (plugin: PluginProvider) => React.JSX.Element> = {
     serpapi: (plugin: PluginProvider) => <SerpapiPlugin key='serpapi' plugin={plugin} onUpdate={() => mutate()} />,
   }
 

web/app/components/plugins/marketplace/list/index.tsx

@@ -13,7 +13,7 @@ type ListProps = {
   showInstallButton?: boolean
   locale: string
   cardContainerClassName?: string
-  cardRender?: (plugin: Plugin) => JSX.Element | null
+  cardRender?: (plugin: Plugin) => React.JSX.Element | null
   onMoreClick?: () => void
   emptyClassName?: string
 }

web/app/components/plugins/marketplace/list/list-with-collection.tsx

@@ -15,7 +15,7 @@ type ListWithCollectionProps = {
   showInstallButton?: boolean
   locale: string
   cardContainerClassName?: string
-  cardRender?: (plugin: Plugin) => JSX.Element | null
+  cardRender?: (plugin: Plugin) => React.JSX.Element | null
   onMoreClick?: (searchParams?: SearchParamsFromCollection) => void
 }
 const ListWithCollection = ({

web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx

@@ -32,7 +32,7 @@ type BeforeRunFormProps = {
   onRun: (submitData: Record<string, any>) => void
   onStop: () => void
   runningStatus: NodeRunningStatus
-  result?: JSX.Element
+  result?: React.JSX.Element
   forms: FormProps[]
   showSpecialResultPanel?: boolean
 } & Partial<SpecialResultPanelProps>

web/app/components/workflow/nodes/_base/components/collapse/index.tsx

@@ -6,8 +6,8 @@ export { default as FieldCollapse } from './field-collapse'
 
 type CollapseProps = {
   disabled?: boolean
-  trigger: JSX.Element
+  trigger: React.JSX.Element
-  children: JSX.Element
+  children: React.JSX.Element
   collapsed?: boolean
   onCollapse?: (collapsed: boolean) => void
 }

web/app/components/workflow/nodes/_base/components/editor/base.tsx

@@ -16,11 +16,11 @@ import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-tog
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import FileListInLog from '@/app/components/base/file-uploader/file-list-in-log'
 
-interface Props {
+type Props = {
   className?: string
-  title: JSX.Element | string
+  title: React.JSX.Element | string
-  headerRight?: JSX.Element
+  headerRight?: React.JSX.Element
-  children: JSX.Element
+  children: React.JSX.Element
   minHeight?: number
   value: string
   isFocus: boolean
@@ -33,7 +33,7 @@ interface Props {
   }[]
   showFileList?: boolean
   showCodeGenerator?: boolean
-  tip?: JSX.Element
+  tip?: React.JSX.Element
 }
 
 const Base: FC<Props> = ({
@@ -85,7 +85,7 @@ const Base: FC<Props> = ({
             {headerRight}
             {showCodeGenerator && codeLanguages && (
               <div className='ml-1'>
-                <CodeGeneratorButton onGenerated={onGenerated} codeLanguages={codeLanguages}/>
+                <CodeGeneratorButton onGenerated={onGenerated} codeLanguages={codeLanguages} />
               </div>
             )}
             {!isCopied

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

@@ -18,11 +18,11 @@ const CODE_EDITOR_LINE_HEIGHT = 18
 
 export type Props = {
   value?: string | object
-  placeholder?: JSX.Element | string
+  placeholder?: React.JSX.Element | string
   onChange?: (value: string) => void
-  title?: JSX.Element
+  title?: React.JSX.Element
   language: CodeLanguage
-  headerRight?: JSX.Element
+  headerRight?: React.JSX.Element
   readOnly?: boolean
   isJSONStringifyBeauty?: boolean
   height?: number
@@ -34,7 +34,7 @@ export type Props = {
   onGenerated?: (value: string) => void
   showCodeGenerator?: boolean
   className?: string
-  tip?: JSX.Element
+  tip?: React.JSX.Element
 }
 
 export const languageMap = {

web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx

@@ -7,8 +7,8 @@ import Base from './base'
 type Props = {
   value: string
   onChange: (value: string) => void
-  title: JSX.Element | string
+  title: React.JSX.Element | string
-  headerRight?: JSX.Element
+  headerRight?: React.JSX.Element
   minHeight?: number
   onBlur?: () => void
   placeholder?: string

web/app/components/workflow/nodes/_base/components/field.tsx

@@ -14,8 +14,8 @@ type Props = {
   tooltip?: ReactNode
   isSubTitle?: boolean
   supportFold?: boolean
-  children?: JSX.Element | string | null
+  children?: React.JSX.Element | string | null
-  operations?: JSX.Element
+  operations?: React.JSX.Element
   inline?: boolean
 }
 

web/app/components/workflow/nodes/_base/components/node-resizer.tsx

@@ -19,7 +19,7 @@ const Icon = () => {
 type NodeResizerProps = {
   nodeId: string
   nodeData: CommonNodeType
-  icon?: JSX.Element
+  icon?: React.JSX.Element
   minWidth?: number
   minHeight?: number
   maxWidth?: number

web/app/components/workflow/nodes/_base/components/prompt/editor.tsx

@@ -41,7 +41,7 @@ type Props = {
   className?: string
   headerClassName?: string
   instanceId?: string
-  title: string | JSX.Element
+  title: string | React.JSX.Element
   value: string
   onChange: (value: string) => void
   readOnly?: boolean

web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx

@@ -35,7 +35,7 @@ const ReadonlyInputWithSelectVar: FC<Props> = ({
       return VAR_PLACEHOLDER
     })
 
-    const html: JSX.Element[] = strWithVarPlaceholder.split(VAR_PLACEHOLDER).map((str, index) => {
+    const html: React.JSX.Element[] = strWithVarPlaceholder.split(VAR_PLACEHOLDER).map((str, index) => {
       if (!vars[index])
         return <span className='relative top-[-3px] leading-[16px]' key={index}>{str}</span>
 

web/app/components/workflow/nodes/_base/components/selector.tsx

@@ -11,7 +11,7 @@ type Item = {
 }
 type Props = {
   className?: string
-  trigger?: JSX.Element
+  trigger?: React.JSX.Element
   DropDownIcon?: any
   noLeft?: boolean
   options: Item[]

web/app/components/workflow/nodes/http/components/authorization/index.tsx

@@ -17,7 +17,7 @@ import cn from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.http.authorization'
 
-interface Props {
+type Props = {
   nodeId: string
   payload: AuthorizationPayloadType
   onChange: (payload: AuthorizationPayloadType) => void
@@ -25,7 +25,7 @@ interface Props {
   onHide: () => void
 }
 
-const Field = ({ title, isRequired, children }: { title: string; isRequired?: boolean; children: JSX.Element }) => {
+const Field = ({ title, isRequired, children }: { title: string; isRequired?: boolean; children: React.JSX.Element }) => {
   return (
     <div>
       <div className='leading-8 text-[13px] font-medium text-gray-700'>

web/app/components/workflow/nodes/start/components/var-item.tsx

@@ -13,12 +13,12 @@ import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
 import Badge from '@/app/components/base/badge'
 import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
 
-interface Props {
+type Props = {
   readonly: boolean
   payload: InputVar
   onChange?: (item: InputVar, moreInfo?: MoreInfo) => void
   onRemove?: () => void
-  rightContent?: JSX.Element
+  rightContent?: React.JSX.Element
   varKeys?: string[]
   showLegacyBadge?: boolean
 }

web/app/components/workflow/note-node/note-editor/context.tsx

@@ -19,13 +19,13 @@ const NoteEditorContext = createContext<NoteEditorStore | null>(null)
 
 type NoteEditorContextProviderProps = {
   value: string
-  children: JSX.Element | string | (JSX.Element | string)[]
+  children: React.JSX.Element | string | (React.JSX.Element | string)[]
 }
 export const NoteEditorContextProvider = memo(({
   value,
   children,
 }: NoteEditorContextProviderProps) => {
-  const storeRef = useRef<NoteEditorStore>()
+  const storeRef = useRef<NoteEditorStore | undefined>(undefined)
 
   if (!storeRef.current)
     storeRef.current = createNoteEditorStore()