chore(web): new lint setup (#30020)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>

web/app/components/workflow/run/agent-log/agent-log-item.tsx

@@ -1,20 +1,20 @@
-import {
-  useMemo,
-  useState,
-} from 'react'
+import type { AgentLogItemWithChildren } from '@/types/workflow'
 import {
   RiArrowRightSLine,
   RiListView,
 } from '@remixicon/react'
-import { cn } from '@/utils/classnames'
+import {
+  useMemo,
+  useState,
+} from 'react'
 import Button from '@/app/components/base/button'
-import type { AgentLogItemWithChildren } from '@/types/workflow'
-import NodeStatusIcon from '@/app/components/workflow/nodes/_base/components/node-status-icon'
-import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
-import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
-import BlockIcon from '@/app/components/workflow/block-icon'
-import { BlockEnum } from '@/app/components/workflow/types'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import NodeStatusIcon from '@/app/components/workflow/nodes/_base/components/node-status-icon'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { cn } from '@/utils/classnames'
 
 type AgentLogItemProps = {
   item: AgentLogItemWithChildren
@@ -54,7 +54,7 @@ const AgentLogItem = ({
   }, [status])
 
   return (
-    <div className='rounded-[10px] border-[0.5px] border-components-panel-border bg-background-default'>
+    <div className="rounded-[10px] border-[0.5px] border-components-panel-border bg-background-default">
       <div
         className={cn(
           'flex cursor-pointer items-center pb-2 pl-1.5 pr-3 pt-2',
@@ -64,43 +64,46 @@ const AgentLogItem = ({
       >
         {
           expanded
-            ? <RiArrowRightSLine className='h-4 w-4 shrink-0 rotate-90 text-text-quaternary' />
-            : <RiArrowRightSLine className='h-4 w-4 shrink-0 text-text-quaternary' />
+            ? <RiArrowRightSLine className="h-4 w-4 shrink-0 rotate-90 text-text-quaternary" />
+            : <RiArrowRightSLine className="h-4 w-4 shrink-0 text-text-quaternary" />
         }
         <BlockIcon
-          className='mr-1.5 shrink-0'
+          className="mr-1.5 shrink-0"
           type={toolIcon ? BlockEnum.Tool : BlockEnum.Agent}
           toolIcon={toolIcon}
         />
         <div
-          className='system-sm-semibold-uppercase grow truncate text-text-secondary'
+          className="system-sm-semibold-uppercase grow truncate text-text-secondary"
           title={label}
         >
           {label}
         </div>
         {
           metadata?.elapsed_time && (
-            <div className='system-xs-regular mr-2 shrink-0 text-text-tertiary'>{metadata?.elapsed_time?.toFixed(3)}s</div>
+            <div className="system-xs-regular mr-2 shrink-0 text-text-tertiary">
+              {metadata?.elapsed_time?.toFixed(3)}
+              s
+            </div>
           )
         }
         <NodeStatusIcon status={mergeStatus} />
       </div>
       {
         expanded && (
-          <div className='p-1 pt-0'>
+          <div className="p-1 pt-0">
             {
               !!children?.length && (
                 <Button
-                  className='mb-1 flex w-full items-center justify-between'
-                  variant='tertiary'
+                  className="mb-1 flex w-full items-center justify-between"
+                  variant="tertiary"
                   onClick={() => onShowAgentOrToolLog(item)}
                 >
-                  <div className='flex items-center'>
-                    <RiListView className='mr-1 h-4 w-4 shrink-0 text-components-button-tertiary-text' />
+                  <div className="flex items-center">
+                    <RiListView className="mr-1 h-4 w-4 shrink-0 text-components-button-tertiary-text" />
                     {`${children.length} Action Logs`}
                   </div>
-                  <div className='flex'>
-                    <RiArrowRightSLine className='h-4 w-4 shrink-0 text-components-button-tertiary-text' />
+                  <div className="flex">
+                    <RiArrowRightSLine className="h-4 w-4 shrink-0 text-components-button-tertiary-text" />
                   </div>
                 </Button>
               )

web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx

@@ -1,12 +1,12 @@
-import { useState } from 'react'
+import type { AgentLogItemWithChildren } from '@/types/workflow'
 import { RiMoreLine } from '@remixicon/react'
+import { useState } from 'react'
+import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import Button from '@/app/components/base/button'
-import type { AgentLogItemWithChildren } from '@/types/workflow'
 
 type AgentLogNavMoreProps = {
   options: AgentLogItemWithChildren[]
@@ -20,7 +20,7 @@ const AgentLogNavMore = ({
 
   return (
     <PortalToFollowElem
-      placement='bottom-start'
+      placement="bottom-start"
       offset={{
         mainAxis: 2,
         crossAxis: -54,
@@ -30,19 +30,19 @@ const AgentLogNavMore = ({
     >
       <PortalToFollowElemTrigger>
         <Button
-          className='h-6 w-6'
-          variant='ghost-accent'
+          className="h-6 w-6"
+          variant="ghost-accent"
         >
-          <RiMoreLine className='h-4 w-4' />
+          <RiMoreLine className="h-4 w-4" />
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent>
-        <div className='w-[136px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
+        <div className="w-[136px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
           {
             options.map(option => (
               <div
                 key={option.message_id}
-                className='system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 text-text-secondary hover:bg-state-base-hover'
+                className="system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 text-text-secondary hover:bg-state-base-hover"
                 onClick={() => {
                   onShowAgentOrToolLog(option)
                   setOpen(false)

web/app/components/workflow/run/agent-log/agent-log-nav.tsx

@@ -1,8 +1,8 @@
+import type { AgentLogItemWithChildren } from '@/types/workflow'
 import { RiArrowLeftLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import AgentLogNavMore from './agent-log-nav-more'
 import Button from '@/app/components/base/button'
-import type { AgentLogItemWithChildren } from '@/types/workflow'
+import AgentLogNavMore from './agent-log-nav-more'
 
 type AgentLogNavProps = {
   agentOrToolLogItemStack: AgentLogItemWithChildren[]
@@ -19,41 +19,41 @@ const AgentLogNav = ({
   const end = agentOrToolLogItemStack.at(-1)
 
   return (
-    <div className='flex h-8 items-center bg-components-panel-bg p-1 pr-3'>
+    <div className="flex h-8 items-center bg-components-panel-bg p-1 pr-3">
       <Button
-        className='shrink-0 px-[5px]'
-        size='small'
-        variant='ghost-accent'
+        className="shrink-0 px-[5px]"
+        size="small"
+        variant="ghost-accent"
         onClick={() => {
           onShowAgentOrToolLog()
         }}
       >
-        <RiArrowLeftLine className='mr-1 h-3.5 w-3.5' />
+        <RiArrowLeftLine className="mr-1 h-3.5 w-3.5" />
         AGENT
       </Button>
-      <div className='system-xs-regular mx-0.5 shrink-0 text-divider-deep'>/</div>
+      <div className="system-xs-regular mx-0.5 shrink-0 text-divider-deep">/</div>
       {
         agentOrToolLogItemStackLength > 1
           ? (
-            <Button
-              className='shrink-0 px-[5px]'
-              size='small'
-              variant='ghost-accent'
-              onClick={() => onShowAgentOrToolLog(first)}
-            >
-              {t('workflow.nodes.agent.strategy.label')}
-            </Button>
-          )
+              <Button
+                className="shrink-0 px-[5px]"
+                size="small"
+                variant="ghost-accent"
+                onClick={() => onShowAgentOrToolLog(first)}
+              >
+                {t('workflow.nodes.agent.strategy.label')}
+              </Button>
+            )
           : (
-            <div className='system-xs-medium-uppercase flex items-center px-[5px] text-text-tertiary'>
-              {t('workflow.nodes.agent.strategy.label')}
-            </div>
-          )
+              <div className="system-xs-medium-uppercase flex items-center px-[5px] text-text-tertiary">
+                {t('workflow.nodes.agent.strategy.label')}
+              </div>
+            )
       }
       {
         !!mid.length && (
           <>
-            <div className='system-xs-regular mx-0.5 shrink-0 text-divider-deep'>/</div>
+            <div className="system-xs-regular mx-0.5 shrink-0 text-divider-deep">/</div>
             <AgentLogNavMore
               options={mid}
               onShowAgentOrToolLog={onShowAgentOrToolLog}
@@ -64,8 +64,8 @@ const AgentLogNav = ({
       {
         !!end && agentOrToolLogItemStackLength > 1 && (
           <>
-            <div className='system-xs-regular mx-0.5 shrink-0 text-divider-deep'>/</div>
-            <div className='system-xs-medium-uppercase flex items-center px-[5px] text-text-tertiary'>
+            <div className="system-xs-regular mx-0.5 shrink-0 text-divider-deep">/</div>
+            <div className="system-xs-medium-uppercase flex items-center px-[5px] text-text-tertiary">
               {end.label}
             </div>
           </>

web/app/components/workflow/run/agent-log/agent-log-trigger.tsx

@@ -1,9 +1,9 @@
-import { RiArrowRightLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
 import type {
   AgentLogItemWithChildren,
   NodeTracing,
 } from '@/types/workflow'
+import { RiArrowRightLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
 
 type AgentLogTriggerProps = {
   nodeInfo: NodeTracing
@@ -19,27 +19,27 @@ const AgentLogTrigger = ({
 
   return (
     <div
-      className='cursor-pointer rounded-[10px] bg-components-button-tertiary-bg'
+      className="cursor-pointer rounded-[10px] bg-components-button-tertiary-bg"
       onClick={() => {
         onShowAgentOrToolLog({ message_id: nodeInfo.id, children: agentLog || [] } as AgentLogItemWithChildren)
       }}
     >
-      <div className='system-2xs-medium-uppercase flex items-center px-3 pt-2 text-text-tertiary'>
+      <div className="system-2xs-medium-uppercase flex items-center px-3 pt-2 text-text-tertiary">
         {t('workflow.nodes.agent.strategy.label')}
       </div>
-      <div className='flex items-center pb-1.5 pl-3 pr-2 pt-1'>
+      <div className="flex items-center pb-1.5 pl-3 pr-2 pt-1">
         {
           agentStrategy && (
-            <div className='system-xs-medium grow text-text-secondary'>
+            <div className="system-xs-medium grow text-text-secondary">
               {agentStrategy}
             </div>
           )
         }
         <div
-          className='system-xs-regular-uppercase flex shrink-0 cursor-pointer items-center px-[1px] text-text-tertiary'
+          className="system-xs-regular-uppercase flex shrink-0 cursor-pointer items-center px-[1px] text-text-tertiary"
         >
           {t('runLog.detail')}
-          <RiArrowRightLine className='ml-0.5 h-3.5 w-3.5' />
+          <RiArrowRightLine className="ml-0.5 h-3.5 w-3.5" />
         </div>
       </div>
     </div>

web/app/components/workflow/run/agent-log/agent-result-panel.tsx

@@ -1,8 +1,8 @@
+import type { AgentLogItemWithChildren } from '@/types/workflow'
 import { RiAlertFill } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import AgentLogItem from './agent-log-item'
 import AgentLogNav from './agent-log-nav'
-import type { AgentLogItemWithChildren } from '@/types/workflow'
 
 type AgentResultPanelProps = {
   agentOrToolLogItemStack: AgentLogItemWithChildren[]
@@ -19,35 +19,34 @@ const AgentResultPanel = ({
   const list = agentOrToolLogListMap[top.message_id]
 
   return (
-    <div className='overflow-y-auto bg-background-section'>
+    <div className="overflow-y-auto bg-background-section">
       <AgentLogNav
         agentOrToolLogItemStack={agentOrToolLogItemStack}
         onShowAgentOrToolLog={onShowAgentOrToolLog}
       />
-      {
-        <div className='space-y-1 p-2'>
-          {
-            list.map(item => (
-              <AgentLogItem
-                key={item.message_id}
-                item={item}
-                onShowAgentOrToolLog={onShowAgentOrToolLog}
-              />
-            ))
-          }
-        </div>
-      }
+      <div className="space-y-1 p-2">
+        {
+          list.map(item => (
+            <AgentLogItem
+              key={item.message_id}
+              item={item}
+              onShowAgentOrToolLog={onShowAgentOrToolLog}
+            />
+          ))
+        }
+      </div>
       {
         top.hasCircle && (
-          <div className='mt-1 flex items-center rounded-xl border border-components-panel-border bg-components-panel-bg-blur px-3 pr-2 shadow-md'>
+          <div className="mt-1 flex items-center rounded-xl border border-components-panel-border bg-components-panel-bg-blur px-3 pr-2 shadow-md">
             <div
-              className='absolute inset-0 rounded-xl opacity-[0.4]'
+              className="absolute inset-0 rounded-xl opacity-[0.4]"
               style={{
                 background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)',
               }}
-            ></div>
-            <RiAlertFill className='mr-1.5 h-4 w-4 text-text-warning-secondary' />
-            <div className='system-xs-medium text-text-primary'>
+            >
+            </div>
+            <RiAlertFill className="mr-1.5 h-4 w-4 text-text-warning-secondary" />
+            <div className="system-xs-medium text-text-primary">
               {t('runLog.circularInvocationTip')}
             </div>
           </div>