Chore: frontend infrastructure upgrade (#16420)

Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>

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

@@ -3,7 +3,7 @@ import Main from '@/app/components/app/log-annotation'
 import { PageType } from '@/app/components/base/features/new-feature-panel/annotation-reply/type'
 
 export type IProps = {
-  params: { appId: string }
+  params: Promise<{ appId: string }>
 }
 
 const Logs = async () => {

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

@@ -3,12 +3,16 @@ import type { Locale } from '@/i18n'
 import DevelopMain from '@/app/components/develop'
 
 export type IDevelopProps = {
-  params: { locale: Locale; appId: string }
+  params: Promise<{ locale: Locale; appId: string }>
 }
 
-const Develop = async ({
-  params: { appId },
-}: IDevelopProps) => {
+const Develop = async (props: IDevelopProps) => {
+  const params = await props.params
+
+  const {
+    appId,
+  } = params
+
   return <DevelopMain appId={appId} />
 }
 

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

@@ -0,0 +1,177 @@
+'use client'
+import type { FC } from 'react'
+import { useUnmount } from 'ahooks'
+import React, { useCallback, useEffect, useState } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
+import {
+  RiDashboard2Fill,
+  RiDashboard2Line,
+  RiFileList3Fill,
+  RiFileList3Line,
+  RiTerminalBoxFill,
+  RiTerminalBoxLine,
+  RiTerminalWindowFill,
+  RiTerminalWindowLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useShallow } from 'zustand/react/shallow'
+import { useContextSelector } from 'use-context-selector'
+import s from './style.module.css'
+import cn from '@/utils/classnames'
+import { useStore } from '@/app/components/app/store'
+import AppSideBar from '@/app/components/app-sidebar'
+import type { NavIcon } from '@/app/components/app-sidebar/navLink'
+import { fetchAppDetail, fetchAppSSO } from '@/service/apps'
+import AppContext, { useAppContext } from '@/context/app-context'
+import Loading from '@/app/components/base/loading'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import type { App } from '@/types/app'
+
+export type IAppDetailLayoutProps = {
+  children: React.ReactNode
+  appId: string
+}
+
+const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
+  const {
+    children,
+    appId, // get appId in path
+  } = props
+  const { t } = useTranslation()
+  const router = useRouter()
+  const pathname = usePathname()
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const { isCurrentWorkspaceEditor, isLoadingCurrentWorkspace } = useAppContext()
+  const { appDetail, setAppDetail, setAppSiderbarExpand } = useStore(useShallow(state => ({
+    appDetail: state.appDetail,
+    setAppDetail: state.setAppDetail,
+    setAppSiderbarExpand: state.setAppSiderbarExpand,
+  })))
+  const [isLoadingAppDetail, setIsLoadingAppDetail] = useState(false)
+  const [appDetailRes, setAppDetailRes] = useState<App | null>(null)
+  const [navigation, setNavigation] = useState<Array<{
+    name: string
+    href: string
+    icon: NavIcon
+    selectedIcon: NavIcon
+  }>>([])
+  const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
+
+  const getNavigations = useCallback((appId: string, isCurrentWorkspaceEditor: boolean, mode: string) => {
+    const navs = [
+      ...(isCurrentWorkspaceEditor
+        ? [{
+          name: t('common.appMenus.promptEng'),
+          href: `/app/${appId}/${(mode === 'workflow' || mode === 'advanced-chat') ? 'workflow' : 'configuration'}`,
+          icon: RiTerminalWindowLine,
+          selectedIcon: RiTerminalWindowFill,
+        }]
+        : []
+      ),
+      {
+        name: t('common.appMenus.apiAccess'),
+        href: `/app/${appId}/develop`,
+        icon: RiTerminalBoxLine,
+        selectedIcon: RiTerminalBoxFill,
+      },
+      ...(isCurrentWorkspaceEditor
+        ? [{
+          name: mode !== 'workflow'
+            ? t('common.appMenus.logAndAnn')
+            : t('common.appMenus.logs'),
+          href: `/app/${appId}/logs`,
+          icon: RiFileList3Line,
+          selectedIcon: RiFileList3Fill,
+        }]
+        : []
+      ),
+      {
+        name: t('common.appMenus.overview'),
+        href: `/app/${appId}/overview`,
+        icon: RiDashboard2Line,
+        selectedIcon: RiDashboard2Fill,
+      },
+    ]
+    return navs
+  }, [])
+
+  useEffect(() => {
+    if (appDetail) {
+      document.title = `${(appDetail.name || 'App')} - Dify`
+      const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
+      const mode = isMobile ? 'collapse' : 'expand'
+      setAppSiderbarExpand(isMobile ? mode : localeMode)
+      // TODO: consider screen size and mode
+      // if ((appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow') && (pathname).endsWith('workflow'))
+      //   setAppSiderbarExpand('collapse')
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appDetail, isMobile])
+
+  useEffect(() => {
+    setAppDetail()
+    setIsLoadingAppDetail(true)
+    fetchAppDetail({ url: '/apps', id: appId }).then((res) => {
+      setAppDetailRes(res)
+    }).catch((e: any) => {
+      if (e.status === 404)
+        router.replace('/apps')
+    }).finally(() => {
+      setIsLoadingAppDetail(false)
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appId, pathname])
+
+  useEffect(() => {
+    if (!appDetailRes || isLoadingCurrentWorkspace || isLoadingAppDetail)
+      return
+    const res = appDetailRes
+    // redirection
+    const canIEditApp = isCurrentWorkspaceEditor
+    if (!canIEditApp && (pathname.endsWith('configuration') || pathname.endsWith('workflow') || pathname.endsWith('logs'))) {
+      router.replace(`/app/${appId}/overview`)
+      return
+    }
+    if ((res.mode === 'workflow' || res.mode === 'advanced-chat') && (pathname).endsWith('configuration')) {
+      router.replace(`/app/${appId}/workflow`)
+    }
+    else if ((res.mode !== 'workflow' && res.mode !== 'advanced-chat') && (pathname).endsWith('workflow')) {
+      router.replace(`/app/${appId}/configuration`)
+    }
+    else {
+      setAppDetail({ ...res, enable_sso: false })
+      setNavigation(getNavigations(appId, isCurrentWorkspaceEditor, res.mode))
+      if (systemFeatures.enable_web_sso_switch_component && canIEditApp) {
+        fetchAppSSO({ appId }).then((ssoRes) => {
+          setAppDetail({ ...res, enable_sso: ssoRes.enabled })
+        })
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appDetailRes, isCurrentWorkspaceEditor, isLoadingAppDetail, isLoadingCurrentWorkspace, systemFeatures.enable_web_sso_switch_component])
+
+  useUnmount(() => {
+    setAppDetail()
+  })
+
+  if (!appDetail) {
+    return (
+      <div className='flex h-full items-center justify-center bg-background-body'>
+        <Loading />
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn(s.app, 'relative flex', 'overflow-hidden')}>
+      {appDetail && (
+        <AppSideBar title={appDetail.name} icon={appDetail.icon} icon_background={appDetail.icon_background as string} desc={appDetail.mode} navigation={navigation} />
+      )}
+      <div className="grow overflow-hidden bg-components-panel-bg">
+        {children}
+      </div>
+    </div>
+  )
+}
+export default React.memo(AppDetailLayout)

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

@@ -1,177 +1,14 @@
-'use client'
-import type { FC } from 'react'
-import { useUnmount } from 'ahooks'
-import React, { useCallback, useEffect, useState } from 'react'
-import { usePathname, useRouter } from 'next/navigation'
-import {
-  RiDashboard2Fill,
-  RiDashboard2Line,
-  RiFileList3Fill,
-  RiFileList3Line,
-  RiTerminalBoxFill,
-  RiTerminalBoxLine,
-  RiTerminalWindowFill,
-  RiTerminalWindowLine,
-} from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { useShallow } from 'zustand/react/shallow'
-import { useContextSelector } from 'use-context-selector'
-import s from './style.module.css'
-import cn from '@/utils/classnames'
-import { useStore } from '@/app/components/app/store'
-import AppSideBar from '@/app/components/app-sidebar'
-import type { NavIcon } from '@/app/components/app-sidebar/navLink'
-import { fetchAppDetail, fetchAppSSO } from '@/service/apps'
-import AppContext, { useAppContext } from '@/context/app-context'
-import Loading from '@/app/components/base/loading'
-import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import type { App } from '@/types/app'
+import Main from './layout-main'
 
-export type IAppDetailLayoutProps = {
+const AppDetailLayout = async (props: {
   children: React.ReactNode
-  params: { appId: string }
-}
-
-const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
+  params: Promise<{ appId: string }>
+}) => {
   const {
     children,
-    params: { appId }, // get appId in path
+    params,
   } = props
-  const { t } = useTranslation()
-  const router = useRouter()
-  const pathname = usePathname()
-  const media = useBreakpoints()
-  const isMobile = media === MediaType.mobile
-  const { isCurrentWorkspaceEditor, isLoadingCurrentWorkspace } = useAppContext()
-  const { appDetail, setAppDetail, setAppSiderbarExpand } = useStore(useShallow(state => ({
-    appDetail: state.appDetail,
-    setAppDetail: state.setAppDetail,
-    setAppSiderbarExpand: state.setAppSiderbarExpand,
-  })))
-  const [isLoadingAppDetail, setIsLoadingAppDetail] = useState(false)
-  const [appDetailRes, setAppDetailRes] = useState<App | null>(null)
-  const [navigation, setNavigation] = useState<Array<{
-    name: string
-    href: string
-    icon: NavIcon
-    selectedIcon: NavIcon
-  }>>([])
-  const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
-
-  const getNavigations = useCallback((appId: string, isCurrentWorkspaceEditor: boolean, mode: string) => {
-    const navs = [
-      ...(isCurrentWorkspaceEditor
-        ? [{
-          name: t('common.appMenus.promptEng'),
-          href: `/app/${appId}/${(mode === 'workflow' || mode === 'advanced-chat') ? 'workflow' : 'configuration'}`,
-          icon: RiTerminalWindowLine,
-          selectedIcon: RiTerminalWindowFill,
-        }]
-        : []
-      ),
-      {
-        name: t('common.appMenus.apiAccess'),
-        href: `/app/${appId}/develop`,
-        icon: RiTerminalBoxLine,
-        selectedIcon: RiTerminalBoxFill,
-      },
-      ...(isCurrentWorkspaceEditor
-        ? [{
-          name: mode !== 'workflow'
-            ? t('common.appMenus.logAndAnn')
-            : t('common.appMenus.logs'),
-          href: `/app/${appId}/logs`,
-          icon: RiFileList3Line,
-          selectedIcon: RiFileList3Fill,
-        }]
-        : []
-      ),
-      {
-        name: t('common.appMenus.overview'),
-        href: `/app/${appId}/overview`,
-        icon: RiDashboard2Line,
-        selectedIcon: RiDashboard2Fill,
-      },
-    ]
-    return navs
-  }, [])
-
-  useEffect(() => {
-    if (appDetail) {
-      document.title = `${(appDetail.name || 'App')} - Dify`
-      const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
-      const mode = isMobile ? 'collapse' : 'expand'
-      setAppSiderbarExpand(isMobile ? mode : localeMode)
-      // TODO: consider screen size and mode
-      // if ((appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow') && (pathname).endsWith('workflow'))
-      //   setAppSiderbarExpand('collapse')
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [appDetail, isMobile])
-
-  useEffect(() => {
-    setAppDetail()
-    setIsLoadingAppDetail(true)
-    fetchAppDetail({ url: '/apps', id: appId }).then((res) => {
-      setAppDetailRes(res)
-    }).catch((e: any) => {
-      if (e.status === 404)
-        router.replace('/apps')
-    }).finally(() => {
-      setIsLoadingAppDetail(false)
-    })
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [appId, pathname])
-
-  useEffect(() => {
-    if (!appDetailRes || isLoadingCurrentWorkspace || isLoadingAppDetail)
-      return
-    const res = appDetailRes
-    // redirection
-    const canIEditApp = isCurrentWorkspaceEditor
-    if (!canIEditApp && (pathname.endsWith('configuration') || pathname.endsWith('workflow') || pathname.endsWith('logs'))) {
-      router.replace(`/app/${appId}/overview`)
-      return
-    }
-    if ((res.mode === 'workflow' || res.mode === 'advanced-chat') && (pathname).endsWith('configuration')) {
-      router.replace(`/app/${appId}/workflow`)
-    }
-    else if ((res.mode !== 'workflow' && res.mode !== 'advanced-chat') && (pathname).endsWith('workflow')) {
-      router.replace(`/app/${appId}/configuration`)
-    }
-    else {
-      setAppDetail({ ...res, enable_sso: false })
-      setNavigation(getNavigations(appId, isCurrentWorkspaceEditor, res.mode))
-      if (systemFeatures.enable_web_sso_switch_component && canIEditApp) {
-        fetchAppSSO({ appId }).then((ssoRes) => {
-          setAppDetail({ ...res, enable_sso: ssoRes.enabled })
-        })
-      }
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [appDetailRes, isCurrentWorkspaceEditor, isLoadingAppDetail, isLoadingCurrentWorkspace, systemFeatures.enable_web_sso_switch_component])
-
-  useUnmount(() => {
-    setAppDetail()
-  })
-
-  if (!appDetail) {
-    return (
-      <div className='flex h-full items-center justify-center bg-background-body'>
-        <Loading />
-      </div>
-    )
-  }
 
-  return (
-    <div className={cn(s.app, 'flex relative', 'overflow-hidden')}>
-      {appDetail && (
-        <AppSideBar title={appDetail.name} icon={appDetail.icon} icon_background={appDetail.icon_background as string} desc={appDetail.mode} navigation={navigation} />
-      )}
-      <div className="bg-components-panel-bg grow overflow-hidden">
-        {children}
-      </div>
-    </div>
-  )
+  return <Main appId={(await params).appId}>{children}</Main>
 }
-export default React.memo(AppDetailLayout)
+export default AppDetailLayout

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

@@ -122,7 +122,7 @@ const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
     return <Loading />
 
   return (
-    <div className={className || 'grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'}>
+    <div className={className || 'mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'}>
       <AppCard
         appInfo={appDetail}
         cardType="webapp"

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

@@ -46,7 +46,7 @@ export default function ChartView({ appId }: IChartViewProps) {
 
   return (
     <div>
-      <div className='flex flex-row items-center mt-8 mb-4 system-xl-semibold text-text-primary'>
+      <div className='system-xl-semibold mb-4 mt-8 flex flex-row items-center text-text-primary'>
         <span className='mr-3'>{t('appOverview.analysis.title')}</span>
         <SimpleSelect
           items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
@@ -61,13 +61,13 @@ export default function ChartView({ appId }: IChartViewProps) {
         />
       </div>
       {!isWorkflow && (
-        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
           <ConversationsChart period={period} id={appId} />
           <EndUsersChart period={period} id={appId} />
         </div>
       )}
       {!isWorkflow && (
-        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
           {isChatApp
             ? (
               <AvgSessionInteractions period={period} id={appId} />
@@ -79,24 +79,24 @@ export default function ChartView({ appId }: IChartViewProps) {
         </div>
       )}
       {!isWorkflow && (
-        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
           <UserSatisfactionRate period={period} id={appId} />
           <CostChart period={period} id={appId} />
         </div>
       )}
       {!isWorkflow && isChatApp && (
-        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
           <MessagesChart period={period} id={appId} />
         </div>
       )}
       {isWorkflow && (
-        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
           <WorkflowMessagesChart period={period} id={appId} />
           <WorkflowDailyTerminalsChart period={period} id={appId} />
         </div>
       )}
       {isWorkflow && (
-        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
           <WorkflowCostChart period={period} id={appId} />
           <AvgUserInteractions period={period} id={appId} />
         </div>

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

@@ -5,14 +5,18 @@ import TracingPanel from './tracing/panel'
 import ApikeyInfoPanel from '@/app/components/app/overview/apikey-info-panel'
 
 export type IDevelopProps = {
-  params: { appId: string }
+  params: Promise<{ appId: string }>
 }
 
-const Overview = async ({
-  params: { appId },
-}: IDevelopProps) => {
+const Overview = async (props: IDevelopProps) => {
+  const params = await props.params
+
+  const {
+    appId,
+  } = params
+
   return (
-    <div className="h-full px-4 sm:px-12 py-6 overflow-scroll bg-chatbot-bg">
+    <div className="h-full overflow-scroll bg-chatbot-bg px-4 py-6 sm:px-12">
       <ApikeyInfoPanel />
       <TracingPanel />
       <CardView appId={appId} />

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

@@ -58,8 +58,8 @@ const ConfigBtn: FC<Props> = ({
       }}
     >
       <PortalToFollowElemTrigger onClick={handleTrigger}>
-        <div className={cn(className, 'p-1 rounded-md')}>
-          <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
+        <div className={cn(className, 'rounded-md p-1')}>
+          <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[11]'>

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

@@ -162,15 +162,15 @@ const ConfigPopup: FC<PopupProps> = ({
   }
 
   return (
-    <div className='w-[420px] p-4 rounded-2xl bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl'>
-      <div className='flex justify-between items-center'>
+    <div className='w-[420px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-xl'>
+      <div className='flex items-center justify-between'>
         <div className='flex items-center'>
           <TracingIcon size='md' className='mr-2' />
-          <div className='text-text-primary title-2xl-semi-bold'>{t(`${I18N_PREFIX}.tracing`)}</div>
+          <div className='title-2xl-semi-bold text-text-primary'>{t(`${I18N_PREFIX}.tracing`)}</div>
         </div>
         <div className='flex items-center'>
           <Indicator color={enabled ? 'green' : 'gray'} />
-          <div className={cn('ml-1 system-xs-semibold-uppercase text-text-tertiary', enabled && 'text-util-colors-green-green-600')}>
+          <div className={cn('system-xs-semibold-uppercase ml-1 text-text-tertiary', enabled && 'text-util-colors-green-green-600')}>
             {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
           </div>
           {!readOnly && (
@@ -189,7 +189,7 @@ const ConfigPopup: FC<PopupProps> = ({
         </div>
       </div>
 
-      <div className='mt-2 system-xs-regular text-text-tertiary'>
+      <div className='system-xs-regular mt-2 text-text-tertiary'>
         {t(`${I18N_PREFIX}.tracingDescription`)}
       </div>
       <Divider className='my-3' />
@@ -211,7 +211,7 @@ const ConfigPopup: FC<PopupProps> = ({
               <div className='mt-2 space-y-2'>
                 {configuredProviderPanel()}
               </div>
-              <div className='mt-3 system-xs-medium-uppercase text-text-tertiary'>{t(`${I18N_PREFIX}.configProviderTitle.moreProvider`)}</div>
+              <div className='system-xs-medium-uppercase mt-3 text-text-tertiary'>{t(`${I18N_PREFIX}.configProviderTitle.moreProvider`)}</div>
               <div className='mt-2 space-y-2'>
                 {moreProviderPanel()}
               </div>

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

@@ -26,7 +26,7 @@ const Field: FC<Props> = ({
   return (
     <div className={cn(className)}>
       <div className='flex py-[7px]'>
-        <div className={cn(labelClassName, 'flex items-center h-[18px] text-[13px] font-medium text-text-primary')}>{label} </div>
+        <div className={cn(labelClassName, 'flex h-[18px] items-center text-[13px] font-medium text-text-primary')}>{label} </div>
         {isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>}
       </div>
       <Input

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

@@ -31,7 +31,7 @@ const Title = ({
   const { t } = useTranslation()
 
   return (
-    <div className={cn('flex items-center system-xl-semibold text-text-primary', className)}>
+    <div className={cn('system-xl-semibold flex items-center text-text-primary', className)}>
       {t('common.appMenus.overview')}
     </div>
   )
@@ -143,7 +143,7 @@ const Panel: FC = () => {
   }, [setControlShowPopup])
   if (!isLoaded) {
     return (
-      <div className='flex items-center justify-between mb-3'>
+      <div className='mb-3 flex items-center justify-between'>
         <Title className='h-[41px]' />
         <div className='w-[200px]'>
           <Loading />
@@ -153,19 +153,19 @@ const Panel: FC = () => {
   }
 
   return (
-    <div className={cn('mb-3 flex justify-between items-center')}>
+    <div className={cn('mb-3 flex items-center justify-between')}>
       <Title className='h-[41px]' />
       <div
         className={cn(
-          'flex items-center p-2 rounded-xl bg-background-default-dodge border-t border-l-[0.5px] border-effects-highlight shadow-xs cursor-pointer hover:bg-background-default-lighter hover:border-effects-highlight-lightmode-off',
-          controlShowPopup && 'bg-background-default-lighter border-effects-highlight-lightmode-off',
+          'flex cursor-pointer items-center rounded-xl border-l-[0.5px] border-t border-effects-highlight bg-background-default-dodge p-2 shadow-xs hover:border-effects-highlight-lightmode-off hover:bg-background-default-lighter',
+          controlShowPopup && 'border-effects-highlight-lightmode-off bg-background-default-lighter',
         )}
         onClick={showPopup}
       >
         {!inUseTracingProvider && (
           <>
             <TracingIcon size='md' />
-            <div className='mx-2 system-sm-semibold text-text-secondary'>{t(`${I18N_PREFIX}.title`)}</div>
+            <div className='system-sm-semibold mx-2 text-text-secondary'>{t(`${I18N_PREFIX}.title`)}</div>
             <div className='flex items-center' onClick={e => e.stopPropagation()}>
               <ConfigButton
                 appId={appId}
@@ -184,8 +184,8 @@ const Panel: FC = () => {
               />
             </div>
             <Divider type='vertical' className='h-3.5' />
-            <div className='p-1 rounded-md'>
-              <RiArrowDownDoubleLine className='w-4 h-4 text-text-tertiary' />
+            <div className='rounded-md p-1'>
+              <RiArrowDownDoubleLine className='h-4 w-4 text-text-tertiary' />
             </div>
           </>
         )}
@@ -193,7 +193,7 @@ const Panel: FC = () => {
           <>
             <div className='ml-4 mr-1 flex items-center'>
               <Indicator color={enabled ? 'green' : 'gray'} />
-              <div className='ml-1.5 system-xs-semibold-uppercase text-text-tertiary'>
+              <div className='system-xs-semibold-uppercase ml-1.5 text-text-tertiary'>
                 {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
               </div>
             </div>

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

@@ -167,11 +167,11 @@ const ProviderConfigModal: FC<Props> = ({
       {!isShowRemoveConfirm
         ? (
           <PortalToFollowElem open>
-            <PortalToFollowElemContent className='w-full h-full z-[60]'>
+            <PortalToFollowElemContent className='z-[60] h-full w-full'>
               <div className='fixed inset-0 flex items-center justify-center bg-background-overlay'>
-                <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-components-panel-bg shadow-xl rounded-2xl overflow-y-auto'>
+                <div className='mx-2 max-h-[calc(100vh-120px)] w-[640px] overflow-y-auto rounded-2xl bg-components-panel-bg shadow-xl'>
                   <div className='px-8 pt-8'>
-                    <div className='flex justify-between items-center mb-4'>
+                    <div className='mb-4 flex items-center justify-between'>
                       <div className='title-2xl-semi-bold text-text-primary'>{t(`${I18N_PREFIX}.title`)}{t(`app.tracing.${type}.title`)}</div>
                     </div>
 
@@ -265,14 +265,14 @@ const ProviderConfigModal: FC<Props> = ({
                       )}
 
                     </div>
-                    <div className='my-8 flex justify-between items-center h-8'>
+                    <div className='my-8 flex h-8 items-center justify-between'>
                       <a
-                        className='flex items-center space-x-1 leading-[18px] text-xs font-normal text-[#155EEF]'
+                        className='flex items-center space-x-1 text-xs font-normal leading-[18px] text-[#155EEF]'
                         target='_blank'
                         href={docURL[type]}
                       >
                         <span>{t(`${I18N_PREFIX}.viewDocsLink`, { key: t(`app.tracing.${type}.title`) })}</span>
-                        <LinkExternal02 className='w-3 h-3' />
+                        <LinkExternal02 className='h-3 w-3' />
                       </a>
                       <div className='flex items-center'>
                         {isEdit && (
@@ -305,11 +305,11 @@ const ProviderConfigModal: FC<Props> = ({
                     </div>
                   </div>
                   <div className='border-t-[0.5px] border-divider-regular'>
-                    <div className='flex justify-center items-center py-3 bg-background-section-burn text-xs text-text-tertiary'>
-                      <Lock01 className='mr-1 w-3 h-3 text-text-tertiary' />
+                    <div className='flex items-center justify-center bg-background-section-burn py-3 text-xs text-text-tertiary'>
+                      <Lock01 className='mr-1 h-3 w-3 text-text-tertiary' />
                       {t('common.modelProvider.encrypted.front')}
                       <a
-                        className='text-primary-600 mx-1'
+                        className='mx-1 text-primary-600'
                         target='_blank' rel='noopener noreferrer'
                         href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
                       >

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

@@ -65,36 +65,36 @@ const ProviderPanel: FC<Props> = ({
   return (
     <div
       className={cn(
-        'px-4 py-3 rounded-xl border-[1.5px] bg-background-section-burn',
-        isChosen ? 'bg-background-section border-components-option-card-option-selected-border' : 'border-transparent',
+        'rounded-xl border-[1.5px] bg-background-section-burn px-4 py-3',
+        isChosen ? 'border-components-option-card-option-selected-border bg-background-section' : 'border-transparent',
         !isChosen && hasConfigured && !readOnly && 'cursor-pointer',
       )}
       onClick={handleChosen}
     >
-      <div className={'flex justify-between items-center space-x-1'}>
+      <div className={'flex items-center justify-between space-x-1'}>
         <div className='flex items-center'>
           <Icon className='h-6' />
-          {isChosen && <div className='ml-1 flex items-center h-4 px-1 rounded-[4px] border border-text-accent-secondary system-2xs-medium-uppercase text-text-accent-secondary'>{t(`${I18N_PREFIX}.inUse`)}</div>}
+          {isChosen && <div className='system-2xs-medium-uppercase ml-1 flex h-4 items-center rounded-[4px] border border-text-accent-secondary px-1 text-text-accent-secondary'>{t(`${I18N_PREFIX}.inUse`)}</div>}
         </div>
         {!readOnly && (
-          <div className={'flex justify-between items-center space-x-1'}>
+          <div className={'flex items-center justify-between space-x-1'}>
             {hasConfigured && (
-              <div className='flex px-2 items-center h-6 bg-components-button-secondary-bg rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs cursor-pointer text-text-secondary space-x-1' onClick={viewBtnClick} >
-                <View className='w-3 h-3' />
+              <div className='flex h-6 cursor-pointer items-center space-x-1 rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-text-secondary shadow-xs' onClick={viewBtnClick} >
+                <View className='h-3 w-3' />
                 <div className='text-xs font-medium'>{t(`${I18N_PREFIX}.view`)}</div>
               </div>
             )}
             <div
-              className='flex px-2 items-center h-6 bg-components-button-secondary-bg rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs cursor-pointer text-text-secondary space-x-1'
+              className='flex h-6 cursor-pointer items-center space-x-1 rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-text-secondary shadow-xs'
               onClick={handleConfigBtnClick}
             >
-              <RiEqualizer2Line className='w-3 h-3' />
+              <RiEqualizer2Line className='h-3 w-3' />
               <div className='text-xs font-medium'>{t(`${I18N_PREFIX}.config`)}</div>
             </div>
           </div>
         )}
       </div>
-      <div className='mt-2 system-xs-regular text-text-tertiary'>
+      <div className='system-xs-regular mt-2 text-text-tertiary'>
         {t(`${I18N_PREFIX}.${type}.description`)}
       </div>
     </div>

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

@@ -21,7 +21,7 @@ const TracingIcon: FC<Props> = ({
   const sizeClass = sizeClassMap[size]
   return (
     <div className={cn(className, sizeClass, 'bg-primary-500 shadow-md')}>
-      <Icon className='w-full h-full' />
+      <Icon className='h-full w-full' />
     </div>
   )
 }

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

@@ -4,7 +4,7 @@ import Workflow from '@/app/components/workflow'
 
 const Page = () => {
   return (
-    <div className='w-full h-full overflow-x-auto'>
+    <div className='h-full w-full overflow-x-auto'>
       <Workflow />
     </div>
   )

web/app/(commonLayout)/apps/AppCard.tsx

@@ -226,37 +226,37 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
     }
     return (
       <div className="relative w-full py-1" onMouseLeave={onMouseLeave}>
-        <button className='h-8 w-[calc(100%_-_8px)] py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-state-base-hover rounded-lg cursor-pointer' onClick={onClickSettings}>
-          <span className='text-text-secondary system-sm-regular'>{t('app.editApp')}</span>
+        <button className='mx-1 flex h-8 w-[calc(100%_-_8px)] cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickSettings}>
+          <span className='system-sm-regular text-text-secondary'>{t('app.editApp')}</span>
         </button>
         <Divider className="!my-1" />
-        <button className='h-8 w-[calc(100%_-_8px)] py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-state-base-hover rounded-lg cursor-pointer' onClick={onClickDuplicate}>
-          <span className='text-text-secondary system-sm-regular'>{t('app.duplicate')}</span>
+        <button className='mx-1 flex h-8 w-[calc(100%_-_8px)] cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickDuplicate}>
+          <span className='system-sm-regular text-text-secondary'>{t('app.duplicate')}</span>
         </button>
-        <button className='h-8 w-[calc(100%_-_8px)] py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-state-base-hover rounded-lg cursor-pointer' onClick={onClickExport}>
-          <span className='text-text-secondary system-sm-regular'>{t('app.export')}</span>
+        <button className='mx-1 flex h-8 w-[calc(100%_-_8px)] cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickExport}>
+          <span className='system-sm-regular text-text-secondary'>{t('app.export')}</span>
         </button>
         {(app.mode === 'completion' || app.mode === 'chat') && (
           <>
             <Divider className="!my-1" />
             <div
-              className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-state-base-hover rounded-lg cursor-pointer'
+              className='mx-1 flex h-9 cursor-pointer items-center rounded-lg px-3 py-2 hover:bg-state-base-hover'
               onClick={onClickSwitch}
             >
-              <span className='text-text-secondary text-sm leading-5'>{t('app.switch')}</span>
+              <span className='text-sm leading-5 text-text-secondary'>{t('app.switch')}</span>
             </div>
           </>
         )}
         <Divider className="!my-1" />
-        <button className='h-8 w-[calc(100%_-_8px)] py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-state-base-hover rounded-lg cursor-pointer' onClick={onClickInstalledApp}>
-          <span className='text-text-secondary system-sm-regular'>{t('app.openInExplore')}</span>
+        <button className='mx-1 flex h-8 w-[calc(100%_-_8px)] cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickInstalledApp}>
+          <span className='system-sm-regular text-text-secondary'>{t('app.openInExplore')}</span>
         </button>
         <Divider className="!my-1" />
         <div
-          className='group h-8 w-[calc(100%_-_8px)] py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-state-destructive-hover rounded-lg cursor-pointer'
+          className='group mx-1 flex h-8 w-[calc(100%_-_8px)] cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-destructive-hover'
           onClick={onClickDelete}
         >
-          <span className='text-text-secondary system-sm-regular group-hover:text-text-destructive'>
+          <span className='system-sm-regular text-text-secondary group-hover:text-text-destructive'>
             {t('common.operation.delete')}
           </span>
         </div>
@@ -276,9 +276,9 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           e.preventDefault()
           getRedirection(isCurrentWorkspaceEditor, app, push)
         }}
-        className='relative h-[160px] group col-span-1 bg-components-card-bg border-[1px] border-solid border-components-card-border rounded-xl shadow-sm inline-flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'
+        className='group relative col-span-1 inline-flex h-[160px] cursor-pointer flex-col rounded-xl border-[1px] border-solid border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg'
       >
-        <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
+        <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
           <div className='relative shrink-0'>
             <AppIcon
               size="large"
@@ -287,13 +287,13 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
               background={app.icon_background}
               imageUrl={app.icon_url}
             />
-            <AppTypeIcon type={app.mode} wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm' className='w-3 h-3' />
+            <AppTypeIcon type={app.mode} wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm' className='h-3 w-3' />
           </div>
-          <div className='grow w-0 py-[1px]'>
-            <div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'>
+          <div className='w-0 grow py-[1px]'>
+            <div className='flex items-center text-sm font-semibold leading-5 text-text-secondary'>
               <div className='truncate' title={app.name}>{app.name}</div>
             </div>
-            <div className='flex items-center text-[10px] leading-[18px] text-text-tertiary font-medium'>
+            <div className='flex items-center text-[10px] font-medium leading-[18px] text-text-tertiary'>
               {app.mode === 'advanced-chat' && <div className='truncate'>{t('app.types.advanced').toUpperCase()}</div>}
               {app.mode === 'chat' && <div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>}
               {app.mode === 'agent-chat' && <div className='truncate'>{t('app.types.agent').toUpperCase()}</div>}
@@ -311,17 +311,17 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           </div>
         </div>
         <div className={cn(
-          'absolute bottom-1 left-0 right-0 items-center shrink-0 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]',
+          'absolute bottom-1 left-0 right-0 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
           tags.length ? 'flex' : '!hidden group-hover:!flex',
         )}>
           {isCurrentWorkspaceEditor && (
             <>
-              <div className={cn('grow flex items-center gap-1 w-0')} onClick={(e) => {
+              <div className={cn('flex w-0 grow items-center gap-1')} onClick={(e) => {
                 e.stopPropagation()
                 e.preventDefault()
               }}>
                 <div className={cn(
-                  'group-hover:!block group-hover:!mr-0 mr-[41px] grow w-full',
+                  'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
                   tags.length ? '!block' : '!hidden',
                 )}>
                   <TagSelector
@@ -335,23 +335,23 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
                   />
                 </div>
               </div>
-              <div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px]' />
-              <div className='!hidden group-hover:!flex shrink-0'>
+              <div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 group-hover:!flex' />
+              <div className='!hidden shrink-0 group-hover:!flex'>
                 <CustomPopover
                   htmlContent={<Operations />}
                   position="br"
                   trigger="click"
                   btnElement={
                     <div
-                      className='flex items-center justify-center w-8 h-8 cursor-pointer rounded-md'
+                      className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-md'
                     >
-                      <RiMoreFill className='w-4 h-4 text-text-tertiary' />
+                      <RiMoreFill className='h-4 w-4 text-text-tertiary' />
                     </div>
                   }
                   btnClassName={open =>
                     cn(
                       open ? '!bg-black/5 !shadow-none' : '!bg-transparent',
-                      'h-8 w-8 !p-2 rounded-md border-none hover:!bg-black/5',
+                      'h-8 w-8 rounded-md border-none !p-2 hover:!bg-black/5',
                     )
                   }
                   popupClassName={
@@ -359,7 +359,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
                       ? '!w-[256px] translate-x-[-224px]'
                       : '!w-[160px] translate-x-[-128px]'
                   }
-                  className={'h-fit !z-20'}
+                  className={'!z-20 h-fit'}
                 />
               </div>
             </>

web/app/(commonLayout)/apps/Apps.tsx

@@ -78,10 +78,10 @@ const Apps = () => {
 
   const anchorRef = useRef<HTMLDivElement>(null)
   const options = [
-    { value: 'all', text: t('app.types.all'), icon: <RiApps2Line className='w-[14px] h-[14px] mr-1' /> },
-    { value: 'chat', text: t('app.types.chatbot'), icon: <RiMessage3Line className='w-[14px] h-[14px] mr-1' /> },
-    { value: 'agent-chat', text: t('app.types.agent'), icon: <RiRobot3Line className='w-[14px] h-[14px] mr-1' /> },
-    { value: 'workflow', text: t('app.types.workflow'), icon: <RiExchange2Line className='w-[14px] h-[14px] mr-1' /> },
+    { value: 'all', text: t('app.types.all'), icon: <RiApps2Line className='mr-1 h-[14px] w-[14px]' /> },
+    { value: 'chat', text: t('app.types.chatbot'), icon: <RiMessage3Line className='mr-1 h-[14px] w-[14px]' /> },
+    { value: 'agent-chat', text: t('app.types.agent'), icon: <RiRobot3Line className='mr-1 h-[14px] w-[14px]' /> },
+    { value: 'workflow', text: t('app.types.workflow'), icon: <RiExchange2Line className='mr-1 h-[14px] w-[14px]' /> },
   ]
 
   useEffect(() => {
@@ -134,7 +134,7 @@ const Apps = () => {
 
   return (
     <>
-      <div className='sticky top-0 flex justify-between items-center pt-4 px-12 pb-2 leading-[56px] bg-background-body z-10 flex-wrap gap-y-2'>
+      <div className='sticky top-0 z-10 flex flex-wrap items-center justify-between gap-y-2 bg-background-body px-12 pb-2 pt-4 leading-[56px]'>
         <TabSliderNew
           value={activeTab}
           onChange={setActiveTab}
@@ -159,14 +159,14 @@ const Apps = () => {
         </div>
       </div>
       {(data && data[0].total > 0)
-        ? <div className='grid content-start grid-cols-1 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6 gap-4 px-12 pt-2 grow relative'>
+        ? <div className='relative grid grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6'>
           {isCurrentWorkspaceEditor
             && <NewAppCard onSuccess={mutate} />}
           {data.map(({ data: apps }) => apps.map(app => (
             <AppCard key={app.id} app={app} onRefresh={mutate} />
           )))}
         </div>
-        : <div className='grid content-start grid-cols-1 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6 gap-4 px-12 pt-2 grow relative overflow-hidden'>
+        : <div className='relative grid grow grid-cols-1 content-start gap-4 overflow-hidden px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6'>
           {isCurrentWorkspaceEditor
             && <NewAppCard className='z-10' onSuccess={mutate} />}
           <NoAppsFound />
@@ -186,14 +186,14 @@ function NoAppsFound() {
   const { t } = useTranslation()
   function renderDefaultCard() {
     const defaultCards = Array.from({ length: 36 }, (_, index) => (
-      <div key={index} className='h-[160px] inline-flex rounded-xl bg-background-default-lighter'></div>
+      <div key={index} className='inline-flex h-[160px] rounded-xl bg-background-default-lighter'></div>
     ))
     return defaultCards
   }
   return (
     <>
       {renderDefaultCard()}
-      <div className='absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-gradient-to-t from-background-body to-transparent'>
+      <div className='absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center bg-gradient-to-t from-background-body to-transparent'>
         <span className='system-md-medium text-text-tertiary'>{t('app.newApp.noAppsFound')}</span>
       </div>
     </>

web/app/(commonLayout)/apps/NewAppCard.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { forwardRef, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import {
   useRouter,
   useSearchParams,
@@ -18,7 +18,15 @@ export type CreateAppCardProps = {
   onSuccess?: () => void
 }
 
-const CreateAppCard = forwardRef<HTMLDivElement, CreateAppCardProps>(({ className, onSuccess }, ref) => {
+const CreateAppCard = (
+  {
+    ref,
+    className,
+    onSuccess,
+  }: CreateAppCardProps & {
+    ref: React.RefObject<HTMLDivElement>;
+  },
+) => {
   const { t } = useTranslation()
   const { onPlanInfoChanged } = useProviderContext()
   const searchParams = useSearchParams()
@@ -39,22 +47,22 @@ const CreateAppCard = forwardRef<HTMLDivElement, CreateAppCardProps>(({ classNam
   return (
     <div
       ref={ref}
-      className={cn('relative col-span-1 inline-flex flex-col justify-between h-[160px] bg-components-card-bg rounded-xl border-[0.5px] border-components-card-border', className)}
+      className={cn('relative col-span-1 inline-flex h-[160px] flex-col justify-between rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg', className)}
     >
-      <div className='grow p-2 rounded-t-xl'>
-        <div className='px-6 pt-2 pb-1 text-xs font-medium leading-[18px] text-text-tertiary'>{t('app.createApp')}</div>
-        <button className='w-full flex items-center mb-1 px-6 py-[7px] rounded-lg text-[13px] font-medium leading-[18px] text-text-tertiary cursor-pointer hover:text-text-secondary hover:bg-state-base-hover' onClick={() => setShowNewAppModal(true)}>
-          <FilePlus01 className='shrink-0 mr-2 w-4 h-4' />
+      <div className='grow rounded-t-xl p-2'>
+        <div className='px-6 pb-1 pt-2 text-xs font-medium leading-[18px] text-text-tertiary'>{t('app.createApp')}</div>
+        <button className='mb-1 flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary' onClick={() => setShowNewAppModal(true)}>
+          <FilePlus01 className='mr-2 h-4 w-4 shrink-0' />
           {t('app.newApp.startFromBlank')}
         </button>
-        <button className='w-full flex items-center px-6 py-[7px] rounded-lg text-[13px] font-medium leading-[18px] text-text-tertiary cursor-pointer hover:text-text-secondary hover:bg-state-base-hover' onClick={() => setShowNewAppTemplateDialog(true)}>
-          <FilePlus02 className='shrink-0 mr-2 w-4 h-4' />
+        <button className='flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary' onClick={() => setShowNewAppTemplateDialog(true)}>
+          <FilePlus02 className='mr-2 h-4 w-4 shrink-0' />
           {t('app.newApp.startFromTemplate')}
         </button>
         <button
           onClick={() => setShowCreateFromDSLModal(true)}
-          className='w-full flex items-center px-6 py-[7px] rounded-lg text-[13px] font-medium leading-[18px] text-text-tertiary cursor-pointer hover:text-text-secondary hover:bg-state-base-hover'>
-          <FileArrow01 className='shrink-0 mr-2 w-4 h-4' />
+          className='flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary'>
+          <FileArrow01 className='mr-2 h-4 w-4 shrink-0' />
           {t('app.importDSL')}
         </button>
       </div>
@@ -103,7 +111,7 @@ const CreateAppCard = forwardRef<HTMLDivElement, CreateAppCardProps>(({ classNam
       />
     </div>
   )
-})
+}
 
 CreateAppCard.displayName = 'CreateAppCard'
 export default CreateAppCard

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

@@ -13,17 +13,17 @@ const AppList = () => {
   const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
 
   return (
-    <div className='relative flex flex-col overflow-y-auto bg-background-body shrink-0 h-0 grow'>
+    <div className='relative flex h-0 shrink-0 grow flex-col overflow-y-auto bg-background-body'>
       <Apps />
-      {systemFeatures.license.status === LicenseStatus.NONE && <footer className='px-12 py-6 grow-0 shrink-0'>
-        <h3 className='text-xl font-semibold leading-tight text-gradient'>{t('app.join')}</h3>
-        <p className='mt-1 system-sm-regular text-text-tertiary'>{t('app.communityIntro')}</p>
-        <div className='flex items-center gap-2 mt-3'>
+      {systemFeatures.license.status === LicenseStatus.NONE && <footer className='shrink-0 grow-0 px-12 py-6'>
+        <h3 className='text-gradient text-xl font-semibold leading-tight'>{t('app.join')}</h3>
+        <p className='system-sm-regular mt-1 text-text-tertiary'>{t('app.communityIntro')}</p>
+        <div className='mt-3 flex items-center gap-2'>
           <Link className={style.socialMediaLink} target='_blank' rel='noopener noreferrer' href='https://github.com/langgenius/dify'>
-            <RiGithubFill className='w-5 h-5 text-text-tertiary' />
+            <RiGithubFill className='h-5 w-5 text-text-tertiary' />
           </Link>
           <Link className={style.socialMediaLink} target='_blank' rel='noopener noreferrer' href='https://discord.gg/FngNHpbcY7'>
-            <RiDiscordFill className='w-5 h-5 text-text-tertiary' />
+            <RiDiscordFill className='h-5 w-5 text-text-tertiary' />
           </Link>
         </div>
       </footer>}

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

@@ -2,12 +2,17 @@ import React from 'react'
 import MainDetail from '@/app/components/datasets/documents/detail'
 
 export type IDocumentDetailProps = {
-  params: { datasetId: string; documentId: string }
+  params: Promise<{ datasetId: string; documentId: string }>
 }
 
-const DocumentDetail = async ({
-  params: { datasetId, documentId },
-}: IDocumentDetailProps) => {
+const DocumentDetail = async (props: IDocumentDetailProps) => {
+  const params = await props.params
+
+  const {
+    datasetId,
+    documentId,
+  } = params
+
   return (
     <MainDetail datasetId={datasetId} documentId={documentId} />
   )

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

@@ -2,12 +2,17 @@ import React from 'react'
 import Settings from '@/app/components/datasets/documents/detail/settings'
 
 export type IProps = {
-  params: { datasetId: string; documentId: string }
+  params: Promise<{ datasetId: string; documentId: string }>
 }
 
-const DocumentSettings = async ({
-  params: { datasetId, documentId },
-}: IProps) => {
+const DocumentSettings = async (props: IProps) => {
+  const params = await props.params
+
+  const {
+    datasetId,
+    documentId,
+  } = params
+
   return (
     <Settings datasetId={datasetId} documentId={documentId} />
   )

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

@@ -2,12 +2,16 @@ import React from 'react'
 import DatasetUpdateForm from '@/app/components/datasets/create'
 
 export type IProps = {
-  params: { datasetId: string }
+  params: Promise<{ datasetId: string }>
 }
 
-const Create = async ({
-  params: { datasetId },
-}: IProps) => {
+const Create = async (props: IProps) => {
+  const params = await props.params
+
+  const {
+    datasetId,
+  } = params
+
   return (
     <DatasetUpdateForm datasetId={datasetId} />
   )

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

@@ -2,12 +2,16 @@ import React from 'react'
 import Main from '@/app/components/datasets/documents'
 
 export type IProps = {
-  params: { datasetId: string }
+  params: Promise<{ datasetId: string }>
 }
 
-const Documents = async ({
-  params: { datasetId },
-}: IProps) => {
+const Documents = async (props: IProps) => {
+  const params = await props.params
+
+  const {
+    datasetId,
+  } = params
+
   return (
     <Main datasetId={datasetId} />
   )

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

@@ -2,12 +2,16 @@ import React from 'react'
 import Main from '@/app/components/datasets/hit-testing'
 
 type Props = {
-  params: { datasetId: string }
+  params: Promise<{ datasetId: string }>
 }
 
-const HitTesting = ({
-  params: { datasetId },
-}: Props) => {
+const HitTesting = async (props: Props) => {
+  const params = await props.params
+
+  const {
+    datasetId,
+  } = params
+
   return (
     <Main datasetId={datasetId} />
   )

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

@@ -3,13 +3,13 @@ import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
 import Form from '@/app/components/datasets/settings/form'
 
 const Settings = async () => {
-  const locale = getLocaleOnServer()
+  const locale = await getLocaleOnServer()
   const { t } = await translate(locale, 'dataset-settings')
 
   return (
     <div className='h-full overflow-y-auto'>
       <div className='px-6 py-3'>
-        <div className='mb-1 system-xl-semibold text-text-primary'>{t('title')}</div>
+        <div className='system-xl-semibold mb-1 text-text-primary'>{t('title')}</div>
         <div className='system-sm-regular text-text-tertiary'>{t('desc')}</div>
       </div>
       <Form />

web/app/(commonLayout)/datasets/ApiServer.tsx

@@ -15,22 +15,22 @@ const ApiServer: FC<ApiServerProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className='flex items-center flex-wrap gap-y-2'>
-      <div className='flex items-center mr-2 pl-1.5 pr-1 h-8 bg-white/80 border-[0.5px] border-white rounded-lg leading-5'>
-        <div className='mr-0.5 px-1.5 h-5 border border-gray-200 text-[11px] text-gray-500 rounded-md shrink-0'>{t('appApi.apiServer')}</div>
-        <div className='px-1 truncate w-fit sm:w-[248px] text-[13px] font-medium text-gray-800'>{apiBaseUrl}</div>
-        <div className='mx-1 w-[1px] h-[14px] bg-gray-200'></div>
+    <div className='flex flex-wrap items-center gap-y-2'>
+      <div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-white bg-white/80 pl-1.5 pr-1 leading-5'>
+        <div className='mr-0.5 h-5 shrink-0 rounded-md border border-gray-200 px-1.5 text-[11px] text-gray-500'>{t('appApi.apiServer')}</div>
+        <div className='w-fit truncate px-1 text-[13px] font-medium text-gray-800 sm:w-[248px]'>{apiBaseUrl}</div>
+        <div className='mx-1 h-[14px] w-[1px] bg-gray-200'></div>
         <CopyFeedback
           content={apiBaseUrl}
           selectorId={randomString(8)}
-          className={'!w-6 !h-6 hover:bg-gray-200'}
+          className={'!h-6 !w-6 hover:bg-gray-200'}
         />
       </div>
-      <div className='flex items-center mr-2 px-3 h-8 bg-[#ECFDF3] text-xs font-semibold text-[#039855] rounded-lg border-[0.5px] border-[#D1FADF]'>
+      <div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-[#D1FADF] bg-[#ECFDF3] px-3 text-xs font-semibold text-[#039855]'>
         {t('appApi.ok')}
       </div>
       <SecretKeyButton
-        className='shrink-0 !h-8 bg-white'
+        className='!h-8 shrink-0 bg-white'
       />
     </div>
   )

web/app/(commonLayout)/datasets/Container.tsx

@@ -82,8 +82,8 @@ const Container = () => {
   }, [currentWorkspace, router])
 
   return (
-    <div ref={containerRef} className='grow relative flex flex-col bg-background-body overflow-y-auto scroll-container'>
-      <div className='sticky top-0 flex justify-between pt-4 px-12 pb-2 leading-[56px] bg-background-body z-10 flex-wrap gap-y-2'>
+    <div ref={containerRef} className='scroll-container relative flex grow flex-col overflow-y-auto bg-background-body'>
+      <div className='sticky top-0 z-10 flex flex-wrap justify-between gap-y-2 bg-background-body px-12 pb-2 pt-4 leading-[56px]'>
         <TabSliderNew
           value={activeTab}
           onChange={newActiveTab => setActiveTab(newActiveTab)}
@@ -108,13 +108,13 @@ const Container = () => {
               onChange={e => handleKeywordsChange(e.target.value)}
               onClear={() => handleKeywordsChange('')}
             />
-            <div className="w-[1px] h-4 bg-divider-regular" />
+            <div className="h-4 w-[1px] bg-divider-regular" />
             <Button
-              className='gap-0.5 shadows-shadow-xs'
+              className='shadows-shadow-xs gap-0.5'
               onClick={() => setShowExternalApiPanel(true)}
             >
-              <ApiConnectionMod className='w-4 h-4 text-components-button-secondary-text' />
-              <div className='flex px-0.5 justify-center items-center gap-1 text-components-button-secondary-text system-sm-medium'>{t('dataset.externalAPIPanelTitle')}</div>
+              <ApiConnectionMod className='h-4 w-4 text-components-button-secondary-text' />
+              <div className='system-sm-medium flex items-center justify-center gap-1 px-0.5 text-components-button-secondary-text'>{t('dataset.externalAPIPanelTitle')}</div>
             </Button>
           </div>
         )}

web/app/(commonLayout)/datasets/DatasetCard.tsx

@@ -84,17 +84,17 @@ const DatasetCard = ({
     }
     return (
       <div className="relative w-full py-1" onMouseLeave={onMouseLeave}>
-        <div className='h-8 py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-state-base-hover rounded-lg cursor-pointer' onClick={onClickRename}>
-          <span className='text-text-secondary text-sm'>{t('common.operation.settings')}</span>
+        <div className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickRename}>
+          <span className='text-sm text-text-secondary'>{t('common.operation.settings')}</span>
         </div>
         {props.showDelete && (
           <>
             <Divider className="!my-1" />
             <div
-              className='group h-8 py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-state-destructive-hover rounded-lg cursor-pointer'
+              className='group mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-destructive-hover'
               onClick={onClickDelete}
             >
-              <span className={cn('text-text-secondary text-sm', 'group-hover:text-text-destructive')}>
+              <span className={cn('text-sm text-text-secondary', 'group-hover:text-text-destructive')}>
                 {t('common.operation.delete')}
               </span>
             </div>
@@ -111,7 +111,7 @@ const DatasetCard = ({
   return (
     <>
       <div
-        className='group relative col-span-1 bg-components-card-bg border-[0.5px] border-solid border-components-card-border rounded-xl shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'
+        className='group relative col-span-1 flex min-h-[160px] cursor-pointer flex-col rounded-xl border-[0.5px] border-solid border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg'
         data-disable-nprogress={true}
         onClick={(e) => {
           e.preventDefault()
@@ -121,25 +121,25 @@ const DatasetCard = ({
         }}
       >
         {isExternalProvider(dataset.provider) && <CornerLabel label='External' className='absolute right-0' labelClassName='rounded-tr-xl' />}
-        <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
+        <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
           <div className={cn(
-            'shrink-0 flex items-center justify-center p-2.5 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#E0EAFF]',
+            'flex shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF] p-2.5',
             !dataset.embedding_available && 'opacity-50 hover:opacity-100',
           )}>
-            <Folder className='w-5 h-5 text-[#444CE7]' />
+            <Folder className='h-5 w-5 text-[#444CE7]' />
           </div>
-          <div className='grow w-0 py-[1px]'>
-            <div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'>
-              <div className={cn('truncate', !dataset.embedding_available && 'opacity-50 hover:opacity-100 text-text-tertiary')} title={dataset.name}>{dataset.name}</div>
+          <div className='w-0 grow py-[1px]'>
+            <div className='flex items-center text-sm font-semibold leading-5 text-text-secondary'>
+              <div className={cn('truncate', !dataset.embedding_available && 'text-text-tertiary opacity-50 hover:opacity-100')} title={dataset.name}>{dataset.name}</div>
               {!dataset.embedding_available && (
                 <Tooltip
                   popupContent={t('dataset.unavailableTip')}
                 >
-                  <span className='shrink-0 inline-flex w-max ml-1 px-1 border border-divider-regular rounded-md text-text-tertiary text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
+                  <span className='ml-1 inline-flex w-max shrink-0 rounded-md border border-divider-regular px-1 text-xs font-normal leading-[18px] text-text-tertiary'>{t('dataset.unavailable')}</span>
                 </Tooltip>
               )}
             </div>
-            <div className='flex items-center mt-[1px] text-xs leading-[18px] text-text-tertiary'>
+            <div className='mt-[1px] flex items-center text-xs leading-[18px] text-text-tertiary'>
               <div
                 className={cn('truncate', (!dataset.embedding_available || !dataset.document_count) && 'opacity-50')}
                 title={dataset.provider === 'external' ? `${dataset.app_count}${t('dataset.appCount')}` : `${dataset.document_count}${t('dataset.documentCount')} · ${Math.round(dataset.word_count / 1000)}${t('dataset.wordCount')} · ${dataset.app_count}${t('dataset.appCount')}`}
@@ -150,9 +150,9 @@ const DatasetCard = ({
                   </>
                   : <>
                     <span>{dataset.document_count}{t('dataset.documentCount')}</span>
-                    <span className='shrink-0 mx-0.5 w-1 text-text-tertiary'>·</span>
+                    <span className='mx-0.5 w-1 shrink-0 text-text-tertiary'>·</span>
                     <span>{Math.round(dataset.word_count / 1000)}{t('dataset.wordCount')}</span>
-                    <span className='shrink-0 mx-0.5 w-1 text-text-tertiary'>·</span>
+                    <span className='mx-0.5 w-1 shrink-0 text-text-tertiary'>·</span>
                     <span>{dataset.app_count}{t('dataset.appCount')}</span>
                   </>
                 }
@@ -162,7 +162,7 @@ const DatasetCard = ({
         </div>
         <div
           className={cn(
-            'grow mb-2 px-[14px] max-h-[72px] text-xs leading-normal text-text-tertiary group-hover:line-clamp-2 group-hover:max-h-[36px]',
+            'mb-2 max-h-[72px] grow px-[14px] text-xs leading-normal text-text-tertiary group-hover:line-clamp-2 group-hover:max-h-[36px]',
             tags.length ? 'line-clamp-2' : 'line-clamp-4',
             !dataset.embedding_available && 'opacity-50 hover:opacity-100',
           )}
@@ -170,15 +170,15 @@ const DatasetCard = ({
           {dataset.description}
         </div>
         <div className={cn(
-          'items-center shrink-0 mt-1 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]',
+          'mt-1 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
           tags.length ? 'flex' : '!hidden group-hover:!flex',
         )}>
-          <div className={cn('grow flex items-center gap-1 w-0', !dataset.embedding_available && 'opacity-50 hover:opacity-100')} onClick={(e) => {
+          <div className={cn('flex w-0 grow items-center gap-1', !dataset.embedding_available && 'opacity-50 hover:opacity-100')} onClick={(e) => {
             e.stopPropagation()
             e.preventDefault()
           }}>
             <div className={cn(
-              'group-hover:!block group-hover:!mr-0 mr-[41px] grow w-full',
+              'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
               tags.length ? '!block' : '!hidden',
             )}>
               <TagSelector
@@ -192,26 +192,26 @@ const DatasetCard = ({
               />
             </div>
           </div>
-          <div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px] bg-divider-regular' />
-          <div className='!hidden group-hover:!flex shrink-0'>
+          <div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 bg-divider-regular group-hover:!flex' />
+          <div className='!hidden shrink-0 group-hover:!flex'>
             <CustomPopover
               htmlContent={<Operations showDelete={!isCurrentWorkspaceDatasetOperator} />}
               position="br"
               trigger="click"
               btnElement={
                 <div
-                  className='flex items-center justify-center w-8 h-8 cursor-pointer rounded-md'
+                  className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-md'
                 >
-                  <RiMoreFill className='w-4 h-4 text-text-secondary' />
+                  <RiMoreFill className='h-4 w-4 text-text-secondary' />
                 </div>
               }
               btnClassName={open =>
                 cn(
                   open ? '!bg-black/5 !shadow-none' : '!bg-transparent',
-                  'h-8 w-8 !p-2 rounded-md border-none hover:!bg-black/5',
+                  'h-8 w-8 rounded-md border-none !p-2 hover:!bg-black/5',
                 )
               }
-              className={'!w-[128px] h-fit !z-20'}
+              className={'!z-20 h-fit !w-[128px]'}
             />
           </div>
         </div>

web/app/(commonLayout)/datasets/DatasetFooter.tsx

@@ -6,8 +6,8 @@ const DatasetFooter = () => {
   const { t } = useTranslation()
 
   return (
-    <footer className='px-12 py-6 grow-0 shrink-0'>
-      <h3 className='text-xl font-semibold leading-tight text-gradient'>{t('dataset.didYouKnow')}</h3>
+    <footer className='shrink-0 grow-0 px-12 py-6'>
+      <h3 className='text-gradient text-xl font-semibold leading-tight'>{t('dataset.didYouKnow')}</h3>
       <p className='mt-1 text-sm font-normal leading-tight text-text-secondary'>
         {t('dataset.intro1')}<span className='inline-flex items-center gap-1 text-text-accent'>{t('dataset.intro2')}</span>{t('dataset.intro3')}<br />
         {t('dataset.intro4')}<span className='inline-flex items-center gap-1 text-text-accent'>{t('dataset.intro5')}</span>{t('dataset.intro6')}

web/app/(commonLayout)/datasets/Datasets.tsx

@@ -86,7 +86,7 @@ const Datasets = ({
   }, [onScroll])
 
   return (
-    <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0'>
+    <nav className='grid shrink-0 grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
       { isCurrentWorkspaceEditor && <NewDatasetCard ref={anchorRef} /> }
       {data?.map(({ data: datasets }) => datasets.map(dataset => (
         <DatasetCard key={dataset.id} dataset={dataset} onSuccess={mutate} />),

web/app/(commonLayout)/datasets/Doc.tsx

@@ -71,8 +71,8 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
       <div className={`fixed right-20 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
         {isTocExpanded
           ? (
-            <nav className="toc w-full bg-gray-50 p-4 rounded-lg shadow-md max-h-[calc(100vh-150px)] overflow-y-auto">
-              <div className="flex justify-between items-center mb-4">
+            <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-gray-50 p-4 shadow-md">
+              <div className="mb-4 flex items-center justify-between">
                 <h3 className="text-lg font-semibold">{t('appApi.develop.toc')}</h3>
                 <button
                   onClick={() => setIsTocExpanded(false)}
@@ -86,7 +86,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
                   <li key={index}>
                     <a
                       href={item.href}
-                      className="text-gray-600 hover:text-gray-900 hover:underline transition-colors duration-200"
+                      className="text-gray-600 transition-colors duration-200 hover:text-gray-900 hover:underline"
                       onClick={e => handleTocClick(e, item)}
                     >
                       {item.text}
@@ -99,13 +99,13 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
           : (
             <button
               onClick={() => setIsTocExpanded(true)}
-              className="w-10 h-10 bg-gray-50 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 transition-colors duration-200"
+              className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 shadow-md transition-colors duration-200 hover:bg-gray-100"
             >
-              <RiListUnordered className="w-6 h-6" />
+              <RiListUnordered className="h-6 w-6" />
             </button>
           )}
       </div>
-      <article className='mx-1 px-4 sm:mx-12 pt-16 bg-white rounded-t-xl prose prose-xl'>
+      <article className='prose-xl prose mx-1 rounded-t-xl bg-white px-4 pt-16 sm:mx-12'>
         {locale !== LanguagesSupported[1]
           ? <TemplateEn apiBaseUrl={apiBaseUrl} />
           : <TemplateZh apiBaseUrl={apiBaseUrl} />

web/app/(commonLayout)/datasets/NewDatasetCard.tsx

@@ -1,37 +1,40 @@
 'use client'
-
-import { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   RiAddLine,
   RiArrowRightLine,
 } from '@remixicon/react'
 
-const CreateAppCard = forwardRef<HTMLAnchorElement>((_, ref) => {
+const CreateAppCard = (
+  {
+    ref,
+    ..._
+  },
+) => {
   const { t } = useTranslation()
 
   return (
-    <div className='flex flex-col bg-background-default-dimm border-[0.5px] border-components-panel-border rounded-xl
-      min-h-[160px] transition-all duration-200 ease-in-out'
+    <div className='bg-background-default-dimm flex min-h-[160px] flex-col rounded-xl border-[0.5px]
+      border-components-panel-border transition-all duration-200 ease-in-out'
     >
-      <a ref={ref} className='group flex flex-grow items-start p-4 cursor-pointer' href='/datasets/create'>
+      <a ref={ref} className='group flex grow cursor-pointer items-start p-4' href='/datasets/create'>
         <div className='flex items-center gap-3'>
-          <div className='w-10 h-10 p-2 flex items-center justify-center border border-dashed border-divider-regular rounded-lg
-            bg-background-default-lighter group-hover:border-solid group-hover:border-effects-highlight group-hover:bg-background-default-dodge'
+          <div className='flex h-10 w-10 items-center justify-center rounded-lg border border-dashed border-divider-regular bg-background-default-lighter
+            p-2 group-hover:border-solid group-hover:border-effects-highlight group-hover:bg-background-default-dodge'
           >
-            <RiAddLine className='w-4 h-4 text-text-tertiary group-hover:text-text-accent'/>
+            <RiAddLine className='h-4 w-4 text-text-tertiary group-hover:text-text-accent'/>
           </div>
           <div className='system-md-semibold text-text-secondary group-hover:text-text-accent'>{t('dataset.createDataset')}</div>
         </div>
       </a>
-      <div className='p-4 pt-0 text-text-tertiary system-xs-regular'>{t('dataset.createDatasetIntro')}</div>
-      <a className='group flex p-4 items-center gap-1 border-t-[0.5px] border-divider-subtle rounded-b-xl cursor-pointer' href='/datasets/connect'>
+      <div className='system-xs-regular p-4 pt-0 text-text-tertiary'>{t('dataset.createDatasetIntro')}</div>
+      <a className='group flex cursor-pointer items-center gap-1 rounded-b-xl border-t-[0.5px] border-divider-subtle p-4' href='/datasets/connect'>
         <div className='system-xs-medium text-text-tertiary group-hover:text-text-accent'>{t('dataset.connectDataset')}</div>
-        <RiArrowRightLine className='w-3.5 h-3.5 text-text-tertiary group-hover:text-text-accent' />
+        <RiArrowRightLine className='h-3.5 w-3.5 text-text-tertiary group-hover:text-text-accent' />
       </a>
     </div>
   )
-})
+}
 
 CreateAppCard.displayName = 'CreateAppCard'
 

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

@@ -3,14 +3,14 @@ import React from 'react'
 import Main from '@/app/components/explore/installed-app'
 
 export type IInstalledAppProps = {
-  params: {
+  params: Promise<{
     appId: string
-  }
+  }>
 }
 
-const InstalledApp: FC<IInstalledAppProps> = ({ params: { appId } }) => {
+const InstalledApp: FC<IInstalledAppProps> = async ({ params }) => {
   return (
-    <Main id={appId} />
+    <Main id={(await params).appId} />
   )
 }
 export default React.memo(InstalledApp)

web/app/(shareLayout)/layout.tsx

@@ -10,7 +10,7 @@ const Layout: FC<{
   children: React.ReactNode
 }> = ({ children }) => {
   return (
-    <div className="min-w-[300px] h-full pb-[env(safe-area-inset-bottom)]">
+    <div className="h-full min-w-[300px] pb-[env(safe-area-inset-bottom)]">
       {children}
     </div>
   )

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

@@ -92,8 +92,8 @@ const WebSSOForm: FC = () => {
   }, [message, tokenFromUrl]) // Added dependencies to useEffect
 
   return (
-    <div className="flex items-center justify-center h-full">
-      <div className={cn('flex flex-col items-center w-full grow justify-center', 'px-6', 'md:px-[108px]')}>
+    <div className="flex h-full items-center justify-center">
+      <div className={cn('flex w-full grow flex-col items-center justify-center', 'px-6', 'md:px-[108px]')}>
         <Loading type='area' />
       </div>
     </div>

web/app/account/account-page/AvatarWithEdit.tsx

@@ -83,13 +83,13 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
   return (
     <>
       <div>
-        <div className="relative group">
+        <div className="group relative">
           <Avatar {...props} />
           <div
             onClick={() => { setIsShowAvatarPicker(true) }}
-            className="absolute inset-0 bg-black bg-opacity-50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer flex items-center justify-center"
+            className="absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black bg-opacity-50 opacity-0 transition-opacity group-hover:opacity-100"
           >
-            <span className="text-white text-xs">
+            <span className="text-xs text-white">
               <RiPencilLine />
             </span>
           </div>
@@ -105,7 +105,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
         <ImageInput onImageInput={handleImageInput} cropShape='round' />
         <Divider className='m-0' />
 
-        <div className='w-full flex items-center justify-center p-3 gap-2'>
+        <div className='flex w-full items-center justify-center gap-2 p-3'>
           <Button className='w-full' onClick={() => setIsShowAvatarPicker(false)}>
             {t('app.iconPicker.cancel')}
           </Button>

web/app/account/account-page/index.tsx

@@ -122,17 +122,17 @@ export default function AccountPage() {
         <div className='mr-3'>
           <AppIcon size='tiny' />
         </div>
-        <div className='mt-[3px] system-sm-medium text-text-secondary'>{item.name}</div>
+        <div className='system-sm-medium mt-[3px] text-text-secondary'>{item.name}</div>
       </div>
     )
   }
 
   return (
     <>
-      <div className='pt-2 pb-3'>
+      <div className='pb-3 pt-2'>
         <h4 className='title-2xl-semi-bold text-text-primary'>{t('common.account.myAccount')}</h4>
       </div>
-      <div className='mb-8 p-6 rounded-xl flex items-center bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1'>
+      <div className='mb-8 flex items-center rounded-xl bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6'>
         <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={ mutateUserProfile } size={64} />
         <div className='ml-4'>
           <p className='system-xl-semibold text-text-primary'>{userProfile.name}</p>
@@ -141,19 +141,19 @@ export default function AccountPage() {
       </div>
       <div className='mb-8'>
         <div className={titleClassName}>{t('common.account.name')}</div>
-        <div className='flex items-center justify-between gap-2 w-full mt-2'>
-          <div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular text-components-input-text-filled '>
+        <div className='mt-2 flex w-full items-center justify-between gap-2'>
+          <div className='system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled '>
             <span className='pl-1'>{userProfile.name}</span>
           </div>
-          <div className='bg-components-button-tertiary-bg rounded-lg py-2 px-3 cursor-pointer system-sm-medium text-components-button-tertiary-text' onClick={handleEditName}>
+          <div className='system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text' onClick={handleEditName}>
             {t('common.operation.edit')}
           </div>
         </div>
       </div>
       <div className='mb-8'>
         <div className={titleClassName}>{t('common.account.email')}</div>
-        <div className='flex items-center justify-between gap-2 w-full mt-2'>
-          <div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular text-components-input-text-filled '>
+        <div className='mt-2 flex w-full items-center justify-between gap-2'>
+          <div className='system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled '>
             <span className='pl-1'>{userProfile.email}</span>
           </div>
         </div>
@@ -162,8 +162,8 @@ export default function AccountPage() {
         systemFeatures.enable_email_password_login && (
           <div className='mb-8 flex justify-between gap-2'>
             <div>
-              <div className='mb-1 system-sm-semibold text-text-secondary'>{t('common.account.password')}</div>
-              <div className='mb-2 body-xs-regular text-text-tertiary'>{t('common.account.passwordTip')}</div>
+              <div className='system-sm-semibold mb-1 text-text-secondary'>{t('common.account.password')}</div>
+              <div className='body-xs-regular mb-2 text-text-tertiary'>{t('common.account.passwordTip')}</div>
             </div>
             <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
           </div>
@@ -190,13 +190,13 @@ export default function AccountPage() {
             onClose={() => setEditNameModalVisible(false)}
             className={s.modal}
           >
-            <div className='mb-6 title-2xl-semi-bold text-text-primary'>{t('common.account.editName')}</div>
+            <div className='title-2xl-semi-bold mb-6 text-text-primary'>{t('common.account.editName')}</div>
             <div className={titleClassName}>{t('common.account.name')}</div>
             <Input className='mt-2'
               value={editName}
               onChange={e => setEditName(e.target.value)}
             />
-            <div className='flex justify-end mt-10'>
+            <div className='mt-10 flex justify-end'>
               <Button className='mr-2' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
               <Button
                 disabled={editing || !editName}
@@ -219,7 +219,7 @@ export default function AccountPage() {
             }}
             className={s.modal}
           >
-            <div className='mb-6 title-2xl-semi-bold text-text-primary'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
+            <div className='title-2xl-semi-bold mb-6 text-text-primary'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
             {userProfile.is_password_set && (
               <>
                 <div className={titleClassName}>{t('common.account.currentPassword')}</div>
@@ -242,7 +242,7 @@ export default function AccountPage() {
                 </div>
               </>
             )}
-            <div className='mt-8 system-sm-semibold text-text-secondary'>
+            <div className='system-sm-semibold mt-8 text-text-secondary'>
               {userProfile.is_password_set ? t('common.account.newPassword') : t('common.account.password')}
             </div>
             <div className='relative mt-2'>
@@ -261,7 +261,7 @@ export default function AccountPage() {
                 </Button>
               </div>
             </div>
-            <div className='mt-8 system-sm-semibold text-text-secondary'>{t('common.account.confirmPassword')}</div>
+            <div className='system-sm-semibold mt-8 text-text-secondary'>{t('common.account.confirmPassword')}</div>
             <div className='relative mt-2'>
               <Input
                 type={showConfirmPassword ? 'text' : 'password'}
@@ -278,7 +278,7 @@ export default function AccountPage() {
                 </Button>
               </div>
             </div>
-            <div className='flex justify-end mt-10'>
+            <div className='mt-10 flex justify-end'>
               <Button className='mr-2' onClick={() => {
                 setEditPasswordModalVisible(false)
                 resetPasswordForm()

web/app/account/avatar.tsx

@@ -2,13 +2,13 @@
 import { useTranslation } from 'react-i18next'
 import { Fragment } from 'react'
 import { useRouter } from 'next/navigation'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import Avatar from '@/app/components/base/avatar'
 import { logout } from '@/service/common'
 import { useAppContext } from '@/context/app-context'
 import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
 
-export interface IAppSelector {
+export type IAppSelector = {
   isMobile: boolean
 }
 
@@ -36,17 +36,17 @@ export default function AppSelector() {
         ({ open }) => (
           <>
             <div>
-              <Menu.Button
+              <MenuButton
                 className={`
-                    inline-flex items-center
-                    rounded-[20px] p-1x text-sm
+                    p-1x inline-flex
+                    items-center rounded-[20px] text-sm
                     text-text-primary
                     mobile:px-1
                     ${open && 'bg-components-panel-bg-blur'}
                   `}
               >
                 <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={32} />
-              </Menu.Button>
+              </MenuButton>
             </div>
             <Transition
               as={Fragment}
@@ -57,35 +57,35 @@ export default function AppSelector() {
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <Menu.Items
+              <MenuItems
                 className="
                     absolute -right-2 -top-1 w-60 max-w-80
-                    divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
+                    origin-top-right divide-y divide-divider-subtle rounded-lg bg-components-panel-bg-blur
                     shadow-lg
                   "
               >
-                <Menu.Item>
+                <MenuItem>
                   <div className='p-1'>
                     <div className='flex flex-nowrap items-center px-3 py-2'>
                       <div className='grow'>
-                        <div className='system-md-medium text-text-primary break-all'>{userProfile.name}</div>
-                        <div className='system-xs-regular text-text-tertiary break-all'>{userProfile.email}</div>
+                        <div className='system-md-medium break-all text-text-primary'>{userProfile.name}</div>
+                        <div className='system-xs-regular break-all text-text-tertiary'>{userProfile.email}</div>
                       </div>
                       <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={32} />
                     </div>
                   </div>
-                </Menu.Item>
-                <Menu.Item>
+                </MenuItem>
+                <MenuItem>
                   <div className='p-1' onClick={() => handleLogout()}>
                     <div
-                      className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover'
+                      className='group flex h-9 cursor-pointer items-center justify-start rounded-lg px-3 hover:bg-state-base-hover'
                     >
-                      <LogOut01 className='w-4 h-4 text-text-tertiary flex mr-1' />
-                      <div className='font-normal text-[14px] text-text-secondary'>{t('common.userProfile.logout')}</div>
+                      <LogOut01 className='mr-1 flex h-4 w-4 text-text-tertiary' />
+                      <div className='text-[14px] font-normal text-text-secondary'>{t('common.userProfile.logout')}</div>
                     </div>
                   </div>
-                </Menu.Item>
-              </Menu.Items>
+                </MenuItem>
+              </MenuItems>
             </Transition>
           </>
         )

web/app/account/delete-account/components/check-email.tsx

@@ -29,18 +29,18 @@ export default function CheckEmail(props: DeleteAccountProps) {
   }, [getDeleteEmailVerifyCode, props])
 
   return <>
-    <div className='py-1 text-text-destructive body-md-medium'>
+    <div className='body-md-medium py-1 text-text-destructive'>
       {t('common.account.deleteTip')}
     </div>
-    <div className='pt-1 pb-2 text-text-secondary body-md-regular'>
+    <div className='body-md-regular pb-2 pt-1 text-text-secondary'>
       {t('common.account.deletePrivacyLinkTip')}
       <Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link>
     </div>
-    <label className='mt-3 mb-1 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('common.account.deleteLabel')}</label>
+    <label className='system-sm-semibold mb-1 mt-3 flex h-6 items-center text-text-secondary'>{t('common.account.deleteLabel')}</label>
     <Input placeholder={t('common.account.deletePlaceholder') as string} onChange={(e) => {
       setUserInputEmail(e.target.value)
     }} />
-    <div className='w-full flex flex-col mt-3 gap-2'>
+    <div className='mt-3 flex w-full flex-col gap-2'>
       <Button className='w-full' disabled={userInputEmail !== userProfile.email || isSendingEmail} loading={isSendingEmail} variant='primary' onClick={handleConfirm}>{t('common.account.sendVerificationButton')}</Button>
       <Button className='w-full' onClick={props.onCancel}>{t('common.operation.cancel')}</Button>
     </div>

web/app/account/delete-account/components/feed-back.tsx

@@ -56,11 +56,11 @@ export default function FeedBack(props: DeleteAccountProps) {
     className="max-w-[480px]"
     footer={false}
   >
-    <label className='mt-3 mb-1 flex items-center system-sm-semibold text-text-secondary'>{t('common.account.feedbackLabel')}</label>
+    <label className='system-sm-semibold mb-1 mt-3 flex items-center text-text-secondary'>{t('common.account.feedbackLabel')}</label>
     <Textarea rows={6} value={userFeedback} placeholder={t('common.account.feedbackPlaceholder') as string} onChange={(e) => {
       setUserFeedback(e.target.value)
     }} />
-    <div className='w-full flex flex-col mt-3 gap-2'>
+    <div className='mt-3 flex w-full flex-col gap-2'>
       <Button className='w-full' loading={isPending} variant='primary' onClick={handleSubmit}>{t('common.operation.submit')}</Button>
       <Button className='w-full' onClick={handleSkip}>{t('common.operation.skip')}</Button>
     </div>

web/app/account/delete-account/components/verify-email.tsx

@@ -35,18 +35,18 @@ export default function VerifyEmail(props: DeleteAccountProps) {
     catch (error) { console.error(error) }
   }, [emailToken, verificationCode, confirmDeleteAccount, props])
   return <>
-    <div className='pt-1 text-text-destructive body-md-medium'>
+    <div className='body-md-medium pt-1 text-text-destructive'>
       {t('common.account.deleteTip')}
     </div>
-    <div className='pt-1 pb-2 text-text-secondary body-md-regular'>
+    <div className='body-md-regular pb-2 pt-1 text-text-secondary'>
       {t('common.account.deletePrivacyLinkTip')}
       <Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link>
     </div>
-    <label className='mt-3 mb-1 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('common.account.verificationLabel')}</label>
+    <label className='system-sm-semibold mb-1 mt-3 flex h-6 items-center text-text-secondary'>{t('common.account.verificationLabel')}</label>
     <Input minLength={6} maxLength={6} placeholder={t('common.account.verificationPlaceholder') as string} onChange={(e) => {
       setVerificationCode(e.target.value)
     }} />
-    <div className='w-full flex flex-col mt-3 gap-2'>
+    <div className='mt-3 flex w-full flex-col gap-2'>
       <Button className='w-full' disabled={shouldButtonDisabled} loading={isDeleting} variant='warning' onClick={handleConfirm}>{t('common.account.permanentlyDeleteButton')}</Button>
       <Button className='w-full' onClick={props.onCancel}>{t('common.operation.cancel')}</Button>
       <Countdown onResend={sendEmail} />

web/app/account/header.tsx

@@ -16,19 +16,19 @@ const Header = () => {
   return (
     <div className='flex flex-1 items-center justify-between px-4'>
       <div className='flex items-center gap-3'>
-        <div className='flex items-center cursor-pointer' onClick={back}>
+        <div className='flex cursor-pointer items-center' onClick={back}>
           <LogoSite className='object-contain' />
         </div>
-        <div className='w-[1px] h-4 bg-divider-regular' />
-        <p className='text-text-primary title-3xl-semi-bold'>{t('common.account.account')}</p>
+        <div className='h-4 w-[1px] bg-divider-regular' />
+        <p className='title-3xl-semi-bold text-text-primary'>{t('common.account.account')}</p>
       </div>
-      <div className='flex items-center flex-shrink-0 gap-3'>
-        <Button className='gap-2 py-2 px-3 system-sm-medium' onClick={back}>
-          <RiRobot2Line className='w-4 h-4' />
+      <div className='flex shrink-0 items-center gap-3'>
+        <Button className='system-sm-medium gap-2 px-3 py-2' onClick={back}>
+          <RiRobot2Line className='h-4 w-4' />
           <p>{t('common.account.studio')}</p>
-          <RiArrowRightUpLine className='w-4 h-4' />
+          <RiArrowRightUpLine className='h-4 w-4' />
         </Button>
-        <div className='w-[1px] h-4 bg-divider-regular' />
+        <div className='h-4 w-[1px] bg-divider-regular' />
         <Avatar />
       </div>
     </div>

web/app/account/layout.tsx

@@ -21,7 +21,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
                 <HeaderWrapper>
                   <Header />
                 </HeaderWrapper>
-                <div className='relative flex flex-col overflow-y-auto bg-components-panel-bg shrink-0 h-0 grow'>
+                <div className='relative flex h-0 shrink-0 grow flex-col overflow-y-auto bg-components-panel-bg'>
                   {children}
                 </div>
               </ModalContextProvider>

web/app/account/page.tsx

@@ -1,7 +1,7 @@
 import AccountPage from './account-page'
 
 export default function Account() {
-  return <div className='max-w-[640px] w-full mx-auto pt-12 px-6'>
+  return <div className='mx-auto w-full max-w-[640px] px-6 pt-12'>
     <AccountPage />
   </div>
 }

web/app/activate/activateForm.tsx

@@ -41,7 +41,7 @@ const ActivateForm = () => {
   return (
     <div className={
       cn(
-        'flex flex-col items-center w-full grow justify-center',
+        'flex w-full grow flex-col items-center justify-center',
         'px-6',
         'md:px-[108px]',
       )
@@ -49,11 +49,11 @@ const ActivateForm = () => {
       {!checkRes && <Loading />}
       {checkRes && !checkRes.is_valid && (
         <div className="flex flex-col md:w-[400px]">
-          <div className="w-full mx-auto">
-            <div className="mb-3 flex justify-center items-center w-20 h-20 p-5 rounded-[20px] border border-gray-100 shadow-lg text-[40px] font-bold">🤷‍♂️</div>
+          <div className="mx-auto w-full">
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-gray-100 p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
             <h2 className="text-[32px] font-bold text-gray-900">{t('login.invalid')}</h2>
           </div>
-          <div className="w-full mx-auto mt-6">
+          <div className="mx-auto mt-6 w-full">
             <Button variant='primary' className='w-full !text-sm'>
               <a href="https://dify.ai">{t('login.explore')}</a>
             </Button>

web/app/activate/page.tsx

@@ -8,14 +8,14 @@ const Activate = () => {
   return (
     <div className={cn(
       style.background,
-      'flex w-full min-h-screen',
+      'flex min-h-screen w-full',
       'sm:p-4 lg:p-8',
       'gap-x-20',
       'justify-center lg:justify-start',
     )}>
       <div className={
         cn(
-          'flex w-full flex-col bg-white shadow rounded-2xl shrink-0',
+          'flex w-full shrink-0 flex-col rounded-2xl bg-white shadow',
           'space-between',
         )
       }>

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

@@ -191,7 +191,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
         }}
         className='block w-full'
       >
-        <div className={cn('flex rounded-lg', expand ? 'p-2 pb-2.5 flex-col gap-2' : 'p-1 gap-1 justify-center items-start', open && 'bg-state-base-hover', isCurrentWorkspaceEditor && 'hover:bg-state-base-hover cursor-pointer')}>
+        <div className={cn('flex rounded-lg', expand ? 'flex-col gap-2 p-2 pb-2.5' : 'items-start justify-center gap-1 p-1', open && 'bg-state-base-hover', isCurrentWorkspaceEditor && 'cursor-pointer hover:bg-state-base-hover')}>
           <div className={`flex items-center self-stretch ${expand ? 'justify-between' : 'flex-col gap-1'}`}>
             <AppIcon
               size={expand ? 'large' : 'small'}
@@ -200,9 +200,9 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
               background={appDetail.icon_background}
               imageUrl={appDetail.icon_url}
             />
-            <div className='flex p-0.5 justify-center items-center rounded-md'>
-              <div className='flex w-5 h-5 justify-center items-center'>
-                <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
+            <div className='flex items-center justify-center rounded-md p-0.5'>
+              <div className='flex h-5 w-5 items-center justify-center'>
+                <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
               </div>
             </div>
           </div>
@@ -210,9 +210,9 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
             expand && (
               <div className='flex flex-col items-start gap-1'>
                 <div className='flex w-full'>
-                  <div className='text-text-secondary system-md-semibold truncate'>{appDetail.name}</div>
+                  <div className='system-md-semibold truncate text-text-secondary'>{appDetail.name}</div>
                 </div>
-                <div className='text-text-tertiary system-2xs-medium-uppercase'>{appDetail.mode === 'advanced-chat' ? t('app.types.chatbot') : appDetail.mode === 'agent-chat' ? t('app.types.agent') : appDetail.mode === 'chat' ? t('app.types.chatbot') : appDetail.mode === 'completion' ? t('app.types.completion') : t('app.types.workflow')}</div>
+                <div className='system-2xs-medium-uppercase text-text-tertiary'>{appDetail.mode === 'advanced-chat' ? t('app.types.chatbot') : appDetail.mode === 'agent-chat' ? t('app.types.agent') : appDetail.mode === 'chat' ? t('app.types.chatbot') : appDetail.mode === 'completion' ? t('app.types.completion') : t('app.types.workflow')}</div>
               </div>
             )
           }
@@ -221,9 +221,9 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
       <ContentDialog
         show={open}
         onClose={() => setOpen(false)}
-        className='!p-0 flex flex-col absolute left-2 top-2 bottom-2 w-[420px] rounded-2xl'
+        className='absolute bottom-2 left-2 top-2 flex w-[420px] flex-col rounded-2xl !p-0'
       >
-        <div className='flex p-4 flex-col justify-center items-start gap-3 self-stretch shrink-0'>
+        <div className='flex shrink-0 flex-col items-start justify-center gap-3 self-stretch p-4'>
           <div className='flex items-center gap-3 self-stretch'>
             <AppIcon
               size="large"
@@ -232,14 +232,14 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
               background={appDetail.icon_background}
               imageUrl={appDetail.icon_url}
             />
-            <div className='flex flex-col justify-center items-start grow w-full'>
-              <div className='text-text-secondary system-md-semibold truncate w-full'>{appDetail.name}</div>
-              <div className='text-text-tertiary system-2xs-medium-uppercase'>{appDetail.mode === 'advanced-chat' ? t('app.types.chatbot') : appDetail.mode === 'agent-chat' ? t('app.types.agent') : appDetail.mode === 'chat' ? t('app.types.chatbot') : appDetail.mode === 'completion' ? t('app.types.completion') : t('app.types.workflow')}</div>
+            <div className='flex w-full grow flex-col items-start justify-center'>
+              <div className='system-md-semibold w-full truncate text-text-secondary'>{appDetail.name}</div>
+              <div className='system-2xs-medium-uppercase text-text-tertiary'>{appDetail.mode === 'advanced-chat' ? t('app.types.chatbot') : appDetail.mode === 'agent-chat' ? t('app.types.agent') : appDetail.mode === 'chat' ? t('app.types.chatbot') : appDetail.mode === 'completion' ? t('app.types.completion') : t('app.types.workflow')}</div>
             </div>
           </div>
           {/* description */}
           {appDetail.description && (
-            <div className='text-text-tertiary system-xs-regular'>{appDetail.description}</div>
+            <div className='system-xs-regular text-text-tertiary'>{appDetail.description}</div>
           )}
           {/* operations */}
           <div className='flex items-center gap-1 self-stretch'>
@@ -252,8 +252,8 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
                 setShowEditModal(true)
               }}
             >
-              <RiEditLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
-              <span className='text-components-button-secondary-text system-xs-medium'>{t('app.editApp')}</span>
+              <RiEditLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
+              <span className='system-xs-medium text-components-button-secondary-text'>{t('app.editApp')}</span>
             </Button>
             <Button
               size={'small'}
@@ -264,8 +264,8 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
                 setShowDuplicateModal(true)
               }}
             >
-              <RiFileCopy2Line className='w-3.5 h-3.5 text-components-button-secondary-text' />
-              <span className='text-components-button-secondary-text system-xs-medium'>{t('app.duplicate')}</span>
+              <RiFileCopy2Line className='h-3.5 w-3.5 text-components-button-secondary-text' />
+              <span className='system-xs-medium text-components-button-secondary-text'>{t('app.duplicate')}</span>
             </Button>
             <Button
               size={'small'}
@@ -273,8 +273,8 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
               className='gap-[1px]'
               onClick={exportCheck}
             >
-              <RiFileDownloadLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
-              <span className='text-components-button-secondary-text system-xs-medium'>{t('app.export')}</span>
+              <RiFileDownloadLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
+              <span className='system-xs-medium text-components-button-secondary-text'>{t('app.export')}</span>
             </Button>
             {
               (appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow') && (
@@ -287,8 +287,8 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
                     setShowImportDSLModal(true)
                   }}
                 >
-                  <RiFileUploadLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
-                  <span className='text-components-button-secondary-text system-xs-medium'>{t('workflow.common.importDSL')}</span>
+                  <RiFileUploadLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
+                  <span className='system-xs-medium text-components-button-secondary-text'>{t('workflow.common.importDSL')}</span>
                 </Button>
               )
             }
@@ -298,10 +298,10 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
           <CardView
             appId={appDetail.id}
             isInPanel={true}
-            className='flex flex-col px-2 py-1 gap-2 grow overflow-auto'
+            className='flex grow flex-col gap-2 overflow-auto px-2 py-1'
           />
         </div>
-        <div className='flex p-2 flex-col justify-center items-start gap-3 self-stretch border-t-[0.5px] border-divider-subtle shrink-0 min-h-fit'>
+        <div className='flex min-h-fit shrink-0 flex-col items-start justify-center gap-3 self-stretch border-t-[0.5px] border-divider-subtle p-2'>
           <Button
             size={'medium'}
             variant={'ghost'}
@@ -311,8 +311,8 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
               setShowConfirmDelete(true)
             }}
           >
-            <RiDeleteBinLine className='w-4 h-4 text-text-tertiary' />
-            <span className='text-text-tertiary system-sm-medium'>{t('common.operation.deleteApp')}</span>
+            <RiDeleteBinLine className='h-4 w-4 text-text-tertiary' />
+            <span className='system-sm-medium text-text-tertiary'>{t('common.operation.deleteApp')}</span>
           </Button>
         </div>
       </ContentDialog>

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

@@ -48,9 +48,9 @@ const NotionSvg = <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xm
 
 const ICON_MAP = {
   app: <AppIcon className='border !border-[rgba(0,0,0,0.05)]' />,
-  api: <AppIcon innerIcon={ApiSvg} className='border !bg-purple-50 !border-purple-200' />,
+  api: <AppIcon innerIcon={ApiSvg} className='border !border-purple-200 !bg-purple-50' />,
   dataset: <AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />,
-  webapp: <AppIcon innerIcon={WebappSvg} className='border !bg-primary-100 !border-primary-200' />,
+  webapp: <AppIcon innerIcon={WebappSvg} className='border !border-primary-200 !bg-primary-100' />,
   notion: <AppIcon innerIcon={NotionSvg} className='!border-[0.5px] !border-indigo-100 !bg-white' />,
 }
 
@@ -58,20 +58,20 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
   const { t } = useTranslation()
 
   return (
-    <div className="flex items-center grow">
+    <div className="flex grow items-center">
       {icon && icon_background && iconType === 'app' && (
-        <div className='shrink-0 mr-3'>
+        <div className='mr-3 shrink-0'>
           <AppIcon icon={icon} background={icon_background} />
         </div>
       )}
       {iconType !== 'app'
-        && <div className='shrink-0 mr-3'>
+        && <div className='mr-3 shrink-0'>
           {ICON_MAP[iconType]}
         </div>
 
       }
       {mode === 'expand' && <div className="group">
-        <div className={`flex flex-row items-center system-md-semibold text-text-secondary group-hover:text-text-primary ${textStyle?.main ?? ''}`}>
+        <div className={`system-md-semibold flex flex-row items-center text-text-secondary group-hover:text-text-primary ${textStyle?.main ?? ''}`}>
           <div className="max-w-[180px] truncate">
             {name}
           </div>
@@ -88,7 +88,7 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
             />
           }
         </div>
-        <div className='text-text-tertiary system-2xs-medium-uppercase'>{isExternal ? t('dataset.externalTag') : ''}</div>
+        <div className='system-2xs-medium-uppercase text-text-tertiary'>{isExternal ? t('dataset.externalTag') : ''}</div>
       </div>}
     </div>
   )

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

@@ -26,7 +26,7 @@ const DatasetInfo: FC<Props> = ({
   const { t } = useTranslation()
   return (
     <div className='pl-1 pt-1'>
-      <div className='flex-shrink-0 mr-3'>
+      <div className='mr-3 shrink-0'>
         <AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />
       </div>
       {expand && (
@@ -34,8 +34,8 @@ const DatasetInfo: FC<Props> = ({
           <div className='system-md-semibold text-text-secondary'>
             {name}
           </div>
-          <div className='mt-1 text-text-tertiary system-2xs-medium-uppercase'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div>
-          <div className='my-3  system-xs-regular text-text-tertiary first-letter:capitalize'>{description}</div>
+          <div className='system-2xs-medium-uppercase mt-1 text-text-tertiary'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div>
+          <div className='system-xs-regular  my-3 text-text-tertiary first-letter:capitalize'>{description}</div>
         </div>
       )}
       {extraInfo}

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

@@ -50,7 +50,7 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
   return (
     <div
       className={`
-        shrink-0 flex flex-col bg-background-default-subtle border-r border-divider-burn transition-all
+        flex shrink-0 flex-col border-r border-divider-burn bg-background-default-subtle transition-all
         ${expand ? 'w-[216px]' : 'w-14'}
       `}
     >
@@ -85,7 +85,7 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
         )}
       </div>
       <div className='px-4'>
-        <div className={cn('mt-1 mx-auto h-[1px] bg-divider-subtle', !expand && 'w-6')} />
+        <div className={cn('mx-auto mt-1 h-[1px] bg-divider-subtle', !expand && 'w-6')} />
       </div>
       <nav
         className={`
@@ -108,13 +108,13 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
             `}
           >
             <div
-              className='flex items-center justify-center w-6 h-6 text-gray-500 cursor-pointer'
+              className='flex h-6 w-6 cursor-pointer items-center justify-center text-gray-500'
               onClick={() => handleToggle(appSidebarExpand)}
             >
               {
                 expand
-                  ? <RiLayoutRight2Line className='w-5 h-5 text-components-menu-item-text' />
-                  : <LayoutRight2LineMod className='w-5 h-5 text-components-menu-item-text' />
+                  ? <RiLayoutRight2Line className='h-5 w-5 text-components-menu-item-text' />
+                  : <LayoutRight2LineMod className='h-5 w-5 text-components-menu-item-text' />
               }
             </div>
           </div>

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

@@ -21,17 +21,17 @@ const EditItem: FC<Props> = ({
   onChange,
 }) => {
   const { t } = useTranslation()
-  const avatar = type === EditItemType.Query ? <User className='w-6 h-6' /> : <Robot className='w-6 h-6' />
+  const avatar = type === EditItemType.Query ? <User className='h-6 w-6' /> : <Robot className='h-6 w-6' />
   const name = type === EditItemType.Query ? t('appAnnotation.addModal.queryName') : t('appAnnotation.addModal.answerName')
   const placeholder = type === EditItemType.Query ? t('appAnnotation.addModal.queryPlaceholder') : t('appAnnotation.addModal.answerPlaceholder')
 
   return (
     <div className='flex' onClick={e => e.stopPropagation()}>
-      <div className='shrink-0 mr-3'>
+      <div className='mr-3 shrink-0'>
         {avatar}
       </div>
       <div className='grow'>
-        <div className='mb-1 system-xs-semibold text-text-primary'>{name}</div>
+        <div className='system-xs-semibold mb-1 text-text-primary'>{name}</div>
         <Textarea
           value={content}
           onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}

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

@@ -76,7 +76,7 @@ const AddAnnotationModal: FC<Props> = ({
         maxWidthClassName='!max-w-[480px]'
         title={t('appAnnotation.addModal.title') as string}
         body={(
-          <div className='p-6 pb-4 space-y-6'>
+          <div className='space-y-6 p-6 pb-4'>
             <EditItem
               type={EditItemType.Query}
               content={question}
@@ -93,11 +93,11 @@ const AddAnnotationModal: FC<Props> = ({
           (
             <div>
               {isAnnotationFull && (
-                <div className='mt-6 mb-4 px-6'>
+                <div className='mb-4 mt-6 px-6'>
                   <AnnotationFull />
                 </div>
               )}
-              <div className='px-4 flex h-16 items-center justify-between border-t border-divider-subtle bg-background-section-burn rounded-bl-xl rounded-br-xl system-sm-medium text-text-tertiary'>
+              <div className='system-sm-medium flex h-16 items-center justify-between rounded-bl-xl rounded-br-xl border-t border-divider-subtle bg-background-section-burn px-4 text-text-tertiary'>
                 <div
                   className='flex items-center space-x-2'
                 >

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

@@ -35,17 +35,17 @@ const CSVDownload: FC = () => {
     <div className='mt-6'>
       <div className='system-sm-medium text-text-primary'>{t('share.generation.csvStructureTitle')}</div>
       <div className='mt-2 max-h-[500px] overflow-auto'>
-        <table className='table-fixed w-full border-separate border-spacing-0 border border-divider-regular rounded-lg text-xs'>
+        <table className='w-full table-fixed border-separate border-spacing-0 rounded-lg border border-divider-regular text-xs'>
           <thead className='text-text-tertiary'>
             <tr>
-              <td className='h-9 pl-3 pr-2 border-b border-divider-regular'>{t('appAnnotation.batchModal.question')}</td>
-              <td className='h-9 pl-3 pr-2 border-b border-divider-regular'>{t('appAnnotation.batchModal.answer')}</td>
+              <td className='h-9 border-b border-divider-regular pl-3 pr-2'>{t('appAnnotation.batchModal.question')}</td>
+              <td className='h-9 border-b border-divider-regular pl-3 pr-2'>{t('appAnnotation.batchModal.answer')}</td>
             </tr>
           </thead>
           <tbody className='text-text-secondary'>
             <tr>
-              <td className='h-9 pl-3 pr-2 border-b border-divider-subtle text-[13px]'>{t('appAnnotation.batchModal.question')} 1</td>
-              <td className='h-9 pl-3 pr-2 border-b border-divider-subtle text-[13px]'>{t('appAnnotation.batchModal.answer')} 1</td>
+              <td className='h-9 border-b border-divider-subtle pl-3 pr-2 text-[13px]'>{t('appAnnotation.batchModal.question')} 1</td>
+              <td className='h-9 border-b border-divider-subtle pl-3 pr-2 text-[13px]'>{t('appAnnotation.batchModal.answer')} 1</td>
             </tr>
             <tr>
               <td className='h-9 pl-3 pr-2 text-[13px]'>{t('appAnnotation.batchModal.question')} 2</td>
@@ -55,14 +55,14 @@ const CSVDownload: FC = () => {
         </table>
       </div>
       <CSVDownloader
-        className="block mt-2 cursor-pointer"
+        className="mt-2 block cursor-pointer"
         type={Type.Link}
         filename={`template-${locale}`}
         bom={true}
         data={getTemplate()}
       >
-        <div className='flex items-center h-[18px] space-x-1 text-text-accent system-xs-medium'>
-          <DownloadIcon className='w-3 h-3 mr-1' />
+        <div className='system-xs-medium flex h-[18px] items-center space-x-1 text-text-accent'>
+          <DownloadIcon className='mr-1 h-3 w-3' />
           {t('appAnnotation.batchModal.template')}
         </div>
       </CSVDownloader>

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

@@ -91,29 +91,29 @@ const CSVUploader: FC<Props> = ({
       />
       <div ref={dropRef}>
         {!file && (
-          <div className={cn('flex items-center h-20 rounded-xl bg-components-dropzone-bg border border-dashed border-components-dropzone-border system-sm-regular', dragging && 'bg-components-dropzone-bg-accent border border-components-dropzone-border-accent')}>
-            <div className='w-full flex items-center justify-center space-x-2'>
+          <div className={cn('system-sm-regular flex h-20 items-center rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg', dragging && 'border border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
+            <div className='flex w-full items-center justify-center space-x-2'>
               <CSVIcon className="shrink-0" />
               <div className='text-text-tertiary'>
                 {t('appAnnotation.batchModal.csvUploadTitle')}
-                <span className='text-text-accent cursor-pointer' onClick={selectHandle}>{t('appAnnotation.batchModal.browse')}</span>
+                <span className='cursor-pointer text-text-accent' onClick={selectHandle}>{t('appAnnotation.batchModal.browse')}</span>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0' />}
+            {dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />}
           </div>
         )}
         {file && (
-          <div className={cn('flex items-center h-20 px-6 rounded-xl bg-components-panel-bg border border-components-panel-border text-sm font-normal group', 'hover:bg-components-panel-bg-blur hover:border-components-panel-bg-blur')}>
+          <div className={cn('group flex h-20 items-center rounded-xl border border-components-panel-border bg-components-panel-bg px-6 text-sm font-normal', 'hover:border-components-panel-bg-blur hover:bg-components-panel-bg-blur')}>
             <CSVIcon className="shrink-0" />
-            <div className='flex ml-2 w-0 grow'>
-              <span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-text-primary'>{file.name.replace(/.csv$/, '')}</span>
+            <div className='ml-2 flex w-0 grow'>
+              <span className='max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap text-text-primary'>{file.name.replace(/.csv$/, '')}</span>
               <span className='shrink-0 text-text-tertiary'>.csv</span>
             </div>
-            <div className='hidden group-hover:flex items-center'>
+            <div className='hidden items-center group-hover:flex'>
               <Button variant='secondary' onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
-              <div className='mx-2 w-px h-4 bg-divider-regular' />
-              <div className='p-2 cursor-pointer' onClick={removeFile}>
-                <RiDeleteBinLine className='w-4 h-4 text-text-tertiary' />
+              <div className='mx-2 h-4 w-px bg-divider-regular' />
+              <div className='cursor-pointer p-2' onClick={removeFile}>
+                <RiDeleteBinLine className='h-4 w-4 text-text-tertiary' />
               </div>
             </div>
           </div>

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

@@ -87,10 +87,10 @@ const BatchModal: FC<IBatchModalProps> = ({
   }
 
   return (
-    <Modal isShow={isShow} onClose={() => { }} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
-      <div className='relative pb-1 system-xl-medium text-text-primary'>{t('appAnnotation.batchModal.title')}</div>
-      <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onCancel}>
-        <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+    <Modal isShow={isShow} onClose={() => { }} className='!max-w-[520px] !rounded-xl px-8 py-6'>
+      <div className='system-xl-medium relative pb-1 text-text-primary'>{t('appAnnotation.batchModal.title')}</div>
+      <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onCancel}>
+        <RiCloseLine className='h-4 w-4 text-text-tertiary' />
       </div>
       <CSVUploader
         file={currentCSV}
@@ -104,8 +104,8 @@ const BatchModal: FC<IBatchModalProps> = ({
         </div>
       )}
 
-      <div className='mt-[28px] pt-6 flex justify-end'>
-        <Button className='mr-2 text-text-tertiary system-sm-medium' onClick={onCancel}>
+      <div className='mt-[28px] flex justify-end pt-6'>
+        <Button className='system-sm-medium mr-2 text-text-tertiary' onClick={onCancel}>
           {t('appAnnotation.batchModal.cancel')}
         </Button>
         <Button

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

@@ -20,11 +20,11 @@ type Props = {
 }
 
 export const EditTitle: FC<{ className?: string; title: string }> = ({ className, title }) => (
-  <div className={cn(className, 'flex items-center h-[18px] system-xs-medium text-text-tertiary')}>
-    <RiEditFill className='mr-1 w-3.5 h-3.5' />
+  <div className={cn(className, 'system-xs-medium flex h-[18px] items-center text-text-tertiary')}>
+    <RiEditFill className='mr-1 h-3.5 w-3.5' />
     <div>{title}</div>
     <div
-      className='ml-2 grow h-[1px]'
+      className='ml-2 h-[1px] grow'
       style={{
         background: 'linear-gradient(90deg, rgba(0, 0, 0, 0.05) -1.65%, rgba(0, 0, 0, 0.00) 100%)',
       }}
@@ -40,7 +40,7 @@ const EditItem: FC<Props> = ({
   const { t } = useTranslation()
   const [newContent, setNewContent] = useState('')
   const showNewContent = newContent && newContent !== content
-  const avatar = type === EditItemType.Query ? <User className='w-6 h-6' /> : <Robot className='w-6 h-6' />
+  const avatar = type === EditItemType.Query ? <User className='h-6 w-6' /> : <Robot className='h-6 w-6' />
   const name = type === EditItemType.Query ? t('appAnnotation.editModal.queryName') : t('appAnnotation.editModal.answerName')
   const editTitle = type === EditItemType.Query ? t('appAnnotation.editModal.yourQuery') : t('appAnnotation.editModal.yourAnswer')
   const placeholder = type === EditItemType.Query ? t('appAnnotation.editModal.queryPlaceholder') : t('appAnnotation.editModal.answerPlaceholder')
@@ -58,11 +58,11 @@ const EditItem: FC<Props> = ({
 
   return (
     <div className='flex' onClick={e => e.stopPropagation()}>
-      <div className='shrink-0 mr-3'>
+      <div className='mr-3 shrink-0'>
         {avatar}
       </div>
       <div className='grow'>
-        <div className='mb-1 system-xs-semibold text-text-primary'>{name}</div>
+        <div className='system-xs-semibold mb-1 text-text-primary'>{name}</div>
         <div className='system-sm-regular text-text-primary'>{content}</div>
         {!isEdit
           ? (
@@ -70,34 +70,34 @@ const EditItem: FC<Props> = ({
               {showNewContent && (
                 <div className='mt-3'>
                   <EditTitle title={editTitle} />
-                  <div className='mt-1 system-sm-regular text-text-primary'>{newContent}</div>
+                  <div className='system-sm-regular mt-1 text-text-primary'>{newContent}</div>
                 </div>
               )}
               <div className='mt-2 flex items-center'>
                 {!readonly && (
                   <div
-                    className='flex items-center space-x-1 system-xs-medium text-text-accent cursor-pointer'
+                    className='system-xs-medium flex cursor-pointer items-center space-x-1 text-text-accent'
                     onClick={() => {
                       setIsEdit(true)
                     }}
                   >
-                    <RiEditLine className='mr-1 w-3.5 h-3.5' />
+                    <RiEditLine className='mr-1 h-3.5 w-3.5' />
                     <div>{t('common.operation.edit')}</div>
                   </div>
                 )}
 
                 {showNewContent && (
-                  <div className='ml-2 flex items-center system-xs-medium text-text-tertiary'>
+                  <div className='system-xs-medium ml-2 flex items-center text-text-tertiary'>
                     <div className='mr-2'>·</div>
                     <div
-                      className='flex items-center space-x-1 cursor-pointer'
+                      className='flex cursor-pointer items-center space-x-1'
                       onClick={() => {
                         setNewContent(content)
                         onSave(content)
                       }}
                     >
-                      <div className='w-3.5 h-3.5'>
-                        <RiDeleteBinLine className='w-3.5 h-3.5' />
+                      <div className='h-3.5 w-3.5'>
+                        <RiDeleteBinLine className='h-3.5 w-3.5' />
                       </div>
                       <div>{t('common.operation.delete')}</div>
                     </div>

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

@@ -86,7 +86,7 @@ const EditAnnotationModal: FC<Props> = ({
         title={t('appAnnotation.editModal.title') as string}
         body={(
           <div>
-            <div className='p-6 pb-4 space-y-6'>
+            <div className='space-y-6 p-6 pb-4'>
               <EditItem
                 type={EditItemType.Query}
                 content={query}
@@ -115,7 +115,7 @@ const EditAnnotationModal: FC<Props> = ({
         foot={
           <div>
             {isAnnotationFull && (
-              <div className='mt-6 mb-4 px-6'>
+              <div className='mb-4 mt-6 px-6'>
                 <AnnotationFull />
               </div>
             )}
@@ -123,9 +123,9 @@ const EditAnnotationModal: FC<Props> = ({
             {
               annotationId
                 ? (
-                  <div className='px-4 flex h-16 items-center justify-between border-t border-divider-subtle bg-background-section-burn rounded-bl-xl rounded-br-xl system-sm-medium text-text-tertiary'>
+                  <div className='system-sm-medium flex h-16 items-center justify-between rounded-bl-xl rounded-br-xl border-t border-divider-subtle bg-background-section-burn px-4 text-text-tertiary'>
                     <div
-                      className='flex items-center pl-3 space-x-2 cursor-pointer'
+                      className='flex cursor-pointer items-center space-x-2 pl-3'
                       onClick={() => setShowModal(true)}
                     >
                       <MessageCheckRemove />

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

@@ -13,10 +13,10 @@ const EmptyElement: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <div className='flex items-center justify-center h-full'>
-      <div className='bg-background-section-burn w-[560px] h-fit box-border px-5 py-4 rounded-2xl'>
-        <span className='text-text-secondary system-md-semibold'>{t('appAnnotation.noData.title')}<ThreeDotsIcon className='inline relative -top-3 -left-1.5' /></span>
-        <div className='mt-2 text-text-tertiary system-sm-regular'>
+    <div className='flex h-full items-center justify-center'>
+      <div className='box-border h-fit w-[560px] rounded-2xl bg-background-section-burn px-5 py-4'>
+        <span className='system-md-semibold text-text-secondary'>{t('appAnnotation.noData.title')}<ThreeDotsIcon className='relative -left-1.5 -top-3 inline' /></span>
+        <div className='system-sm-regular mt-2 text-text-tertiary'>
           {t('appAnnotation.noData.description')}
         </div>
       </div>

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> = ({
@@ -29,7 +29,7 @@ const Filter: FC<IFilterProps> = ({
   if (!data)
     return null
   return (
-    <div className='flex justify-between flex-row flex-wrap gap-2 items-center mb-2'>
+    <div className='mb-2 flex flex-row flex-wrap items-center justify-between gap-2'>
       <Input
         wrapperClassName='w-[200px]'
         showLeftIcon

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

@@ -10,7 +10,7 @@ import { useContext } from 'use-context-selector'
 import {
   useCSVDownloader,
 } from 'react-papaparse'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
 import Button from '../../../base/button'
 import AddAnnotationModal from '../add-annotation-modal'
 import type { AnnotationItemBasic } from '../type'
@@ -80,18 +80,18 @@ const HeaderOptions: FC<Props> = ({
   const Operations = () => {
     return (
       <div className="w-full py-1">
-        <button className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]' onClick={() => {
+        <button className='mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 hover:bg-components-panel-on-panel-item-bg-hover disabled:opacity-50' onClick={() => {
           setShowBulkImportModal(true)
         }}>
-          <FilePlus02 className='w-4 h-4 text-text-tertiary' />
-          <span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkImport')}</span>
+          <FilePlus02 className='h-4 w-4 text-text-tertiary' />
+          <span className='system-sm-regular grow text-left text-text-secondary'>{t('appAnnotation.table.header.bulkImport')}</span>
         </button>
-        <Menu as="div" className="relative w-full h-full">
-          <Menu.Button className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]'>
-            <FileDownload02 className='w-4 h-4 text-text-tertiary' />
-            <span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkExport')}</span>
-            <ChevronRight className='shrink-0 w-[14px] h-[14px] text-text-tertiary' />
-          </Menu.Button>
+        <Menu as="div" className="relative h-full w-full">
+          <MenuButton className='mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 hover:bg-components-panel-on-panel-item-bg-hover disabled:opacity-50'>
+            <FileDownload02 className='h-4 w-4 text-text-tertiary' />
+            <span className='system-sm-regular grow text-left text-text-secondary'>{t('appAnnotation.table.header.bulkExport')}</span>
+            <ChevronRight className='h-[14px] w-[14px] shrink-0 text-text-tertiary' />
+          </MenuButton>
           <Transition
             as={Fragment}
             enter="transition ease-out duration-100"
@@ -101,9 +101,9 @@ const HeaderOptions: FC<Props> = ({
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Menu.Items
+            <MenuItems
               className={cn(
-                'absolute top-[1px] left-1 -translate-x-full py-1 min-w-[100px] z-10 bg-components-panel-bg border-[0.5px] border-components-panel-on-panel-item-bg origin-top-right rounded-xl shadow-xs',
+                'absolute left-1 top-[1px] z-10 min-w-[100px] origin-top-right -translate-x-full rounded-xl border-[0.5px] border-components-panel-on-panel-item-bg bg-components-panel-bg py-1 shadow-xs',
               )}
             >
               <CSVDownloader
@@ -115,14 +115,14 @@ const HeaderOptions: FC<Props> = ({
                   ...list.map(item => [item.question, item.answer]),
                 ]}
               >
-                <button disabled={annotationUnavailable} className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]'>
-                  <span className='grow text-text-secondary system-sm-regular text-left'>CSV</span>
+                <button disabled={annotationUnavailable} className='mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 hover:bg-components-panel-on-panel-item-bg-hover disabled:opacity-50'>
+                  <span className='system-sm-regular grow text-left text-text-secondary'>CSV</span>
                 </button>
               </CSVDownloader>
-              <button disabled={annotationUnavailable} className={cn('h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]', '!border-0')} onClick={JSONLOutput}>
-                <span className='grow text-text-secondary system-sm-regular text-left'>JSONL</span>
+              <button disabled={annotationUnavailable} className={cn('mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 hover:bg-components-panel-on-panel-item-bg-hover disabled:opacity-50', '!border-0')} onClick={JSONLOutput}>
+                <span className='system-sm-regular grow text-left text-text-secondary'>JSONL</span>
               </button>
-            </Menu.Items>
+            </MenuItems>
           </Transition>
         </Menu>
       </div>
@@ -134,7 +134,7 @@ const HeaderOptions: FC<Props> = ({
   return (
     <div className='flex space-x-2'>
       <Button variant='primary' onClick={() => setShowAddModal(true)}>
-        <RiAddLine className='w-4 h-4 mr-0.5' />
+        <RiAddLine className='mr-0.5 h-4 w-4' />
         <div>{t('appAnnotation.table.header.addAnnotation')}</div>
       </Button>
       <CustomPopover
@@ -143,11 +143,11 @@ const HeaderOptions: FC<Props> = ({
         trigger="click"
         btnElement={
           <Button variant='secondary' className='w-8 p-0'>
-            <RiMoreFill className='w-4 h-4' />
+            <RiMoreFill className='h-4 w-4' />
           </Button>
         }
         btnClassName='p-0 border-0'
-        className={'!w-[155px] h-fit !z-20'}
+        className={'!z-20 h-fit !w-[155px]'}
         popupClassName='!w-full !overflow-visible'
         manualClose
       />

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

@@ -152,15 +152,15 @@ const Annotation: FC<Props> = ({
   }
 
   return (
-    <div className='flex flex-col h-full'>
-      <p className='text-text-tertiary system-sm-regular'>{t('appLog.description')}</p>
-      <div className='flex flex-col py-4 flex-1'>
+    <div className='flex h-full flex-col'>
+      <p className='system-sm-regular text-text-tertiary'>{t('appLog.description')}</p>
+      <div className='flex flex-1 flex-col py-4'>
         <Filter appId={appDetail.id} queryParams={queryParams} setQueryParams={setQueryParams}>
           <div className='flex items-center space-x-2'>
             {isChatApp && (
               <>
-                <div className={cn(!annotationConfig?.enabled && 'pr-2', 'flex items-center h-7 rounded-lg bg-components-panel-bg-blur border border-components-panel-border pl-2 space-x-1')}>
-                  <MessageFast className='w-4 h-4 text-util-colors-indigo-indigo-600' />
+                <div className={cn(!annotationConfig?.enabled && 'pr-2', 'flex h-7 items-center space-x-1 rounded-lg border border-components-panel-border bg-components-panel-bg-blur pl-2')}>
+                  <MessageFast className='h-4 w-4 text-util-colors-indigo-indigo-600' />
                   <div className='system-sm-medium text-text-primary'>{t('appAnnotation.name')}</div>
                   <Switch
                     key={controlRefreshSwitch}
@@ -188,14 +188,14 @@ const Annotation: FC<Props> = ({
                   ></Switch>
                   {annotationConfig?.enabled && (
                     <div className='flex items-center pl-1.5'>
-                      <div className='shrink-0 mr-1 w-[1px] h-3.5 bg-divider-subtle'></div>
+                      <div className='mr-1 h-3.5 w-[1px] shrink-0 bg-divider-subtle'></div>
                       <ActionButton onClick={() => setIsShowEdit(true)}>
-                        <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
+                        <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
                       </ActionButton>
                     </div>
                   )}
                 </div>
-                <div className='shrink-0 mx-3 w-[1px] h-3.5 bg-divider-regular'></div>
+                <div className='mx-3 h-3.5 w-[1px] shrink-0 bg-divider-regular'></div>
               </>
             )}
 
@@ -217,7 +217,7 @@ const Annotation: FC<Props> = ({
               onRemove={handleRemove}
               onView={handleView}
             />
-            : <div className='grow flex h-full items-center justify-center'><EmptyElement /></div>
+            : <div className='flex h-full grow items-center justify-center'><EmptyElement /></div>
         }
         {/* Show Pagination only if the total is more than the limit */}
         {(total && total > APP_PAGE_LIMIT)

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

@@ -9,7 +9,7 @@ import ActionButton from '@/app/components/base/action-button'
 import useTimestamp from '@/hooks/use-timestamp'
 import cn from '@/utils/classnames'
 
-interface Props {
+type Props = {
   list: AnnotationItem[]
   onRemove: (id: string) => void
   onView: (item: AnnotationItem) => void
@@ -29,18 +29,18 @@ const List: FC<Props> = ({
       <table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
         <thead className='system-xs-medium-uppercase text-text-tertiary'>
           <tr>
-            <td className='pl-2 pr-1 w-5 rounded-l-lg bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.table.header.question')}</td>
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.table.header.answer')}</td>
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.table.header.createdAt')}</td>
-            <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.table.header.hits')}</td>
-            <td className='pl-3 py-1.5 rounded-r-lg bg-background-section-burn whitespace-nowrap w-[96px]'>{t('appAnnotation.table.header.actions')}</td>
+            <td className='w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1'>{t('appAnnotation.table.header.question')}</td>
+            <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.answer')}</td>
+            <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.createdAt')}</td>
+            <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.hits')}</td>
+            <td className='w-[96px] whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.actions')}</td>
           </tr>
         </thead>
-        <tbody className="text-text-secondary system-sm-regular">
+        <tbody className="system-sm-regular text-text-secondary">
           {list.map(item => (
             <tr
               key={item.id}
-              className='border-b border-divider-subtle hover:bg-background-default-hover cursor-pointer'
+              className='cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover'
               onClick={
                 () => {
                   onView(item)
@@ -48,11 +48,11 @@ const List: FC<Props> = ({
               }
             >
               <td
-                className='p-3 pr-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-[250px]'
+                className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
                 title={item.question}
               >{item.question}</td>
               <td
-                className='p-3 pr-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-[250px]'
+                className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
                 title={item.answer}
               >{item.answer}</td>
               <td className='p-3 pr-2'>{formatTime(item.created_at, t('appLog.dateTimeFormat') as string)}</td>
@@ -61,7 +61,7 @@ const List: FC<Props> = ({
                 {/* Actions */}
                 <div className='flex space-x-1 text-text-tertiary'>
                   <ActionButton onClick={() => onView(item)}>
-                    <RiEditLine className='w-4 h-4' />
+                    <RiEditLine className='h-4 w-4' />
                   </ActionButton>
                   <ActionButton
                     onClick={() => {
@@ -69,7 +69,7 @@ const List: FC<Props> = ({
                       setShowConfirmDelete(true)
                     }}
                   >
-                    <RiDeleteBinLine className='w-4 h-4' />
+                    <RiDeleteBinLine className='h-4 w-4' />
                   </ActionButton>
                 </div>
               </td>

web/app/components/app/annotation/view-annotation-modal/hit-history-no-data.tsx

@@ -7,9 +7,9 @@ import { ClockFastForward } from '@/app/components/base/icons/src/vender/line/ti
 const HitHistoryNoData: FC = () => {
   const { t } = useTranslation()
   return (
-    <div className='mx-auto mt-20 w-[480px] p-5 rounded-2xl bg-background-section-burn space-y-2'>
-      <div className='inline-block p-3 rounded-lg border border-divider-subtle'>
-        <ClockFastForward className='w-5 h-5 text-text-tertiary' />
+    <div className='mx-auto mt-20 w-[480px] space-y-2 rounded-2xl bg-background-section-burn p-5'>
+      <div className='inline-block rounded-lg border border-divider-subtle p-3'>
+        <ClockFastForward className='h-5 w-5 text-text-tertiary' />
       </div>
       <div className='system-sm-regular text-text-tertiary'>{t('appAnnotation.viewModal.noHitHistory')}</div>
     </div>

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

@@ -116,30 +116,30 @@ const ViewAnnotationModal: FC<Props> = ({
         <table className={cn('w-full min-w-[440px] border-collapse border-0')} >
           <thead className="system-xs-medium-uppercase text-text-tertiary">
             <tr>
-              <td className='pl-2 pr-1 w-5 rounded-l-lg bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.query')}</td>
-              <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.match')}</td>
-              <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.response')}</td>
-              <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.source')}</td>
-              <td className='pl-3 py-1.5 bg-background-section-burn whitespace-nowrap'>{t('appAnnotation.hitHistoryTable.score')}</td>
-              <td className='pl-3 py-1.5 rounded-r-lg bg-background-section-burn whitespace-nowrap w-[160px]'>{t('appAnnotation.hitHistoryTable.time')}</td>
+              <td className='w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1'>{t('appAnnotation.hitHistoryTable.query')}</td>
+              <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.match')}</td>
+              <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.response')}</td>
+              <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.source')}</td>
+              <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.score')}</td>
+              <td className='w-[160px] whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.hitHistoryTable.time')}</td>
             </tr>
           </thead>
-          <tbody className="text-text-secondary system-sm-regular">
+          <tbody className="system-sm-regular text-text-secondary">
             {hitHistoryList.map(item => (
               <tr
                 key={item.id}
-                className={'border-b border-divider-subtle hover:bg-background-default-hover cursor-pointer'}
+                className={'cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover'}
               >
                 <td
-                  className='p-3 pr-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-[250px]'
+                  className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
                   title={item.question}
                 >{item.question}</td>
                 <td
-                  className='p-3 pr-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-[250px]'
+                  className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
                   title={item.match}
                 >{item.match}</td>
                 <td
-                  className='p-3 pr-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-[250px]'
+                  className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
                   title={item.response}
                 >{item.response}</td>
                 <td className='p-3 pr-2'>{item.source}</td>
@@ -168,7 +168,7 @@ const ViewAnnotationModal: FC<Props> = ({
         maxWidthClassName='!max-w-[800px]'
         title={
           <TabSlider
-            className='shrink-0 relative top-[9px]'
+            className='relative top-[9px] shrink-0'
             value={activeTab}
             onChange={v => setActiveTab(v as TabType)}
             options={tabs}
@@ -178,7 +178,7 @@ const ViewAnnotationModal: FC<Props> = ({
         }
         body={(
           <div>
-            <div className='p-6 pb-4 space-y-6'>
+            <div className='space-y-6 p-6 pb-4'>
               {activeTab === TabType.annotation ? annotationTab : hitHistoryTab}
             </div>
             <Confirm
@@ -195,9 +195,9 @@ const ViewAnnotationModal: FC<Props> = ({
         )}
         foot={id
           ? (
-            <div className='px-4 flex h-16 items-center justify-between border-t border-divider-subtle bg-background-section-burn rounded-bl-xl rounded-br-xl system-sm-medium text-text-tertiary'>
+            <div className='system-sm-medium flex h-16 items-center justify-between rounded-bl-xl rounded-br-xl border-t border-divider-subtle bg-background-section-burn px-4 text-text-tertiary'>
               <div
-                className='flex items-center pl-3 space-x-2 cursor-pointer'
+                className='flex cursor-pointer items-center space-x-2 pl-3'
                 onClick={() => setShowModal(true)}
               >
                 <MessageCheckRemove />

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

@@ -136,8 +136,8 @@ const AppPublisher = ({
     if (publishDisabled || published)
       return
     handlePublish()
-  }
-  , { exactMatch: true, useCapture: true })
+  },
+  { exactMatch: true, useCapture: true })
 
   return (
     <>
@@ -157,19 +157,19 @@ const AppPublisher = ({
             disabled={disabled}
           >
             {t('workflow.common.publish')}
-            <RiArrowDownSLine className='w-4 h-4 text-components-button-primary-text' />
+            <RiArrowDownSLine className='h-4 w-4 text-components-button-primary-text' />
           </Button>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[11]'>
-          <div className='w-[320px] bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl shadow-shadow-shadow-5'>
+          <div className='w-[320px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5'>
             <div className='p-4 pt-3'>
-              <div className='flex items-center h-6 system-xs-medium-uppercase text-text-tertiary'>
+              <div className='system-xs-medium-uppercase flex h-6 items-center text-text-tertiary'>
                 {publishedAt ? t('workflow.common.latestPublished') : t('workflow.common.currentDraftUnpublished')}
               </div>
               {publishedAt
                 ? (
-                  <div className='flex justify-between items-center'>
-                    <div className='flex items-center system-sm-medium text-text-secondary'>
+                  <div className='flex items-center justify-between'>
+                    <div className='system-sm-medium flex items-center text-text-secondary'>
                       {t('workflow.common.publishedAt')} {formatTimeFromNow(publishedAt)}
                     </div>
                     {isChatApp && <Button
@@ -183,7 +183,7 @@ const AppPublisher = ({
                   </div>
                 )
                 : (
-                  <div className='flex items-center system-sm-medium text-text-secondary'>
+                  <div className='system-sm-medium flex items-center text-text-secondary'>
                     {t('workflow.common.autoSaved')} · {Boolean(draftUpdatedAt) && formatTimeFromNow(draftUpdatedAt!)}
                   </div>
                 )}
@@ -198,7 +198,7 @@ const AppPublisher = ({
                 : (
                   <Button
                     variant='primary'
-                    className='w-full mt-3'
+                    className='mt-3 w-full'
                     onClick={() => handlePublish()}
                     disabled={publishDisabled || published}
                   >
@@ -210,7 +210,7 @@ const AppPublisher = ({
                             <span>{t('workflow.common.publishUpdate')}</span>
                             <div className='flex gap-0.5'>
                               {PUBLISH_SHORTCUT.map(key => (
-                                <span key={key} className='w-4 h-4 text-text-primary-on-surface system-kbd rounded-[4px] bg-components-kbd-bg-white'>
+                                <span key={key} className='system-kbd h-4 w-4 rounded-[4px] bg-components-kbd-bg-white text-text-primary-on-surface'>
                                   {key}
                                 </span>
                               ))}
@@ -222,11 +222,11 @@ const AppPublisher = ({
                 )
               }
             </div>
-            <div className='p-4 pt-3 border-t-[0.5px] border-t-divider-regular'>
+            <div className='border-t-[0.5px] border-t-divider-regular p-4 pt-3'>
               <SuggestedAction
                 disabled={!publishedAt}
                 link={appURL}
-                icon={<RiPlayCircleLine className='w-4 h-4' />}
+                icon={<RiPlayCircleLine className='h-4 w-4' />}
               >
                 {t('workflow.common.runApp')}
               </SuggestedAction>
@@ -235,7 +235,7 @@ const AppPublisher = ({
                   <SuggestedAction
                     disabled={!publishedAt}
                     link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
-                    icon={<RiPlayList2Line className='w-4 h-4' />}
+                    icon={<RiPlayList2Line className='h-4 w-4' />}
                   >
                     {t('workflow.common.batchRunApp')}
                   </SuggestedAction>
@@ -247,7 +247,7 @@ const AppPublisher = ({
                       handleTrigger()
                     }}
                     disabled={!publishedAt}
-                    icon={<CodeBrowser className='w-4 h-4' />}
+                    icon={<CodeBrowser className='h-4 w-4' />}
                   >
                     {t('workflow.common.embedIntoSite')}
                   </SuggestedAction>
@@ -257,14 +257,14 @@ const AppPublisher = ({
                   publishedAt && handleOpenInExplore()
                 }}
                 disabled={!publishedAt}
-                icon={<RiPlanetLine className='w-4 h-4' />}
+                icon={<RiPlanetLine className='h-4 w-4' />}
               >
                 {t('workflow.common.openInExplore')}
               </SuggestedAction>
               <SuggestedAction
                 disabled={!publishedAt}
                 link='./develop'
-                icon={<RiTerminalBoxLine className='w-4 h-4' />}
+                icon={<RiTerminalBoxLine className='h-4 w-4' />}
               >
                 {t('workflow.common.accessAPIReference')}
               </SuggestedAction>

web/app/components/app/app-publisher/publish-with-multiple-model.tsx

@@ -73,25 +73,25 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
           className='mt-3 w-full'
         >
           {t('appDebug.operation.applyConfig')}
-          <RiArrowDownSLine className='ml-0.5 w-3 h-3' />
+          <RiArrowDownSLine className='ml-0.5 h-3 w-3' />
         </Button>
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='mt-1 w-[288px] z-50'>
-        <div className='p-1 rounded-lg border-[0.5px] border-components-panel-border shadow-lg bg-components-panel-bg'>
-          <div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>
+      <PortalToFollowElemContent className='z-50 mt-1 w-[288px]'>
+        <div className='rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg'>
+          <div className='flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary'>
             {t('appDebug.publishAs')}
           </div>
           {
             validModelConfigs.map((item, index) => (
               <div
                 key={item.id}
-                className='flex items-center h-8 px-3 text-sm text-text-tertiary rounded-lg cursor-pointer hover:bg-state-base-hover'
+                className='flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-text-tertiary hover:bg-state-base-hover'
                 onClick={() => handleSelect(item)}
               >
-                <span className='italic min-w-[18px]'>#{index + 1}</span>
+                <span className='min-w-[18px] italic'>#{index + 1}</span>
                 <ModelIcon modelName={item.model} provider={item.providerItem} className='ml-2' />
                 <div
-                  className='ml-1 text-text-secondary truncate'
+                  className='ml-1 truncate text-text-secondary'
                   title={item.modelItem.label[language]}
                 >
                   {item.modelItem.label[language]}

web/app/components/app/app-publisher/suggested-action.tsx

@@ -20,9 +20,9 @@ const SuggestedAction = ({ icon, link, disabled, children, className, ...props }
     )}
     {...props}
   >
-    <div className='relative w-4 h-4'>{icon}</div>
-    <div className='grow shrink basis-0 system-sm-medium'>{children}</div>
-    <RiArrowRightUpLine className='w-3.5 h-3.5' />
+    <div className='relative h-4 w-4'>{icon}</div>
+    <div className='system-sm-medium shrink grow basis-0'>{children}</div>
+    <RiArrowRightUpLine className='h-3.5 w-3.5' />
   </a>
 )
 

web/app/components/app/app-publisher/version-info-modal.tsx

@@ -69,16 +69,16 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
 
   return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
     <div className='relative w-full p-6 pb-4 pr-14'>
-      <div className='text-text-primary title-2xl-semi-bold first-letter:capitalize'>
+      <div className='title-2xl-semi-bold text-text-primary first-letter:capitalize'>
         {versionInfo?.marked_name ? t('workflow.versionHistory.editVersionInfo') : t('workflow.versionHistory.nameThisVersion')}
       </div>
-      <div className='w-8 h-8 flex items-center justify-center p-1.5 absolute top-5 right-5 cursor-pointer' onClick={onClose}>
-        <RiCloseLine className='w-[18px] h-[18px] text-text-tertiary' />
+      <div className='absolute right-5 top-5 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={onClose}>
+        <RiCloseLine className='h-[18px] w-[18px] text-text-tertiary' />
       </div>
     </div>
     <div className='flex flex-col gap-y-4 px-6 py-3'>
       <div className='flex flex-col gap-y-1'>
-        <div className='flex items-center h-6 text-text-secondary system-sm-semibold'>
+        <div className='system-sm-semibold flex h-6 items-center text-text-secondary'>
           {t('workflow.versionHistory.editField.title')}
         </div>
         <Input
@@ -89,7 +89,7 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
         />
       </div>
       <div className='flex flex-col gap-y-1'>
-        <div className='flex items-center h-6 text-text-secondary system-sm-semibold'>
+        <div className='system-sm-semibold flex h-6 items-center text-text-secondary'>
           {t('workflow.versionHistory.editField.releaseNotes')}
         </div>
         <Textarea

web/app/components/app/configuration/base/feature-panel/index.tsx

@@ -23,15 +23,15 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
   children,
 }) => {
   return (
-    <div className={cn('rounded-xl border-t-[0.5px] border-l-[0.5px] border-effects-highlight bg-background-section-burn pb-3', noBodySpacing && 'pb-0', className)}>
+    <div className={cn('rounded-xl border-l-[0.5px] border-t-[0.5px] border-effects-highlight bg-background-section-burn pb-3', noBodySpacing && 'pb-0', className)}>
       {/* Header */}
       <div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-b border-divider-subtle')}>
-        <div className='flex justify-between items-center h-8'>
-          <div className='flex items-center space-x-1 shrink-0'>
-            {headerIcon && <div className='flex items-center justify-center w-6 h-6'>{headerIcon}</div>}
-            <div className='text-text-secondary system-sm-semibold'>{title}</div>
+        <div className='flex h-8 items-center justify-between'>
+          <div className='flex shrink-0 items-center space-x-1'>
+            {headerIcon && <div className='flex h-6 w-6 items-center justify-center'>{headerIcon}</div>}
+            <div className='system-sm-semibold text-text-secondary'>{title}</div>
           </div>
-          <div className='flex gap-2 items-center'>
+          <div className='flex items-center gap-2'>
             {headerRight && <div>{headerRight}</div>}
           </div>
         </div>

web/app/components/app/configuration/base/group-name/index.tsx

@@ -10,9 +10,9 @@ const GroupName: FC<IGroupNameProps> = ({
   name,
 }) => {
   return (
-    <div className='flex items-center mb-1'>
-      <div className='mr-3 leading-[18px] text-xs font-semibold text-text-tertiary uppercase'>{name}</div>
-      <div className='grow h-[1px]'
+    <div className='mb-1 flex items-center'>
+      <div className='mr-3 text-xs font-semibold uppercase leading-[18px] text-text-tertiary'>{name}</div>
+      <div className='h-[1px] grow'
         style={{
           background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)',
 

web/app/components/app/configuration/base/icons/remove-icon/index.tsx

@@ -17,7 +17,7 @@ const RemoveIcon = ({
   const computedIsHovered = isHoverStatus || isHovered
   return (
     <div
-      className={cn(className, computedIsHovered && 'bg-[#FEE4E2]', 'flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-[#FEE4E2]')}
+      className={cn(className, computedIsHovered && 'bg-[#FEE4E2]', 'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-[#FEE4E2]')}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       onClick={onClick}

web/app/components/app/configuration/base/operation-btn/index.tsx

@@ -16,8 +16,8 @@ export type IOperationBtnProps = {
 }
 
 const iconMap = {
-  add: <RiAddLine className='w-3.5 h-3.5' />,
-  edit: <RiEditLine className='w-3.5 h-3.5' />,
+  add: <RiAddLine className='h-3.5 w-3.5' />,
+  edit: <RiEditLine className='h-3.5 w-3.5' />,
 }
 
 const OperationBtn: FC<IOperationBtnProps> = ({
@@ -29,7 +29,7 @@ const OperationBtn: FC<IOperationBtnProps> = ({
   const { t } = useTranslation()
   return (
     <div
-      className={cn('flex items-center rounded-md h-7 px-3 space-x-1 text-text-secondary cursor-pointer hover:bg-state-base-hover select-none', className)}
+      className={cn('flex h-7 cursor-pointer select-none items-center space-x-1 rounded-md px-3 text-text-secondary hover:bg-state-base-hover', className)}
       onClick={onClick}>
       <div>
         {iconMap[type]}

web/app/components/app/configuration/base/var-highlight/index.tsx

@@ -16,7 +16,7 @@ const VarHighlight: FC<IVarHighlightProps> = ({
   return (
     <div
       key={name}
-      className={`${s.item} ${className} flex mb-2 items-center justify-center rounded-md px-1 h-5 text-xs font-medium text-primary-600`}
+      className={`${s.item} ${className} mb-2 flex h-5 items-center justify-center rounded-md px-1 text-xs font-medium text-primary-600`}
     >
       <span className='opacity-60'>{'{{'}</span>
       <span>{name}</span>

web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx

@@ -20,7 +20,7 @@ const FormattingChanged: FC<IFormattingChangedProps> = ({
       description={t('appDebug.feature.dataSet.queryVariable.unableToQueryDataSetTip')}
       footer={
         <div className='flex space-x-2'>
-          <Button variant='primary' className='flex justify-start !w-[96px]' onClick={onConfirm}>
+          <Button variant='primary' className='flex !w-[96px] justify-start' onClick={onConfirm}>
             <span className='text-[13px] font-medium'>{t('appDebug.feature.dataSet.queryVariable.ok')}</span>
           </Button>
         </div>

web/app/components/app/configuration/base/warning-mask/index.tsx

@@ -22,11 +22,11 @@ const WarningMask: FC<IWarningMaskProps> = ({
   footer,
 }) => {
   return (
-    <div className={`${s.mask} absolute z-10 inset-0 pt-16`}
+    <div className={`${s.mask} absolute inset-0 z-10 pt-16`}
     >
       <div className='mx-auto px-10'>
-        <div className={`${s.icon} flex items-center justify-center w-11 h-11 rounded-xl bg-white`}>{warningIcon}</div>
-        <div className='mt-4 text-[24px] leading-normal font-semibold text-gray-800'>
+        <div className={`${s.icon} flex h-11 w-11 items-center justify-center rounded-xl bg-white`}>{warningIcon}</div>
+        <div className='mt-4 text-[24px] font-semibold leading-normal text-gray-800'>
           {title}
         </div>
         <div className='mt-3 text-base text-gray-500'>

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

@@ -142,14 +142,14 @@ const AdvancedPromptInput: FC<Props> = ({
   const [editorHeight, setEditorHeight] = React.useState(isChatMode ? 200 : 508)
   const contextMissing = (
     <div
-      className='flex justify-between items-center h-11 pt-2 pr-3 pb-1 pl-4 rounded-tl-xl rounded-tr-xl'
+      className='flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl pb-1 pl-4 pr-3 pt-2'
       style={{
         background: 'linear-gradient(180deg, #FEF0C7 0%, rgba(254, 240, 199, 0) 100%)',
       }}
     >
       <div className='flex items-center pr-2' >
-        <RiErrorWarningFill className='mr-1 w-4 h-4 text-[#F79009]' />
-        <div className='leading-[18px] text-[13px] font-medium text-[#DC6803]'>{t('appDebug.promptMode.contextMissing')}</div>
+        <RiErrorWarningFill className='mr-1 h-4 w-4 text-[#F79009]' />
+        <div className='text-[13px] font-medium leading-[18px] text-[#DC6803]'>{t('appDebug.promptMode.contextMissing')}</div>
       </div>
       <Button
         size='small'
@@ -159,12 +159,12 @@ const AdvancedPromptInput: FC<Props> = ({
     </div>
   )
   return (
-    <div className={`bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 rounded-xl p-0.5 shadow-xs ${!isContextMissing ? '' : s.warningBorder}`}>
+    <div className={`rounded-xl bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 p-0.5 shadow-xs ${!isContextMissing ? '' : s.warningBorder}`}>
       <div className='rounded-xl bg-background-default'>
         {isContextMissing
           ? contextMissing
           : (
-            <div className={cn(s.boxHeader, 'flex justify-between items-center h-11 pt-2 pr-3 pb-1 pl-4 rounded-tl-xl rounded-tr-xl bg-background-default hover:shadow-xs')}>
+            <div className={cn(s.boxHeader, 'flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl bg-background-default pb-1 pl-4 pr-3 pt-2 hover:shadow-xs')}>
               {isChatMode
                 ? (
                   <MessageTypeSelector value={type} onChange={onTypeChange} />
@@ -184,11 +184,11 @@ const AdvancedPromptInput: FC<Props> = ({
                   </div>)}
               <div className={cn(s.optionWrap, 'items-center space-x-1')}>
                 {canDelete && (
-                  <RiDeleteBinLine onClick={onDelete} className='h-6 w-6 p-1 text-text-tertiary cursor-pointer' />
+                  <RiDeleteBinLine onClick={onDelete} className='h-6 w-6 cursor-pointer p-1 text-text-tertiary' />
                 )}
                 {!isCopied
                   ? (
-                    <Clipboard className='h-6 w-6 p-1 text-text-tertiary cursor-pointer' onClick={() => {
+                    <Clipboard className='h-6 w-6 cursor-pointer p-1 text-text-tertiary' onClick={() => {
                       copy(value)
                       setIsCopied(true)
                     }} />
@@ -201,13 +201,13 @@ const AdvancedPromptInput: FC<Props> = ({
           )}
 
         <PromptEditorHeightResizeWrap
-          className='px-4 min-h-[102px] overflow-y-auto text-sm text-text-secondary'
+          className='min-h-[102px] overflow-y-auto px-4 text-sm text-text-secondary'
           height={editorHeight}
           minHeight={minHeight}
           onHeightChange={setEditorHeight}
           footer={(
-            <div className='pl-4 pb-2 flex'>
-              <div className="h-[18px] leading-[18px] px-1 rounded-md bg-divider-regular text-xs text-text-tertiary">{value.length}</div>
+            <div className='flex pb-2 pl-4'>
+              <div className="h-[18px] rounded-md bg-divider-regular px-1 text-xs leading-[18px] text-text-tertiary">{value.length}</div>
             </div>
           )}
           hideResize={noResize}

web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx

@@ -46,11 +46,11 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
       >
         <div className='flex items-start space-x-3'>
           <div
-            className='shrink-0 flex items-center justify-center h-10 w-10 bg-components-card-bg-alt rounded-xl border border-components-card-border shadow-lg'
+            className='flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-components-card-border bg-components-card-bg-alt shadow-lg'
           >{VarIcon}</div>
           <div className='grow-1'>
             <div className='text-sm font-medium text-text-primary'>{t('appDebug.autoAddVar')}</div>
-            <div className='flex flex-wrap mt-[15px] max-h-[66px] overflow-y-auto px-1 space-x-1'>
+            <div className='mt-[15px] flex max-h-[66px] flex-wrap space-x-1 overflow-y-auto px-1'>
               {varNameArr.map(name => (
                 <VarHighlight key={name} name={name} />
               ))}

web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx

@@ -28,8 +28,8 @@ const EditModal: FC<Props> = ({
       isShow={isShow}
       onClose={onClose}
     >
-      <div className={'mt-6 font-medium text-sm leading-[21px] text-text-primary'}>{t('appDebug.feature.conversationHistory.editModal.userPrefix')}</div>
-      <input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-components-input-bg-normal'}
+      <div className={'mt-6 text-sm font-medium leading-[21px] text-text-primary'}>{t('appDebug.feature.conversationHistory.editModal.userPrefix')}</div>
+      <input className={'mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10'}
         value={tempData.user_prefix}
         onChange={e => setTempData({
           ...tempData,
@@ -37,8 +37,8 @@ const EditModal: FC<Props> = ({
         })}
       />
 
-      <div className={'mt-6 font-medium text-sm leading-[21px] text-text-primary'}>{t('appDebug.feature.conversationHistory.editModal.assistantPrefix')}</div>
-      <input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-components-input-bg-normal'}
+      <div className={'mt-6 text-sm font-medium leading-[21px] text-text-primary'}>{t('appDebug.feature.conversationHistory.editModal.assistantPrefix')}</div>
+      <input className={'mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10'}
         value={tempData.assistant_prefix}
         onChange={e => setTempData({
           ...tempData,

web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx

@@ -30,20 +30,20 @@ const HistoryPanel: FC<Props> = ({
         </div>
       }
       headerIcon={
-        <div className='p-1 rounded-md shadow-xs'>
-          <MessageClockCircle className='w-4 h-4 text-[#DD2590]' />
+        <div className='rounded-md p-1 shadow-xs'>
+          <MessageClockCircle className='h-4 w-4 text-[#DD2590]' />
         </div>}
       headerRight={
         <div className='flex items-center'>
           <div className='text-xs text-text-tertiary'>{t('appDebug.feature.conversationHistory.description')}</div>
-          <div className='ml-3 w-[1px] h-[14px] bg-divider-regular'></div>
+          <div className='ml-3 h-[14px] w-[1px] bg-divider-regular'></div>
           <OperationBtn type="edit" onClick={onShowEditModal} />
         </div>
       }
       noBodySpacing
     >
       {showWarning && (
-        <div className='flex justify-between py-2 px-3 rounded-b-xl bg-background-section-burn text-xs text-text-secondary'>
+        <div className='flex justify-between rounded-b-xl bg-background-section-burn px-3 py-2 text-xs text-text-secondary'>
           <div>{t('appDebug.feature.conversationHistory.tip')}
             <a href={`${locale === LanguagesSupported[1]
               ? 'https://docs.dify.ai/v/zh-hans/guides/application-design/prompt-engineering'

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

@@ -159,7 +159,7 @@ const Prompt: FC<IPromptProps> = ({
         <Button
           onClick={handleAddMessage}
           className='mt-3 w-full'>
-          <RiAddLine className='w-4 h-4 mr-2' />
+          <RiAddLine className='mr-2 h-4 w-4' />
           <div>{t('appDebug.promptMode.operation.addMessage')}</div>
         </Button>
       )}

web/app/components/app/configuration/config-prompt/message-type-selector.tsx

@@ -24,12 +24,12 @@ const MessageTypeSelector: FC<Props> = ({
     <div className='relative left-[-8px]' ref={ref}>
       <div
         onClick={toggleShow}
-        className={cn(showOption && 'bg-indigo-100', 'flex items-center h-7 pl-1.5 pr-1 space-x-0.5 rounded-lg cursor-pointer text-indigo-800')}>
+        className={cn(showOption && 'bg-indigo-100', 'flex h-7 cursor-pointer items-center space-x-0.5 rounded-lg pl-1.5 pr-1 text-indigo-800')}>
         <div className='text-sm font-semibold uppercase'>{value}</div>
-        <ChevronSelectorVertical className='w-3 h-3 ' />
+        <ChevronSelectorVertical className='h-3 w-3 ' />
       </div>
       {showOption && (
-        <div className='absolute z-10 top-[30px] p-1 border border-components-panel-border shadow-lg rounded-lg bg-components-panel-bg'>
+        <div className='absolute top-[30px] z-10 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg'>
           {allTypes.map(type => (
             <div
               key={type}
@@ -37,7 +37,7 @@ const MessageTypeSelector: FC<Props> = ({
                 setHide()
                 onChange(type)
               }}
-              className='flex items-center h-9 min-w-[44px] px-3 rounded-lg cursor-pointer text-sm font-medium text-text-secondary uppercase hover:bg-state-base-hover'
+              className='flex h-9 min-w-[44px] cursor-pointer items-center rounded-lg px-3 text-sm font-medium uppercase text-text-secondary hover:bg-state-base-hover'
             >{type}</div>
           ))
           }

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
-  footer?: JSX.Element
+  children: React.JSX.Element
+  footer?: React.JSX.Element
   hideResize?: boolean
 }
 
@@ -85,9 +85,9 @@ const PromptEditorHeightResizeWrap: FC<Props> = ({
       {footer}
       {!hideResize && (
         <div
-          className='absolute bottom-0 left-0 w-full flex justify-center h-2 cursor-row-resize'
+          className='absolute bottom-0 left-0 flex h-2 w-full cursor-row-resize justify-center'
           onMouseDown={handleStartResize}>
-          <div className='w-5 h-[3px] rounded-sm bg-gray-300'></div>
+          <div className='h-[3px] w-5 rounded-sm bg-gray-300'></div>
         </div>
       )}
     </div>

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

@@ -159,10 +159,10 @@ const Prompt: FC<ISimplePromptInput> = ({
   const [editorHeight, setEditorHeight] = useState(minHeight)
 
   return (
-    <div className={cn('relative bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 rounded-xl p-0.5 shadow-xs')}>
+    <div className={cn('relative rounded-xl bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 p-0.5 shadow-xs')}>
       <div className='rounded-xl bg-background-section-burn'>
         {!noTitle && (
-          <div className="flex justify-between items-center h-11 pl-3 pr-2.5">
+          <div className="flex h-11 items-center justify-between pl-3 pr-2.5">
             <div className="flex items-center space-x-1">
               <div className='h2 system-sm-semibold-uppercase text-text-secondary'>{mode !== AppType.completion ? t('appDebug.chatSubTitle') : t('appDebug.completionSubTitle')}</div>
               {!readonly && (
@@ -184,14 +184,14 @@ const Prompt: FC<ISimplePromptInput> = ({
         )}
 
         <PromptEditorHeightResizeWrap
-          className='px-4 pt-2 min-h-[228px] bg-background-default rounded-t-xl text-sm text-text-secondary'
+          className='min-h-[228px] rounded-t-xl bg-background-default px-4 pt-2 text-sm text-text-secondary'
           height={editorHeight}
           minHeight={minHeight}
           onHeightChange={setEditorHeight}
           hideResize={noResize}
           footer={(
-            <div className='pl-4 pb-2 flex bg-background-default rounded-b-xl'>
-              <div className="h-[18px] leading-[18px] px-1 rounded-md bg-components-badge-bg-gray-soft text-xs text-text-tertiary">{promptTemplate.length}</div>
+            <div className='flex rounded-b-xl bg-background-default pb-2 pl-4'>
+              <div className="h-[18px] rounded-md bg-components-badge-bg-gray-soft px-1 text-xs leading-[18px] text-text-tertiary">{promptTemplate.length}</div>
             </div>
           )}
         >

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> = ({
@@ -16,7 +16,7 @@ const Field: FC<Props> = ({
 }) => {
   return (
     <div className={cn(className)}>
-      <div className='text-text-secondary system-sm-semibold leading-8'>{title}</div>
+      <div className='system-sm-semibold leading-8 text-text-secondary'>{title}</div>
       <div>{children}</div>
     </div>
   )

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

@@ -233,9 +233,9 @@ const ConfigModal: FC<IConfigModalProps> = ({
             />
           )}
 
-          <div className='!mt-5 flex items-center h-6 space-x-2'>
+          <div className='!mt-5 flex h-6 items-center space-x-2'>
             <Checkbox checked={tempPayload.required} onCheck={() => handlePayloadChange('required')(!tempPayload.required)} />
-            <span className='text-text-secondary system-sm-semibold'>{t('appDebug.variableConfig.required')}</span>
+            <span className='system-sm-semibold text-text-secondary'>{t('appDebug.variableConfig.required')}</span>
           </div>
         </div>
       </div>

web/app/components/app/configuration/config-var/config-string/index.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import Input from '@/app/components/base/input'
 
-export interface IConfigStringProps {
+export type IConfigStringProps = {
   value: number | undefined
   maxLength: number
   modelId: string

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

@@ -219,11 +219,11 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
     >
       {!hasVar && (
         <div className='mt-1 px-3 pb-3'>
-          <div className='pt-2 pb-1 text-xs text-text-tertiary'>{t('appDebug.notSetVar')}</div>
+          <div className='pb-1 pt-2 text-xs text-text-tertiary'>{t('appDebug.notSetVar')}</div>
         </div>
       )}
       {hasVar && (
-        <div className='flex flex-wrap mt-1 px-3 pb-3 justify-between'>
+        <div className='mt-1 px-3 pb-3'>
           {promptVariables.map(({ key, name, type, required, config, icon, icon_background }, index) => (
             <VarItem
               key={index}

web/app/components/app/configuration/config-var/select-type-item/index.tsx

@@ -27,12 +27,12 @@ const SelectTypeItem: FC<ISelectTypeItemProps> = ({
   return (
     <div
       className={cn(
-        'flex flex-col justify-center items-center h-[58px] rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg space-y-1 text-text-secondary',
-        selected ? 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs system-xs-medium' : ' hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs cursor-pointer system-xs-regular')}
+        'flex h-[58px] flex-col items-center justify-center space-y-1 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary',
+        selected ? 'system-xs-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs' : ' system-xs-regular cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs')}
       onClick={onClick}
     >
       <div className='shrink-0'>
-        <InputVarTypeIcon type={type} className='w-5 h-5' />
+        <InputVarTypeIcon type={type} className='h-5 w-5' />
       </div>
       <span>{typeName}</span>
     </div>

web/app/components/app/configuration/config-var/select-var-type.tsx

@@ -28,11 +28,11 @@ type ItemProps = {
 const SelectItem: FC<ItemProps> = ({ text, type, value, Icon, onClick }) => {
   return (
     <div
-      className='flex items-center px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
+      className='flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-gray-50'
       onClick={() => onClick(value)}
     >
-      {Icon ? <Icon className='w-4 h-4 text-gray-500' /> : <InputVarTypeIcon type={type!} className='w-4 h-4 text-gray-500' />}
-      <div className='ml-2 text-xs text-gray-600 truncate'>{text}</div>
+      {Icon ? <Icon className='h-4 w-4 text-gray-500' /> : <InputVarTypeIcon type={type!} className='h-4 w-4 text-gray-500' />}
+      <div className='ml-2 truncate text-xs text-gray-600'>{text}</div>
     </div>
   )
 }
@@ -60,7 +60,7 @@ const SelectVarType: FC<Props> = ({
         <OperationBtn type='add' className={cn(open && 'bg-gray-200')} />
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1000 }}>
-        <div className='bg-white border border-gray-200 shadow-lg rounded-lg min-w-[192px]'>
+        <div className='min-w-[192px] rounded-lg border border-gray-200 bg-white shadow-lg'>
           <div className='p-1'>
             <SelectItem type={InputVarType.textInput} value='string' text={t('appDebug.variableConfig.string')} onClick={handleChange}></SelectItem>
             <SelectItem type={InputVarType.paragraph} value='paragraph' text={t('appDebug.variableConfig.paragraph')} onClick={handleChange}></SelectItem>

web/app/components/app/configuration/config-var/var-item.tsx

@@ -33,40 +33,38 @@ const VarItem: FC<ItemProps> = ({
   const [isDeleting, setIsDeleting] = useState(false)
 
   return (
-    <div className={cn('group relative flex items-center mb-1 last-of-type:mb-0  pl-2.5 py-2 pr-3 w-full rounded-lg bg-components-panel-on-panel-item-bg border-components-panel-border-subtle border-[0.5px] shadow-xs hover:shadow-sm hover:bg-components-panel-on-panel-item-bg-hover', isDeleting && 'hover:bg-state-destructive-hover border-state-destructive-border', readonly && 'cursor-not-allowed opacity-30')}>
-      <VarIcon className='shrink-0 mr-1 w-4 h-4 text-text-accent' />
-      <div className='grow'>
-        <div className='flex items-center h-[18px]'>
-          <div className='grow truncate' title={name}>
-            <span className='system-sm-medium text-text-secondary'>{name}</span>
-            <span className='px-1 system-xs-regular text-text-quaternary'>·</span>
-            <span className='system-xs-medium text-text-tertiary'>{label}</span>
-          </div>
-          <div className='group-hover:hidden flex items-center'>
-            {required && <Badge text='required' />}
-            <span className='pl-2 pr-1 system-xs-regular text-text-tertiary'>{type}</span>
-            <IconTypeIcon type={type as IInputTypeIconProps['type']} className='text-text-tertiary' />
-          </div>
+    <div className={cn('group relative mb-1 flex h-[34px] w-full items-center  rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-2.5 pr-3 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm', isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover', readonly && 'cursor-not-allowed opacity-30')}>
+      <VarIcon className='mr-1 h-4 w-4 shrink-0 text-text-accent' />
+      <div className='flex w-0 grow items-center'>
+        <div className='truncate' title={`${name} · ${label}`}>
+          <span className='system-sm-medium text-text-secondary'>{name}</span>
+          <span className='system-xs-regular px-1 text-text-quaternary'>·</span>
+          <span className='system-xs-medium text-text-tertiary'>{label}</span>
         </div>
       </div>
-      {!readonly && (
-        <div className='hidden rounded-lg group-hover:flex items-center justify-end absolute right-0 top-0 bottom-0 pr-2 w-[124px]'>
+      <div className='shrink-0'>
+        <div className={cn('flex items-center', !readonly && 'group-hover:hidden')}>
+          {required && <Badge text='required' />}
+          <span className='system-xs-regular pl-2 pr-1 text-text-tertiary'>{type}</span>
+          <IconTypeIcon type={type as IInputTypeIconProps['type']} className='text-text-tertiary' />
+        </div>
+        <div className={cn('hidden items-center justify-end rounded-lg', !readonly && 'group-hover:flex')}>
           <div
-            className='flex items-center justify-center mr-1 w-6 h-6 hover:bg-black/5 rounded-md cursor-pointer'
+            className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5'
             onClick={onEdit}
           >
-            <RiEditLine className='w-4 h-4 text-text-tertiary' />
+            <RiEditLine className='h-4 w-4 text-text-tertiary' />
           </div>
           <div
-            className='flex items-center justify-center w-6 h-6  text-text-tertiary cursor-pointer hover:text-text-destructive'
+            className='flex h-6 w-6 cursor-pointer items-center  justify-center text-text-tertiary hover:text-text-destructive'
             onClick={onRemove}
             onMouseOver={() => setIsDeleting(true)}
             onMouseLeave={() => setIsDeleting(false)}
           >
-            <RiDeleteBinLine className='w-4 h-4' />
+            <RiDeleteBinLine className='h-4 w-4' />
           </div>
         </div>
-      )}
+      </div>
     </div>
   )
 }

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

@@ -57,14 +57,14 @@ const ConfigVision: FC = () => {
     return null
 
   return (
-    <div className='mt-2 flex items-center gap-2 p-2 rounded-xl border-effects-highlight border-t-[0.5px] border-l-[0.5px] bg-background-section-burn'>
+    <div className='mt-2 flex items-center gap-2 rounded-xl border-l-[0.5px] border-t-[0.5px] border-effects-highlight bg-background-section-burn p-2'>
       <div className='shrink-0 p-1'>
-        <div className='p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
-          <Vision className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs'>
+          <Vision className='h-4 w-4 text-text-primary-on-surface' />
         </div>
       </div>
-      <div className='grow flex items-center'>
-        <div className='mr-1 text-text-secondary system-sm-semibold'>{t('appDebug.vision.name')}</div>
+      <div className='flex grow items-center'>
+        <div className='system-sm-semibold mr-1 text-text-secondary'>{t('appDebug.vision.name')}</div>
         <Tooltip
           popupContent={
             <div className='w-[180px]' >
@@ -73,7 +73,7 @@ const ConfigVision: FC = () => {
           }
         />
       </div>
-      <div className='shrink-0 flex items-center'>
+      <div className='flex shrink-0 items-center'>
         {/* <div className='mr-2 flex items-center gap-0.5'>
           <div className='text-text-tertiary system-xs-medium-uppercase'>{t('appDebug.vision.visionSettings.resolution')}</div>
           <Tooltip
@@ -99,7 +99,7 @@ const ConfigVision: FC = () => {
           />
         </div> */}
         <ParamConfig />
-        <div className='ml-1 mr-3 w-[1px] h-3.5 bg-divider-regular'></div>
+        <div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-regular'></div>
         <Switch
           defaultValue={isImageEnabled}
           onChange={handleChange}

web/app/components/app/configuration/config-vision/param-config-content.tsx

@@ -41,11 +41,11 @@ const ParamConfigContent: FC = () => {
 
   return (
     <div>
-      <div className='leading-6 text-base font-semibold text-text-primary'>{t('appDebug.vision.visionSettings.title')}</div>
-      <div className='pt-3 space-y-6'>
+      <div className='text-base font-semibold leading-6 text-text-primary'>{t('appDebug.vision.visionSettings.title')}</div>
+      <div className='space-y-6 pt-3'>
         <div>
           <div className='mb-2 flex items-center  space-x-1'>
-            <div className='leading-[18px] text-[13px] font-semibold text-text-secondary'>{t('appDebug.vision.visionSettings.resolution')}</div>
+            <div className='text-[13px] font-semibold leading-[18px] text-text-secondary'>{t('appDebug.vision.visionSettings.resolution')}</div>
             <Tooltip
               popupContent={
                 <div className='w-[180px]' >
@@ -78,7 +78,7 @@ const ParamConfigContent: FC = () => {
           </div>
         </div>
         <div>
-          <div className='mb-2 leading-[18px] text-[13px] font-semibold text-text-secondary'>{t('appDebug.vision.visionSettings.uploadMethod')}</div>
+          <div className='mb-2 text-[13px] font-semibold leading-[18px] text-text-secondary'>{t('appDebug.vision.visionSettings.uploadMethod')}</div>
           <div className='flex items-center gap-1'>
             <OptionCard
               className='grow'

web/app/components/app/configuration/config-vision/param-config.tsx

@@ -27,12 +27,12 @@ const ParamsConfig: FC = () => {
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
         <Button variant='ghost' size='small' className={cn('')}>
-          <RiSettings2Line className='w-3.5 h-3.5' />
+          <RiSettings2Line className='h-3.5 w-3.5' />
           <div className='ml-1'>{t('appDebug.voice.settings')}</div>
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 50 }}>
-        <div className='w-80 sm:w-[412px] p-4 bg-components-panel-bg rounded-lg border-[0.5px] border-components-panel-border shadow-lg space-y-3'>
+        <div className='w-80 space-y-3 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-lg sm:w-[412px]'>
           <ParamConfigContent />
         </div>
       </PortalToFollowElemContent>

web/app/components/app/configuration/config/agent-setting-button.tsx

@@ -25,8 +25,8 @@ const AgentSettingButton: FC<Props> = ({
 
   return (
     <>
-      <Button onClick={() => setIsShowAgentSetting(true)} className='shrink-0 mr-2'>
-        <RiSettings2Line className='mr-1 w-4 h-4 text-text-tertiary' />
+      <Button onClick={() => setIsShowAgentSetting(true)} className='mr-2 shrink-0'>
+        <RiSettings2Line className='mr-1 h-4 w-4 text-text-tertiary' />
         {t('appDebug.agent.setting.name')}
       </Button>
       {isShowAgentSetting && (

web/app/components/app/configuration/config/agent/agent-setting/index.tsx

@@ -49,48 +49,48 @@ const AgentSetting: FC<Props> = ({
   }
 
   return (
-    <div className='fixed z-[100] inset-0 overflow-hidden flex justify-end p-2'
+    <div className='fixed inset-0 z-[100] flex justify-end overflow-hidden p-2'
       style={{
         backgroundColor: 'rgba(16, 24, 40, 0.20)',
       }}
     >
       <div
         ref={ref}
-        className='w-[640px] flex flex-col h-full overflow-hidden bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl'
+        className='flex h-full w-[640px] flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'
       >
-        <div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-divider-regular'>
+        <div className='flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pl-6 pr-5'>
           <div className='flex flex-col text-base font-semibold text-text-primary'>
             <div className='leading-6'>{t('appDebug.agent.setting.name')}</div>
           </div>
           <div className='flex items-center'>
             <div
               onClick={onCancel}
-              className='flex justify-center items-center w-6 h-6 cursor-pointer'
+              className='flex h-6 w-6 cursor-pointer items-center justify-center'
             >
-              <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+              <RiCloseLine className='h-4 w-4 text-text-tertiary' />
             </div>
           </div>
         </div>
         {/* Body */}
-        <div className='grow p-6 pt-5 border-b overflow-y-auto pb-[68px]' style={{
+        <div className='grow overflow-y-auto border-b p-6 pb-[68px] pt-5' style={{
           borderBottom: 'rgba(0, 0, 0, 0.05)',
         }}>
           {/* Agent Mode */}
           <ItemPanel
             className='mb-4'
             icon={
-              <CuteRobot className='w-4 h-4 text-indigo-600' />
+              <CuteRobot className='h-4 w-4 text-indigo-600' />
             }
             name={t('appDebug.agent.agentMode')}
             description={t('appDebug.agent.agentModeDes')}
           >
-            <div className='leading-[18px] text-[13px] font-medium text-text-primary'>{isFunctionCall ? t('appDebug.agent.agentModeType.functionCall') : t('appDebug.agent.agentModeType.ReACT')}</div>
+            <div className='text-[13px] font-medium leading-[18px] text-text-primary'>{isFunctionCall ? t('appDebug.agent.agentModeType.functionCall') : t('appDebug.agent.agentModeType.ReACT')}</div>
           </ItemPanel>
 
           <ItemPanel
             className='mb-4'
             icon={
-              <Unblur className='w-4 h-4 text-[#FB6514]' />
+              <Unblur className='h-4 w-4 text-[#FB6514]' />
             }
             name={t('appDebug.agent.setting.maximumIterations.name')}
             description={t('appDebug.agent.setting.maximumIterations.description')}
@@ -113,7 +113,7 @@ const AgentSetting: FC<Props> = ({
                 type="number"
                 min={maxIterationsMin}
                 max={maxIterationsMax} step={1}
-                className="block w-11 h-7 leading-7 rounded-lg border-0 pl-1 px-1.5 bg-components-input-bg-normal text-text-primary placeholder:text-text-tertiary focus:ring-1 focus:ring-inset focus:ring-primary-600"
+                className="block h-7 w-11 rounded-lg border-0 bg-components-input-bg-normal px-1.5 pl-1 leading-7 text-text-primary placeholder:text-text-tertiary focus:ring-1 focus:ring-inset focus:ring-primary-600"
                 value={tempPayload.max_iteration}
                 onChange={(e) => {
                   let value = Number.parseInt(e.target.value, 10)
@@ -131,20 +131,20 @@ const AgentSetting: FC<Props> = ({
           </ItemPanel>
 
           {!isFunctionCall && (
-            <div className='py-2 bg-background-section-burn rounded-xl shadow-xs'>
-              <div className='flex items-center h-8 px-4 leading-6 text-sm font-semibold text-text-secondary'>{t('tools.builtInPromptTitle')}</div>
-              <div className='h-[396px] px-4 overflow-y-auto leading-5 text-sm font-normal text-text-secondary whitespace-pre-line'>
+            <div className='rounded-xl bg-background-section-burn py-2 shadow-xs'>
+              <div className='flex h-8 items-center px-4 text-sm font-semibold leading-6 text-text-secondary'>{t('tools.builtInPromptTitle')}</div>
+              <div className='h-[396px] overflow-y-auto whitespace-pre-line px-4 text-sm font-normal leading-5 text-text-secondary'>
                 {isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion}
               </div>
               <div className='px-4'>
-                <div className='inline-flex items-center h-5 px-1 bg-components-input-bg-normal rounded-md leading-[18px] text-xs font-medium text-text-tertiary'>{(isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion).length}</div>
+                <div className='inline-flex h-5 items-center rounded-md bg-components-input-bg-normal px-1 text-xs font-medium leading-[18px] text-text-tertiary'>{(isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion).length}</div>
               </div>
             </div>
           )}
 
         </div>
         <div
-          className='sticky z-[5] bottom-0 w-full flex justify-end py-4 px-6 border-t bg-background-section-burn border-divider-regular'
+          className='sticky bottom-0 z-[5] flex w-full justify-end border-t border-divider-regular bg-background-section-burn px-6 py-4'
         >
           <Button
             onClick={onCancel}

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> = ({
@@ -19,10 +19,10 @@ const ItemPanel: FC<Props> = ({
   children,
 }) => {
   return (
-    <div className={cn(className, 'flex justify-between items-center h-12 px-3 rounded-lg bg-background-section-burn')}>
+    <div className={cn(className, 'flex h-12 items-center justify-between rounded-lg bg-background-section-burn px-3')}>
       <div className='flex items-center'>
         {icon}
-        <div className='ml-3 mr-1 leading-6 text-sm font-semibold text-text-secondary'>{name}</div>
+        <div className='ml-3 mr-1 text-sm font-semibold leading-6 text-text-secondary'>{name}</div>
         <Tooltip
           popupContent={
             <div className='w-[180px]'>