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

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

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}
         >