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/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') || ''}