chore: lint require and how to import react (#30041)

web/__tests__/check-i18n.test.ts

@@ -1,9 +1,7 @@
 import fs from 'node:fs'
 import path from 'node:path'
-
+import vm from 'node:vm'
-// Mock functions to simulate the check-i18n functionality
+import { transpile } from 'typescript'
-const vm = require('node:vm')
-const transpile = require('typescript').transpile
 
 describe('check-i18n script functionality', () => {
   const testDir = path.join(__dirname, '../i18n-test')

web/__tests__/embedded-user-id-auth.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 
 import CheckCode from '@/app/(shareLayout)/webapp-signin/check-code/page'
 import MailAndPasswordAuth from '@/app/(shareLayout)/webapp-signin/components/mail-and-password-auth'

web/__tests__/embedded-user-id-store.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen, waitFor } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import WebAppStoreProvider, { useWebAppStore } from '@/context/web-app-context'
 
 import { AccessMode } from '@/models/access-control'

web/__tests__/goto-anything/command-selector.test.tsx

@@ -1,6 +1,6 @@
 import type { ActionItem } from '../../app/components/goto-anything/actions/types'
 import { fireEvent, render, screen } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import CommandSelector from '../../app/components/goto-anything/command-selector'
 
 vi.mock('cmdk', () => ({

web/__tests__/goto-anything/scope-command-tags.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 
 // Type alias for search mode
 type SearchMode = 'scopes' | 'commands' | null

web/__tests__/workflow-parallel-limit.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import { render, screen } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 
 // Mock environment variables before importing constants
 const originalEnv = process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT

web/__tests__/xss-prevention.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import { cleanup, render } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import BlockInput from '../app/components/base/block-input'
 import SupportVarInput from '../app/components/workflow/nodes/_base/components/support-var-input'
 

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Main from '@/app/components/app/log-annotation'
 import { PageType } from '@/app/components/base/features/new-feature-panel/annotation-reply/type'
 

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Configuration from '@/app/components/app/configuration'
 
 const IConfiguration = async () => {

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

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

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx

@@ -15,7 +15,8 @@ import {
 import { useUnmount } from 'ahooks'
 import dynamic from 'next/dynamic'
 import { usePathname, useRouter } from 'next/navigation'
-import React, { useCallback, useEffect, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import AppSideBar from '@/app/components/app-sidebar'

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Main from '@/app/components/app/log-annotation'
 import { PageType } from '@/app/components/base/features/new-feature-panel/annotation-reply/type'
 

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx

@@ -4,7 +4,8 @@ import type { IAppCardProps } from '@/app/components/app/overview/app-card'
 import type { BlockEnum } from '@/app/components/workflow/types'
 import type { UpdateAppSiteCodeResponse } from '@/models/app'
 import type { App } from '@/types/app'
-import React, { useCallback, useMemo } from 'react'
+import * as React from 'react'
+import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import AppCard from '@/app/components/app/overview/app-card'

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx

@@ -2,7 +2,8 @@
 import type { PeriodParams } from '@/app/components/app/overview/app-chart'
 import dayjs from 'dayjs'
 import quarterOfYear from 'dayjs/plugin/quarterOfYear'
-import React, { useState } from 'react'
+import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { TIME_PERIOD_MAPPING as LONG_TIME_PERIOD_MAPPING } from '@/app/components/app/log/filter'
 import { AvgResponseTime, AvgSessionInteractions, AvgUserInteractions, ConversationsChart, CostChart, EndUsersChart, MessagesChart, TokenPerSecond, UserSatisfactionRate, WorkflowCostChart, WorkflowDailyTerminalsChart, WorkflowMessagesChart } from '@/app/components/app/overview/app-chart'

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/long-time-range-picker.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import type { PeriodParams } from '@/app/components/app/overview/app-chart'
 import type { Item } from '@/app/components/base/select'
 import dayjs from 'dayjs'
-import React from 'react'
+import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { SimpleSelect } from '@/app/components/base/select'
 

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ApikeyInfoPanel from '@/app/components/app/overview/apikey-info-panel'
 import ChartView from './chart-view'
 import TracingPanel from './tracing/panel'

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx

@@ -5,7 +5,8 @@ import type { TriggerProps } from '@/app/components/base/date-and-time-picker/ty
 import { RiCalendarLine } from '@remixicon/react'
 import dayjs from 'dayjs'
 import { noop } from 'lodash-es'
-import React, { useCallback } from 'react'
+import * as React from 'react'
+import { useCallback } from 'react'
 import Picker from '@/app/components/base/date-and-time-picker/date-picker'
 import { useI18N } from '@/context/i18n'
 import { cn } from '@/utils/classnames'

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/index.tsx

@@ -3,7 +3,8 @@ import type { Dayjs } from 'dayjs'
 import type { FC } from 'react'
 import type { PeriodParams, PeriodParamsWithTimeRange } from '@/app/components/app/overview/app-chart'
 import dayjs from 'dayjs'
-import React, { useCallback, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useState } from 'react'
 import { HourglassShape } from '@/app/components/base/icons/src/vender/other'
 import { useI18N } from '@/context/i18n'
 import { formatToLocalTime } from '@/utils/format'

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx

@@ -4,7 +4,8 @@ import type { PeriodParamsWithTimeRange, TimeRange } from '@/app/components/app/
 import type { Item } from '@/app/components/base/select'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
 import dayjs from 'dayjs'
-import React, { useCallback } from 'react'
+import * as React from 'react'
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SimpleSelect } from '@/app/components/base/select'
 import { cn } from '@/utils/classnames'

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/__tests__/svg-attribute-error-reproduction.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import { OpikIconBig } from '@/app/components/base/icons/src/public/tracing'
 import iconData from '@/app/components/base/icons/src/public/tracing/OpikIconBig.json'
 import { normalizeAttrs } from '@/app/components/base/icons/utils'

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx

@@ -2,7 +2,8 @@
 import type { FC } from 'react'
 import type { PopupProps } from './config-popup'
 
-import React, { useCallback, useRef, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useRef, useState } from 'react'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx

@@ -2,7 +2,8 @@
 import type { FC, JSX } from 'react'
 import type { AliyunConfig, ArizeConfig, DatabricksConfig, LangFuseConfig, LangSmithConfig, MLflowConfig, OpikConfig, PhoenixConfig, TencentConfig, WeaveConfig } from './type'
 import { useBoolean } from 'ahooks'
-import React, { useCallback, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import Switch from '@/app/components/base/switch'

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import * as React from 'react'
 import Input from '@/app/components/base/input'
 import { cn } from '@/utils/classnames'
 

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx

@@ -8,7 +8,8 @@ import {
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { usePathname } from 'next/navigation'
-import React, { useEffect, useState } from 'react'
+import * as React from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import { AliyunIcon, ArizeIcon, DatabricksIcon, LangfuseIcon, LangsmithIcon, MlflowIcon, OpikIcon, PhoenixIcon, TencentIcon, WeaveIcon } from '@/app/components/base/icons/src/public/tracing'

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx

@@ -2,7 +2,8 @@
 import type { FC } from 'react'
 import type { AliyunConfig, ArizeConfig, DatabricksConfig, LangFuseConfig, LangSmithConfig, MLflowConfig, OpikConfig, PhoenixConfig, TencentConfig, WeaveConfig } from './type'
 import { useBoolean } from 'ahooks'
-import React, { useCallback, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx

@@ -3,7 +3,8 @@ import type { FC } from 'react'
 import {
   RiEqualizer2Line,
 } from '@remixicon/react'
-import React, { useCallback } from 'react'
+import * as React from 'react'
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { AliyunIconBig, ArizeIconBig, DatabricksIconBig, LangfuseIconBig, LangsmithIconBig, MlflowIconBig, OpikIconBig, PhoenixIconBig, TencentIconBig, WeaveIconBig } from '@/app/components/base/icons/src/public/tracing'
 import { Eye as View } from '@/app/components/base/icons/src/vender/solid/general'

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import * as React from 'react'
 import { TracingIcon as Icon } from '@/app/components/base/icons/src/public/tracing'
 import { cn } from '@/utils/classnames'
 

web/app/(commonLayout)/app/(appDetailLayout)/layout.tsx

@@ -1,7 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import { useRouter } from 'next/navigation'
-import React, { useEffect } from 'react'
+import * as React from 'react'
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAppContext } from '@/context/app-context'
 import useDocumentTitle from '@/hooks/use-document-title'

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 const page = () => {
   return (

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/documents/[documentId]/page.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import MainDetail from '@/app/components/datasets/documents/detail'
 
 export type IDocumentDetailProps = {

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/documents/[documentId]/settings/page.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Settings from '@/app/components/datasets/documents/detail/settings'
 
 export type IProps = {

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/documents/create-from-pipeline/page.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import CreateFromPipeline from '@/app/components/datasets/documents/create-from-pipeline'
 
 const CreateFromPipelinePage = async () => {

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/documents/create/page.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import DatasetUpdateForm from '@/app/components/datasets/create'
 
 export type IProps = {

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Main from '@/app/components/datasets/documents'
 
 export type IProps = {

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Main from '@/app/components/datasets/hit-testing'
 
 type Props = {

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

@@ -10,7 +10,8 @@ import {
   RiFocus2Line,
 } from '@remixicon/react'
 import { usePathname } from 'next/navigation'
-import React, { useEffect, useMemo, useState } from 'react'
+import * as React from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppSideBar from '@/app/components/app-sidebar'
 import { useStore } from '@/app/components/app/store'

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Form from '@/app/components/datasets/settings/form'
 import { getLocaleOnServer, useTranslation as translate } from '@/i18n-config/server'
 

web/app/(commonLayout)/datasets/(datasetDetailLayout)/layout.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import React from 'react'
+import * as React from 'react'
 
 export type IDatasetDetail = {
   children: React.ReactNode

web/app/(commonLayout)/datasets/connect/page.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ExternalKnowledgeBaseConnector from '@/app/components/datasets/external-knowledge-base/connector'
 
 const ExternalKnowledgeBaseCreation = () => {

web/app/(commonLayout)/datasets/create-from-pipeline/page.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import CreateFromPipeline from '@/app/components/datasets/create-from-pipeline'
 
 const DatasetCreation = async () => {

web/app/(commonLayout)/datasets/create/page.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import DatasetUpdateForm from '@/app/components/datasets/create'
 
 const DatasetCreation = async () => {

web/app/(commonLayout)/explore/apps/page.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import AppList from '@/app/components/explore/app-list'
 
 const Apps = () => {

web/app/(commonLayout)/explore/installed/[appId]/page.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Main from '@/app/components/explore/installed-app'
 
 export type IInstalledAppProps = {

web/app/(commonLayout)/explore/layout.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC, PropsWithChildren } from 'react'
-import React from 'react'
+import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ExploreClient from '@/app/components/explore'
 import useDocumentTitle from '@/hooks/use-document-title'

web/app/(commonLayout)/layout.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import React from 'react'
+import * as React from 'react'
 import AmplitudeProvider from '@/app/components/base/amplitude'
 import GA, { GaType } from '@/app/components/base/ga'
 import Zendesk from '@/app/components/base/zendesk'

web/app/(commonLayout)/tools/page.tsx

@@ -1,7 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import { useRouter } from 'next/navigation'
-import React, { useEffect } from 'react'
+import * as React from 'react'
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import ToolProviderList from '@/app/components/tools/provider-list'
 import { useAppContext } from '@/context/app-context'

web/app/(shareLayout)/chat/[token]/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React from 'react'
+import * as React from 'react'
 import ChatWithHistoryWrap from '@/app/components/base/chat/chat-with-history'
 import AuthenticatedLayout from '../../components/authenticated-layout'
 

web/app/(shareLayout)/chatbot/[token]/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React from 'react'
+import * as React from 'react'
 import EmbeddedChatbot from '@/app/components/base/chat/embedded-chatbot'
 import AuthenticatedLayout from '../../components/authenticated-layout'
 

web/app/(shareLayout)/completion/[token]/page.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Main from '@/app/components/share/text-generation'
 import AuthenticatedLayout from '../../components/authenticated-layout'
 

web/app/(shareLayout)/components/authenticated-layout.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import React, { useCallback, useEffect } from 'react'
+import * as React from 'react'
+import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'

web/app/(shareLayout)/webapp-signin/components/external-member-sso-auth.tsx

@@ -1,6 +1,7 @@
 'use client'
 import { useRouter, useSearchParams } from 'next/navigation'
-import React, { useCallback, useEffect } from 'react'
+import * as React from 'react'
+import { useCallback, useEffect } from 'react'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'

web/app/(shareLayout)/webapp-signin/normalForm.tsx

@@ -1,7 +1,8 @@
 'use client'
 import { RiContractLine, RiDoorLockLine, RiErrorWarningFill } from '@remixicon/react'
 import Link from 'next/link'
-import React, { useCallback, useEffect, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import { IS_CE_EDITION } from '@/config'

web/app/(shareLayout)/webapp-signin/page.tsx

@@ -1,7 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
-import React, { useCallback } from 'react'
+import * as React from 'react'
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import { useGlobalPublicStore } from '@/context/global-public-context'

web/app/(shareLayout)/workflow/[token]/page.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import Main from '@/app/components/share/text-generation'
 import AuthenticatedLayout from '../../components/authenticated-layout'

web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx

@@ -5,7 +5,8 @@ import type { OnImageInput } from '@/app/components/base/app-icon-picker/ImageIn
 import type { AvatarProps } from '@/app/components/base/avatar'
 import type { ImageFile } from '@/types/app'
 import { RiDeleteBin5Line, RiPencilLine } from '@remixicon/react'
-import React, { useCallback, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import ImageInput from '@/app/components/base/app-icon-picker/ImageInput'

web/app/account/(commonLayout)/account-page/email-change-modal.tsx

@@ -2,7 +2,8 @@ import type { ResponseError } from '@/service/fetch'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'lodash-es'
 import { useRouter } from 'next/navigation'
-import React, { useState } from 'react'
+import * as React from 'react'
+import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import Button from '@/app/components/base/button'

web/app/account/(commonLayout)/layout.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import React from 'react'
+import * as React from 'react'
 import AmplitudeProvider from '@/app/components/base/amplitude'
 import GA, { GaType } from '@/app/components/base/ga'
 import HeaderWrapper from '@/app/components/header/header-wrapper'

web/app/account/oauth/authorize/page.tsx

@@ -9,7 +9,8 @@ import {
 } from '@remixicon/react'
 import dayjs from 'dayjs'
 import { useRouter, useSearchParams } from 'next/navigation'
-import React, { useEffect, useRef } from 'react'
+import * as React from 'react'
+import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import Avatar from '@/app/components/base/avatar'
 import Button from '@/app/components/base/button'

web/app/activate/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React from 'react'
+import * as React from 'react'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { cn } from '@/utils/classnames'
 import Header from '../signin/_header'

web/app/components/app-sidebar/app-info.tsx

@@ -13,7 +13,8 @@ import {
 } from '@remixicon/react'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/navigation'
-import React, { useCallback, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view'

web/app/components/app-sidebar/app-sidebar-dropdown.tsx

@@ -3,7 +3,8 @@ import {
   RiEqualizer2Line,
   RiMenuLine,
 } from '@remixicon/react'
-import React, { useCallback, useRef, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import {

web/app/components/app-sidebar/basic.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   ApiAggregate,

web/app/components/app-sidebar/dataset-info/dropdown.tsx

@@ -1,7 +1,8 @@
 import type { DataSet } from '@/models/datasets'
 import { RiMoreFill } from '@remixicon/react'
 import { useRouter } from 'next/navigation'
-import React, { useCallback, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'

web/app/components/app-sidebar/dataset-info/index.spec.tsx

@@ -2,7 +2,7 @@ import type { DataSet } from '@/models/datasets'
 import { RiEditLine } from '@remixicon/react'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import React from 'react'
+import * as React from 'react'
 import {
   ChunkingMode,
   DatasetPermission,

web/app/components/app-sidebar/dataset-info/index.tsx

@@ -1,7 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import type { DataSet } from '@/models/datasets'
-import React, { useMemo } from 'react'
+import * as React from 'react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useKnowledge } from '@/hooks/use-knowledge'

web/app/components/app-sidebar/dataset-info/menu-item.tsx

@@ -1,5 +1,5 @@
 import type { RemixiconComponentType } from '@remixicon/react'
-import React from 'react'
+import * as React from 'react'
 
 type MenuItemProps = {
   name: string

web/app/components/app-sidebar/dataset-info/menu.tsx

@@ -1,5 +1,5 @@
 import { RiDeleteBinLine, RiEditLine, RiFileDownloadLine } from '@remixicon/react'
-import React from 'react'
+import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import Divider from '../../base/divider'

web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx

@@ -3,7 +3,8 @@ import type { DataSet } from '@/models/datasets'
 import {
   RiMenuLine,
 } from '@remixicon/react'
-import React, { useCallback, useRef, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   PortalToFollowElem,

web/app/components/app-sidebar/index.tsx

@@ -1,7 +1,8 @@
 import type { NavIcon } from './navLink'
 import { useHover, useKeyPress } from 'ahooks'
 import { usePathname } from 'next/navigation'
-import React, { useCallback, useEffect, useState } from 'react'
+import * as React from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useEventEmitterContextContext } from '@/context/event-emitter'

web/app/components/app-sidebar/navLink.spec.tsx

@@ -1,6 +1,6 @@
 import type { NavLinkProps } from './navLink'
 import { render, screen } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import NavLink from './navLink'
 
 // Mock Next.js navigation

web/app/components/app-sidebar/navLink.tsx

@@ -2,7 +2,7 @@
 import type { RemixiconComponentType } from '@remixicon/react'
 import Link from 'next/link'
 import { useSelectedLayoutSegment } from 'next/navigation'
-import React from 'react'
+import * as React from 'react'
 import { cn } from '@/utils/classnames'
 
 export type NavIcon = React.ComponentType<

web/app/components/app-sidebar/sidebar-animation-issues.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 
 // Simple Mock Components that reproduce the exact UI issues
 const MockNavLink = ({ name, mode }: { name: string, mode: string }) => {

web/app/components/app-sidebar/text-squeeze-fix-verification.spec.tsx

@@ -4,7 +4,7 @@
  */
 
 import { render } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 
 // Mock Next.js navigation
 vi.mock('next/navigation', () => ({

web/app/components/app-sidebar/toggle-button.tsx

@@ -1,5 +1,5 @@
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
-import React from 'react'
+import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/utils/classnames'
 import Button from '../base/button'

web/app/components/app/annotation/add-annotation-modal/edit-item/index.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import EditItem, { EditItemType } from './index'
 
 describe('AddAnnotationModal/EditItem', () => {

web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Robot, User } from '@/app/components/base/icons/src/public/avatar'
 import Textarea from '@/app/components/base/textarea'

web/app/components/app/annotation/add-annotation-modal/index.spec.tsx

@@ -1,6 +1,6 @@
 import type { Mock } from 'vitest'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import { useProviderContext } from '@/context/provider-context'
 import AddAnnotationModal from './index'
 

web/app/components/app/annotation/add-annotation-modal/index.tsx

@@ -1,7 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import type { AnnotationItemBasic } from '../type'
-import React, { useState } from 'react'
+import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'

web/app/components/app/annotation/batch-action.spec.tsx

@@ -1,5 +1,5 @@
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import BatchAction from './batch-action'
 
 describe('BatchAction', () => {

web/app/components/app/annotation/batch-action.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { RiDeleteBinLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import React from 'react'
+import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'

web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.spec.tsx

@@ -1,6 +1,6 @@
 import type { Locale } from '@/i18n-config'
 import { render, screen } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import I18nContext from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n-config/language'
 import CSVDownload from './csv-downloader'

web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   useCSVDownloader,

web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx

@@ -1,6 +1,6 @@
 import type { Props } from './csv-uploader'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import { ToastContext } from '@/app/components/base/toast'
 import CSVUploader from './csv-uploader'
 

web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx

@@ -1,7 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import { RiDeleteBinLine } from '@remixicon/react'
-import React, { useEffect, useRef, useState } from 'react'
+import * as React from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import Button from '@/app/components/base/button'

web/app/components/app/annotation/batch-add-annotation-modal/index.spec.tsx

@@ -1,7 +1,7 @@
 import type { Mock } from 'vitest'
 import type { IBatchModalProps } from './index'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import Toast from '@/app/components/base/toast'
 import { useProviderContext } from '@/context/provider-context'
 import { annotationBatchImport, checkAnnotationBatchImportProgress } from '@/service/annotation'

web/app/components/app/annotation/batch-add-annotation-modal/index.tsx

@@ -2,7 +2,8 @@
 import type { FC } from 'react'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'lodash-es'
-import React, { useEffect, useState } from 'react'
+import * as React from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'

web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import ClearAllAnnotationsConfirmModal from './index'
 
 vi.mock('react-i18next', () => ({

web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { FC } from 'react'
-import React from 'react'
+import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Confirm from '@/app/components/base/confirm'
 

web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx

@@ -1,7 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import { RiDeleteBinLine, RiEditFill, RiEditLine } from '@remixicon/react'
-import React, { useEffect, useState } from 'react'
+import * as React from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { Robot, User } from '@/app/components/base/icons/src/public/avatar'

web/app/components/app/annotation/edit-annotation-modal/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
-import React, { useState } from 'react'
+import * as React from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Confirm from '@/app/components/base/confirm'
 import Drawer from '@/app/components/base/drawer-plus'

web/app/components/app/annotation/empty-element.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import EmptyElement from './empty-element'
 
 describe('EmptyElement', () => {

web/app/components/app/annotation/empty-element.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC, SVGProps } from 'react'
-import React from 'react'
+import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
 const ThreeDotsIcon = ({ className }: SVGProps<SVGElement>) => {

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

@@ -1,7 +1,7 @@
 import type { Mock } from 'vitest'
 import type { QueryParam } from './filter'
 import { fireEvent, render, screen } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import useSWR from 'swr'
 import Filter from './filter'
 

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

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 import Input from '@/app/components/base/input'

web/app/components/app/annotation/header-opts/index.tsx

@@ -7,7 +7,8 @@ import {
   RiDeleteBinLine,
   RiMoreFill,
 } from '@remixicon/react'
-import React, { Fragment, useEffect, useState } from 'react'
+import * as React from 'react'
+import { Fragment, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   useCSVDownloader,

web/app/components/app/annotation/index.spec.tsx

@@ -2,7 +2,7 @@ import type { Mock } from 'vitest'
 import type { AnnotationItem } from './type'
 import type { App } from '@/types/app'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import Toast from '@/app/components/base/toast'
 import { useProviderContext } from '@/context/provider-context'
 import {

web/app/components/app/annotation/index.tsx

@@ -6,7 +6,8 @@ import type { AnnotationReplyConfig } from '@/models/debug'
 import type { App } from '@/types/app'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { useDebounce } from 'ahooks'
-import React, { useEffect, useState } from 'react'
+import * as React from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import ConfigParamModal from '@/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal'

web/app/components/app/annotation/list.spec.tsx

@@ -1,6 +1,6 @@
 import type { AnnotationItem } from './type'
 import { fireEvent, render, screen, within } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import List from './list'
 
 const mockFormatTime = vi.fn(() => 'formatted-time')

web/app/components/app/annotation/list.tsx

@@ -2,7 +2,8 @@
 import type { FC } from 'react'
 import type { AnnotationItem } from './type'
 import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
-import React, { useCallback, useMemo } from 'react'
+import * as React from 'react'
+import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Checkbox from '@/app/components/base/checkbox'

web/app/components/app/annotation/remove-annotation-confirm-modal/index.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import RemoveAnnotationConfirmModal from './index'
 
 vi.mock('react-i18next', () => ({