refactor: refactor the button component using `forwardRef` (#4379)

Co-authored-by: KVOJJJin <jzongcode@gmail.com>

web/app/(shareLayout)/webapp-signin/page.tsx

@@ -137,7 +137,7 @@ const WebSSOForm: FC = () => {
             <div className="w-full mx-auto mt-10">
               <Button
                 tabIndex={0}
-                type='primary'
+                variant='primary'
                 onClick={() => { handleSSOLogin() }}
                 disabled={isLoading}
                 className="w-full !fone-medium !text-sm"

web/app/activate/activateForm.tsx

@@ -109,7 +109,7 @@ const ActivateForm = () => {
             <h2 className="text-[32px] font-bold text-gray-900">{t('login.invalid')}</h2>
           </div>
           <div className="w-full mx-auto mt-6">
-            <Button type='primary' className='w-full !fone-medium !text-sm'>
+            <Button variant='primary' className='w-full !fone-medium !text-sm'>
               <a href="https://dify.ai">{t('login.explore')}</a>
             </Button>
           </div>
@@ -195,7 +195,7 @@ const ActivateForm = () => {
               </div>
               <div>
                 <Button
-                  type='primary'
+                  variant='primary'
                   className='w-full !fone-medium !text-sm'
                   onClick={handleActivate}
                 >
@@ -226,7 +226,7 @@ const ActivateForm = () => {
             </h2>
           </div>
           <div className="w-full mx-auto mt-6">
-            <Button type='primary' className='w-full !fone-medium !text-sm'>
+            <Button variant='primary' className='w-full !fone-medium !text-sm'>
               <a href="/signin">{t('login.activated')}</a>
             </Button>
           </div>

web/app/components/app/annotation/add-annotation-modal/index.tsx

@@ -105,7 +105,7 @@ const AddAnnotationModal: FC<Props> = ({
                 </div>
                 <div className='mt-2 flex space-x-2'>
                   <Button className='!h-7 !text-xs !font-medium' onClick={onHide}>{t('common.operation.cancel')}</Button>
-                  <Button className='!h-7 !text-xs !font-medium' type='primary' onClick={handleSave} loading={isSaving} disabled={isAnnotationFull}>{t('common.operation.add')}</Button>
+                  <Button className='!h-7 !text-xs !font-medium' variant='primary' onClick={handleSave} loading={isSaving} disabled={isAnnotationFull}>{t('common.operation.add')}</Button>
                 </div>
               </div>
             </div>

web/app/components/app/annotation/batch-add-annotation-modal/index.tsx

@@ -110,7 +110,7 @@ const BatchModal: FC<IBatchModalProps> = ({
         </Button>
         <Button
           className='text-sm font-medium'
-          type="primary"
+          variant="primary"
           onClick={handleSend}
           disabled={isAnnotationFull || !currentCSV}
           loading={importStatus === ProcessStatus.PROCESSING || importStatus === ProcessStatus.WAITING}

web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx

@@ -119,7 +119,7 @@ const EditItem: FC<Props> = ({
                 autoFocus
               />
               <div className='mt-2 flex space-x-2'>
-                <Button className='!h-7 !text-xs !font-medium' type='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+                <Button className='!h-7 !text-xs !font-medium' variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
                 <Button className='!h-7 !text-xs !font-medium' onClick={handleCancel}>{t('common.operation.cancel')}</Button>
               </div>
             </div>

web/app/components/app/annotation/header-opts/index.tsx

@@ -135,7 +135,7 @@ const HeaderOptions: FC<Props> = ({
 
   return (
     <div className='flex space-x-2'>
-      <Button type='primary' onClick={() => setShowAddModal(true)} className='flex items-center !h-8 !px-3 !text-[13px] space-x-2'>
+      <Button variant='primary' onClick={() => setShowAddModal(true)} className='flex items-center !h-8 !px-3 !text-[13px] space-x-2'>
         <Plus className='w-4 h-4' />
         <div>{t('appAnnotation.table.header.addAnnotation')}</div>
       </Button>

web/app/components/app/app-publisher/index.tsx

@@ -119,7 +119,7 @@ const AppPublisher = ({
     >
       <PortalToFollowElemTrigger onClick={handleTrigger}>
         <Button
-          type='primary'
+          variant='primary'
           className={`
             pl-3 pr-2 py-0 h-8 text-[13px] font-medium
             ${disabled && 'cursor-not-allowed opacity-50'}
@@ -168,7 +168,7 @@ const AppPublisher = ({
               )
               : (
                 <Button
-                  type='primary'
+                  variant='primary'
                   className={classNames(
                     'mt-3 px-3 py-0 w-full h-8 border-[0.5px] border-primary-700 rounded-lg text-[13px] font-medium',
                     (publishDisabled || published) && 'border-transparent',

web/app/components/app/app-publisher/publish-with-multiple-model.tsx

@@ -68,7 +68,7 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
     >
       <PortalToFollowElemTrigger className='w-full' onClick={handleToggle}>
         <Button
-          type='primary'
+          variant='primary'
           disabled={!validModelConfigs.length}
           className='mt-3 px-3 py-0 w-full h-8 border-[0.5px] border-primary-700 rounded-lg text-[13px] font-medium'
         >

web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx

@@ -20,7 +20,7 @@ const FormattingChanged: FC<IFormattingChangedProps> = ({
       description={t('appDebug.feature.dataSet.queryVariable.unableToQueryDataSetTip')}
       footer={
         <div className='flex space-x-2'>
-          <Button type='primary' className='flex items-center justify-start !h-8 !w-[96px]' onClick={onConfirm}>
+          <Button variant='primary' className='flex items-center justify-start !h-8 !w-[96px]' onClick={onConfirm}>
             <span className='text-[13px] font-medium'>{t('appDebug.feature.dataSet.queryVariable.ok')}</span>
           </Button>
         </div>

web/app/components/app/configuration/base/warning-mask/formatting-changed.tsx

@@ -28,7 +28,7 @@ const FormattingChanged: FC<IFormattingChangedProps> = ({
       description={t('appDebug.formattingChangedText')}
       footer={
         <div className='flex space-x-2'>
-          <Button type='primary' className='flex items-center space-x-2' onClick={onConfirm}>
+          <Button variant='primary' className='flex items-center space-x-2' onClick={onConfirm}>
             {icon}
             <span>{t('common.operation.refresh')}</span>
           </Button>

web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx

@@ -28,7 +28,7 @@ const HasNotSetAPI: FC<IHasNotSetAPIProps> = ({
       title={isTrailFinished ? t('appDebug.notSetAPIKey.trailFinished') : t('appDebug.notSetAPIKey.title')}
       description={t('appDebug.notSetAPIKey.description')}
       footer={
-        <Button type='primary' className='flex items-center space-x-2' onClick={onSetting}>
+        <Button variant='primary' className='flex items-center space-x-2' onClick={onSetting}>
           <span>{t('appDebug.notSetAPIKey.settingBtn')}</span>
           {icon}
         </Button>}

web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx

@@ -63,7 +63,7 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
         </div>
         <div className='mt-7 flex justify-end space-x-2'>
           <Button className='w-20 h-8 !text-[13px]' onClick={onCancel}>{t('common.operation.cancel')}</Button>
-          <Button className='w-20 h-8 !text-[13px]' type='primary' onClick={onConfrim}>{t('common.operation.add')}</Button>
+          <Button className='w-20 h-8 !text-[13px]' variant='primary' onClick={onConfrim}>{t('common.operation.add')}</Button>
         </div>
       </div>
 

web/app/components/app/configuration/config-prompt/conversation-histroy/edit-modal.tsx

@@ -49,7 +49,7 @@ const EditModal: FC<Props> = ({
 
       <div className='mt-10 flex justify-end'>
         <Button className='mr-2 flex-shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
-        <Button type='primary' className='flex-shrink-0' onClick={() => onSave(tempData)} loading={saveLoading}>{t('common.operation.save')}</Button>
+        <Button variant='primary' className='flex-shrink-0' onClick={() => onSave(tempData)} loading={saveLoading}>{t('common.operation.save')}</Button>
       </div>
     </Modal>
   )

web/app/components/app/configuration/config-var/modal-foot.tsx

@@ -17,7 +17,7 @@ const ModalFoot: FC<IModalFootProps> = ({
   return (
     <div className='flex justify-end gap-2'>
       <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
-      <Button type='primary' onClick={onConfirm}>{t('common.operation.save')}</Button>
+      <Button variant='primary' onClick={onConfirm}>{t('common.operation.save')}</Button>
     </div>
   )
 }

web/app/components/app/configuration/config/agent/agent-setting/index.tsx

@@ -142,7 +142,7 @@ const AgentSetting: FC<Props> = ({
             {t('common.operation.cancel')}
           </Button>
           <Button
-            type='primary'
+            variant='primary'
             className='text-sm font-medium'
             onClick={handleSave}
           >

web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx

@@ -209,7 +209,7 @@ const SettingBuiltInTool: FC<Props> = ({
               {!readonly && !isInfoActive && (
                 <div className='mt-2 shrink-0 flex justify-end py-4 px-6  space-x-2 rounded-b-[10px] bg-gray-50 border-t border-black/5'>
                   <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onHide}>{t('common.operation.cancel')}</Button>
-                  <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' type='primary' disabled={!isValid} onClick={() => onSave?.(addDefaultValue(tempSetting, formSchemas))}>{t('common.operation.save')}</Button>
+                  <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' disabled={!isValid} onClick={() => onSave?.(addDefaultValue(tempSetting, formSchemas))}>{t('common.operation.save')}</Button>
                 </div>
               )}
             </div>)}

web/app/components/app/configuration/config/automatic/get-automatic-res.tsx

@@ -155,7 +155,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
             <div className='mt-6 flex justify-end'>
               <Button
                 className='flex space-x-2 items-center !h-8'
-                type='primary'
+                variant='primary'
                 onClick={onGenerate}
                 disabled={isLoading}
               >
@@ -198,7 +198,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
 
             <div className='sticky bottom-0 flex justify-end right-0 py-4 bg-white'>
               <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
-              <Button type='primary' className='ml-2' onClick={() => {
+              <Button variant='primary' className='ml-2' onClick={() => {
                 setShowConfirmOverwrite(true)
               }}>{t('appDebug.automatic.apply')}</Button>
             </div>

web/app/components/app/configuration/ctrl-btn-group/index.tsx

@@ -15,8 +15,8 @@ const ContrlBtnGroup: FC<IContrlBtnGroupProps> = ({ onSave, onReset }) => {
   return (
     <div className="fixed left-[224px] bottom-0 w-[519px] h-[64px]">
       <div className={`${s.ctrlBtn} flex items-center h-full pl-4  gap-2 bg-white`}>
-        <Button type='primary' onClick={onSave}>{t('appDebug.operation.applyConfig')}</Button>
-        <Button type='default' onClick={onReset}>{t('appDebug.operation.resetConfig')}</Button>
+        <Button variant='primary' onClick={onSave}>{t('appDebug.operation.applyConfig')}</Button>
+        <Button variant='default' onClick={onReset}>{t('appDebug.operation.resetConfig')}</Button>
       </div>
     </div>
   )

web/app/components/app/configuration/dataset-config/params-config/index.tsx

@@ -95,7 +95,7 @@ const ParamsConfig: FC = () => {
               <Button className='mr-2 flex-shrink-0' onClick={() => {
                 setOpen(false)
               }}>{t('common.operation.cancel')}</Button>
-              <Button type='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
+              <Button variant='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
             </div>
           </Modal>
         )

web/app/components/app/configuration/dataset-config/select-dataset/index.tsx

@@ -156,7 +156,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
           </div>
           <div className='flex space-x-2'>
             <Button className='!w-24 !h-9' onClick={onClose}>{t('common.operation.cancel')}</Button>
-            <Button className='!w-24 !h-9' type='primary' onClick={handleSelect} disabled={hasNoData}>{t('common.operation.add')}</Button>
+            <Button className='!w-24 !h-9' variant='primary' onClick={handleSelect} disabled={hasNoData}>{t('common.operation.add')}</Button>
           </div>
         </div>
       )}

web/app/components/app/configuration/dataset-config/settings-modal/index.tsx

@@ -280,7 +280,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
           {t('common.operation.cancel')}
         </Button>
         <Button
-          type='primary'
+          variant='primary'
           className='text-sm font-medium'
           disabled={loading}
           onClick={handleSave}

web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx

@@ -132,7 +132,7 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
     isFocus ? (
       <div className='flex items-center space-x-1'>
         <div className='px-3 leading-[18px] text-xs font-medium text-gray-700 cursor-pointer' onClick={handleCancel}>{t('common.operation.cancel')}</div>
-        <Button className='!h-8 !px-3 text-xs' onClick={handleConfirm} type="primary">{t('common.operation.save')}</Button>
+        <Button className='!h-8 !px-3 text-xs' onClick={handleConfirm} variant="primary">{t('common.operation.save')}</Button>
       </div>
     ) : (
       <OperationBtn type='edit' actionName={hasValue ? '' : t('appDebug.openingStatement.writeOpener') as string} onClick={handleEdit} />

web/app/components/app/configuration/prompt-value-panel/index.tsx

@@ -62,7 +62,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
   const renderRunButton = () => {
     return (
       <Button
-        type="primary"
+        variant="primary"
         disabled={canNotRun}
         onClick={() => onSend && onSend()}
         className="w-[80px] !h-8">

web/app/components/app/configuration/toolbox/annotation/config-param-modal.tsx

@@ -125,7 +125,7 @@ const ConfigParamModal: FC<Props> = ({
       <div className='mt-6 flex gap-2 justify-end'>
         <Button className='!text-sm' onClick={onHide}>{t('common.operation.cancel')}</Button>
         <Button
-          type='primary'
+          variant='primary'
           onClick={handleSave}
           className='flex items-center border-[0.5px] !text-sm'
           loading={isLoading}

web/app/components/app/configuration/toolbox/moderation/moderation-setting-modal.tsx

@@ -259,7 +259,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
                 onClick={() => handleDataTypeChange(provider.key)}
               >
                 <div className={`
-                  mr-2 w-4 h-4 rounded-full border 
+                  mr-2 w-4 h-4 rounded-full border
                   ${localeData.type === provider.key ? 'border-[5px] border-primary-600' : 'border border-gray-300'}`} />
                 {provider.name}
               </div>
@@ -359,7 +359,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
           {t('common.operation.cancel')}
         </Button>
         <Button
-          type='primary'
+          variant='primary'
           className='text-sm font-medium'
           onClick={handleSave}
           disabled={localeData.type === 'openai_moderation' && !openaiProviderConfiged}

web/app/components/app/configuration/tools/external-data-tool-modal.tsx

@@ -276,7 +276,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
           {t('common.operation.cancel')}
         </Button>
         <Button
-          type='primary'
+          variant='primary'
           className='text-sm font-medium'
           onClick={handleSave}
         >

web/app/components/app/create-app-modal/index.tsx

@@ -85,7 +85,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
       overflowVisible
       className='!p-0 !max-w-[720px] !w-[720px] rounded-xl'
       isShow={show}
-      onClose={() => {}}
+      onClose={() => { }}
     >
       {/* Heading */}
       <div className='shrink-0 flex flex-col h-full bg-white rounded-t-xl'>
@@ -208,7 +208,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
                       'hidden z-20 absolute left-[327px] top-[-158px] w-[376px] rounded-xl bg-white border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-lg group-hover:block',
                     )}
                   >
-                    <div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl', s.basicPic)}/>
+                    <div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl', s.basicPic)} />
                     <div className='px-4 pb-2'>
                       <div className='flex items-center justify-between'>
                         <div className='text-gray-700 text-md leading-6 font-semibold'>{t('app.newApp.basic')}</div>
@@ -242,7 +242,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
                       'hidden z-20 absolute right-[26px] top-[-158px] w-[376px] rounded-xl bg-white border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-lg group-hover:block',
                     )}
                   >
-                    <div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl', s.advancedPic)}/>
+                    <div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl', s.advancedPic)} />
                     <div className='px-4 pb-2'>
                       <div className='flex items-center justify-between'>
                         <div className='flex items-center'>
@@ -302,7 +302,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
       )}
       <div className='px-8 py-6 flex justify-end'>
         <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
-        <Button className='text-sm font-medium' disabled={isAppsFull || !name} type="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
+        <Button className='text-sm font-medium' disabled={isAppsFull || !name} variant="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
       </div>
       <div className='absolute right-6 top-6 p-2 cursor-pointer z-20' onClick={onClose}>
         <XClose className='w-4 h-4 text-gray-500' />

web/app/components/app/create-from-dsl-modal/index.tsx

@@ -80,7 +80,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose }: CreateFromDSLModalProp
     <Modal
       className='px-8 py-6 max-w-[520px] w-[520px] rounded-xl'
       isShow={show}
-      onClose={() => {}}
+      onClose={() => { }}
     >
       <div className='relative pb-2 text-xl font-medium leading-[30px] text-gray-900'>{t('app.createFromConfigFile')}</div>
       <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
@@ -93,7 +93,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose }: CreateFromDSLModalProp
       {isAppsFull && <AppsFull loc='app-create-dsl' />}
       <div className='pt-6 flex justify-end'>
         <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
-        <Button className='text-sm font-medium' disabled={isAppsFull || !currentFile} type="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
+        <Button className='text-sm font-medium' disabled={isAppsFull || !currentFile} variant="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
       </div>
     </Modal>
   )

web/app/components/app/duplicate-modal/index.tsx

@@ -75,7 +75,7 @@ const DuplicateAppModal = ({
           {isAppsFull && <AppsFull loc='app-duplicate-create' />}
         </div>
         <div className='flex flex-row-reverse'>
-          <Button disabled={isAppsFull} className='w-24 ml-2' type='primary' onClick={submit}>{t('app.duplicate')}</Button>
+          <Button disabled={isAppsFull} className='w-24 ml-2' variant='primary' onClick={submit}>{t('app.duplicate')}</Button>
           <Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
         </div>
       </Modal>

web/app/components/app/overview/apikey-info-panel/index.tsx

@@ -44,7 +44,7 @@ const APIKeyInfoPanel: FC = () => {
         <div className='mt-1 text-sm text-gray-600 font-normal'>{t(`appOverview.apiKeyInfo.cloud.${'trial'}.description`)}</div>
       )}
       <Button
-        type='primary'
+        variant='primary'
         className='space-x-2'
         onClick={() => setShowAccountSettingModal({ payload: 'provider' })}
       >

web/app/components/app/overview/settings/index.tsx

@@ -173,7 +173,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
         </>}
         <div className='mt-10 flex justify-end'>
           <Button className='mr-2 flex-shrink-0 !text-sm' onClick={onHide}>{t('common.operation.cancel')}</Button>
-          <Button type='primary' className='flex-shrink-0 !text-sm' onClick={onClickSave} loading={saveLoading}>{t('common.operation.save')}</Button>
+          <Button variant='primary' className='flex-shrink-0 !text-sm' onClick={onClickSave} loading={saveLoading}>{t('common.operation.save')}</Button>
         </div>
         {showEmojiPicker && <EmojiPicker
           onSelect={(icon, icon_background) => {

web/app/components/app/switch-app-modal/index.tsx

@@ -89,7 +89,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
       <Modal
         className={cn('p-8 max-w-[600px] w-[600px]', s.bg)}
         isShow={show}
-        onClose={() => {}}
+        onClose={() => { }}
       >
         <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
           <XClose className='w-4 h-4 text-gray-500' />
@@ -133,7 +133,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
           </div>
           <div className='flex items-center'>
             <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
-            <Button className='text-sm font-medium border-red-700 border-[0.5px]' disabled={isAppsFull || !name} type="warning" onClick={goStart}>{t('app.switchStart')}</Button>
+            <Button className='text-sm font-medium border-red-700 border-[0.5px]' disabled={isAppsFull || !name} variant="warning" onClick={goStart}>{t('app.switchStart')}</Button>
           </div>
         </div>
       </Modal>

web/app/components/base/button/index.tsx

@@ -1,50 +1,44 @@
-import type { FC, MouseEventHandler, PropsWithChildren } from 'react'
-import React, { memo } from 'react'
+import React from 'react'
+import { type VariantProps, cva } from 'class-variance-authority'
 import classNames from 'classnames'
 import Spinner from '../spinner'
 
-export type IButtonProps = PropsWithChildren<{
-  type?: string
-  className?: string
-  disabled?: boolean
-  loading?: boolean
-  tabIndex?: number
-  onClick?: MouseEventHandler<HTMLDivElement>
-}>
+const buttonVariants = cva(
+  'btn disabled:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        primary: 'btn-primary disabled:btn-primary-disabled',
+        warning:
+          'btn-warning disabled:btn-warning-disabled',
+        default: 'btn-default disabled:btn-default-disabled',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
 
-const Button: FC<IButtonProps> = ({
-  type,
-  disabled,
-  children,
-  className,
-  onClick,
-  loading = false,
-  tabIndex,
-}) => {
-  let typeClassNames = 'cursor-pointer'
-  switch (type) {
-    case 'primary':
-      typeClassNames = (disabled || loading) ? 'btn-primary-disabled' : 'btn-primary'
-      break
-    case 'warning':
-      typeClassNames = (disabled || loading) ? 'btn-warning-disabled' : 'btn-warning'
-      break
-    default:
-      typeClassNames = disabled ? 'btn-default-disabled' : 'btn-default'
-      break
-  }
+export type ButtonProps = {
+  loading?: boolean
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
 
-  return (
-    <div
-      className={classNames('btn', typeClassNames, className)}
-      tabIndex={tabIndex}
-      onClick={disabled ? undefined : onClick}
-    >
-      {children}
-      {/* Spinner is hidden when loading is false */}
-      <Spinner loading={loading} className='!text-white !h-3 !w-3 !border-2 !ml-1' />
-    </div>
-  )
-}
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, loading, children, ...props }, ref) => {
+    return (
+      <button
+        className={classNames(buttonVariants({ variant, className }))}
+        ref={ref}
+        {...props}
+      >
+        {children}
+        <Spinner loading={loading} className='!text-white !h-3 !w-3 !border-2 !ml-1' />
+      </button>
+    )
+  },
+)
+Button.displayName = 'Button'
 
-export default memo(Button)
+export default Button
+export { Button, buttonVariants }

web/app/components/base/chat/chat-with-history/config-panel/index.tsx

@@ -93,7 +93,7 @@ const ConfigPanel = () => {
               <Form />
               <div className={`pl-[136px] flex items-center ${isMobile && '!pl-0'}`}>
                 <Button
-                  type='primary'
+                  variant='primary'
                   className='mr-2 text-sm font-medium'
                   onClick={() => {
                     setCollapsed(true)
@@ -118,7 +118,7 @@ const ConfigPanel = () => {
               <Form />
               <Button
                 className={`px-4 py-0 h-9 ${inputsForms.length && !isMobile && 'ml-[136px]'}`}
-                type='primary'
+                variant='primary'
                 onClick={handleStartChat}
               >
                 <MessageDotsCircle className='mr-2 w-4 h-4 text-white' />

web/app/components/base/confirm-ui/index.tsx

@@ -42,7 +42,7 @@ const ConfirmUI: FC<IConfirmUIProps> = ({
       </div>
 
       <div className='flex gap-3 mt-4 ml-12'>
-        <Button type='primary' onClick={onConfirm} className='flex items-center justify-center min-w-20 text-center text-white rounded-lg cursor-pointer h-9 '>{confirmText || t('common.operation.confirm')}</Button>
+        <Button variant='primary' onClick={onConfirm} className='flex items-center justify-center min-w-20 text-center text-white rounded-lg cursor-pointer h-9 '>{confirmText || t('common.operation.confirm')}</Button>
         <Button onClick={onCancel} className='flex items-center justify-center min-w-20 text-center text-gray-500 border rounded-lg cursor-pointer h-9 border-color-gray-200'>{cancelText || t('common.operation.cancel')}</Button>
       </div>
     </div>

web/app/components/base/confirm/common.tsx

@@ -51,7 +51,7 @@ const ConfirmCommon: FC<ConfirmCommonProps> = ({
   }
 
   return (
-    <Modal isShow={isShow} onClose={() => {}} className='!w-[480px] !max-w-[480px] !p-0 !rounded-2xl' wrapperClassName={confirmWrapperClassName}>
+    <Modal isShow={isShow} onClose={() => { }} className='!w-[480px] !max-w-[480px] !p-0 !rounded-2xl' wrapperClassName={confirmWrapperClassName}>
       <div className={cn(s[`wrapper-${type}`], 'relative p-8')}>
         <div className='flex items-center justify-center absolute top-4 right-4 w-8 h-8 cursor-pointer' onClick={onCancel}>
           <XClose className='w-4 h-4 text-gray-500' />
@@ -77,7 +77,7 @@ const ConfirmCommon: FC<ConfirmCommonProps> = ({
                 )
               }
               <Button
-                type='primary'
+                variant='primary'
                 className={confirmBtnClassName || ''}
                 onClick={onConfirm}
                 disabled={confirmDisabled}

web/app/components/base/emoji-picker/index.tsx

@@ -189,14 +189,14 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
     </div>
     <Divider className='m-0' />
     <div className='w-full flex items-center justify-center p-3 gap-2'>
-      <Button type="default" className='w-full' onClick={() => {
+      <Button variant="default" className='w-full' onClick={() => {
         onClose && onClose()
       }}>
         {t('app.emoji.cancel')}
       </Button>
       <Button
         disabled={selectedEmoji === ''}
-        type="primary"
+        variant="primary"
         className='w-full'
         onClick={() => {
           onSelect && onSelect(selectedEmoji, selectedBackground)

web/app/components/base/features/feature-panel/moderation/moderation-setting-modal.tsx

@@ -262,7 +262,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
                 onClick={() => handleDataTypeChange(provider.key)}
               >
                 <div className={`
-                  mr-2 w-4 h-4 rounded-full border 
+                  mr-2 w-4 h-4 rounded-full border
                   ${localeData.type === provider.key ? 'border-[5px] border-primary-600' : 'border border-gray-300'}`} />
                 {provider.name}
               </div>
@@ -362,7 +362,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
           {t('common.operation.cancel')}
         </Button>
         <Button
-          type='primary'
+          variant='primary'
           className='text-sm font-medium'
           onClick={handleSave}
           disabled={localeData.type === 'openai_moderation' && !openaiProviderConfiged}

web/app/components/base/features/feature-panel/opening-statement/index.tsx

@@ -169,7 +169,7 @@ const OpeningStatement: FC<OpeningStatementProps> = ({
     isFocus ? (
       <div className='flex items-center space-x-1'>
         <div className='px-3 leading-[18px] text-xs font-medium text-gray-700 cursor-pointer' onClick={handleCancel}>{t('common.operation.cancel')}</div>
-        <Button className='!h-8 !px-3 text-xs' onClick={handleConfirm} type="primary">{t('common.operation.save')}</Button>
+        <Button className='!h-8 !px-3 text-xs' onClick={handleConfirm} variant="primary">{t('common.operation.save')}</Button>
       </div>
     ) : (
       <OperationBtn type='edit' actionName={hasValue ? '' : t('appDebug.openingStatement.writeOpener') as string} onClick={handleEdit} />

web/app/components/base/image-uploader/image-link-input.tsx

@@ -42,7 +42,7 @@ const ImageLinkInput: FC<ImageLinkInputProps> = ({
         placeholder={t('common.imageUploader.pasteImageLinkInputPlaceholder') || ''}
       />
       <Button
-        type='primary'
+        variant='primary'
         className='!h-6 text-xs font-medium'
         disabled={!imageLink || disabled}
         onClick={handleClick}

web/app/components/base/modal/delete-confirm-modal/index.tsx

@@ -50,7 +50,7 @@ const DeleteConfirmModal: FC<Props> = ({
         <div className='flex gap-2 justify-end'>
           <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
           <Button
-            type='warning'
+            variant='warning'
             onClick={onRemove}
             className='border-red-700 border-[0.5px]'
           >

web/app/components/base/tag-management/tag-remove-modal.tsx

@@ -23,7 +23,7 @@ const TagRemoveModal = ({ show, tag, onConfirm, onClose }: TagRemoveModalProps)
     <Modal
       className={cn('p-8 max-w-[480px] w-[480px]', s.bg)}
       isShow={show}
-      onClose={() => {}}
+      onClose={() => { }}
     >
       <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
         <XClose className='w-4 h-4 text-gray-500' />
@@ -40,7 +40,7 @@ const TagRemoveModal = ({ show, tag, onConfirm, onClose }: TagRemoveModalProps)
       </div>
       <div className='pt-6 flex items-center justify-end'>
         <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('common.operation.cancel')}</Button>
-        <Button className='text-sm font-medium border-red-700 border-[0.5px]' type="warning" onClick={onConfirm}>{t('common.operation.delete')}</Button>
+        <Button className='text-sm font-medium border-red-700 border-[0.5px]' variant="warning" onClick={onConfirm}>{t('common.operation.delete')}</Button>
       </div>
     </Modal>
   )

web/app/components/custom/custom-web-app-brand/index.tsx

@@ -192,7 +192,7 @@ const CustomWebAppBrand = () => {
             fileId && (
               <>
                 <Button
-                  type='primary'
+                  variant='primary'
                   className='mr-2 !h-8 !px-3 !py-0 !text-[13px]'
                   onClick={handleApply}
                   disabled={webappBrandRemoved || !isCurrentWorkspaceManager}

web/app/components/datasets/create/embedding-process/index.tsx

@@ -282,7 +282,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
       </div>
       <RuleDetail sourceData={ruleDetail} />
       <div className='flex items-center gap-2 mt-10'>
-        <Button className='w-fit' type='primary' onClick={navToDocumentList}>
+        <Button className='w-fit' variant='primary' onClick={navToDocumentList}>
           <span>{t('datasetCreation.stepThree.navTo')}</span>
           <ArrowRightIcon className='h-4 w-4 ml-2 stroke-current stroke-1' />
         </Button>

web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx

@@ -53,7 +53,7 @@ const EmptyDatasetCreationModal = ({
     >
       <div className={s.modalHeader}>
         <div className={s.title}>{t('datasetCreation.stepOne.modal.title')}</div>
-        <span className={s.close} onClick={onHide}/>
+        <span className={s.close} onClick={onHide} />
       </div>
       <div className={s.tip}>{t('datasetCreation.stepOne.modal.tip')}</div>
       <div className={s.form}>
@@ -61,7 +61,7 @@ const EmptyDatasetCreationModal = ({
         <Input className='!h-8' value={inputValue} placeholder={t('datasetCreation.stepOne.modal.placeholder') || ''} onChange={setInputValue} />
       </div>
       <div className='flex flex-row-reverse'>
-        <Button className='w-24 ml-2' type='primary' onClick={submit}>{t('datasetCreation.stepOne.modal.confirmButton')}</Button>
+        <Button className='w-24 ml-2' variant='primary' onClick={submit}>{t('datasetCreation.stepOne.modal.confirmButton')}</Button>
         <Button className='w-24' onClick={onHide}>{t('datasetCreation.stepOne.modal.cancelButton')}</Button>
       </div>
     </Modal>

web/app/components/datasets/create/step-one/index.tsx

@@ -49,7 +49,7 @@ export const NotionConnector = ({ onSetting }: NotionConnectorProps) => {
       <span className={s.notionIcon} />
       <div className={s.title}>{t('datasetCreation.stepOne.notionSyncTitle')}</div>
       <div className={s.tip}>{t('datasetCreation.stepOne.notionSyncTip')}</div>
-      <Button className='h-8' type='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button>
+      <Button className='h-8' variant='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button>
     </div>
   )
 }
@@ -197,7 +197,7 @@ const StepOne = ({
                   <VectorSpaceFull />
                 </div>
               )}
-              <Button disabled={nextDisabled} className={s.submitButton} type='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
+              <Button disabled={nextDisabled} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
             </>
           )}
           {dataSourceType === DataSourceType.NOTION && (
@@ -217,7 +217,7 @@ const StepOne = ({
                       <VectorSpaceFull />
                     </div>
                   )}
-                  <Button disabled={isShowVectorSpaceFull || !notionPages.length} className={s.submitButton} type='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
+                  <Button disabled={isShowVectorSpaceFull || !notionPages.length} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
                 </>
               )}
             </>

web/app/components/datasets/create/step-two/index.tsx

@@ -655,7 +655,7 @@ const StepTwo = ({
                     </div>
                   </div>
                   <div className={s.formFooter}>
-                    <Button type="primary" className={cn(s.button, '!h-8')} onClick={confirmChangeCustomConfig}>{t('datasetCreation.stepTwo.preview')}</Button>
+                    <Button variant="primary" className={cn(s.button, '!h-8')} onClick={confirmChangeCustomConfig}>{t('datasetCreation.stepTwo.preview')}</Button>
                     <Button className={cn(s.button, 'ml-2 !h-8')} onClick={resetRules}>{t('datasetCreation.stepTwo.reset')}</Button>
                   </div>
                 </div>
@@ -891,12 +891,12 @@ const StepTwo = ({
                 <div className='flex items-center mt-8 py-2'>
                   <Button onClick={() => onStepChange && onStepChange(-1)}>{t('datasetCreation.stepTwo.previousStep')}</Button>
                   <div className={s.divider} />
-                  <Button loading={isCreating} type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
+                  <Button loading={isCreating} variant='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
                 </div>
               )
               : (
                 <div className='flex items-center mt-8 py-2'>
-                  <Button loading={isCreating} type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
+                  <Button loading={isCreating} variant='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
                   <Button className='ml-2' onClick={onCancel}>{t('datasetCreation.stepTwo.cancel')}</Button>
                 </div>
               )}

web/app/components/datasets/create/stop-embedding-modal/index.tsx

@@ -30,12 +30,12 @@ const StopEmbeddingModal = ({
       onClose={onHide}
       className={cn(s.modal, '!max-w-[480px]', 'px-8')}
     >
-      <div className={s.icon}/>
-      <span className={s.close} onClick={onHide}/>
+      <div className={s.icon} />
+      <span className={s.close} onClick={onHide} />
       <div className={s.title}>{t('datasetCreation.stepThree.modelTitle')}</div>
       <div className={s.content}>{t('datasetCreation.stepThree.modelContent')}</div>
       <div className='flex flex-row-reverse'>
-        <Button className='w-24 ml-2' type='primary' onClick={submit}>{t('datasetCreation.stepThree.modelButtonConfirm')}</Button>
+        <Button className='w-24 ml-2' variant='primary' onClick={submit}>{t('datasetCreation.stepThree.modelButtonConfirm')}</Button>
         <Button className='w-24' onClick={onHide}>{t('datasetCreation.stepThree.modelButtonCancel')}</Button>
       </div>
     </Modal>

web/app/components/datasets/documents/detail/batch-modal/index.tsx

@@ -39,7 +39,7 @@ const BatchModal: FC<IBatchModalProps> = ({
   }, [isShow])
 
   return (
-    <Modal isShow={isShow} onClose={() => {}} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
+    <Modal isShow={isShow} onClose={() => { }} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
       <div className='relative pb-1 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetDocuments.list.batchModal.title')}</div>
       <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onCancel}>
         <XClose className='w-4 h-4 text-gray-500' />
@@ -55,7 +55,7 @@ const BatchModal: FC<IBatchModalProps> = ({
         <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onCancel}>
           {t('datasetDocuments.list.batchModal.cancel')}
         </Button>
-        <Button className='text-sm font-medium' type="primary" onClick={handleSend} disabled={!currentCSV}>
+        <Button className='text-sm font-medium' variant="primary" onClick={handleSend} disabled={!currentCSV}>
           {t('datasetDocuments.list.batchModal.run')}
         </Button>
       </div>

web/app/components/datasets/documents/detail/completed/SegmentCard.tsx

@@ -224,7 +224,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
           <div className='flex gap-2 justify-end'>
             <Button onClick={() => setShowModal(false)}>{t('common.operation.cancel')}</Button>
             <Button
-              type='warning'
+              variant='warning'
               onClick={async () => {
                 await onDelete?.(id)
               }}

web/app/components/datasets/documents/detail/completed/index.tsx

@@ -139,7 +139,7 @@ const SegmentDetailComponent: FC<ISegmentDetailProps> = ({
               {t('common.operation.cancel')}
             </Button>
             <Button
-              type='primary'
+              variant='primary'
               className='!h-7 !px-3 !py-[5px] text-xs font-medium !rounded-md'
               onClick={handleSave}
               disabled={loading}
@@ -402,7 +402,7 @@ const Completed: FC<ICompletedProps> = ({
         onClick={onClickCard}
         archived={archived}
       />
-      <Modal isShow={currSegment.showModal} onClose={() => {}} className='!max-w-[640px] !overflow-visible'>
+      <Modal isShow={currSegment.showModal} onClose={() => { }} className='!max-w-[640px] !overflow-visible'>
         <SegmentDetail
           embeddingAvailable={embeddingAvailable}
           segInfo={currSegment.segInfo ?? { id: '' }}

web/app/components/datasets/documents/detail/embedding/index.tsx

@@ -279,7 +279,7 @@ const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: d
               {t('datasetCreation.stepThree.resume')}
             </Button>
           )}
-          <Button className='w-fit' type='primary' onClick={navToDocument}>
+          <Button className='w-fit' variant='primary' onClick={navToDocument}>
             <span>{t('datasetCreation.stepThree.navTo')}</span>
             <ArrowRightIcon className='h-4 w-4 ml-2 stroke-current stroke-1' />
           </Button>

web/app/components/datasets/documents/detail/metadata/index.tsx

@@ -208,7 +208,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
             })}
           </Radio.Group>
           {!doc_type && !documentType && (
-            <Button type='primary'
+            <Button variant='primary'
               onClick={confirmDocType}
               disabled={!tempDocType}
             >
@@ -216,7 +216,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
             </Button>
           )}
           {documentType && <div className={s.opBtnWrapper}>
-            <Button onClick={confirmDocType} className={`${s.opBtn} ${s.opSaveBtn}`} type='primary' >{t('common.operation.save')}</Button>
+            <Button onClick={confirmDocType} className={`${s.opBtn} ${s.opSaveBtn}`} variant='primary' >{t('common.operation.save')}</Button>
             <Button onClick={cancelDocType} className={`${s.opBtn} ${s.opCancelBtn}`}>{t('common.operation.cancel')}</Button>
           </div>}
         </div >
@@ -324,7 +324,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
                     <Button onClick={onCancel} className={`${s.opBtn} ${s.opCancelBtn}`}>{t('common.operation.cancel')}</Button>
                     <Button onClick={onSave}
                       className={`${s.opBtn} ${s.opSaveBtn}`}
-                      type='primary'
+                      variant='primary'
                       loading={saveLoading}
                     >
                       {t('common.operation.save')}
@@ -344,7 +344,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
                     <TypeIcon iconName={metadataMap[metadataParams.documentType || 'book'].iconName || ''} className={s.iconShow} />
                     {metadataMap[metadataParams.documentType || 'book'].text}
                     {editStatus && <div className='inline-flex items-center gap-1 ml-1'>
-                    ·
+                      ·
                       <div
                         onClick={() => { setShowDocTypes(true) }}
                         className='cursor-pointer hover:text-[#155EEF]'

web/app/components/datasets/documents/detail/new-segment-modal.tsx

@@ -110,7 +110,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
   }
 
   return (
-    <Modal isShow={isShow} onClose={() => {}} className='pt-8 px-8 pb-6 !max-w-[640px] !rounded-xl'>
+    <Modal isShow={isShow} onClose={() => { }} className='pt-8 px-8 pb-6 !max-w-[640px] !rounded-xl'>
       <div className={'flex flex-col relative'}>
         <div className='absolute right-0 -top-0.5 flex items-center h-6'>
           <div className='flex justify-center items-center w-6 h-6 cursor-pointer' onClick={handleCancel}>
@@ -141,7 +141,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
             {t('common.operation.cancel')}
           </Button>
           <Button
-            type='primary'
+            variant='primary'
             className='!h-9 !px-4 !py-2 text-sm font-medium !rounded-lg'
             onClick={handleSave}
             disabled={loading}

web/app/components/datasets/documents/index.tsx

@@ -210,7 +210,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
           <div className='flex gap-2 justify-center items-center !h-8'>
             <RetryButton datasetId={datasetId} />
             {embeddingAvailable && (
-              <Button type='primary' onClick={routeToDocCreate} className='!h-8 !text-[13px] !shrink-0'>
+              <Button variant='primary' onClick={routeToDocCreate} className='!h-8 !text-[13px] !shrink-0'>
                 <PlusIcon className='h-4 w-4 mr-2 stroke-current' />
                 {isDataSourceNotion && t('datasetDocuments.list.addPages')}
                 {isDataSourceWeb && t('datasetDocuments.list.addUrl')}

web/app/components/datasets/documents/list.tsx

@@ -301,7 +301,7 @@ export const OperationAction: FC<{
         <div className='flex gap-2 justify-end'>
           <Button onClick={() => setShowModal(false)}>{t('common.operation.cancel')}</Button>
           <Button
-            type='warning'
+            variant='warning'
             onClick={() => onOperate('delete')}
             className='border-red-700 border-[0.5px]'
           >

web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx

@@ -115,7 +115,7 @@ const ModifyRetrievalModal: FC<Props> = ({
         }}
       >
         <Button className='mr-2 flex-shrink-0' onClick={onHide}>{t('common.operation.cancel')}</Button>
-        <Button type='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
+        <Button variant='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
       </div>
     </div>
   )

web/app/components/datasets/hit-testing/textarea.tsx

@@ -128,7 +128,7 @@ const TextAreaWithButton = ({
             <div>
               <Button
                 onClick={onSubmit}
-                type="primary"
+                variant="primary"
                 loading={loading}
                 disabled={(!text?.length || text?.length > 200)}
               >

web/app/components/datasets/rename-modal/index.tsx

@@ -58,7 +58,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
     <Modal
       className='px-8 py-6 max-w-[520px] w-[520px] rounded-xl'
       isShow={show}
-      onClose={() => {}}
+      onClose={() => { }}
     >
       <div className='relative pb-2 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetSettings.title')}</div>
       <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
@@ -96,7 +96,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
       </div>
       <div className='pt-6 flex justify-end'>
         <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('common.operation.cancel')}</Button>
-        <Button className='text-sm font-medium' disabled={loading} type="primary" onClick={onConfirm}>{t('common.operation.save')}</Button>
+        <Button className='text-sm font-medium' disabled={loading} variant="primary" onClick={onConfirm}>{t('common.operation.save')}</Button>
       </div>
     </Modal>
   )

web/app/components/datasets/settings/form/index.tsx

@@ -244,7 +244,7 @@ const Form = () => {
           <div className='w-[480px]'>
             <Button
               className='min-w-24 text-sm'
-              type='primary'
+              variant='primary'
               onClick={handleSave}
             >
               {t('datasetSettings.form.save')}

web/app/components/develop/secret-key/secret-key-button.tsx

@@ -17,7 +17,7 @@ const SecretKeyButton = ({ className, appId, iconCls, textCls }: ISecretKeyButto
   const { t } = useTranslation()
   return (
     <>
-      <Button className={`px-3 ${className}`} type='default' onClick={() => setVisible(true)}>
+      <Button className={`px-3 ${className}`} variant='default' onClick={() => setVisible(true)}>
         <div className={'flex items-center justify-center w-4 h-4 mr-2'}>
           <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className={iconCls}>
             <path d="M9 3.66672C9.35362 3.66672 9.69276 3.80719 9.94281 4.05724C10.1929 4.30729 10.3333 4.64643 10.3333 5.00005M13 5.00005C13.0002 5.62483 12.854 6.24097 12.5732 6.79908C12.2924 7.3572 11.8847 7.84177 11.3829 8.21397C10.8811 8.58617 10.2991 8.83564 9.68347 8.94239C9.06788 9.04915 8.43584 9.01022 7.838 8.82872L6.33333 10.3334H5V11.6667H3.66667V13.0001H1.66667C1.48986 13.0001 1.32029 12.9298 1.19526 12.8048C1.07024 12.6798 1 12.5102 1 12.3334V10.6094C1.00004 10.4326 1.0703 10.263 1.19533 10.1381L5.17133 6.16205C5.00497 5.61206 4.95904 5.03268 5.0367 4.46335C5.11435 3.89402 5.31375 3.3481 5.62133 2.86275C5.92891 2.3774 6.33744 1.96401 6.81913 1.65073C7.30082 1.33745 7.84434 1.13162 8.41272 1.04725C8.9811 0.96289 9.56098 1.00197 10.1129 1.16184C10.6648 1.32171 11.1758 1.59861 11.6111 1.97369C12.0464 2.34878 12.3958 2.81324 12.6354 3.33548C12.8751 3.85771 12.9994 4.42545 13 5.00005Z" stroke="#1F2A37" strokeLinecap="round" strokeLinejoin="round" />

web/app/components/develop/secret-key/secret-key-generate.tsx

@@ -29,7 +29,7 @@ const SecretKeyGenerateModal = ({
         <InputCopy className='w-full' value={newKey?.token} />
       </div>
       <div className='flex justify-end my-4'>
-        <Button type='default' className={`flex-shrink-0 ${s.w64}`} onClick={onClose}>
+        <Button variant='default' className={`flex-shrink-0 ${s.w64}`} onClick={onClose}>
           <span className='text-xs font-medium text-gray-800'>{t('appApi.actionMsg.ok')}</span>
         </Button>
       </div>

web/app/components/develop/secret-key/secret-key-modal.tsx

@@ -128,7 +128,7 @@ const SecretKeyModal = ({
                         setCopyValue(api.token)
                       }}></div>
                     </Tooltip>
-                    { isCurrentWorkspaceManager
+                    {isCurrentWorkspaceManager
                       && <div className={`flex items-center justify-center flex-shrink-0 w-6 h-6 rounded-lg cursor-pointer ${s.trashIcon}`} onClick={() => {
                         setDelKeyId(api.id)
                         setShowConfirmDelete(true)
@@ -143,7 +143,7 @@ const SecretKeyModal = ({
         )
       }
       <div className='flex'>
-        <Button type='default' className={`flex flex-shrink-0 mt-4 ${s.autoWidth}`} onClick={onCreate} disabled={ !currentWorkspace || !isCurrentWorkspaceManager}>
+        <Button variant='default' className={`flex flex-shrink-0 mt-4 ${s.autoWidth}`} onClick={onCreate} disabled={ !currentWorkspace || !isCurrentWorkspaceManager}>
           <PlusIcon className='flex flex-shrink-0 w-4 h-4' />
           <div className='text-xs font-medium text-gray-800'>{t('appApi.apiKeyModal.createNewSecretKey')}</div>
         </Button>

web/app/components/explore/app-card/index.tsx

@@ -62,7 +62,7 @@ const AppCard = ({
       {isExplore && canCreate && (
         <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] group-hover:flex')}>
           <div className={cn('flex items-center w-full space-x-2')}>
-            <Button type='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
+            <Button variant='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
               <PlusIcon className='w-4 h-4 mr-1' />
               <span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
             </Button>
@@ -72,7 +72,7 @@ const AppCard = ({
       {!isExplore && (
         <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] group-hover:flex')}>
           <div className={cn('flex items-center w-full space-x-2')}>
-            <Button type='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
+            <Button variant='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
               <PlusIcon className='w-4 h-4 mr-1' />
               <span className='text-xs'>{t('app.newApp.useTemplate')}</span>
             </Button>

web/app/components/explore/create-app-modal/index.tsx

@@ -102,7 +102,7 @@ const CreateAppModal = ({
           {!isEditModal && isAppsFull && <AppsFull loc='app-explore-create' />}
         </div>
         <div className='flex flex-row-reverse'>
-          <Button disabled={!isEditModal && isAppsFull} className='w-24 ml-2' type='primary' onClick={submit}>{!isEditModal ? t('common.operation.create') : t('common.operation.save')}</Button>
+          <Button disabled={!isEditModal && isAppsFull} className='w-24 ml-2' variant='primary' onClick={submit}>{!isEditModal ? t('common.operation.create') : t('common.operation.save')}</Button>
           <Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
         </div>
       </Modal>

web/app/components/header/account-setting/account-page/index.tsx

@@ -182,7 +182,7 @@ export default function AccountPage() {
             <Button className='mr-2 text-sm font-medium' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
             <Button
               disabled={editing || !editName}
-              type='primary'
+              variant='primary'
               className='text-sm font-medium'
               onClick={handleSaveName}
             >
@@ -235,7 +235,7 @@ export default function AccountPage() {
             }}>{t('common.operation.cancel')}</Button>
             <Button
               disabled={editing}
-              type='primary'
+              variant='primary'
               className='text-sm font-medium'
               onClick={handleSavePassowrd}
             >

web/app/components/header/account-setting/api-based-extension-page/modal.tsx

@@ -135,7 +135,7 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
           {t('common.operation.cancel')}
         </Button>
         <Button
-          type='primary'
+          variant='primary'
           className='text-sm font-medium'
           disabled={!localeData.name || !localeData.api_endpoint || !localeData.api_key || loading}
           onClick={handleSave}

web/app/components/header/account-setting/members-page/invite-modal/index.tsx

@@ -61,7 +61,7 @@ const InviteModal = ({
           onSend(invitation_results)
         }
       }
-      catch (e) {}
+      catch (e) { }
     }
     else {
       notify({ type: 'error', message: t('common.members.emailInvalid') })
@@ -92,7 +92,7 @@ const InviteModal = ({
                 <div data-tag key={index} className={cn(s.emailBackground)}>
                   <div data-tag-item>{email}</div>
                   <span data-tag-handle onClick={() => removeEmail(index)}>
-                      ×
+                    ×
                   </span>
                 </div>
               }
@@ -151,7 +151,7 @@ const InviteModal = ({
             className='w-full text-sm font-medium'
             onClick={handleSend}
             disabled={!emails.length}
-            type='primary'
+            variant='primary'
           >
             {t('common.members.sendInvite')}
           </Button>

web/app/components/header/account-setting/members-page/invited-modal/index.tsx

@@ -49,34 +49,34 @@ const InvitedModal = ({
             <div className='flex flex-col gap-2 mb-9'>
               {
                 !!successInvationResults.length
-                  && <>
-                    <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.invitationLink')}</div>
-                    {successInvationResults.map(item =>
-                      <InvitationLink key={item.email} value={item} />)}
-                  </>
+                && <>
+                  <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.invitationLink')}</div>
+                  {successInvationResults.map(item =>
+                    <InvitationLink key={item.email} value={item} />)}
+                </>
               }
               {
                 !!failedInvationResults.length
-                  && <>
-                    <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.failedinvitationEmails')}</div>
-                    <div className='flex flex-wrap justify-between gap-y-1'>
-                      {
-                        failedInvationResults.map(item =>
-                          <div key={item.email} className='flex justify-center border border-red-300 rounded-md px-1 bg-orange-50'>
-                            <Tooltip
-                              selector={`invitation-tag-${item.email}`}
-                              htmlContent={item.message}
-                            >
-                              <div className='flex justify-center items-center text-sm gap-1'>
-                                {item.email}
-                                <QuestionMarkCircleIcon className='w-4 h-4 text-red-300' />
-                              </div>
-                            </Tooltip>
-                          </div>,
-                        )
-                      }
-                    </div>
-                  </>
+                && <>
+                  <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.failedinvitationEmails')}</div>
+                  <div className='flex flex-wrap justify-between gap-y-1'>
+                    {
+                      failedInvationResults.map(item =>
+                        <div key={item.email} className='flex justify-center border border-red-300 rounded-md px-1 bg-orange-50'>
+                          <Tooltip
+                            selector={`invitation-tag-${item.email}`}
+                            htmlContent={item.message}
+                          >
+                            <div className='flex justify-center items-center text-sm gap-1'>
+                              {item.email}
+                              <QuestionMarkCircleIcon className='w-4 h-4 text-red-300' />
+                            </div>
+                          </Tooltip>
+                        </div>,
+                      )
+                    }
+                  </div>
+                </>
               }
             </div>
           </>
@@ -85,7 +85,7 @@ const InvitedModal = ({
           <Button
             className='w-[96px] text-sm font-medium'
             onClick={onCancel}
-            type='primary'
+            variant='primary'
           >
             {t('common.members.ok')}
           </Button>

web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx

@@ -339,7 +339,7 @@ const ModelModal: FC<ModelModalProps> = ({
                   </Button>
                   <Button
                     className='h-9 text-sm font-medium'
-                    type='primary'
+                    variant='primary'
                     onClick={handleSave}
                     disabled={
                       loading

web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx

@@ -148,7 +148,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
                   <div className='w-[261px] text-gray-500'>{t('common.modelProvider.systemReasoningModel.tip')}</div>
                 }
               >
-                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400'/>
+                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
               </Tooltip>
             </div>
             <div>
@@ -168,7 +168,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
                   <div className='w-[261px] text-gray-500'>{t('common.modelProvider.embeddingModel.tip')}</div>
                 }
               >
-                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400'/>
+                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
               </Tooltip>
             </div>
             <div>
@@ -188,7 +188,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
                   <div className='w-[261px] text-gray-500'>{t('common.modelProvider.rerankModel.tip')}</div>
                 }
               >
-                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400'/>
+                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
               </Tooltip>
             </div>
             <div>
@@ -208,7 +208,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
                   <div className='w-[261px] text-gray-500'>{t('common.modelProvider.speechToTextModel.tip')}</div>
                 }
               >
-                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400'/>
+                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
               </Tooltip>
             </div>
             <div>
@@ -228,7 +228,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
                   <div className='w-[261px] text-gray-500'>{t('common.modelProvider.ttsModel.tip')}</div>
                 }
               >
-                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400'/>
+                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
               </Tooltip>
             </div>
             <div>
@@ -247,7 +247,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
               {t('common.operation.cancel')}
             </Button>
             <Button
-              type='primary'
+              variant='primary'
               className='!h-8 !text-[13px]'
               onClick={handleSave}
               disabled={!isCurrentWorkspaceManager}

web/app/components/share/chat/sidebar/rename-modal/index.tsx

@@ -38,7 +38,7 @@ const RenameModal: FC<IRenameModalProps> = ({
 
       <div className='mt-10 flex justify-end'>
         <Button className='mr-2 flex-shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
-        <Button type='primary' className='flex-shrink-0' onClick={() => onSave(tempName)} loading={saveLoading}>{t('common.operation.save')}</Button>
+        <Button variant='primary' className='flex-shrink-0' onClick={() => onSave(tempName)} loading={saveLoading}>{t('common.operation.save')}</Button>
       </div>
     </Modal>
   )

web/app/components/share/chat/value-panel/index.tsx

@@ -61,7 +61,7 @@ export const VarOpBtnGroup: FC<{ className?: string; onConfirm: () => void; onCa
     <div className={cn(className, 'flex mt-3 space-x-2 mobile:ml-0 tablet:ml-[128px] text-sm')}>
       <Button
         className='text-sm'
-        type='primary'
+        variant='primary'
         onClick={onConfirm}
       >
         {t('common.operation.save')}

web/app/components/share/chat/welcome/massive-component.tsx

@@ -44,7 +44,7 @@ export const ChatBtn: FC<{ onClick: () => void; className?: string }> = ({
   const { t } = useTranslation()
   return (
     <Button
-      type='primary'
+      variant='primary'
       className={cn(className, `px-4 inline-flex items-center ${s.customBtn} gap-2`)}
       onClick={onClick}>
       <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

web/app/components/share/chatbot/value-panel/index.tsx

@@ -61,7 +61,7 @@ export const VarOpBtnGroup: FC<{ className?: string; onConfirm: () => void; onCa
     <div className={cn(className, 'flex mt-3 space-x-2 mobile:ml-0 tablet:ml-[128px] text-sm')}>
       <Button
         className='text-sm'
-        type='primary'
+        variant='primary'
         onClick={onConfirm}
       >
         {t('common.operation.save')}

web/app/components/share/chatbot/welcome/massive-component.tsx

@@ -45,7 +45,7 @@ export const ChatBtn: FC<{ onClick: () => void; className?: string }> = ({
   const { t } = useTranslation()
   return (
     <Button
-      type='primary'
+      variant='primary'
       className={cn(className, `!p-0 space-x-2 flex items-center ${s.customBtn}`)}
       onClick={onClick}>
       <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">

web/app/components/share/text-generation/index.tsx

@@ -478,7 +478,7 @@ const TextGeneration: FC<IMainProps> = ({
                 <AlertCircle className='w-4 h-4 text-[#D92D20]' />
                 <div className='ml-1 text-[#D92D20]'>{t('share.generation.batchFailed.info', { num: allFailedTaskList.length })}</div>
                 <Button
-                  type='primary'
+                  variant='primary'
                   className='ml-2 !h-8 !px-3'
                   onClick={handleRetryAllFailedTask}
                 >{t('share.generation.batchFailed.retry')}</Button>

web/app/components/share/text-generation/run-batch/index.tsx

@@ -42,7 +42,7 @@ const RunBatch: FC<IRunBatchProps> = ({
       <div className='mt-4 h-[1px] bg-gray-100'></div>
       <div className='flex justify-end'>
         <Button
-          type="primary"
+          variant="primary"
           className='mt-4 !h-8 !pl-3 !pr-4'
           onClick={handleSend}
           disabled={!isParsed || !isAllFinished}

web/app/components/share/text-generation/run-once/index.tsx

@@ -125,7 +125,7 @@ const RunOnce: FC<IRunOnceProps> = ({
                 <span className='text-[13px]'>{t('common.operation.clear')}</span>
               </Button>
               <Button
-                type="primary"
+                variant="primary"
                 className='!h-8 !pl-3 !pr-4'
                 onClick={onSend}
                 disabled={false}

web/app/components/tools/add-tool-modal/index.tsx

@@ -174,15 +174,15 @@ const AddToolModal: FC<Props> = ({
             <div className='sticky top-0 left-0 right-0'>
               <div className='sticky top-0 left-0 right-0 px-5 py-3 text-md font-semibold text-gray-900'>{t('tools.addTool')}</div>
               <div className='px-3 pt-2 pb-4'>
-                <Button type='primary' className='w-[176px] text-[13px] leading-[18px] font-medium' onClick={() => setIsShowEditCustomCollectionModal(true)}>
-                  <Plus className='w-4 h-4 mr-1'/>
+                <Button variant='primary' className='w-[176px] text-[13px] leading-[18px] font-medium' onClick={() => setIsShowEditCustomCollectionModal(true)}>
+                  <Plus className='w-4 h-4 mr-1' />
                   {t('tools.createCustomTool')}
                 </Button>
               </div>
             </div>
             <div className='px-2 py-1'>
-              <Type value={currentType} onSelect={setCurrentType}/>
-              <Category value={currentCategory} onSelect={setCurrentCategory}/>
+              <Type value={currentType} onSelect={setCurrentType} />
+              <Category value={currentCategory} onSelect={setCurrentCategory} />
             </div>
           </div>
           <div className='relative grow bg-white rounded-r-xl overflow-y-auto'>

web/app/components/tools/add-tool-modal/tools.tsx

@@ -99,23 +99,23 @@ const Blocks = ({
                 <div className={cn('grow text-sm text-gray-900 truncate', needAuth && 'opacity-30')}>{tool.label[language]}</div>
                 {!needAuth && added && (
                   <div className='flex items-center gap-1 rounded-[6px] border border-gray-100 px-2 py-[3px] bg-white text-gray-300 text-xs font-medium leading-[18px]'>
-                    <Check className='w-3 h-3'/>
+                    <Check className='w-3 h-3' />
                     {t('tools.addToolModal.added').toLocaleUpperCase()}
                   </div>
                 )}
                 {!needAuth && !added && addable && (
                   <Button
-                    type='default'
+                    variant='default'
                     className={cn('hidden shrink-0 items-center !h-6 px-2 py-1 bg-white text-xs font-medium leading-[18px] text-primary-600 group-hover/item:flex')}
                     onClick={() => onSelect(toolWithProvider, tool)}
                   >
-                    <Plus className='w-3 h-3'/>
+                    <Plus className='w-3 h-3' />
                     {t('tools.addToolModal.add').toLocaleUpperCase()}
                   </Button>
                 )}
                 {needAuth && (
                   <Button
-                    type='default'
+                    variant='default'
                     className={cn('hidden shrink-0 items-center !h-6 px-2 py-1 bg-white text-xs font-medium leading-[18px] text-primary-600 group-hover/item:flex')}
                     onClick={() => onAuthSetup(toolWithProvider)}
                   >{t('tools.auth.setup')}</Button>
@@ -135,7 +135,7 @@ const Blocks = ({
       )}
       {!tools.length && showWorkflowEmpty && (
         <div className='pt-[280px]'>
-          <Empty/>
+          <Empty />
         </div>
       )}
       {!!tools.length && tools.map(renderGroup)}

web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx

@@ -117,7 +117,7 @@ const ConfigCredential: FC<Props> = ({
                         </div>
                       }
                     >
-                      <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400'/>
+                      <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
                     </Tooltip>
                   </div>
                   <input
@@ -142,7 +142,7 @@ const ConfigCredential: FC<Props> = ({
 
           <div className='mt-4 shrink-0 flex justify-end space-x-2 py-4'>
             <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onHide}>{t('common.operation.cancel')}</Button>
-            <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' type='primary' onClick={() => {
+            <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={() => {
               onChange(tempCredential)
               onHide()
             }}>{t('common.operation.save')}</Button>

web/app/components/tools/edit-custom-collection-modal/get-schema.tsx

@@ -74,7 +74,7 @@ const GetSchema: FC<Props> = ({
               />
               <Button
                 className='absolute top-1 right-1 !h-6 !px-2 text-xs font-medium'
-                type='primary'
+                variant='primary'
                 disabled={!importUrl}
                 onClick={handleImportFromUrl}
                 loading={isParsing}

web/app/components/tools/edit-custom-collection-modal/index.tsx

@@ -307,7 +307,7 @@ const EditCustomCollectionModal: FC<Props> = ({
               }
               <div className='flex space-x-2 '>
                 <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700 bg-white' onClick={onHide}>{t('common.operation.cancel')}</Button>
-                <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' type='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+                <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
               </div>
             </div>
           </div>

web/app/components/tools/edit-custom-collection-modal/test-api.tsx

@@ -107,7 +107,7 @@ const TestApi: FC<Props> = ({
               </div>
 
             </div>
-            <Button type='primary' className=' mt-4 w-full h-10 !text-[13px] leading-[18px] font-medium' onClick={handleTest}>{t('tools.test.title')}</Button>
+            <Button variant='primary' className=' mt-4 w-full h-10 !text-[13px] leading-[18px] font-medium' onClick={handleTest}>{t('tools.test.title')}</Button>
             <div className='mt-6'>
               <div className='flex items-center space-x-3'>
                 <div className='leading-[18px] text-xs font-semibold text-gray-500'>{t('tools.test.testResult')}</div>

web/app/components/tools/provider/detail.tsx

@@ -197,7 +197,7 @@ const ProviderDetail = ({
       <div className='flex items-center py-1 gap-2'>
         <div className='relative shrink-0'>
           {typeof collection.icon === 'string' && (
-            <div className='w-8 h-8 bg-center bg-cover bg-no-repeat rounded-md' style={{ backgroundImage: `url(${collection.icon})` }}/>
+            <div className='w-8 h-8 bg-center bg-cover bg-no-repeat rounded-md' style={{ backgroundImage: `url(${collection.icon})` }} />
           )}
           {typeof collection.icon !== 'string' && (
             <AppIcon
@@ -217,7 +217,7 @@ const ProviderDetail = ({
       <div className='flex gap-1 border-b-[0.5px] border-black/5'>
         {(collection.type === CollectionType.builtIn) && needAuth && (
           <Button
-            type={isAuthed ? 'default' : 'primary'}
+            variant={isAuthed ? 'default' : 'primary'}
             className={cn('shrink-0 my-3 w-full flex items-center', isAuthed && 'bg-white')}
             onClick={() => {
               if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
@@ -243,7 +243,7 @@ const ProviderDetail = ({
         {collection.type === CollectionType.workflow && !isDetailLoading && customCollection && (
           <>
             <Button
-              type='primary'
+              variant='primary'
               className={cn('shrink-0 my-3 w-[183px] flex items-center')}
             >
               <a className='flex items-center text-white' href={`/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
@@ -263,7 +263,7 @@ const ProviderDetail = ({
       </div>
       {/* Tools */}
       <div className='pt-3'>
-        {isDetailLoading && <div className='flex h-[200px]'><Loading type='app'/></div>}
+        {isDetailLoading && <div className='flex h-[200px]'><Loading type='app' /></div>}
         {!isDetailLoading && (
           <div className='text-xs font-medium leading-6 text-gray-500'>
             {collection.type === CollectionType.workflow && <span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span>}

web/app/components/tools/setting/build-in/config-credentials.tsx

@@ -91,7 +91,7 @@ const ConfigCredential: FC<Props> = ({
                   }
                   < div className='flex space-x-2'>
                     <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700 bg-white' onClick={onCancel}>{t('common.operation.cancel')}</Button>
-                    <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' type='primary' onClick={() => onSaved(tempCredential)}>{t('common.operation.save')}</Button>
+                    <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={() => onSaved(tempCredential)}>{t('common.operation.save')}</Button>
                   </div>
                 </div>
               </>

web/app/components/tools/workflow-tool/confirm-modal/index.tsx

@@ -21,7 +21,7 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
     <Modal
       className={cn('p-8 max-w-[600px] w-[600px]', s.bg)}
       isShow={show}
-      onClose={() => {}}
+      onClose={() => { }}
     >
       <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
         <XClose className='w-4 h-4 text-gray-500' />
@@ -36,7 +36,7 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
       <div className='pt-6 flex justify-end items-center'>
         <div className='flex items-center'>
           <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('common.operation.cancel')}</Button>
-          <Button className='text-sm font-medium border-red-700 border-[0.5px]' type="warning" onClick={onConfirm}>{t('common.operation.confirm')}</Button>
+          <Button className='text-sm font-medium border-red-700 border-[0.5px]' variant="warning" onClick={onConfirm}>{t('common.operation.confirm')}</Button>
         </div>
       </div>
     </Modal>

web/app/components/tools/workflow-tool/index.tsx

@@ -208,7 +208,7 @@ const WorkflowToolAsModal: FC<Props> = ({
                               </div>
                             )}
                             {item.name !== '__image' && (
-                              <MethodSelector value={item.form} onChange={value => handleParameterChange('form', value, index)}/>
+                              <MethodSelector value={item.form} onChange={value => handleParameterChange('form', value, index)} />
                             )}
                           </td>
                           <td className="p-2 pl-3 text-gray-500 w-[236px]">
@@ -246,7 +246,7 @@ const WorkflowToolAsModal: FC<Props> = ({
               )}
               <div className='flex space-x-2 '>
                 <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onHide}>{t('common.operation.cancel')}</Button>
-                <Button disabled={!label || !name || !isNameValid(name)} className='flex items-center h-8 !px-3 !text-[13px] font-medium' type='primary' onClick={() => {
+                <Button disabled={!label || !name || !isNameValid(name)} className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={() => {
                   if (isAdd)
                     onConfirm()
                   else

web/app/components/workflow/header/index.tsx

@@ -206,7 +206,7 @@ const Header: FC = () => {
             <ViewHistory withText />
             <div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
             <Button
-              type='primary'
+              variant='primary'
               className={`
                 mr-2 px-3 py-0 h-8 text-[13px] font-medium
                 border-[0.5px] border-gray-200 shadow-xs
@@ -242,7 +242,7 @@ const Header: FC = () => {
             <Button
               className='px-3 py-0 h-8 text-[13px] font-medium shadow-xs'
               onClick={handleRestore}
-              type='primary'
+              variant='primary'
             >
               {t('workflow.common.restore')}
             </Button>

web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx

@@ -141,7 +141,7 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
                 <StopCircle className='w-4 h-4 text-gray-500' />
               </div>
             )}
-            <Button disabled={!isFileLoaded || isRunning} type='primary' className='w-0 grow !h-8 flex items-center space-x-2 text-[13px]' onClick={handleRun}>
+            <Button disabled={!isFileLoaded || isRunning} variant='primary' className='w-0 grow !h-8 flex items-center space-x-2 text-[13px]' onClick={handleRun}>
               {isRunning && <Loading02 className='animate-spin w-4 h-4 text-white' />}
               <div>{t(`${i18nPrefix}.${isRunning ? 'running' : 'startRun'}`)}</div>
             </Button>

web/app/components/workflow/nodes/http/components/authorization/index.tsx

@@ -140,7 +140,7 @@ const Authorization: FC<Props> = ({
         </div>
         <div className='mt-6 flex justify-end space-x-2'>
           <Button onClick={onHide} className='flex items-center !h-8 leading-[18px] !text-[13px] !font-medium'>{t('common.operation.cancel')}</Button>
-          <Button type='primary' onClick={handleConfirm} className='flex items-center !h-8 leading-[18px] !text-[13px] !font-medium'>{t('common.operation.save')}</Button>
+          <Button variant='primary' onClick={handleConfirm} className='flex items-center !h-8 leading-[18px] !text-[13px] !font-medium'>{t('common.operation.save')}</Button>
         </div>
       </div>
     </Modal>

web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx

@@ -181,7 +181,7 @@ const AddExtractParameter: FC<Props> = ({
             </div>
             <div className='mt-4 flex justify-end space-x-2'>
               <Button className='flex !h-8 !w-[95px] text-[13px] font-medium text-gray-700' onClick={hideModal} >{t('common.operation.cancel')}</Button>
-              <Button className='flex !h-8 !w-[95px] text-[13px] font-medium' type='primary' onClick={handleSave} >{isAdd ? t('common.operation.add') : t('common.operation.save')}</Button>
+              <Button className='flex !h-8 !w-[95px] text-[13px] font-medium' variant='primary' onClick={handleSave} >{isAdd ? t('common.operation.add') : t('common.operation.save')}</Button>
             </div>
           </div>
         </Modal>

web/app/components/workflow/nodes/tool/panel.tsx

@@ -61,7 +61,7 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
         <>
           <div className='px-4 pb-3'>
             <Button
-              type='primary'
+              variant='primary'
               className='w-full !h-8'
               onClick={showSetAuthModal}
             >

web/app/components/workflow/panel/inputs-panel.tsx

@@ -103,7 +103,7 @@ const InputsPanel = ({ onRun }: Props) => {
       </div>
       <div className='flex items-center justify-between px-4 py-2'>
         <Button
-          type='primary'
+          variant='primary'
           disabled={!canRun || workflowRunningData?.result?.status === WorkflowRunningStatus.Running}
           className='py-0 w-full h-8 rounded-lg text-[13px] font-medium'
           onClick={doRun}

web/app/init/InitPasswordPopup.tsx

@@ -69,7 +69,7 @@ const InitPasswordPopup = () => {
               </div>
             </div>
             <div className="flex flex-row flex-wrap justify-stretch p-0">
-              <Button type="primary" onClick={handleValidation} className="basis-full min-w-28">
+              <Button variant="primary" onClick={handleValidation} className="basis-full min-w-28">
                 {t('login.validate')}
               </Button>
             </div>

web/app/install/installForm.tsx

@@ -148,7 +148,7 @@ const InstallForm = () => {
               </div>
 
               <div>
-                <Button type='primary' className='w-full !fone-medium !text-sm' onClick={handleSetting}>
+                <Button variant='primary' className='w-full !fone-medium !text-sm' onClick={handleSetting}>
                   {t('login.installBtn')}
                 </Button>
               </div>

web/app/signin/normalForm.tsx

@@ -156,7 +156,7 @@ const NormalForm = () => {
               <div className='w-full'>
                 <a href={getPurifyHref(`${apiPrefix}/oauth/login/github`)}>
                   <Button
-                    type='default'
+                    variant='default'
                     disabled={isLoading}
                     className='w-full hover:!bg-gray-50 !text-sm !font-medium'
                   >
@@ -175,7 +175,7 @@ const NormalForm = () => {
               <div className='w-full'>
                 <a href={getPurifyHref(`${apiPrefix}/oauth/login/google`)}>
                   <Button
-                    type='default'
+                    variant='default'
                     disabled={isLoading}
                     className='w-full hover:!bg-gray-50 !text-sm !font-medium'
                   >
@@ -271,7 +271,7 @@ const NormalForm = () => {
                 <div className='mb-2'>
                   <Button
                     tabIndex={0}
-                    type='primary'
+                    variant='primary'
                     onClick={handleEmailPasswordLogin}
                     disabled={isLoading}
                     className="w-full !fone-medium !text-sm"

web/app/signin/oneMoreStep.tsx

@@ -145,7 +145,7 @@ const OneMoreStep = () => {
           </div>
           <div>
             <Button
-              type='primary'
+              variant='primary'
               className='w-full !fone-medium !text-sm'
               disabled={state.formState === 'processing'}
               onClick={() => {

web/app/signin/userSSOForm.tsx

@@ -87,7 +87,7 @@ const UserSSOForm: FC<UserSSOFormProps> = ({
         <div className="w-full mx-auto mt-10">
           <Button
             tabIndex={0}
-            type='primary'
+            variant='primary'
             onClick={() => { handleSSOLogin() }}
             disabled={isLoading}
             className="w-full !fone-medium !text-sm"