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/workflow/panel/debug-and-preview/chat-wrapper.tsx

@@ -1,11 +1,4 @@
-import {
-  forwardRef,
-  memo,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-} from 'react'
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react'
 import { useNodes } from 'reactflow'
 import { BlockEnum } from '../../types'
 import {
@@ -35,12 +28,17 @@ type ChatWrapperProps = {
   onHide: () => void
 }
 
-const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({
-  showConversationVariableModal,
-  onConversationModalHide,
-  showInputsFieldsPanel,
-  onHide,
-}, ref) => {
+const ChatWrapper = (
+  {
+    ref,
+    showConversationVariableModal,
+    onConversationModalHide,
+    showInputsFieldsPanel,
+    onHide,
+  }: ChatWrapperProps & {
+    ref: React.RefObject<ChatWrapperRefType>;
+  },
+) => {
   const nodes = useNodes<StartNodeType>()
   const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
   const startVariables = startNode?.data.variables
@@ -158,7 +156,7 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({
       )}
     </>
   )
-})
+}
 
 ChatWrapper.displayName = 'ChatWrapper'
 

web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx

@@ -22,7 +22,7 @@ import useTimestamp from '@/hooks/use-timestamp'
 import { fetchCurrentValueOfConversationVariable } from '@/service/workflow'
 import cn from '@/utils/classnames'
 
-export interface Props {
+export type Props = {
   conversationID: string
   onHide: () => void
 }
@@ -77,54 +77,54 @@ const ConversationVariableModal = ({
     <Modal
       isShow
       onClose={() => { }}
-      className={cn('w-[920px] max-w-[920px] h-[640px] p-0')}
+      className={cn('h-[640px] w-[920px] max-w-[920px] p-0')}
     >
-      <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onHide}>
-        <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+      <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onHide}>
+        <RiCloseLine className='h-4 w-4 text-text-tertiary' />
       </div>
-      <div className='w-full h-full flex'>
+      <div className='flex h-full w-full'>
         {/* LEFT */}
-        <div className='shrink-0 flex flex-col w-[224px] h-full bg-background-sidenav-bg border-r border-divider-burn'>
-          <div className='shrink-0 pt-5 pl-5 pr-4 pb-3 text-text-primary system-xl-semibold'>{t('workflow.chatVariable.panelTitle')}</div>
+        <div className='flex h-full w-[224px] shrink-0 flex-col border-r border-divider-burn bg-background-sidenav-bg'>
+          <div className='system-xl-semibold shrink-0 pb-3 pl-5 pr-4 pt-5 text-text-primary'>{t('workflow.chatVariable.panelTitle')}</div>
           <div className='grow overflow-y-auto px-3 py-2'>
             {varList.map(chatVar => (
-              <div key={chatVar.id} className={cn('group mb-0.5 p-2 flex items-center radius-md hover:bg-state-base-hover cursor-pointer', currentVar.id === chatVar.id && 'bg-state-base-hover')} onClick={() => setCurrentVar(chatVar)}>
-                <BubbleX className={cn('shrink-0 mr-1 w-4 h-4 text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')} />
-                <div title={chatVar.name} className={cn('text-text-tertiary system-sm-medium truncate group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')}>{chatVar.name}</div>
+              <div key={chatVar.id} className={cn('radius-md group mb-0.5 flex cursor-pointer items-center p-2 hover:bg-state-base-hover', currentVar.id === chatVar.id && 'bg-state-base-hover')} onClick={() => setCurrentVar(chatVar)}>
+                <BubbleX className={cn('mr-1 h-4 w-4 shrink-0 text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')} />
+                <div title={chatVar.name} className={cn('system-sm-medium truncate text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')}>{chatVar.name}</div>
               </div>
             ))}
           </div>
         </div>
         {/* RIGHT */}
-        <div className='grow flex flex-col w-0 h-full bg-components-panel-bg'>
+        <div className='flex h-full w-0 grow flex-col bg-components-panel-bg'>
           <div className='shrink-0 p-4 pb-2'>
             <div className='flex items-center gap-1 py-1'>
-              <div className='text-text-primary system-xl-semibold'>{currentVar.name}</div>
-              <div className='text-text-tertiary system-xs-medium'>{capitalize(currentVar.value_type)}</div>
+              <div className='system-xl-semibold text-text-primary'>{currentVar.name}</div>
+              <div className='system-xs-medium text-text-tertiary'>{capitalize(currentVar.value_type)}</div>
             </div>
           </div>
-          <div className='grow p-4 pt-2 flex flex-col h-0'>
-            <div className='shrink-0 mb-2 flex items-center gap-2'>
-              <div className='shrink-0 text-text-tertiary system-xs-medium-uppercase'>{t('workflow.chatVariable.storedContent').toLocaleUpperCase()}</div>
-              <div className='grow h-[1px]' style={{
+          <div className='flex h-0 grow flex-col p-4 pt-2'>
+            <div className='mb-2 flex shrink-0 items-center gap-2'>
+              <div className='system-xs-medium-uppercase shrink-0 text-text-tertiary'>{t('workflow.chatVariable.storedContent').toLocaleUpperCase()}</div>
+              <div className='h-[1px] grow' style={{
                 background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255) 100%)',
               }}></div>
               {latestValueTimestampMap[currentVar.id] && (
-                <div className='shrink-0 text-text-tertiary system-xs-regular'>{t('workflow.chatVariable.updatedAt')}{formatTime(latestValueTimestampMap[currentVar.id], t('appLog.dateTimeFormat') as string)}</div>
+                <div className='system-xs-regular shrink-0 text-text-tertiary'>{t('workflow.chatVariable.updatedAt')}{formatTime(latestValueTimestampMap[currentVar.id], t('appLog.dateTimeFormat') as string)}</div>
               )}
             </div>
             <div className='grow overflow-y-auto'>
               {currentVar.value_type !== ChatVarType.Number && currentVar.value_type !== ChatVarType.String && (
-                <div className='h-full flex flex-col bg-components-input-bg-normal rounded-lg px-2 pb-2'>
-                  <div className='shrink-0 flex justify-between items-center h-7 pt-1 pl-3 pr-2'>
-                    <div className='text-text-secondary system-xs-semibold'>JSON</div>
+                <div className='flex h-full flex-col rounded-lg bg-components-input-bg-normal px-2 pb-2'>
+                  <div className='flex h-7 shrink-0 items-center justify-between pl-3 pr-2 pt-1'>
+                    <div className='system-xs-semibold text-text-secondary'>JSON</div>
                     <div className='flex items-center p-1'>
                       {!isCopied
                         ? (
-                          <Clipboard className='w-4 h-4 text-text-tertiary cursor-pointer' onClick={handleCopy} />
+                          <Clipboard className='h-4 w-4 cursor-pointer text-text-tertiary' onClick={handleCopy} />
                         )
                         : (
-                          <ClipboardCheck className='w-4 h-4 text-text-tertiary' />
+                          <ClipboardCheck className='h-4 w-4 text-text-tertiary' />
                         )
                       }
                     </div>
@@ -142,7 +142,7 @@ const ConversationVariableModal = ({
                 </div>
               )}
               {(currentVar.value_type === ChatVarType.Number || currentVar.value_type === ChatVarType.String) && (
-                <div className='h-full px-4 py-3 rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-md-regular overflow-y-auto overflow-x-hidden'>{latestValueMap[currentVar.id] || ''}</div>
+                <div className='system-md-regular h-full overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal px-4 py-3 text-components-input-text-filled'>{latestValueMap[currentVar.id] || ''}</div>
               )}
             </div>
           </div>

web/app/components/workflow/panel/debug-and-preview/empty.tsx

@@ -6,8 +6,8 @@ const Empty = () => {
 
   return (
     <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
-      <div className='flex justify-center mb-2'>
-        <ChatBotSlim className='w-12 h-12 text-gray-300' />
+      <div className='mb-2 flex justify-center'>
+        <ChatBotSlim className='h-12 w-12 text-gray-300' />
       </div>
       <div className='w-[256px] text-center text-[13px] text-gray-400'>
         {t('workflow.common.previewPlaceholder')}

web/app/components/workflow/panel/debug-and-preview/index.tsx

@@ -54,17 +54,17 @@ const DebugAndPreview = () => {
   return (
     <div
       className={cn(
-        'flex flex-col w-[420px] bg-chatbot-bg rounded-l-2xl h-full border border-components-panel-border border-r-0 shadow-xl',
+        'flex h-full w-[420px] flex-col rounded-l-2xl border border-r-0 border-components-panel-border bg-chatbot-bg shadow-xl',
       )}
     >
-      <div className='shrink-0 flex items-center justify-between px-4 pt-3 pb-2 text-text-primary system-xl-semibold'>
+      <div className='system-xl-semibold flex shrink-0 items-center justify-between px-4 pb-2 pt-3 text-text-primary'>
         <div className='h-8'>{t('workflow.common.debugAndPreview').toLocaleUpperCase()}</div>
         <div className='flex items-center gap-1'>
           <Tooltip
             popupContent={t('common.operation.refresh')}
           >
             <ActionButton onClick={() => handleRestartChat()}>
-              <RefreshCcw01 className='w-4 h-4' />
+              <RefreshCcw01 className='h-4 w-4' />
             </ActionButton>
           </Tooltip>
           {varList.length > 0 && (
@@ -72,7 +72,7 @@ const DebugAndPreview = () => {
               popupContent={t('workflow.chatVariable.panelTitle')}
             >
               <ActionButton onClick={() => setShowConversationVariableModal(true)}>
-                <BubbleX className='w-4 h-4' />
+                <BubbleX className='h-4 w-4' />
               </ActionButton>
             </Tooltip>
           )}
@@ -82,22 +82,22 @@ const DebugAndPreview = () => {
                 popupContent={t('workflow.panel.userInputField')}
               >
                 <ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => setExpanded(!expanded)}>
-                  <RiEqualizer2Line className='w-4 h-4' />
+                  <RiEqualizer2Line className='h-4 w-4' />
                 </ActionButton>
               </Tooltip>
-              {expanded && <div className='absolute z-10 bottom-[-17px] right-[5px] w-3 h-3 bg-components-panel-on-panel-item-bg border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle rotate-45'/>}
+              {expanded && <div className='absolute bottom-[-17px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg'/>}
             </div>
           )}
-          <div className='mx-3 w-[1px] h-3.5 bg-gray-200'></div>
+          <div className='mx-3 h-3.5 w-[1px] bg-gray-200'></div>
           <div
-            className='flex items-center justify-center w-6 h-6 cursor-pointer'
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
             onClick={handleCancelDebugAndPreviewPanel}
           >
-            <RiCloseLine className='w-4 h-4 text-gray-500' />
+            <RiCloseLine className='h-4 w-4 text-gray-500' />
           </div>
         </div>
       </div>
-      <div className='grow rounded-b-2xl overflow-y-auto'>
+      <div className='grow overflow-y-auto rounded-b-2xl'>
         <ChatWrapper
           ref={chatRef}
           showConversationVariableModal={showConversationVariableModal}

web/app/components/workflow/panel/debug-and-preview/user-input.tsx

@@ -33,8 +33,8 @@ const UserInput = () => {
     return null
 
   return (
-    <div className={cn('sticky top-0 bg-components-panel-on-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs z-[1]')}>
-      <div className='px-4 pt-3 pb-4'>
+    <div className={cn('sticky top-0 z-[1] rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs')}>
+      <div className='px-4 pb-4 pt-3'>
         {variables.map((variable, index) => (
           <div
             key={variable.variable}