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/components/base/features/context.tsx

@@ -14,7 +14,7 @@ type FeaturesProviderProps = {
   children: React.ReactNode
 } & Partial<FeaturesState>
 export const FeaturesProvider = ({ children, ...props }: FeaturesProviderProps) => {
-  const storeRef = useRef<FeaturesStore>()
+  const storeRef = useRef<FeaturesStore | undefined>(undefined)
 
   if (!storeRef.current)
     storeRef.current = createFeaturesStore(props)

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

@@ -77,9 +77,9 @@ const ConfigParamModal: FC<Props> = ({
     <Modal
       isShow={isShow}
       onClose={onHide}
-      className='!p-6 !mt-14 !max-w-none !w-[640px]'
+      className='!mt-14 !w-[640px] !max-w-none !p-6'
     >
-      <div className='mb-2 title-2xl-semi-bold text-text-primary'>
+      <div className='title-2xl-semi-bold mb-2 text-text-primary'>
         {t(`appAnnotation.initSetup.${isInit ? 'title' : 'configTitle'}`)}
       </div>
 
@@ -122,7 +122,7 @@ const ConfigParamModal: FC<Props> = ({
         </Item>
       </div>
 
-      <div className='mt-6 flex gap-2 justify-end'>
+      <div className='mt-6 flex justify-end gap-2'>
         <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
         <Button
           variant='primary'

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

@@ -3,18 +3,18 @@ import type { FC } from 'react'
 import React from 'react'
 import Tooltip from '@/app/components/base/tooltip'
 
-export const Item: FC<{ title: string; tooltip: string; children: JSX.Element }> = ({
+export const Item: FC<{ title: string; tooltip: string; children: React.JSX.Element }> = ({
   title,
   tooltip,
   children,
 }) => {
   return (
     <div>
-      <div className='flex items-center space-x-1 mb-1'>
-        <div className='py-1 system-sm-semibold text-text-secondary'>{title}</div>
+      <div className='mb-1 flex items-center space-x-1'>
+        <div className='system-sm-semibold py-1 text-text-secondary'>{title}</div>
         <Tooltip
           popupContent={
-            <div className='max-w-[200px] system-sm-regular text-text-secondary'>{tooltip}</div>
+            <div className='system-sm-regular max-w-[200px] text-text-secondary'>{tooltip}</div>
           }
         />
       </div>

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

@@ -77,8 +77,8 @@ const AnnotationReply = ({
     <>
       <FeatureCard
         icon={
-          <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
-            <MessageFast className='w-4 h-4 text-text-primary-on-surface' />
+          <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs'>
+            <MessageFast className='h-4 w-4 text-text-primary-on-surface' />
           </div>
         }
         title={t('appDebug.feature.annotation.title')}
@@ -90,33 +90,33 @@ const AnnotationReply = ({
       >
         <>
           {!annotationReply?.enabled && (
-            <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.annotation.description')}</div>
+            <div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{t('appDebug.feature.annotation.description')}</div>
           )}
           {!!annotationReply?.enabled && (
             <>
               {!isHovering && (
-                <div className='pt-0.5 flex items-center gap-4'>
+                <div className='flex items-center gap-4 pt-0.5'>
                   <div className=''>
-                    <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.annotation.scoreThreshold.title')}</div>
-                    <div className='text-text-secondary system-xs-regular'>{annotationReply.score_threshold || '-'}</div>
+                    <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.feature.annotation.scoreThreshold.title')}</div>
+                    <div className='system-xs-regular text-text-secondary'>{annotationReply.score_threshold || '-'}</div>
                   </div>
-                  <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                  <div className='h-[27px] w-px rotate-12 bg-divider-subtle'></div>
                   <div className=''>
-                    <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('common.modelProvider.embeddingModel.key')}</div>
-                    <div className='text-text-secondary system-xs-regular'>{annotationReply.embedding_model?.embedding_model_name}</div>
+                    <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('common.modelProvider.embeddingModel.key')}</div>
+                    <div className='system-xs-regular text-text-secondary'>{annotationReply.embedding_model?.embedding_model_name}</div>
                   </div>
                 </div>
               )}
               {isHovering && (
                 <div className='flex items-center justify-between'>
                   <Button className='w-[178px]' onClick={() => setIsShowAnnotationConfigInit(true)} disabled={disabled}>
-                    <RiEqualizer2Line className='mr-1 w-4 h-4' />
+                    <RiEqualizer2Line className='mr-1 h-4 w-4' />
                     {t('common.operation.params')}
                   </Button>
                   <Button className='w-[178px]' onClick={() => {
                     router.push(`/app/${appId}/annotations`)
                   }}>
-                    <RiExternalLinkLine className='mr-1 w-4 h-4' />
+                    <RiExternalLinkLine className='mr-1 h-4 w-4' />
                     {t('appDebug.feature.annotation.cacheManagement')}
                   </Button>
                 </div>

web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx

@@ -20,13 +20,13 @@ const Slider: React.FC<ISliderProps> = ({ className, max, min, step, value, disa
     max={max || 100}
     step={step || 1}
     className={cn(className, s.slider)}
-    thumbClassName={cn(s['slider-thumb'], 'top-[-7px] w-2 h-[18px] bg-white border !border-black/8 rounded-[36px] shadow-md cursor-pointer')}
+    thumbClassName={cn(s['slider-thumb'], 'top-[-7px] h-[18px] w-2 cursor-pointer rounded-[36px] border !border-black/8 bg-white shadow-md')}
     trackClassName={s['slider-track']}
     onChange={onChange}
     renderThumb={(props, state) => (
       <div {...props}>
-        <div className='relative w-full h-full'>
-          <div className='absolute top-[-16px] left-[50%] translate-x-[-50%] system-sm-semibold text-text-primary'>
+        <div className='relative h-full w-full'>
+          <div className='system-sm-semibold absolute left-[50%] top-[-16px] translate-x-[-50%] text-text-primary'>
             {(state.valueNow / 100).toFixed(2)}
           </div>
         </div>

web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx

@@ -19,7 +19,7 @@ const ScoreSlider: FC<Props> = ({
 
   return (
     <div className={className}>
-      <div className='h-[1px] mt-[14px]'>
+      <div className='mt-[14px] h-[1px]'>
         <Slider
           max={100}
           min={80}
@@ -28,7 +28,7 @@ const ScoreSlider: FC<Props> = ({
           onChange={onChange}
         />
       </div>
-      <div className='mt-[10px] flex justify-between items-center system-xs-semibold-uppercase'>
+      <div className='system-xs-semibold-uppercase mt-[10px] flex items-center justify-between'>
         <div className='flex space-x-1 text-util-colors-cyan-cyan-500'>
           <div>0.8</div>
           <div>·</div>

web/app/components/base/features/new-feature-panel/citation.tsx

@@ -40,8 +40,8 @@ const Citation = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-warning-warning-500'>
-          <Citations className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-warning-warning-500 p-1 shadow-xs'>
+          <Citations className='h-4 w-4 text-text-primary-on-surface' />
         </div>
       }
       title={t('appDebug.feature.citation.title')}

web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx

@@ -81,8 +81,8 @@ const ConversationOpener = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
-          <LoveMessage className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'>
+          <LoveMessage className='h-4 w-4 text-text-primary-on-surface' />
         </div>
       }
       title={t('appDebug.feature.conversationOpener.title')}
@@ -94,18 +94,18 @@ const ConversationOpener = ({
     >
       <>
         {!opening?.enabled && (
-          <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.conversationOpener.description')}</div>
+          <div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{t('appDebug.feature.conversationOpener.description')}</div>
         )}
         {!!opening?.enabled && (
           <>
             {!isHovering && (
-              <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>
+              <div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>
                 {opening.opening_statement || t('appDebug.openingStatement.placeholder')}
               </div>
             )}
             {isHovering && (
               <Button className='w-full' onClick={handleOpenOpeningModal} disabled={disabled}>
-                <RiEditLine className='mr-1 w-4 h-4' />
+                <RiEditLine className='mr-1 h-4 w-4' />
                 {t('appDebug.openingStatement.writeOpener')}
               </Button>
             )}

web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx

@@ -95,12 +95,12 @@ const OpeningSettingModal = ({
     return (
       <div>
         <div className='flex items-center py-2'>
-          <div className='shrink-0 flex space-x-0.5 leading-[18px] text-xs font-medium text-text-tertiary'>
+          <div className='flex shrink-0 space-x-0.5 text-xs font-medium leading-[18px] text-text-tertiary'>
             <div className='uppercase'>{t('appDebug.openingStatement.openingQuestion')}</div>
             <div>·</div>
             <div>{tempSuggestedQuestions.length}/{MAX_QUESTION_NUM}</div>
           </div>
-          <Divider bgStyle='gradient' className='ml-3 grow w-0 h-px'/>
+          <Divider bgStyle='gradient' className='ml-3 h-px w-0 grow'/>
         </div>
         <ReactSortable
           className="space-y-1"
@@ -119,13 +119,13 @@ const OpeningSettingModal = ({
             return (
               <div
                 className={cn(
-                  'group relative rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg flex items-center pl-2.5 hover:bg-components-panel-on-panel-item-bg-hover',
-                  focusID === index && 'border-components-input-border-active hover:border-components-input-border-active bg-components-input-bg-active hover:bg-components-input-bg-active',
-                  deletingID === index && 'border-components-input-border-destructive hover:border-components-input-border-destructive bg-state-destructive-hover hover:bg-state-destructive-hover',
+                  'group relative flex items-center rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-2.5 hover:bg-components-panel-on-panel-item-bg-hover',
+                  focusID === index && 'border-components-input-border-active bg-components-input-bg-active hover:border-components-input-border-active hover:bg-components-input-bg-active',
+                  deletingID === index && 'border-components-input-border-destructive bg-state-destructive-hover hover:border-components-input-border-destructive hover:bg-state-destructive-hover',
                 )}
                 key={index}
               >
-                <RiDraggable className='handle w-4 h-4 text-text-quaternary cursor-grab' />
+                <RiDraggable className='handle h-4 w-4 cursor-grab text-text-quaternary' />
                 <input
                   type="input"
                   value={question || ''}
@@ -138,20 +138,20 @@ const OpeningSettingModal = ({
                       return item
                     }))
                   }}
-                  className={'w-full overflow-x-auto pl-1.5 pr-8 text-sm leading-9 text-text-secondary border-0 grow h-9 bg-transparent focus:outline-none cursor-pointer rounded-lg'}
+                  className={'h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pl-1.5 pr-8 text-sm leading-9 text-text-secondary focus:outline-none'}
                   onFocus={() => setFocusID(index)}
                   onBlur={() => setFocusID(null)}
                 />
 
                 <div
-                  className='block absolute top-1/2 translate-y-[-50%] right-1.5 p-1 rounded-md cursor-pointer text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
+                  className='absolute right-1.5 top-1/2 block translate-y-[-50%] cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
                   onClick={() => {
                     setTempSuggestedQuestions(tempSuggestedQuestions.filter((_, i) => index !== i))
                   }}
                   onMouseEnter={() => setDeletingID(index)}
                   onMouseLeave={() => setDeletingID(null)}
                 >
-                  <RiDeleteBinLine className='w-3.5 h-3.5' />
+                  <RiDeleteBinLine className='h-3.5 w-3.5' />
                 </div>
               </div>
             )
@@ -159,8 +159,8 @@ const OpeningSettingModal = ({
         {tempSuggestedQuestions.length < MAX_QUESTION_NUM && (
           <div
             onClick={() => { setTempSuggestedQuestions([...tempSuggestedQuestions, '']) }}
-            className='mt-1 flex items-center h-9 px-3 gap-2 rounded-lg cursor-pointer text-components-button-tertiary-text  bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover'>
-            <RiAddLine className='w-4 h-4' />
+            className='mt-1 flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-components-button-tertiary-bg px-3  text-components-button-tertiary-text hover:bg-components-button-tertiary-bg-hover'>
+            <RiAddLine className='h-4 w-4' />
             <div className='system-sm-medium text-[13px]'>{t('appDebug.variableConfig.addOption')}</div>
           </div>
         )}
@@ -172,22 +172,22 @@ const OpeningSettingModal = ({
     <Modal
       isShow
       onClose={() => { }}
-      className='!p-6 !mt-14 !max-w-none !w-[640px] !bg-components-panel-bg-blur'
+      className='!mt-14 !w-[640px] !max-w-none !bg-components-panel-bg-blur !p-6'
     >
-      <div className='flex items-center justify-between mb-6'>
-        <div className='text-text-primary title-2xl-semi-bold'>{t('appDebug.feature.conversationOpener.title')}</div>
-        <div className='p-1 cursor-pointer' onClick={onCancel}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
+      <div className='mb-6 flex items-center justify-between'>
+        <div className='title-2xl-semi-bold text-text-primary'>{t('appDebug.feature.conversationOpener.title')}</div>
+        <div className='cursor-pointer p-1' onClick={onCancel}><RiCloseLine className='h-4 w-4 text-text-tertiary'/></div>
       </div>
-      <div className='flex gap-2 mb-8'>
-        <div className='shrink-0 mt-1.5 w-8 h-8 p-1.5 rounded-lg border-components-panel-border bg-util-colors-orange-dark-orange-dark-500'>
-          <RiAsterisk className='w-5 h-5 text-text-primary-on-surface' />
+      <div className='mb-8 flex gap-2'>
+        <div className='mt-1.5 h-8 w-8 shrink-0 rounded-lg border-components-panel-border bg-util-colors-orange-dark-orange-dark-500 p-1.5'>
+          <RiAsterisk className='h-5 w-5 text-text-primary-on-surface' />
         </div>
-        <div className='grow p-3 bg-chat-bubble-bg rounded-2xl border-t border-divider-subtle shadow-xs'>
+        <div className='grow rounded-2xl border-t border-divider-subtle bg-chat-bubble-bg p-3 shadow-xs'>
           <textarea
             value={tempValue}
             rows={3}
             onChange={e => setTempValue(e.target.value)}
-            className="w-full px-0 text-text-secondary system-md-regular  border-0 bg-transparent focus:outline-none"
+            className="system-md-regular w-full border-0 bg-transparent  px-0 text-text-secondary focus:outline-none"
             placeholder={t('appDebug.openingStatement.placeholder') as string}
           />
           {renderQuestions()}

web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useCallback } from 'react'
 import type { ReactNode } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
+import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
 import cn from '@/utils/classnames'
 
 type DialogProps = {
@@ -22,33 +22,29 @@ const DialogWrapper = ({
   return (
     <Transition appear show={show} as={Fragment}>
       <Dialog as="div" className="relative z-40" onClose={close}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-black bg-opacity-25" />
-        </Transition.Child>
+        <TransitionChild>
+          <div className={cn(
+            'fixed inset-0 bg-black bg-opacity-25',
+            'data-[closed]:opacity-0',
+            'data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
+            'data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
+          )} />
+        </TransitionChild>
 
         <div className="fixed inset-0">
-          <div className={cn('flex flex-col items-end justify-center min-h-full pb-2', inWorkflow ? 'pt-[112px]' : 'pt-[64px] pr-2')}>
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <Dialog.Panel className={cn('grow flex flex-col relative w-[420px] h-0 p-0 overflow-hidden text-left align-middle transition-all transform bg-components-panel-bg-alt border-components-panel-border shadow-xl', inWorkflow ? 'border-t-[0.5px] border-l-[0.5px] border-b-[0.5px] rounded-l-2xl' : 'border-[0.5px] rounded-2xl', className)}>
+          <div className={cn('flex min-h-full flex-col items-end justify-center pb-2', inWorkflow ? 'pt-[112px]' : 'pr-2 pt-[64px]')}>
+            <TransitionChild>
+              <DialogPanel className={cn(
+                'relative flex h-0 w-[420px] grow flex-col overflow-hidden border-components-panel-border bg-components-panel-bg-alt p-0 text-left align-middle shadow-xl transition-all',
+                inWorkflow ? 'rounded-l-2xl border-b-[0.5px] border-l-[0.5px] border-t-[0.5px]' : 'rounded-2xl border-[0.5px]',
+                'data-[closed]:scale-95  data-[closed]:opacity-0',
+                'data-[enter]:scale-100 data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
+                'data-[leave]:scale-95 data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
+                className,
+              )}>
                 {children}
-              </Dialog.Panel>
-            </Transition.Child>
+              </DialogPanel>
+            </TransitionChild>
           </div>
         </div>
       </Dialog>

web/app/components/base/features/new-feature-panel/feature-bar.tsx

@@ -36,23 +36,23 @@ const FeatureBar = ({
   }, [features, isChatMode, showFileUpload])
 
   return (
-    <div className='-translate-y-2 m-1 mt-0 px-2.5 py-2 pt-4 bg-util-colors-indigo-indigo-50 rounded-b-[10px] border-l border-b border-r border-components-panel-border-subtle'>
+    <div className='m-1 mt-0 -translate-y-2 rounded-b-[10px] border-b border-l border-r border-components-panel-border-subtle bg-util-colors-indigo-indigo-50 px-2.5 py-2 pt-4'>
       {noFeatureEnabled && (
-        <div className='flex items-end gap-1 cursor-pointer' onClick={() => onFeatureBarClick?.(true)}>
-          <RiApps2AddLine className='w-3.5 h-3.5 text-text-accent' />
-          <div className='text-text-accent body-xs-medium'>{t('appDebug.feature.bar.empty')}</div>
-          <RiArrowRightLine className='w-3.5 h-3.5 text-text-accent' />
+        <div className='flex cursor-pointer items-end gap-1' onClick={() => onFeatureBarClick?.(true)}>
+          <RiApps2AddLine className='h-3.5 w-3.5 text-text-accent' />
+          <div className='body-xs-medium text-text-accent'>{t('appDebug.feature.bar.empty')}</div>
+          <RiArrowRightLine className='h-3.5 w-3.5 text-text-accent' />
         </div>
       )}
       {!noFeatureEnabled && (
         <div className='flex items-center gap-2'>
-          <div className='shrink-0 flex items-center gap-0.5'>
+          <div className='flex shrink-0 items-center gap-0.5'>
             {!!features.moreLikeThis?.enabled && (
               <Tooltip
                 popupContent={t('appDebug.feature.moreLikeThis.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
-                  <RiSparklingFill className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'>
+                  <RiSparklingFill className='h-3.5 w-3.5 text-text-primary-on-surface' />
                 </div>
               </Tooltip>
             )}
@@ -60,8 +60,8 @@ const FeatureBar = ({
               <Tooltip
                 popupContent={t('appDebug.feature.conversationOpener.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
-                  <LoveMessage className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'>
+                  <LoveMessage className='h-3.5 w-3.5 text-text-primary-on-surface' />
                 </div>
               </Tooltip>
             )}
@@ -69,8 +69,8 @@ const FeatureBar = ({
               <Tooltip
                 popupContent={t('appDebug.feature.moderation.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-text-success'>
-                  <ContentModeration className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-text-success p-1 shadow-xs'>
+                  <ContentModeration className='h-3.5 w-3.5 text-text-primary-on-surface' />
                 </div>
               </Tooltip>
             )}
@@ -78,8 +78,8 @@ const FeatureBar = ({
               <Tooltip
                 popupContent={t('appDebug.feature.speechToText.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600'>
-                  <Microphone01 className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs'>
+                  <Microphone01 className='h-3.5 w-3.5 text-text-primary-on-surface' />
                 </div>
               </Tooltip>
             )}
@@ -88,8 +88,8 @@ const FeatureBar = ({
                 <Tooltip
                   popupContent={t('appDebug.feature.textToSpeech.title')}
                 >
-                  <div className={cn('shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600', !disabled && 'cursor-pointer')}>
-                    <TextToAudio className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                  <div className={cn('shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs', !disabled && 'cursor-pointer')}>
+                    <TextToAudio className='h-3.5 w-3.5 text-text-primary-on-surface' />
                   </div>
                 </Tooltip>
               </VoiceSettings>
@@ -98,8 +98,8 @@ const FeatureBar = ({
               <Tooltip
                 popupContent={t('appDebug.feature.fileUpload.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-blue-600'>
-                  <FolderUpload className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-blue-600 p-1 shadow-xs'>
+                  <FolderUpload className='h-3.5 w-3.5 text-text-primary-on-surface' />
                 </div>
               </Tooltip>
             )}
@@ -107,8 +107,8 @@ const FeatureBar = ({
               <Tooltip
                 popupContent={t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
-                  <VirtualAssistant className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'>
+                  <VirtualAssistant className='h-3.5 w-3.5 text-text-primary-on-surface' />
                 </div>
               </Tooltip>
             )}
@@ -116,8 +116,8 @@ const FeatureBar = ({
               <Tooltip
                 popupContent={t('appDebug.feature.citation.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-warning-warning-500'>
-                  <Citations className='w-4 h-4 text-text-primary-on-surface' />
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-warning-warning-500 p-1 shadow-xs'>
+                  <Citations className='h-4 w-4 text-text-primary-on-surface' />
                 </div>
               </Tooltip>
             )}
@@ -125,16 +125,16 @@ const FeatureBar = ({
               <Tooltip
                 popupContent={t('appDebug.feature.annotation.title')}
               >
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
-                  <MessageFast className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs'>
+                  <MessageFast className='h-3.5 w-3.5 text-text-primary-on-surface' />
                 </div>
               </Tooltip>
             )}
           </div>
-          <div className='grow text-text-tertiary body-xs-regular'>{t('appDebug.feature.bar.enableText')}</div>
+          <div className='body-xs-regular grow text-text-tertiary'>{t('appDebug.feature.bar.enableText')}</div>
           <Button className='shrink-0' variant='ghost-accent' size='small' onClick={() => onFeatureBarClick?.(true)}>
             <div className='mx-1'>{t('appDebug.feature.bar.manage')}</div>
-            <RiArrowRightLine className='w-3.5 h-3.5 text-text-accent' />
+            <RiArrowRightLine className='h-3.5 w-3.5 text-text-accent' />
           </Button>
         </div>
       )}

web/app/components/base/features/new-feature-panel/feature-card.tsx

@@ -32,26 +32,26 @@ const FeatureCard = ({
 }: Props) => {
   return (
     <div
-      className='mb-1 p-3 border-t-[0.5px] border-l-[0.5px] border-effects-highlight rounded-xl bg-background-section-burn'
+      className='mb-1 rounded-xl border-l-[0.5px] border-t-[0.5px] border-effects-highlight bg-background-section-burn p-3'
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
       <div className='mb-2 flex items-center gap-2'>
         {icon}
-        <div className='grow flex items-center text-text-secondary system-sm-semibold'>
+        <div className='system-sm-semibold flex grow items-center text-text-secondary'>
           {title}
           {tooltip && (
             <Tooltip
               popupContent={tooltip}
             >
-              <div className='ml-0.5 p-px'><RiQuestionLine className='w-3.5 h-3.5 text-text-quaternary' /></div>
+              <div className='ml-0.5 p-px'><RiQuestionLine className='h-3.5 w-3.5 text-text-quaternary' /></div>
             </Tooltip>
           )}
         </div>
         <Switch disabled={disabled} className='shrink-0' onChange={state => onChange?.(state)} defaultValue={value} />
       </div>
       {description && (
-        <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{description}</div>
+        <div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{description}</div>
       )}
       {children}
     </div>

web/app/components/base/features/new-feature-panel/file-upload/index.tsx

@@ -50,8 +50,8 @@ const FileUpload = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-blue-600'>
-          <FolderUpload className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-blue-600 p-1 shadow-xs'>
+          <FolderUpload className='h-4 w-4 text-text-primary-on-surface' />
         </div>
       }
       title={t('appDebug.feature.fileUpload.title')}
@@ -63,20 +63,20 @@ const FileUpload = ({
     >
       <>
         {!file?.enabled && (
-          <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.fileUpload.description')}</div>
+          <div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{t('appDebug.feature.fileUpload.description')}</div>
         )}
         {file?.enabled && (
           <>
             {!isHovering && !modalOpen && (
-              <div className='pt-0.5 flex items-center gap-4'>
+              <div className='flex items-center gap-4 pt-0.5'>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.fileUpload.supportedTypes')}</div>
-                  <div className='text-text-secondary system-xs-regular'>{supportedTypes}</div>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.feature.fileUpload.supportedTypes')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{supportedTypes}</div>
                 </div>
-                <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                <div className='h-[27px] w-px rotate-12 bg-divider-subtle'></div>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.fileUpload.numberLimit')}</div>
-                  <div className='text-text-secondary system-xs-regular'>{file?.number_limits}</div>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.feature.fileUpload.numberLimit')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{file?.number_limits}</div>
                 </div>
               </div>
             )}
@@ -90,7 +90,7 @@ const FileUpload = ({
                 onChange={onChange}
               >
                 <Button className='w-full' disabled={disabled}>
-                  <RiEqualizer2Line className='mr-1 w-4 h-4' />
+                  <RiEqualizer2Line className='mr-1 h-4 w-4' />
                   {t('common.operation.settings')}
                 </Button>
               </SettingModal>

web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx

@@ -57,8 +57,8 @@ const SettingContent = ({
   return (
     <>
       <div className='mb-4 flex items-center justify-between'>
-        <div className='text-text-primary system-xl-semibold'>{!imageUpload ? t('appDebug.feature.fileUpload.modalTitle') : t('appDebug.feature.imageUpload.modalTitle')}</div>
-        <div className='p-1 cursor-pointer' onClick={onClose}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
+        <div className='system-xl-semibold text-text-primary'>{!imageUpload ? t('appDebug.feature.fileUpload.modalTitle') : t('appDebug.feature.imageUpload.modalTitle')}</div>
+        <div className='cursor-pointer p-1' onClick={onClose}><RiCloseLine className='h-4 w-4 text-text-tertiary'/></div>
       </div>
       <FileUploadSetting
         isMultiple

web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx

@@ -37,7 +37,7 @@ const FileUploadSettings = ({
         {children}
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 50 }}>
-        <div className='w-[360px] p-4 bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-2xl'>
+        <div className='w-[360px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-2xl'>
           <SettingContent
             imageUpload={imageUpload}
             onClose={() => onOpen(false)}

web/app/components/base/features/new-feature-panel/follow-up.tsx

@@ -40,8 +40,8 @@ const FollowUp = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
-          <VirtualAssistant className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'>
+          <VirtualAssistant className='h-4 w-4 text-text-primary-on-surface' />
         </div>
       }
       title={t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}

web/app/components/base/features/new-feature-panel/image-upload/index.tsx

@@ -50,8 +50,8 @@ const FileUpload = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
-          <RiImage2Fill className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs'>
+          <RiImage2Fill className='h-4 w-4 text-text-primary-on-surface' />
         </div>
       }
       title={
@@ -59,7 +59,7 @@ const FileUpload = ({
           {t('appDebug.feature.imageUpload.title')}
           <Badge
             text='LEGACY'
-            className='shrink-0 mx-1 border-text-accent-secondary text-text-accent-secondary'
+            className='mx-1 shrink-0 border-text-accent-secondary text-text-accent-secondary'
           />
         </div>
       }
@@ -71,20 +71,20 @@ const FileUpload = ({
     >
       <>
         {!file?.enabled && (
-          <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.imageUpload.description')}</div>
+          <div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{t('appDebug.feature.imageUpload.description')}</div>
         )}
         {file?.enabled && (
           <>
             {!isHovering && !modalOpen && (
-              <div className='pt-0.5 flex items-center gap-4'>
+              <div className='flex items-center gap-4 pt-0.5'>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.imageUpload.supportedTypes')}</div>
-                  <div className='text-text-secondary system-xs-regular'>{supportedTypes}</div>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.feature.imageUpload.supportedTypes')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{supportedTypes}</div>
                 </div>
-                <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                <div className='h-[27px] w-px rotate-12 bg-divider-subtle'></div>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.imageUpload.numberLimit')}</div>
-                  <div className='text-text-secondary system-xs-regular'>{file?.number_limits}</div>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.feature.imageUpload.numberLimit')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{file?.number_limits}</div>
                 </div>
               </div>
             )}
@@ -99,7 +99,7 @@ const FileUpload = ({
                 onChange={onChange}
               >
                 <Button className='w-full' disabled={disabled}>
-                  <RiEqualizer2Line className='mr-1 w-4 h-4' />
+                  <RiEqualizer2Line className='mr-1 h-4 w-4' />
                   {t('common.operation.settings')}
                 </Button>
               </SettingModal>

web/app/components/base/features/new-feature-panel/index.tsx

@@ -58,25 +58,25 @@ const NewFeaturePanel = ({
       onClose={onClose}
       inWorkflow={inWorkflow}
     >
-      <div className='grow flex flex-col h-full'>
+      <div className='flex h-full grow flex-col'>
         {/* header */}
-        <div className='shrink-0 flex justify-between p-4 pb-3'>
+        <div className='flex shrink-0 justify-between p-4 pb-3'>
           <div>
-            <div className='text-text-primary system-xl-semibold'>{t('workflow.common.features')}</div>
-            <div className='text-text-tertiary body-xs-regular'>{t('workflow.common.featuresDescription')}</div>
+            <div className='system-xl-semibold text-text-primary'>{t('workflow.common.features')}</div>
+            <div className='body-xs-regular text-text-tertiary'>{t('workflow.common.featuresDescription')}</div>
           </div>
-          <div className='w-8 h-8 p-2 cursor-pointer' onClick={onClose}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
+          <div className='h-8 w-8 cursor-pointer p-2' onClick={onClose}><RiCloseLine className='h-4 w-4 text-text-tertiary'/></div>
         </div>
         {/* list */}
         <div className='grow basis-0 overflow-y-auto px-4 pb-4'>
           {showFileUpload && (
-            <div className='relative mb-1 p-2 rounded-xl border border-components-panel-border shadow-xs'>
-              <div className='absolute top-0 left-0 w-full h-full rounded-xl opacity-40' style={{ background: 'linear-gradient(92deg, rgba(11, 165, 236, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
-              <div className='relative flex items-start w-full h-full'>
-                <div className='shrink-0 mr-0.5 p-0.5'>
-                  <RiInformation2Fill className='w-5 h-5 text-text-accent' />
+            <div className='relative mb-1 rounded-xl border border-components-panel-border p-2 shadow-xs'>
+              <div className='absolute left-0 top-0 h-full w-full rounded-xl opacity-40' style={{ background: 'linear-gradient(92deg, rgba(11, 165, 236, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
+              <div className='relative flex h-full w-full items-start'>
+                <div className='mr-0.5 shrink-0 p-0.5'>
+                  <RiInformation2Fill className='h-5 w-5 text-text-accent' />
                 </div>
-                <div className='p-1 text-text-primary system-xs-medium'>
+                <div className='system-xs-medium p-1 text-text-primary'>
                   <span>{isChatMode ? t('workflow.common.fileUploadTip') : t('workflow.common.ImageUploadLegacyTip')}</span>
                   <a
                     className='text-text-accent'

web/app/components/base/features/new-feature-panel/moderation/form-generation.tsx

@@ -30,14 +30,14 @@ const FormGeneration: FC<FormGenerationProps> = ({
             key={index}
             className='py-2'
           >
-            <div className='flex items-center h-9 text-sm font-medium text-text-primary'>
+            <div className='flex h-9 items-center text-sm font-medium text-text-primary'>
               {locale === 'zh-Hans' ? form.label['zh-Hans'] : form.label['en-US']}
             </div>
             {
               form.type === 'text-input' && (
                 <input
                   value={value?.[form.variable] || ''}
-                  className='block px-3 w-full h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-primary outline-none appearance-none'
+                  className='block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-none'
                   placeholder={form.placeholder}
                   onChange={e => handleFormChange(form.variable, e.target.value)}
                 />

web/app/components/base/features/new-feature-panel/moderation/index.tsx

@@ -130,8 +130,8 @@ const Moderation = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-text-success'>
-          <ContentModeration className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-text-success p-1 shadow-xs'>
+          <ContentModeration className='h-4 w-4 text-text-primary-on-surface' />
         </div>
       }
       title={t('appDebug.feature.moderation.title')}
@@ -143,26 +143,26 @@ const Moderation = ({
     >
       <>
         {!moderation?.enabled && (
-          <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.moderation.description')}</div>
+          <div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{t('appDebug.feature.moderation.description')}</div>
         )}
         {!!moderation?.enabled && (
           <>
             {!isHovering && (
-              <div className='pt-0.5 flex items-center gap-4'>
+              <div className='flex items-center gap-4 pt-0.5'>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.moderation.modal.provider.title')}</div>
-                  <div className='text-text-secondary system-xs-regular'>{providerContent}</div>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.feature.moderation.modal.provider.title')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{providerContent}</div>
                 </div>
-                <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                <div className='h-[27px] w-px rotate-12 bg-divider-subtle'></div>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.moderation.contentEnableLabel')}</div>
-                  <div className='text-text-secondary system-xs-regular'>{enableContent}</div>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.feature.moderation.contentEnableLabel')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{enableContent}</div>
                 </div>
               </div>
             )}
             {isHovering && (
               <Button className='w-full' onClick={handleOpenModerationSettingModal} disabled={disabled}>
-                <RiEqualizer2Line className='mr-1 w-4 h-4' />
+                <RiEqualizer2Line className='mr-1 h-4 w-4' />
                 {t('common.operation.settings')}
               </Button>
             )}

web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx

@@ -27,13 +27,13 @@ const ModerationContent: FC<ModerationContentProps> = ({
 
   return (
     <div className='py-2'>
-      <div className='rounded-lg bg-components-panel-bg border border-components-panel-border'>
-        <div className='flex items-center justify-between px-3 h-10 rounded-lg'>
+      <div className='rounded-lg border border-components-panel-border bg-components-panel-bg'>
+        <div className='flex h-10 items-center justify-between rounded-lg px-3'>
           <div className='shrink-0 text-sm font-medium text-text-primary'>{title}</div>
-          <div className='grow flex items-center justify-end'>
+          <div className='flex grow items-center justify-end'>
             {
               info && (
-                <div className='mr-2 text-xs text-text-tertiary truncate' title={info}>{info}</div>
+                <div className='mr-2 truncate text-xs text-text-tertiary' title={info}>{info}</div>
               )
             }
             <Switch
@@ -45,19 +45,19 @@ const ModerationContent: FC<ModerationContentProps> = ({
         </div>
         {
           config.enabled && showPreset && (
-            <div className='px-3 pt-1 pb-3 bg-components-panel-bg rounded-lg'>
-              <div className='flex items-center justify-between h-8 text-[13px] font-medium text-text-secondary'>
+            <div className='rounded-lg bg-components-panel-bg px-3 pb-3 pt-1'>
+              <div className='flex h-8 items-center justify-between text-[13px] font-medium text-text-secondary'>
                 {t('appDebug.feature.moderation.modal.content.preset')}
                 <span className='text-xs font-normal text-text-tertiary'>{t('appDebug.feature.moderation.modal.content.supportMarkdown')}</span>
               </div>
-              <div className='relative px-3 py-2 h-20 rounded-lg bg-components-input-bg-normal'>
+              <div className='relative h-20 rounded-lg bg-components-input-bg-normal px-3 py-2'>
                 <textarea
                   value={config.preset_response || ''}
-                  className='block w-full h-full bg-transparent text-sm text-text-secondary outline-none appearance-none resize-none'
+                  className='block h-full w-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-none'
                   placeholder={t('appDebug.feature.moderation.modal.content.placeholder') || ''}
                   onChange={e => handleConfigChange('preset_response', e.target.value)}
                 />
-                <div className='absolute bottom-2 right-2 flex items-center px-1 h-5 rounded-md bg-background-section text-xs font-medium text-text-quaternary'>
+                <div className='absolute bottom-2 right-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary'>
                   <span>{(config.preset_response || '').length}</span>/<span className='text-text-tertiary'>100</span>
                 </div>
               </div>

web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx

@@ -240,31 +240,31 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
     <Modal
       isShow
       onClose={() => { }}
-      className='!p-6 !mt-14 !max-w-none !w-[600px]'
+      className='!mt-14 !w-[600px] !max-w-none !p-6'
     >
       <div className='flex items-center justify-between'>
-        <div className='text-text-primary title-2xl-semi-bold'>{t('appDebug.feature.moderation.modal.title')}</div>
-        <div className='p-1 cursor-pointer' onClick={onCancel}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
+        <div className='title-2xl-semi-bold text-text-primary'>{t('appDebug.feature.moderation.modal.title')}</div>
+        <div className='cursor-pointer p-1' onClick={onCancel}><RiCloseLine className='h-4 w-4 text-text-tertiary'/></div>
       </div>
       <div className='py-2'>
-        <div className='leading-9 text-sm font-medium text-text-primary'>
+        <div className='text-sm font-medium leading-9 text-text-primary'>
           {t('appDebug.feature.moderation.modal.provider.title')}
         </div>
-        <div className='grid gap-2.5 grid-cols-3'>
+        <div className='grid grid-cols-3 gap-2.5'>
           {
             providers.map(provider => (
               <div
                 key={provider.key}
                 className={cn(
-                  'flex items-center px-2 h-8 rounded-md system-sm-regular bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary cursor-default',
-                  localeData.type !== provider.key && 'hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs cursor-pointer',
-                  localeData.type === provider.key && 'bg-components-option-card-option-selected-bg border-[1.5px] border-components-option-card-option-selected-border system-sm-medium shadow-xs',
+                  'system-sm-regular flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
+                  localeData.type !== provider.key && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                  localeData.type === provider.key && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
                   localeData.type === 'openai_moderation' && provider.key === 'openai_moderation' && !isOpenAIProviderConfigured && 'text-text-disabled',
                 )}
                 onClick={() => handleDataTypeChange(provider.key)}
               >
                 <div className={cn(
-                  'mr-2 w-4 h-4 border border-components-radio-border bg-components-radio-bg shadow-xs rounded-full',
+                  'mr-2 h-4 w-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
                   localeData.type === provider.key && 'border-[5px] border-components-radio-border-checked',
                 )}></div>
                 {provider.name}
@@ -274,12 +274,12 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
         </div>
         {
           !isLoading && !isOpenAIProviderConfigured && localeData.type === 'openai_moderation' && (
-            <div className='flex items-center mt-2 px-3 py-2 bg-[#FFFAEB] rounded-lg border border-[#FEF0C7]'>
-              <InfoCircle className='mr-1 w-4 h-4 text-[#F79009]' />
+            <div className='mt-2 flex items-center rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 py-2'>
+              <InfoCircle className='mr-1 h-4 w-4 text-[#F79009]' />
               <div className='flex items-center text-xs font-medium text-gray-700'>
                 {t('appDebug.feature.moderation.modal.openaiNotConfig.before')}
                 <span
-                  className='text-primary-600 cursor-pointer'
+                  className='cursor-pointer text-primary-600'
                   onClick={handleOpenSettingsModal}
                 >
                   &nbsp;{t('common.settings.provider')}&nbsp;
@@ -295,14 +295,14 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
           <div className='py-2'>
             <div className='mb-1 text-sm font-medium text-text-primary'>{t('appDebug.feature.moderation.modal.provider.keywords')}</div>
             <div className='mb-2 text-xs text-text-tertiary'>{t('appDebug.feature.moderation.modal.keywords.tip')}</div>
-            <div className='relative px-3 py-2 h-[88px] bg-components-input-bg-normal rounded-lg'>
+            <div className='relative h-[88px] rounded-lg bg-components-input-bg-normal px-3 py-2'>
               <textarea
                 value={localeData.config?.keywords || ''}
                 onChange={handleDataKeywordsChange}
-                className='block w-full h-full bg-transparent text-sm text-text-secondary outline-none appearance-none resize-none'
+                className='block h-full w-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-none'
                 placeholder={t('appDebug.feature.moderation.modal.keywords.placeholder') || ''}
               />
-              <div className='absolute bottom-2 right-2 flex items-center px-1 h-5 rounded-md bg-background-section text-xs font-medium text-text-quaternary'>
+              <div className='absolute bottom-2 right-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary'>
                 <span>{(localeData.config?.keywords || '').split('\n').filter(Boolean).length}</span>/<span className='text-text-tertiary'>100 {t('appDebug.feature.moderation.modal.keywords.line')}</span>
               </div>
             </div>
@@ -312,14 +312,14 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       {
         localeData.type === 'api' && (
           <div className='py-2'>
-            <div className='flex items-center justify-between h-9'>
+            <div className='flex h-9 items-center justify-between'>
               <div className='text-sm font-medium text-text-primary'>{t('common.apiBasedExtension.selector.title')}</div>
               <a
                 href={t('common.apiBasedExtension.linkUrl') || '/'}
                 target='_blank' rel='noopener noreferrer'
                 className='group flex items-center text-xs text-text-tertiary hover:text-primary-600'
               >
-                <BookOpen01 className='mr-1 w-3 h-3 text-text-tertiary group-hover:text-primary-600' />
+                <BookOpen01 className='mr-1 h-3 w-3 text-text-tertiary group-hover:text-primary-600' />
                 {t('common.apiBasedExtension.link')}
               </a>
             </div>
@@ -356,7 +356,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
         info={(localeData.type === 'api' && t('appDebug.feature.moderation.modal.content.fromApi')) || ''}
         showPreset={!(localeData.type === 'api')}
       />
-      <div className='mt-1 mb-8 text-xs font-medium text-text-tertiary'>{t('appDebug.feature.moderation.modal.content.condition')}</div>
+      <div className='mb-8 mt-1 text-xs font-medium text-text-tertiary'>{t('appDebug.feature.moderation.modal.content.condition')}</div>
       <div className='flex items-center justify-end'>
         <Button
           onClick={onCancel}

web/app/components/base/features/new-feature-panel/more-like-this.tsx

@@ -40,8 +40,8 @@ const MoreLikeThis = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
-          <RiSparklingFill className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'>
+          <RiSparklingFill className='h-4 w-4 text-text-primary-on-surface' />
         </div>
       }
       title={t('appDebug.feature.moreLikeThis.title')}

web/app/components/base/features/new-feature-panel/speech-to-text.tsx

@@ -40,8 +40,8 @@ const SpeechToText = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600'>
-          <Microphone01 className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs'>
+          <Microphone01 className='h-4 w-4 text-text-primary-on-surface' />
         </div>
       }
       title={t('appDebug.feature.speechToText.title')}

web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx

@@ -49,8 +49,8 @@ const TextToSpeech = ({
   return (
     <FeatureCard
       icon={
-        <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600'>
-          <TextToAudio className='w-4 h-4 text-text-primary-on-surface' />
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs'>
+          <TextToAudio className='h-4 w-4 text-text-primary-on-surface' />
         </div>
       }
       title={t('appDebug.feature.textToSpeech.title')}
@@ -62,32 +62,32 @@ const TextToSpeech = ({
     >
       <>
         {!features.text2speech?.enabled && (
-          <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.textToSpeech.description')}</div>
+          <div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{t('appDebug.feature.textToSpeech.description')}</div>
         )}
         {!!features.text2speech?.enabled && (
           <>
             {!isHovering && !modalOpen && (
-              <div className='pt-0.5 flex items-center gap-4'>
+              <div className='flex items-center gap-4 pt-0.5'>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.voice.voiceSettings.language')}</div>
-                  <div className='text-text-secondary system-xs-regular'>{languageInfo?.name || '-'}</div>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.voice.voiceSettings.language')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{languageInfo?.name || '-'}</div>
                 </div>
-                <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                <div className='h-[27px] w-px rotate-12 bg-divider-subtle'></div>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.voice.voiceSettings.voice')}</div>
-                  <div className='text-text-secondary system-xs-regular'>{features.text2speech?.voice || t('appDebug.voice.defaultDisplay')}</div>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.voice.voiceSettings.voice')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{features.text2speech?.voice || t('appDebug.voice.defaultDisplay')}</div>
                 </div>
-                <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                <div className='h-[27px] w-px rotate-12 bg-divider-subtle'></div>
                 <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.voice.voiceSettings.autoPlay')}</div>
-                  <div className='text-text-secondary system-xs-regular'>{features.text2speech?.autoPlay === TtsAutoPlay.enabled ? t('appDebug.voice.voiceSettings.autoPlayEnabled') : t('appDebug.voice.voiceSettings.autoPlayDisabled')}</div>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.voice.voiceSettings.autoPlay')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{features.text2speech?.autoPlay === TtsAutoPlay.enabled ? t('appDebug.voice.voiceSettings.autoPlayEnabled') : t('appDebug.voice.voiceSettings.autoPlayDisabled')}</div>
                 </div>
               </div>
             )}
             {(isHovering || modalOpen) && (
               <VoiceSettings open={modalOpen && !disabled} onOpen={setModalOpen} onChange={onChange}>
                 <Button className='w-full' disabled={disabled}>
-                  <RiEqualizer2Line className='mr-1 w-4 h-4' />
+                  <RiEqualizer2Line className='mr-1 h-4 w-4' />
                   {t('appDebug.voice.voiceSettings.title')}
                 </Button>
               </VoiceSettings>

web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx

@@ -5,7 +5,7 @@ import React, { Fragment } from 'react'
 import { usePathname } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
-import { Listbox, Transition } from '@headlessui/react'
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react'
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import type { Item } from '@/app/components/base/select'
@@ -66,11 +66,11 @@ const VoiceParamConfig = ({
   return (
     <>
       <div className='mb-4 flex items-center justify-between'>
-        <div className='text-text-primary system-xl-semibold'>{t('appDebug.voice.voiceSettings.title')}</div>
-        <div className='p-1 cursor-pointer' onClick={onClose}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
+        <div className='system-xl-semibold text-text-primary'>{t('appDebug.voice.voiceSettings.title')}</div>
+        <div className='cursor-pointer p-1' onClick={onClose}><RiCloseLine className='h-4 w-4 text-text-tertiary' /></div>
       </div>
       <div className='mb-3'>
-        <div className='mb-1 py-1 flex items-center text-text-secondary system-sm-semibold'>
+        <div className='system-sm-semibold mb-1 flex items-center py-1 text-text-secondary'>
           {t('appDebug.voice.voiceSettings.language')}
           <Tooltip
             popupContent={
@@ -92,8 +92,8 @@ const VoiceParamConfig = ({
           }}
         >
           <div className='relative h-8'>
-            <Listbox.Button
-              className={'w-full h-full rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover group-hover:bg-state-base-hover cursor-pointer'}>
+            <ListboxButton
+              className={'h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6'}>
               <span className={classNames('block truncate text-left text-text-secondary', !languageItem?.name && 'text-text-tertiary')}>
                 {languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder}
               </span>
@@ -103,7 +103,7 @@ const VoiceParamConfig = ({
                   aria-hidden="true"
                 />
               </span>
-            </Listbox.Button>
+            </ListboxButton>
             <Transition
               as={Fragment}
               leave="transition ease-in duration-100"
@@ -111,14 +111,13 @@ const VoiceParamConfig = ({
               leaveTo="opacity-0"
             >
 
-              <Listbox.Options
-                className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm">
+              <ListboxOptions
+                className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm">
                 {languages.map((item: Item) => (
-                  <Listbox.Option
+                  <ListboxOption
                     key={item.value}
-                    className={({ active }) =>
-                      `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-state-base-hover text-text-secondary ${active ? 'bg-state-base-active' : ''
-                      }`
+                    className={
+                      'relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover data-[active]:bg-state-base-active'
                     }
                     value={item}
                     disabled={false}
@@ -133,20 +132,20 @@ const VoiceParamConfig = ({
                               'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
                             )}
                           >
-                            <CheckIcon className="h-4 w-4" aria-hidden="true"/>
+                            <CheckIcon className="h-4 w-4" aria-hidden="true" />
                           </span>
                         )}
                       </>
                     )}
-                  </Listbox.Option>
+                  </ListboxOption>
                 ))}
-              </Listbox.Options>
+              </ListboxOptions>
             </Transition>
           </div>
         </Listbox>
       </div>
       <div className='mb-3'>
-        <div className='mb-1 py-1 text-text-secondary system-sm-semibold'>
+        <div className='system-sm-semibold mb-1 py-1 text-text-secondary'>
           {t('appDebug.voice.voiceSettings.voice')}
         </div>
         <div className='flex items-center gap-1'>
@@ -159,9 +158,9 @@ const VoiceParamConfig = ({
               })
             }}
           >
-            <div className={'grow relative h-8'}>
-              <Listbox.Button
-                className={'w-full h-full rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover group-hover:bg-state-base-hover cursor-pointer'}>
+            <div className={'relative h-8 grow'}>
+              <ListboxButton
+                className={'h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6'}>
                 <span
                   className={classNames('block truncate text-left text-text-secondary', !voiceItem?.name && 'text-text-tertiary')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
                 <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -170,7 +169,7 @@ const VoiceParamConfig = ({
                     aria-hidden="true"
                   />
                 </span>
-              </Listbox.Button>
+              </ListboxButton>
               <Transition
                 as={Fragment}
                 leave="transition ease-in duration-100"
@@ -178,14 +177,13 @@ const VoiceParamConfig = ({
                 leaveTo="opacity-0"
               >
 
-                <Listbox.Options
-                  className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm">
+                <ListboxOptions
+                  className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm">
                   {voiceItems?.map((item: Item) => (
-                    <Listbox.Option
+                    <ListboxOption
                       key={item.value}
-                      className={({ active }) =>
-                        `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-state-base-hover text-text-secondary ${active ? 'bg-state-base-active' : ''
-                        }`
+                      className={
+                        'relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover data-[active]:bg-state-base-active'
                       }
                       value={item}
                       disabled={false}
@@ -199,19 +197,19 @@ const VoiceParamConfig = ({
                                 'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
                               )}
                             >
-                              <CheckIcon className="h-4 w-4" aria-hidden="true"/>
+                              <CheckIcon className="h-4 w-4" aria-hidden="true" />
                             </span>
                           )}
                         </>
                       )}
-                    </Listbox.Option>
+                    </ListboxOption>
                   ))}
-                </Listbox.Options>
+                </ListboxOptions>
               </Transition>
             </div>
           </Listbox>
           {languageItem?.example && (
-            <div className='shrink-0 h-8 p-1 rounded-lg bg-components-button-tertiary-bg'>
+            <div className='h-8 shrink-0 rounded-lg bg-components-button-tertiary-bg p-1'>
               <AudioBtn
                 value={languageItem?.example}
                 isAudition
@@ -223,7 +221,7 @@ const VoiceParamConfig = ({
         </div>
       </div>
       <div>
-        <div className='mb-1 py-1 text-text-secondary system-sm-semibold'>
+        <div className='system-sm-semibold mb-1 py-1 text-text-secondary'>
           {t('appDebug.voice.voiceSettings.autoPlay')}
         </div>
         <Switch className='shrink-0'

web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx

@@ -37,7 +37,7 @@ const VoiceSettings = ({
         {children}
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 50 }}>
-        <div className='w-[360px] p-4 bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-2xl'>
+        <div className='w-[360px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-2xl'>
           <ParamConfigContent onClose={() => onOpen(false)} onChange={onChange} />
         </div>
       </PortalToFollowElemContent>

web/app/components/base/features/store.ts

@@ -2,16 +2,16 @@ import { createStore } from 'zustand'
 import type { Features } from './types'
 import { Resolution, TransferMethod } from '@/types/app'
 
-export interface FeaturesModal {
+export type FeaturesModal = {
   showFeaturesModal: boolean
   setShowFeaturesModal: (showFeaturesModal: boolean) => void
 }
 
-export interface FeaturesState {
+export type FeaturesState = {
   features: Features
 }
 
-export interface FeaturesAction {
+export type FeaturesAction = {
   setFeatures: (features: Features) => void
 }
 

web/app/components/base/features/types.ts

@@ -1,7 +1,7 @@
 import type { Resolution, TransferMethod, TtsAutoPlay } from '@/types/app'
 import type { FileUploadConfigResponse } from '@/models/common'
 
-export interface EnabledOrDisabled {
+export type EnabledOrDisabled = {
   enabled?: boolean
 }
 
@@ -42,7 +42,7 @@ export type FileUpload = {
   fileUploadConfig?: FileUploadConfigResponse
 } & EnabledOrDisabled
 
-export interface AnnotationReplyConfig {
+export type AnnotationReplyConfig = {
   enabled: boolean
   id?: string
   score_threshold?: number
@@ -64,7 +64,7 @@ export enum FeatureEnum {
   annotationReply = 'annotationReply',
 }
 
-export interface Features {
+export type Features = {
   [FeatureEnum.moreLikeThis]?: MoreLikeThis
   [FeatureEnum.opening]?: OpeningStatement
   [FeatureEnum.suggested]?: SuggestedQuestionsAfterAnswer