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/chat/chat-with-history/chat-wrapper.tsx

@@ -188,8 +188,8 @@ const ChatWrapper = () => {
       return null
     if (welcomeMessage.suggestedQuestions && welcomeMessage.suggestedQuestions?.length > 0) {
       return (
-        <div className='h-[50vh] py-12 px-4 flex items-center justify-center'>
-          <div className='grow max-w-[720px] flex gap-4'>
+        <div className='flex h-[50vh] items-center justify-center px-4 py-12'>
+          <div className='flex max-w-[720px] grow gap-4'>
             <AppIcon
               size='xl'
               iconType={appData?.site.icon_type}
@@ -197,7 +197,7 @@ const ChatWrapper = () => {
               background={appData?.site.icon_background}
               imageUrl={appData?.site.icon_url}
             />
-            <div className='grow px-4 py-3 bg-chat-bubble-bg text-text-primary rounded-2xl body-lg-regular'>
+            <div className='body-lg-regular grow rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary'>
               <Markdown content={welcomeMessage.content} />
               <SuggestedQuestions item={welcomeMessage} />
             </div>
@@ -206,7 +206,7 @@ const ChatWrapper = () => {
       )
     }
     return (
-      <div className={cn('h-[50vh] py-12 flex flex-col items-center justify-center gap-3')}>
+      <div className={cn('flex h-[50vh] flex-col items-center justify-center gap-3 py-12')}>
         <AppIcon
           size='xl'
           iconType={appData?.site.icon_type}
@@ -214,8 +214,8 @@ const ChatWrapper = () => {
           background={appData?.site.icon_background}
           imageUrl={appData?.site.icon_url}
         />
-        <div className='px-4 max-w-[768px]'>
-          <Markdown className='!text-text-tertiary !body-2xl-regular' content={welcomeMessage.content} />
+        <div className='max-w-[768px] px-4'>
+          <Markdown className='!body-2xl-regular !text-text-tertiary' content={welcomeMessage.content} />
         </div>
       </div>
     )
@@ -232,7 +232,7 @@ const ChatWrapper = () => {
 
   return (
     <div
-      className='h-full bg-chatbot-bg overflow-hidden'
+      className='h-full overflow-hidden bg-chatbot-bg'
     >
       <Chat
         appData={appData}

web/app/components/base/chat/chat-with-history/header-in-mobile.tsx

@@ -64,11 +64,11 @@ const HeaderInMobile = () => {
 
   return (
     <>
-      <div className='shrink-0 flex items-center px-2 py-3 gap-1 bg-mask-top2bottom-gray-50-to-transparent'>
+      <div className='flex shrink-0 items-center gap-1 bg-mask-top2bottom-gray-50-to-transparent px-2 py-3'>
         <ActionButton size='l' className='shrink-0' onClick={() => setShowSidebar(true)}>
-          <RiMenuLine className='w-[18px] h-[18px]' />
+          <RiMenuLine className='h-[18px] w-[18px]' />
         </ActionButton>
-        <div className='grow flex justify-center items-center'>
+        <div className='flex grow items-center justify-center'>
           {!currentConversationId && (
             <>
               <AppIcon
@@ -79,7 +79,7 @@ const HeaderInMobile = () => {
                 imageUrl={appData?.site.icon_url}
                 background={appData?.site.icon_background}
               />
-              <div className='text-text-secondary system-md-semibold truncate'>
+              <div className='system-md-semibold truncate text-text-secondary'>
                 {appData?.site.title}
               </div>
             </>
@@ -102,22 +102,22 @@ const HeaderInMobile = () => {
         />
       </div>
       {showSidebar && (
-        <div className='fixed inset-0 z-50 flex p-1 bg-background-overlay'
+        <div className='fixed inset-0 z-50 flex bg-background-overlay p-1'
           onClick={() => setShowSidebar(false)}
         >
-          <div className='flex h-full w-[calc(100vw_-_40px)] bg-components-panel-bg backdrop-blur-sm rounded-xl shadow-lg' onClick={e => e.stopPropagation()}>
+          <div className='flex h-full w-[calc(100vw_-_40px)] rounded-xl bg-components-panel-bg shadow-lg backdrop-blur-sm' onClick={e => e.stopPropagation()}>
             <Sidebar />
           </div>
         </div>
       )}
       {showChatSettings && (
-        <div className='fixed inset-0 z-50 flex justify-end p-1 bg-background-overlay'
+        <div className='fixed inset-0 z-50 flex justify-end bg-background-overlay p-1'
           onClick={() => setShowChatSettings(false)}
         >
-          <div className='flex flex-col h-full w-[calc(100vw_-_40px)] bg-components-panel-bg backdrop-blur-sm rounded-xl shadow-lg' onClick={e => e.stopPropagation()}>
-            <div className='flex items-center gap-3 px-4 py-3 rounded-t-2xl border-b border-divider-subtle'>
-              <Message3Fill className='shrink-0 w-6 h-6' />
-              <div className='grow text-text-secondary system-xl-semibold'>{t('share.chat.chatSettingsTitle')}</div>
+          <div className='flex h-full w-[calc(100vw_-_40px)] flex-col rounded-xl bg-components-panel-bg shadow-lg backdrop-blur-sm' onClick={e => e.stopPropagation()}>
+            <div className='flex items-center gap-3 rounded-t-2xl border-b border-divider-subtle px-4 py-3'>
+              <Message3Fill className='h-6 w-6 shrink-0' />
+              <div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
             </div>
             <div className='p-4'>
               <InputsFormContent showTip />

web/app/components/base/chat/chat-with-history/header/index.tsx

@@ -72,12 +72,12 @@ const Header = () => {
 
   return (
     <>
-      <div className='shrink-0 h-14 p-3 flex items-center justify-between'>
-        <div className={cn('flex items-center gap-1 transition-all duration-200 ease-in-out', !isSidebarCollapsed && 'opacity-0 user-select-none')}>
+      <div className='flex h-14 shrink-0 items-center justify-between p-3'>
+        <div className={cn('flex items-center gap-1 transition-all duration-200 ease-in-out', !isSidebarCollapsed && 'user-select-none opacity-0')}>
           <ActionButton className={cn(!isSidebarCollapsed && 'cursor-default')} size='l' onClick={() => handleSidebarCollapse(false)}>
-            <RiLayoutRight2Line className='w-[18px] h-[18px]' />
+            <RiLayoutRight2Line className='h-[18px] w-[18px]' />
           </ActionButton>
-          <div className='shrink-0 mr-1'>
+          <div className='mr-1 shrink-0'>
             <AppIcon
               size='large'
               iconType={appData?.site.icon_type}
@@ -87,7 +87,7 @@ const Header = () => {
             />
           </div>
           {!currentConversationId && (
-            <div className={cn('grow text-text-secondary system-md-semibold truncate')}>{appData?.site.title}</div>
+            <div className={cn('system-md-semibold grow truncate text-text-secondary')}>{appData?.site.title}</div>
           )}
           {currentConversationId && currentConversationItem && isSidebarCollapsed && (
             <>
@@ -103,7 +103,7 @@ const Header = () => {
               />
             </>
           )}
-          <div className='px-1 flex items-center'>
+          <div className='flex items-center px-1'>
             <div className='h-[14px] w-px bg-divider-regular'></div>
           </div>
           {isSidebarCollapsed && (
@@ -118,7 +118,7 @@ const Header = () => {
                   disabled={!currentConversationId || isResponding}
                   onClick={handleNewConversation}
                 >
-                  <RiEditBoxLine className='w-[18px] h-[18px]' />
+                  <RiEditBoxLine className='h-[18px] w-[18px]' />
                 </ActionButton>
               </div>
             </Tooltip>
@@ -130,7 +130,7 @@ const Header = () => {
               popupContent={t('share.chat.resetChat')}
             >
               <ActionButton size='l' onClick={handleNewConversation}>
-                <RiResetLeftLine className='w-[18px] h-[18px]' />
+                <RiResetLeftLine className='h-[18px] w-[18px]' />
               </ActionButton>
             </Tooltip>
           )}

web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx

@@ -32,17 +32,17 @@ const MobileOperationDropdown = ({
         onClick={() => setOpen(v => !v)}
       >
         <ActionButton size='l' state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
-          <RiMoreFill className='w-[18px] h-[18px]' />
+          <RiMoreFill className='h-[18px] w-[18px]' />
         </ActionButton>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-40">
         <div
-          className={'min-w-[160px] p-1 bg-components-panel-bg-blur backdrop-blur-sm rounded-xl border-[0.5px] border-components-panel-border shadow-lg'}
+          className={'min-w-[160px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-sm'}
         >
-          <div className='flex items-center space-x-1 px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover' onClick={handleResetChat}>
+          <div className='system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover' onClick={handleResetChat}>
             <span className='grow'>{t('share.chat.resetChat')}</span>
           </div>
-          <div className='flex items-center space-x-1 px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover' onClick={handleViewChatSettings}>
+          <div className='system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover' onClick={handleViewChatSettings}>
             <span className='grow'>{t('share.chat.viewChatSettings')}</span>
           </div>
         </div>

web/app/components/base/chat/chat-with-history/header/operation.tsx

@@ -43,25 +43,25 @@ const Operation: FC<Props> = ({
       <PortalToFollowElemTrigger
         onClick={() => setOpen(v => !v)}
       >
-        <div className={cn('flex items-center p-1.5 pl-2 rounded-lg text-text-secondary cursor-pointer hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
+        <div className={cn('flex cursor-pointer items-center rounded-lg p-1.5 pl-2 text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
           <div className='system-md-semibold'>{title}</div>
-          <RiArrowDownSLine className='w-4 h-4 ' />
+          <RiArrowDownSLine className='h-4 w-4 ' />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-50">
         <div
-          className={'min-w-[120px] p-1 bg-components-panel-bg-blur backdrop-blur-sm rounded-xl border-[0.5px] border-components-panel-border shadow-lg'}
+          className={'min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-sm'}
         >
-          <div className={cn('flex items-center space-x-1 px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover')} onClick={togglePin}>
+          <div className={cn('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={togglePin}>
             <span className='grow'>{isPinned ? t('explore.sidebar.action.unpin') : t('explore.sidebar.action.pin')}</span>
           </div>
           {isShowRenameConversation && (
-            <div className={cn('flex items-center space-x-1 px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover')} onClick={onRenameConversation}>
+            <div className={cn('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={onRenameConversation}>
               <span className='grow'>{t('explore.sidebar.action.rename')}</span>
             </div>
           )}
           {isShowDelete && (
-            <div className={cn('group flex items-center space-x-1 px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete} >
+            <div className={cn('system-md-regular group flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete} >
               <span className='grow'>{t('explore.sidebar.action.delete')}</span>
             </div>
           )}

web/app/components/base/chat/chat-with-history/index.tsx

@@ -67,14 +67,14 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
 
   return (
     <div className={cn(
-      'h-full flex bg-background-default-burn',
+      'flex h-full bg-background-default-burn',
       isMobile && 'flex-col',
       className,
     )}>
       {!isMobile && (
         <div className={cn(
-          'flex flex-col w-[236px] p-1 pr-0 transition-all duration-200 ease-in-out',
-          isSidebarCollapsed && 'w-0 !p-0 overflow-hidden',
+          'flex w-[236px] flex-col p-1 pr-0 transition-all duration-200 ease-in-out',
+          isSidebarCollapsed && 'w-0 overflow-hidden !p-0',
         )}>
           <Sidebar />
         </div>
@@ -86,7 +86,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
         {isSidebarCollapsed && (
           <div
             className={cn(
-              'z-20 absolute top-0 w-[256px] h-full flex flex-col p-2 transition-all duration-500 ease-in-out',
+              'absolute top-0 z-20 flex h-full w-[256px] flex-col p-2 transition-all duration-500 ease-in-out',
               showSidePanel ? 'left-0' : 'left-[-248px]',
             )}
             onMouseEnter={() => setShowSidePanel(true)}
@@ -95,7 +95,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
             <Sidebar isPanel />
           </div>
         )}
-        <div className={cn('h-full flex flex-col bg-chatbot-bg border-[0,5px] border-components-panel-border-subtle overflow-hidden', isMobile ? 'rounded-t-2xl' : 'rounded-2xl')}>
+        <div className={cn('flex h-full flex-col overflow-hidden border-[0,5px] border-components-panel-border-subtle bg-chatbot-bg', isMobile ? 'rounded-t-2xl' : 'rounded-2xl')}>
           {!isMobile && <Header />}
           {appChatListDataLoading && (
             <Loading type='app' />

web/app/components/base/chat/chat-with-history/inputs-form/content.tsx

@@ -36,10 +36,10 @@ const InputsFormContent = ({ showTip }: Props) => {
     <div className='space-y-4'>
       {inputsForms.map(form => (
         <div key={form.variable} className='space-y-1'>
-          <div className='h-6 flex items-center gap-1'>
-            <div className='text-text-secondary system-md-semibold'>{form.label}</div>
+          <div className='flex h-6 items-center gap-1'>
+            <div className='system-md-semibold text-text-secondary'>{form.label}</div>
             {!form.required && (
-              <div className='text-text-tertiary system-xs-regular'>{t('appDebug.variableTable.optional')}</div>
+              <div className='system-xs-regular text-text-tertiary'>{t('appDebug.variableTable.optional')}</div>
             )}
           </div>
           {form.type === InputVarType.textInput && (
@@ -109,7 +109,7 @@ const InputsFormContent = ({ showTip }: Props) => {
         </div>
       ))}
       {showTip && (
-        <div className='text-text-tertiary system-xs-regular'>{t('share.chat.chatFormTip')}</div>
+        <div className='system-xs-regular text-text-tertiary'>{t('share.chat.chatFormTip')}</div>
       )}
     </div>
   )

web/app/components/base/chat/chat-with-history/inputs-form/index.tsx

@@ -25,23 +25,23 @@ const InputsFormNode = ({
   } = useChatWithHistoryContext()
 
   return (
-    <div className={cn('pt-6 px-4 flex flex-col items-center', isMobile && 'pt-4')}>
+    <div className={cn('flex flex-col items-center px-4 pt-6', isMobile && 'pt-4')}>
       <div className={cn(
-        'w-full max-w-[672px] bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-md',
-        collapsed && 'bg-components-card-bg border border-components-card-border shadow-none',
+        'w-full max-w-[672px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-md',
+        collapsed && 'border border-components-card-border bg-components-card-bg shadow-none',
       )}>
         <div className={cn(
-          'flex items-center gap-3 px-6 py-4 rounded-t-2xl',
+          'flex items-center gap-3 rounded-t-2xl px-6 py-4',
           !collapsed && 'border-b border-divider-subtle',
           isMobile && 'px-4 py-3',
         )}>
-          <Message3Fill className='shrink-0 w-6 h-6' />
-          <div className='grow text-text-secondary system-xl-semibold'>{t('share.chat.chatSettingsTitle')}</div>
+          <Message3Fill className='h-6 w-6 shrink-0' />
+          <div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
           {collapsed && (
-            <Button className='text-text-tertiary uppercase' size='small' variant='ghost' onClick={() => setCollapsed(false)}>{currentConversationId ? t('common.operation.view') : t('common.operation.edit')}</Button>
+            <Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(false)}>{currentConversationId ? t('common.operation.view') : t('common.operation.edit')}</Button>
           )}
           {!collapsed && currentConversationId && (
-            <Button className='text-text-tertiary uppercase' size='small' variant='ghost' onClick={() => setCollapsed(true)}>{t('common.operation.close')}</Button>
+            <Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(true)}>{t('common.operation.close')}</Button>
           )}
         </div>
         {!collapsed && (
@@ -67,9 +67,9 @@ const InputsFormNode = ({
         )}
       </div>
       {collapsed && (
-        <div className='py-4 flex items-center w-full max-w-[720px]'>
-          <Divider bgStyle='gradient' className='basis-1/2 h-px rotate-180' />
-          <Divider bgStyle='gradient' className='basis-1/2 h-px' />
+        <div className='flex w-full max-w-[720px] items-center py-4'>
+          <Divider bgStyle='gradient' className='h-px basis-1/2 rotate-180' />
+          <Divider bgStyle='gradient' className='h-px basis-1/2' />
         </div>
       )}
     </div>

web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx

@@ -26,14 +26,14 @@ const ViewFormDropdown = () => {
         onClick={() => setOpen(v => !v)}
       >
         <ActionButton size='l' state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
-          <RiChatSettingsLine className='w-[18px] h-[18px]' />
+          <RiChatSettingsLine className='h-[18px] w-[18px]' />
         </ActionButton>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-50">
-        <div className='w-[400px] bg-components-panel-bg backdrop-blur-sm rounded-2xl border-[0.5px] border-components-panel-border shadow-lg'>
-          <div className='flex items-center gap-3 px-6 py-4 rounded-t-2xl border-b border-divider-subtle'>
-            <Message3Fill className='shrink-0 w-6 h-6' />
-            <div className='grow text-text-secondary system-xl-semibold'>{t('share.chat.chatSettingsTitle')}</div>
+        <div className='w-[400px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-sm'>
+          <div className='flex items-center gap-3 rounded-t-2xl border-b border-divider-subtle px-6 py-4'>
+            <Message3Fill className='h-6 w-6 shrink-0' />
+            <div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
           </div>
           <div className='p-6'>
             <InputsFormContent showTip />

web/app/components/base/chat/chat-with-history/sidebar/index.tsx

@@ -78,11 +78,11 @@ const Sidebar = ({ isPanel }: Props) => {
 
   return (
     <div className={cn(
-      'grow flex flex-col',
-      isPanel && 'rounded-xl bg-components-panel-bg border-[0.5px] border-components-panel-border-subtle shadow-lg',
+      'flex grow flex-col',
+      isPanel && 'rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-bg shadow-lg',
     )}>
       <div className={cn(
-        'shrink-0 flex items-center gap-3 p-3 pr-2',
+        'flex shrink-0 items-center gap-3 p-3 pr-2',
       )}>
         <div className='shrink-0'>
           <AppIcon
@@ -93,25 +93,25 @@ const Sidebar = ({ isPanel }: Props) => {
             imageUrl={appData?.site.icon_url}
           />
         </div>
-        <div className={cn('grow text-text-secondary system-md-semibold truncate')}>{appData?.site.title}</div>
+        <div className={cn('system-md-semibold grow truncate text-text-secondary')}>{appData?.site.title}</div>
         {!isMobile && isSidebarCollapsed && (
           <ActionButton size='l' onClick={() => handleSidebarCollapse(false)}>
-            <RiExpandRightLine className='w-[18px] h-[18px]' />
+            <RiExpandRightLine className='h-[18px] w-[18px]' />
           </ActionButton>
         )}
         {!isMobile && !isSidebarCollapsed && (
           <ActionButton size='l' onClick={() => handleSidebarCollapse(true)}>
-            <RiLayoutLeft2Line className='w-[18px] h-[18px]' />
+            <RiLayoutLeft2Line className='h-[18px] w-[18px]' />
           </ActionButton>
         )}
       </div>
       <div className='shrink-0 px-3 py-4'>
         <Button variant='secondary-accent' disabled={isResponding} className='w-full justify-center' onClick={handleNewConversation}>
-          <RiEditBoxLine className='w-4 h-4 mr-1' />
+          <RiEditBoxLine className='mr-1 h-4 w-4' />
           {t('share.chat.newChat')}
         </Button>
       </div>
-      <div className='grow h-0 pt-4 px-3 space-y-2 overflow-y-auto'>
+      <div className='h-0 grow space-y-2 overflow-y-auto px-3 pt-4'>
         {/* pinned list */}
         {!!pinnedConversationList.length && (
           <div className='mb-4'>
@@ -135,17 +135,17 @@ const Sidebar = ({ isPanel }: Props) => {
           />
         )}
       </div>
-      <div className='shrink-0 p-3 flex items-center justify-between'>
+      <div className='flex shrink-0 items-center justify-between p-3'>
         <MenuDropdown placement='top-start' data={appData?.site} />
         {/* powered by */}
         <div className='shrink-0'>
           {!appData?.custom_config?.remove_webapp_brand && (
             <div className={cn(
-              'shrink-0 px-2 flex items-center gap-1.5',
+              'flex shrink-0 items-center gap-1.5 px-2',
             )}>
-              <div className='text-text-tertiary system-2xs-medium-uppercase'>{t('share.chat.poweredBy')}</div>
+              <div className='system-2xs-medium-uppercase text-text-tertiary'>{t('share.chat.poweredBy')}</div>
               {appData?.custom_config?.replace_webapp_logo && (
-                <img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block w-auto h-5' />
+                <img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
               )}
               {!appData?.custom_config?.replace_webapp_logo && (
                 <LogoSite className='!h-5' />

web/app/components/base/chat/chat-with-history/sidebar/item.tsx

@@ -31,12 +31,12 @@ const Item: FC<ItemProps> = ({
       ref={ref}
       key={item.id}
       className={cn(
-        'group flex p-1 pl-3 rounded-lg cursor-pointer text-components-menu-item-text system-sm-medium hover:bg-state-base-hover',
-        isSelected && 'bg-state-accent-active hover:bg-state-accent-active text-text-accent',
+        'system-sm-medium group flex cursor-pointer rounded-lg p-1 pl-3 text-components-menu-item-text hover:bg-state-base-hover',
+        isSelected && 'bg-state-accent-active text-text-accent hover:bg-state-accent-active',
       )}
       onClick={() => onChangeConversation(item.id)}
     >
-      <div className='grow p-1 pl-0 truncate' title={item.name}>{item.name}</div>
+      <div className='grow truncate p-1 pl-0' title={item.name}>{item.name}</div>
       {item.id !== '' && (
         <div className='shrink-0' onClick={e => e.stopPropagation()}>
           <Operation

web/app/components/base/chat/chat-with-history/sidebar/list.tsx

@@ -21,7 +21,7 @@ const List: FC<ListProps> = ({
   return (
     <div className='space-y-0.5'>
       {title && (
-        <div className='px-3 pt-2 pb-1 text-text-tertiary system-xs-medium-uppercase'>{title}</div>
+        <div className='system-xs-medium-uppercase px-3 pb-1 pt-2 text-text-tertiary'>{title}</div>
       )}
       {list.map(item => (
         <Item

web/app/components/base/chat/chat-with-history/sidebar/operation.tsx

@@ -63,33 +63,33 @@ const Operation: FC<Props> = ({
                 : ActionButtonState.Default
           }
         >
-          <RiMoreFill className='w-4 h-4' />
+          <RiMoreFill className='h-4 w-4' />
         </ActionButton>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-50">
         <div
           ref={ref}
-          className={'min-w-[120px] p-1 bg-components-panel-bg-blur backdrop-blur-sm rounded-xl border-[0.5px] border-components-panel-border shadow-lg'}
+          className={'min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-sm'}
           onMouseEnter={setIsHovering}
           onMouseLeave={setNotHovering}
           onClick={(e) => {
             e.stopPropagation()
           }}
         >
-          <div className={cn('flex items-center space-x-1 px-2 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover')} onClick={togglePin}>
-            {isPinned && <RiUnpinLine className='shrink-0 w-4 h-4 text-text-tertiary' />}
-            {!isPinned && <RiPushpinLine className='shrink-0 w-4 h-4 text-text-tertiary' />}
+          <div className={cn('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={togglePin}>
+            {isPinned && <RiUnpinLine className='h-4 w-4 shrink-0 text-text-tertiary' />}
+            {!isPinned && <RiPushpinLine className='h-4 w-4 shrink-0 text-text-tertiary' />}
             <span className='grow'>{isPinned ? t('explore.sidebar.action.unpin') : t('explore.sidebar.action.pin')}</span>
           </div>
           {isShowRenameConversation && (
-            <div className={cn('flex items-center space-x-1 px-2 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover')} onClick={onRenameConversation}>
-              <RiEditLine className='shrink-0 w-4 h-4 text-text-tertiary' />
+            <div className={cn('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={onRenameConversation}>
+              <RiEditLine className='h-4 w-4 shrink-0 text-text-tertiary' />
               <span className='grow'>{t('explore.sidebar.action.rename')}</span>
             </div>
           )}
           {isShowDelete && (
-            <div className={cn('group flex items-center space-x-1 px-2 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete} >
-              <RiDeleteBinLine className={cn('shrink-0 w-4 h-4 text-text-tertiary group-hover:text-text-destructive')} />
+            <div className={cn('system-md-regular group flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete} >
+              <RiDeleteBinLine className={cn('h-4 w-4 shrink-0 text-text-tertiary group-hover:text-text-destructive')} />
               <span className='grow'>{t('explore.sidebar.action.delete')}</span>
             </div>
           )}

web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx

@@ -30,8 +30,8 @@ const RenameModal: FC<IRenameModalProps> = ({
       isShow={isShow}
       onClose={onClose}
     >
-      <div className={'mt-6 font-medium text-sm leading-[21px] text-text-primary'}>{t('common.chat.conversationName')}</div>
-      <Input className='mt-2 w-full h-10'
+      <div className={'mt-6 text-sm font-medium leading-[21px] text-text-primary'}>{t('common.chat.conversationName')}</div>
+      <Input className='mt-2 h-10 w-full'
         value={tempName}
         onChange={e => setTempName(e.target.value)}
         placeholder={t('common.chat.conversationNamePlaceholder') || ''}