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

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

web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx

@@ -1,14 +1,14 @@
 import React, { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useEmbeddedChatbotContext } from '../context'
-import Input from '@/app/components/base/input'
-import Textarea from '@/app/components/base/textarea'
-import { PortalSelect } from '@/app/components/base/select'
 import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
-import { InputVarType } from '@/app/components/workflow/types'
+import Input from '@/app/components/base/input'
+import { PortalSelect } from '@/app/components/base/select'
+import Textarea from '@/app/components/base/textarea'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
-import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import { InputVarType } from '@/app/components/workflow/types'
+import { useEmbeddedChatbotContext } from '../context'
 
 type Props = {
   showTip?: boolean
@@ -42,14 +42,14 @@ const InputsFormContent = ({ showTip }: Props) => {
   const visibleInputsForms = inputsForms.filter(form => form.hide !== true)
 
   return (
-    <div className='space-y-4'>
+    <div className="space-y-4">
       {visibleInputsForms.map(form => (
-        <div key={form.variable} className='space-y-1'>
+        <div key={form.variable} className="space-y-1">
           {form.type !== InputVarType.checkbox && (
-            <div className='flex h-6 items-center gap-1'>
-              <div className='system-md-semibold text-text-secondary'>{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='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</div>
+                <div className="system-xs-regular text-text-tertiary">{t('workflow.panel.optional')}</div>
               )}
             </div>
           )}
@@ -62,7 +62,7 @@ const InputsFormContent = ({ showTip }: Props) => {
           )}
           {form.type === InputVarType.number && (
             <Input
-              type='number'
+              type="number"
               value={inputsFormValue?.[form.variable] || ''}
               onChange={e => handleFormChange(form.variable, e.target.value)}
               placeholder={form.label}
@@ -85,7 +85,7 @@ const InputsFormContent = ({ showTip }: Props) => {
           )}
           {form.type === InputVarType.select && (
             <PortalSelect
-              popupClassName='w-[200px]'
+              popupClassName="w-[200px]"
               value={inputsFormValue?.[form.variable] ?? form.default ?? ''}
               items={form.options.map((option: string) => ({ value: option, name: option }))}
               onSelect={item => handleFormChange(form.variable, item.value as string)}
@@ -124,16 +124,16 @@ const InputsFormContent = ({ showTip }: Props) => {
               value={inputsFormValue?.[form.variable] || ''}
               onChange={v => handleFormChange(form.variable, v)}
               noWrapper
-              className='bg h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1'
+              className="bg h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
               placeholder={
-                <div className='whitespace-pre'>{form.json_schema}</div>
+                <div className="whitespace-pre">{form.json_schema}</div>
               }
             />
           )}
         </div>
       ))}
       {showTip && (
-        <div className='system-xs-regular text-text-tertiary'>{t('share.chat.chatFormTip')}</div>
+        <div className="system-xs-regular text-text-tertiary">{t('share.chat.chatFormTip')}</div>
       )}
     </div>
   )

web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Message3Fill } from '@/app/components/base/icons/src/public/other'
 import Button from '@/app/components/base/button'
-import Divider from '@/app/components/base/divider'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
-import { useEmbeddedChatbotContext } from '../context'
+import Divider from '@/app/components/base/divider'
+import { Message3Fill } from '@/app/components/base/icons/src/public/other'
 import { cn } from '@/utils/classnames'
+import { useEmbeddedChatbotContext } from '../context'
 
 type Props = {
   collapsed: boolean
@@ -34,19 +34,21 @@ const InputsFormNode = ({
       <div className={cn(
         '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 rounded-t-2xl px-6 py-4',
           !collapsed && 'border-b border-divider-subtle',
           isMobile && '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>
+        )}
+        >
+          <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='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(false)}>{t('common.operation.edit')}</Button>
+            <Button className="uppercase text-text-tertiary" size="small" variant="ghost" onClick={() => setCollapsed(false)}>{t('common.operation.edit')}</Button>
           )}
           {!collapsed && currentConversationId && (
-            <Button className='uppercase text-text-tertiary' 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 && (
@@ -57,24 +59,26 @@ const InputsFormNode = ({
         {!collapsed && !currentConversationId && (
           <div className={cn('p-6', isMobile && 'p-4')}>
             <Button
-              variant='primary'
-              className='w-full'
+              variant="primary"
+              className="w-full"
               onClick={() => handleStartChat(() => setCollapsed(true))}
               style={
                 themeBuilder?.theme
                   ? {
-                    backgroundColor: themeBuilder?.theme.primaryColor,
-                  }
+                      backgroundColor: themeBuilder?.theme.primaryColor,
+                    }
                   : {}
               }
-            >{t('share.chat.startChat')}</Button>
+            >
+              {t('share.chat.startChat')}
+            </Button>
           </div>
         )}
       </div>
       {collapsed && (
-        <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 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/embedded-chatbot/inputs-form/view-form-dropdown.tsx

@@ -1,12 +1,12 @@
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   RiChatSettingsLine,
 } from '@remixicon/react'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
-import { Message3Fill } from '@/app/components/base/icons/src/public/other'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
+import { Message3Fill } from '@/app/components/base/icons/src/public/other'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import { cn } from '@/utils/classnames'
 
 type Props = {
@@ -20,7 +20,7 @@ const ViewFormDropdown = ({ iconColor }: Props) => {
     <PortalToFollowElem
       open={open}
       onOpenChange={setOpen}
-      placement='bottom-end'
+      placement="bottom-end"
       offset={{
         mainAxis: 4,
         crossAxis: 4,
@@ -29,17 +29,17 @@ const ViewFormDropdown = ({ iconColor }: Props) => {
       <PortalToFollowElemTrigger
         onClick={() => setOpen(v => !v)}
       >
-        <ActionButton size='l' state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
+        <ActionButton size="l" state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
           <RiChatSettingsLine className={cn('h-[18px] w-[18px]', iconColor)} />
         </ActionButton>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-50">
-        <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 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'>
+          <div className="p-6">
             <InputsFormContent />
           </div>
         </div>