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

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

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