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/answer/agent-content.tsx

@@ -8,7 +8,7 @@ import Thought from '@/app/components/base/chat/chat/thought'
 import { FileList } from '@/app/components/base/file-uploader'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
 
-interface AgentContentProps {
+type AgentContentProps = {
   item: ChatItem
   responding?: boolean
 }

web/app/components/base/chat/chat/answer/basic-content.tsx

@@ -4,7 +4,7 @@ import type { ChatItem } from '../../types'
 import { Markdown } from '@/app/components/base/markdown'
 import cn from '@/utils/classnames'
 
-interface BasicContentProps {
+type BasicContentProps = {
   item: ChatItem
 }
 const BasicContent: FC<BasicContentProps> = ({

web/app/components/base/chat/chat/answer/index.tsx

@@ -101,20 +101,20 @@ const Answer: FC<AnswerProps> = ({
   }, [])
 
   return (
-    <div className='flex mb-2 last:mb-0'>
-      <div className='shrink-0 relative w-10 h-10'>
+    <div className='mb-2 flex last:mb-0'>
+      <div className='relative h-10 w-10 shrink-0'>
         {answerIcon || <AnswerIcon />}
         {responding && (
-          <div className='absolute -top-[3px] -left-[3px] pl-[6px] flex items-center w-4 h-4 bg-background-section-burn rounded-full shadow-xs border-[0.5px] border-divider-subtle'>
+          <div className='absolute -left-[3px] -top-[3px] flex h-4 w-4 items-center rounded-full border-[0.5px] border-divider-subtle bg-background-section-burn pl-[6px] shadow-xs'>
             <LoadingAnim type='avatar' />
           </div>
         )}
       </div>
-      <div className='chat-answer-container group grow w-0 ml-4 pb-4' ref={containerRef}>
+      <div className='chat-answer-container group ml-4 w-0 grow pb-4' ref={containerRef}>
         <div className={cn('group relative pr-10', chatAnswerContainerInner)}>
           <div
             ref={contentRef}
-            className={cn('relative inline-block px-4 py-3 max-w-full bg-chat-bubble-bg rounded-2xl body-lg-regular text-text-primary', workflowProcess && 'w-full')}
+            className={cn('body-lg-regular relative inline-block max-w-full rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary', workflowProcess && 'w-full')}
           >
             {
               !responding && (
@@ -153,7 +153,7 @@ const Answer: FC<AnswerProps> = ({
             }
             {
               responding && !content && !hasAgentThoughts && (
-                <div className='flex items-center justify-center w-6 h-5'>
+                <div className='flex h-5 w-6 items-center justify-center'>
                   <LoadingAnim type='text' />
                 </div>
               )
@@ -207,13 +207,13 @@ const Answer: FC<AnswerProps> = ({
                 <Citation data={citation} showHitInfo={config?.supportCitationHitInfo} />
               )
             }
-            {item.siblingCount && item.siblingCount > 1 && item.siblingIndex !== undefined && <div className="pt-3.5 flex justify-center items-center text-sm">
+            {item.siblingCount && item.siblingCount > 1 && item.siblingIndex !== undefined && <div className="flex items-center justify-center pt-3.5 text-sm">
               <button
                 className={`${item.prevSibling ? 'opacity-100' : 'opacity-30'}`}
                 disabled={!item.prevSibling}
                 onClick={() => item.prevSibling && switchSibling?.(item.prevSibling)}
               >
-                <ChevronRight className="w-[14px] h-[14px] rotate-180 text-text-primary" />
+                <ChevronRight className="h-[14px] w-[14px] rotate-180 text-text-primary" />
               </button>
               <span className="px-2 text-xs text-text-primary">{item.siblingIndex + 1} / {item.siblingCount}</span>
               <button
@@ -221,7 +221,7 @@ const Answer: FC<AnswerProps> = ({
                 disabled={!item.nextSibling}
                 onClick={() => item.nextSibling && switchSibling?.(item.nextSibling)}
               >
-                <ChevronRight className="w-[14px] h-[14px] text-text-primary" />
+                <ChevronRight className="h-[14px] w-[14px] text-text-primary" />
               </button>
             </div>}
           </div>

web/app/components/base/chat/chat/answer/more.tsx

@@ -13,25 +13,25 @@ const More: FC<MoreProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className='mt-1 flex items-center system-xs-regular text-text-quaternary opacity-0 group-hover:opacity-100'>
+    <div className='system-xs-regular mt-1 flex items-center text-text-quaternary opacity-0 group-hover:opacity-100'>
       {
         more && (
           <>
             <div
-              className='mr-2 shrink-0 truncate max-w-[33.3%]'
+              className='mr-2 max-w-[33.3%] shrink-0 truncate'
               title={`${t('appLog.detail.timeConsuming')} ${more.latency}${t('appLog.detail.second')}`}
             >
               {`${t('appLog.detail.timeConsuming')} ${more.latency}${t('appLog.detail.second')}`}
             </div>
             <div
-              className='shrink-0 truncate max-w-[33.3%]'
+              className='max-w-[33.3%] shrink-0 truncate'
               title={`${t('appLog.detail.tokenCost')} ${formatNumber(more.tokens)}`}
             >
               {`${t('appLog.detail.tokenCost')} ${formatNumber(more.tokens)}`}
             </div>
-            <div className='shrink-0 mx-2'>·</div>
+            <div className='mx-2 shrink-0'>·</div>
             <div
-              className='shrink-0 truncate max-w-[33.3%]'
+              className='max-w-[33.3%] shrink-0 truncate'
               title={more.time}
             >
               {more.time}

web/app/components/base/chat/chat/answer/operation.tsx

@@ -108,13 +108,13 @@ const Operation: FC<OperationProps> = ({
         )}
         style={(!hasWorkflowProcess && positionRight) ? { left: contentWidth + 8 } : {}}
       >
-        {showPromptLog && (
+        {showPromptLog && !isOpeningStatement && (
           <div className='hidden group-hover:block'>
             <Log logItem={item} />
           </div>
         )}
         {!isOpeningStatement && (
-          <div className='hidden group-hover:flex ml-1 items-center gap-0.5 p-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-md backdrop-blur-sm'>
+          <div className='ml-1 hidden items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex'>
             {(config?.text_to_speech?.enabled) && (
               <NewAudioButton
                 id={id}
@@ -126,40 +126,40 @@ const Operation: FC<OperationProps> = ({
               copy(content)
               Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
             }}>
-              <RiClipboardLine className='w-4 h-4' />
+              <RiClipboardLine className='h-4 w-4' />
             </ActionButton>
             {!noChatInput && (
               <ActionButton onClick={() => onRegenerate?.(item)}>
-                <RiResetLeftLine className='w-4 h-4' />
+                <RiResetLeftLine className='h-4 w-4' />
               </ActionButton>
             )}
             {(config?.supportAnnotation && config.annotation_reply?.enabled) && (
               <ActionButton onClick={() => setIsShowReplyModal(true)}>
-                <RiEditLine className='w-4 h-4' />
+                <RiEditLine className='h-4 w-4' />
               </ActionButton>
             )}
           </div>
         )}
         {!isOpeningStatement && config?.supportFeedback && onFeedback && (
-          <div className='hidden group-hover:flex ml-1 items-center gap-0.5 p-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-md backdrop-blur-sm'>
+          <div className='ml-1 hidden items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex'>
             {!localFeedback?.rating && (
               <>
                 <ActionButton onClick={() => handleFeedback('like')}>
-                  <RiThumbUpLine className='w-4 h-4' />
+                  <RiThumbUpLine className='h-4 w-4' />
                 </ActionButton>
                 <ActionButton onClick={() => handleFeedback('dislike')}>
-                  <RiThumbDownLine className='w-4 h-4' />
+                  <RiThumbDownLine className='h-4 w-4' />
                 </ActionButton>
               </>
             )}
             {localFeedback?.rating === 'like' && (
               <ActionButton state={ActionButtonState.Active} onClick={() => handleFeedback(null)}>
-                <RiThumbUpLine className='w-4 h-4' />
+                <RiThumbUpLine className='h-4 w-4' />
               </ActionButton>
             )}
             {localFeedback?.rating === 'dislike' && (
               <ActionButton state={ActionButtonState.Destructive} onClick={() => handleFeedback(null)}>
-                <RiThumbDownLine className='w-4 h-4' />
+                <RiThumbDownLine className='h-4 w-4' />
               </ActionButton>
             )}
           </div>

web/app/components/base/chat/chat/answer/suggested-questions.tsx

@@ -25,7 +25,7 @@ const SuggestedQuestions: FC<SuggestedQuestionsProps> = ({
         <Button
           key={index}
           variant='secondary-accent'
-          className='mt-1 mr-1 max-w-full last:mr-0 shrink-0'
+          className='mr-1 mt-1 max-w-full shrink-0 last:mr-0'
           onClick={() => onSend?.(question)}
         >
           {question}

web/app/components/base/chat/chat/answer/tool-detail.tsx

@@ -30,34 +30,34 @@ const ToolDetail = ({
     >
       <div
         className={cn(
-          'flex items-center system-xs-medium text-text-tertiary px-2.5 py-2 cursor-pointer',
+          'system-xs-medium flex cursor-pointer items-center px-2.5 py-2 text-text-tertiary',
           expand && 'pb-1.5',
         )}
         onClick={() => setExpand(!expand)}
       >
-        {isFinished && <RiHammerFill className='mr-1 w-3.5 h-3.5' />}
-        {!isFinished && <RiLoader2Line className='mr-1 w-3.5 h-3.5 animate-spin' />}
+        {isFinished && <RiHammerFill className='mr-1 h-3.5 w-3.5' />}
+        {!isFinished && <RiLoader2Line className='mr-1 h-3.5 w-3.5 animate-spin' />}
         {t(`tools.thought.${isFinished ? 'used' : 'using'}`)}
         <div className='mx-1 text-text-secondary'>{toolLabel}</div>
-        {!expand && <RiArrowRightSLine className='w-4 h-4' />}
-        {expand && <RiArrowDownSLine className='ml-auto w-4 h-4' />}
+        {!expand && <RiArrowRightSLine className='h-4 w-4' />}
+        {expand && <RiArrowDownSLine className='ml-auto h-4 w-4' />}
       </div>
       {
         expand && (
           <>
-            <div className='mb-0.5 mx-1 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary'>
-              <div className='flex items-center justify-between px-2 pt-1 h-7 system-xs-semibold-uppercase'>
+            <div className='mx-1 mb-0.5 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary'>
+              <div className='system-xs-semibold-uppercase flex h-7 items-center justify-between px-2 pt-1'>
                 {t('tools.thought.requestTitle')}
               </div>
-              <div className='pt-1 px-3 pb-2 code-xs-regular break-words'>
+              <div className='code-xs-regular break-words px-3 pb-2 pt-1'>
                 {input}
               </div>
             </div>
             <div className='mx-1 mb-1 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary'>
-              <div className='flex items-center justify-between px-2 pt-1 h-7 system-xs-semibold-uppercase'>
+              <div className='system-xs-semibold-uppercase flex h-7 items-center justify-between px-2 pt-1'>
                 {t('tools.thought.responseTitle')}
               </div>
-              <div className='pt-1 px-3 pb-2 code-xs-regular break-words'>
+              <div className='code-xs-regular break-words px-3 pb-2 pt-1'>
                 {output}
               </div>
             </div>

web/app/components/base/chat/chat/answer/workflow-process.tsx

@@ -42,8 +42,8 @@ const WorkflowProcessItem = ({
   return (
     <div
       className={cn(
-        '-mx-1 px-2.5 rounded-xl',
-        collapse ? 'py-[7px] border-l-[0.25px] border-components-panel-border' : 'pt-[7px] px-1 pb-1 border-[0.5px] border-components-panel-border-subtle',
+        '-mx-1 rounded-xl px-2.5',
+        collapse ? 'border-l-[0.25px] border-components-panel-border py-[7px]' : 'border-[0.5px] border-components-panel-border-subtle px-1 pb-1 pt-[7px]',
         running && !collapse && 'bg-background-section-burn',
         succeeded && !collapse && 'bg-state-success-hover',
         failed && !collapse && 'bg-state-destructive-hover',
@@ -51,28 +51,28 @@ const WorkflowProcessItem = ({
       )}
     >
       <div
-        className={cn('flex items-center cursor-pointer', !collapse && 'px-1.5', readonly && 'cursor-default')}
+        className={cn('flex cursor-pointer items-center', !collapse && 'px-1.5', readonly && 'cursor-default')}
         onClick={() => !readonly && setCollapse(!collapse)}
       >
         {
           running && (
-            <RiLoader2Line className='shrink-0 mr-1 w-3.5 h-3.5 animate-spin text-text-tertiary' />
+            <RiLoader2Line className='mr-1 h-3.5 w-3.5 shrink-0 animate-spin text-text-tertiary' />
           )
         }
         {
           succeeded && (
-            <CheckCircle className='shrink-0 mr-1 w-3.5 h-3.5 text-text-success' />
+            <CheckCircle className='mr-1 h-3.5 w-3.5 shrink-0 text-text-success' />
           )
         }
         {
           failed && (
-            <RiErrorWarningFill className='shrink-0 mr-1 w-3.5 h-3.5 text-text-destructive' />
+            <RiErrorWarningFill className='mr-1 h-3.5 w-3.5 shrink-0 text-text-destructive' />
           )
         }
         <div className={cn('system-xs-medium text-text-secondary', !collapse && 'grow')}>
           {t('workflow.common.workflowProcess')}
         </div>
-        {!readonly && <RiArrowRightSLine className={cn('ml-1 w-4 h-4 text-text-tertiary', !collapse && 'rotate-90')} />}
+        {!readonly && <RiArrowRightSLine className={cn('ml-1 h-4 w-4 text-text-tertiary', !collapse && 'rotate-90')} />}
       </div>
       {
         !collapse && !readonly && (