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

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

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}