fix: button (#5470)

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

@@ -1,31 +1,43 @@
 @tailwind components;
 
 @layer components {
-  body .btn {
-    @apply inline-flex justify-center items-center content-center h-9 leading-5 rounded-lg px-4 py-2 text-base cursor-pointer whitespace-nowrap;
+  .btn {
+    @apply inline-flex justify-center items-center border-[0.5px] font-medium cursor-pointer whitespace-nowrap shadow;
   }
 
-  body .btn-default {
-    @apply border-solid border border-gray-200 cursor-pointer text-gray-700 hover:bg-white hover:shadow-sm hover:border-gray-300;
+  .btn-disabled {
+    @apply opacity-60 cursor-not-allowed;
   }
 
-  body .btn-default-disabled {
-    @apply border-solid border border-gray-200 bg-gray-200 cursor-not-allowed text-gray-800;
+  .btn-small {
+    @apply px-2 h-6 rounded-md text-xs
   }
 
-  body .btn-primary {
-    @apply bg-primary-600 hover:bg-primary-600/75 cursor-pointer text-white hover:shadow-sm;
+  .btn-medium {
+    @apply px-3.5 h-8 rounded-lg text-[13px]
   }
 
-  body .btn-primary-disabled {
-    @apply bg-primary-200 cursor-not-allowed text-white;
+  .btn-large {
+    @apply px-4 h-9 rounded-[10px] text-sm font-semibold
   }
 
-  body .btn-warning {
-    @apply bg-red-600 hover:bg-red-600/75 cursor-pointer text-white hover:shadow-sm;
+  .btn-secondary {
+    @apply bg-white hover:bg-white/80 border-gray-200 hover:border-gray-300 text-gray-700;
   }
 
-  body .btn-warning-disabled {
-    @apply bg-red-600/75 cursor-not-allowed text-white;
+  .btn-secondary-accent {
+    @apply bg-white hover:bg-white/80 border-gray-200 hover:border-gray-300 text-primary-600;
+  }
+
+  .btn-primary {
+    @apply bg-primary-600 hover:bg-primary-700 text-white;
+  }
+
+  .btn-warning {
+    @apply bg-red-600 hover:bg-red-700 text-white;
+  }
+
+  .btn-ghost {
+    @apply bg-transparent hover:bg-gray-200 border-transparent shadow-none text-gray-700;
   }
 }

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

@@ -4,18 +4,25 @@ import classNames from 'classnames'
 import Spinner from '../spinner'
 
 const buttonVariants = cva(
-  'btn disabled:pointer-events-none',
+  'btn disabled:btn-disabled',
   {
     variants: {
       variant: {
-        primary: 'btn-primary disabled:btn-primary-disabled',
-        warning:
-          'btn-warning disabled:btn-warning-disabled',
-        default: 'btn-default disabled:btn-default-disabled',
+        'primary': 'btn-primary',
+        'warning': 'btn-warning',
+        'secondary': 'btn-secondary',
+        'secondary-accent': 'btn-secondary-accent',
+        'ghost': 'btn-ghost',
+      },
+      size: {
+        small: 'btn-small',
+        medium: 'btn-medium',
+        large: 'btn-large',
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: 'secondary',
+      size: 'medium',
     },
   },
 )
@@ -25,11 +32,11 @@ export type ButtonProps = {
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, loading, children, ...props }, ref) => {
+  ({ className, variant, size, loading, children, ...props }, ref) => {
     return (
       <button
         type='button'
-        className={classNames(buttonVariants({ variant, className }))}
+        className={classNames(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       >

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

@@ -67,7 +67,9 @@ const ConfigPanel = () => {
                   {t('share.chat.configStatusDes')}
                 </div>
                 <Button
-                  className='shrink-0 px-2 py-0 h-6 bg-white text-xs font-medium text-primary-600 rounded-md'
+                  variant='secondary-accent'
+                  size='small'
+                  className='shrink-0'
                   onClick={() => setCollapsed(false)}
                 >
                   <Edit02 className='mr-1 w-3 h-3' />
@@ -94,7 +96,7 @@ const ConfigPanel = () => {
               <div className={`pl-[136px] flex items-center ${isMobile && '!pl-0'}`}>
                 <Button
                   variant='primary'
-                  className='mr-2 text-sm font-medium'
+                  className='mr-2'
                   onClick={() => {
                     setCollapsed(true)
                     handleStartChat()
@@ -103,7 +105,6 @@ const ConfigPanel = () => {
                   {t('common.operation.save')}
                 </Button>
                 <Button
-                  className='text-sm font-medium'
                   onClick={() => setCollapsed(true)}
                 >
                   {t('common.operation.cancel')}
@@ -117,8 +118,9 @@ const ConfigPanel = () => {
             <div className='p-6 rounded-b-xl'>
               <Form />
               <Button
-                className={`px-4 py-0 h-9 ${inputsForms.length && !isMobile && 'ml-[136px]'}`}
+                className={`${inputsForms.length && !isMobile && 'ml-[136px]'}`}
                 variant='primary'
+                size='large'
                 onClick={handleStartChat}
               >
                 <MessageDotsCircle className='mr-2 w-4 h-4 text-white' />

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

@@ -78,7 +78,8 @@ const Sidebar = () => {
       }
       <div className='shrink-0 p-4'>
         <Button
-          className='justify-start px-3 py-0 w-full h-9 text-sm font-medium text-primary-600'
+          variant='secondary-accent'
+          className='justify-start w-full'
           onClick={handleNewConversation}
         >
           <Edit05 className='mr-2 w-4 h-4' />

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

@@ -239,7 +239,7 @@ const Chat: FC<ChatProps> = ({
             {
               !noStopResponding && isResponding && (
                 <div className='flex justify-center mb-2'>
-                  <Button className='py-0 px-3 h-7 bg-white shadow-xs' onClick={onStopResponding}>
+                  <Button onClick={onStopResponding}>
                     <StopCircle className='mr-[5px] w-3.5 h-3.5 text-gray-500' />
                     <span className='text-xs text-gray-500 font-normal'>{t('appDebug.operation.stopResponding')}</span>
                   </Button>

web/app/components/base/chat/chat/try-to-ask.tsx

@@ -40,7 +40,8 @@ const TryToAsk: FC<TryToAskProps> = ({
           suggestedQuestions.map((suggestQuestion, index) => (
             <Button
               key={index}
-              className='mb-2 mr-2 last:mr-0 px-3 py-[5px] bg-white text-primary-600 text-xs font-medium'
+              variant='secondary-accent'
+              className='mb-2 mr-2 last:mr-0'
               onClick={() => onSend(suggestQuestion)}
             >
               {suggestQuestion}

web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx

@@ -68,7 +68,9 @@ const ConfigPanel = () => {
                   {t('share.chat.configStatusDes')}
                 </div>
                 <Button
-                  className='shrink-0 px-2 py-0 h-6 bg-white text-xs font-medium text-primary-600 rounded-md'
+                  variant='secondary-accent'
+                  size='small'
+                  className='shrink-0'
                   onClick={() => setCollapsed(false)}
                 >
                   <Edit02 className='mr-1 w-3 h-3' />
@@ -95,7 +97,7 @@ const ConfigPanel = () => {
               <div className={cn('pl-[136px] flex items-center', isMobile && '!pl-0')}>
                 <Button
                   variant='primary'
-                  className='mr-2 text-sm font-medium'
+                  className='mr-2'
                   onClick={() => {
                     setCollapsed(true)
                     handleStartChat()
@@ -104,7 +106,6 @@ const ConfigPanel = () => {
                   {t('common.operation.save')}
                 </Button>
                 <Button
-                  className='text-sm font-medium'
                   onClick={() => setCollapsed(true)}
                 >
                   {t('common.operation.cancel')}
@@ -118,8 +119,9 @@ const ConfigPanel = () => {
             <div className='p-6 rounded-b-xl'>
               <Form />
               <Button
-                className={cn('px-4 py-0 h-9', inputsForms.length && !isMobile && 'ml-[136px]')}
+                className={cn(inputsForms.length && !isMobile && 'ml-[136px]')}
                 variant='primary'
+                size='large'
                 onClick={handleStartChat}
               >
                 <MessageDotsCircle className='mr-2 w-4 h-4 text-white' />

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

@@ -42,8 +42,8 @@ const ConfirmUI: FC<IConfirmUIProps> = ({
       </div>
 
       <div className='flex gap-3 mt-4 ml-12'>
-        <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>
+        <Button variant='primary' onClick={onConfirm}>{confirmText || t('common.operation.confirm')}</Button>
+        <Button onClick={onCancel}>{cancelText || t('common.operation.cancel')}</Button>
       </div>
     </div>
 

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

@@ -71,7 +71,7 @@ const ConfirmCommon: FC<ConfirmCommonProps> = ({
               {
                 showOperateCancel && (
                   <Button
-                    className='mr-2 min-w-24 text-sm font-medium !text-gray-700'
+                    className='mr-2'
                     onClick={onCancel}
                   >
                     {t('common.operation.cancel')}

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

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

web/app/components/base/features/feature-choose/index.tsx

@@ -24,8 +24,7 @@ const ChooseFeature = ({
     <>
       <Button
         className={`
-          px-3 py-0 h-8 rounded-lg border border-primary-100 bg-primary-25 shadow-xs text-xs font-semibold text-primary-600
-          ${disabled && 'cursor-not-allowed opacity-50'}
+          border-primary-100 bg-primary-25 text-xs font-semibold text-primary-600
         `}
         onClick={() => !disabled && setShowFeaturesModal(true)}
       >

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

@@ -357,13 +357,12 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       <div className='flex items-center justify-end'>
         <Button
           onClick={onCancel}
-          className='mr-2 text-sm font-medium'
+          className='mr-2'
         >
           {t('common.operation.cancel')}
         </Button>
         <Button
           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

@@ -171,8 +171,14 @@ const OpeningStatement: FC<OpeningStatementProps> = ({
   const headerRight = !readonly ? (
     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} variant="primary">{t('common.operation.save')}</Button>
+        <Button
+          variant='ghost'
+          size='small'
+          onClick={handleCancel}
+        >
+          {t('common.operation.cancel')}
+        </Button>
+        <Button size='small' 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

@@ -43,7 +43,7 @@ const ImageLinkInput: FC<ImageLinkInputProps> = ({
       />
       <Button
         variant='primary'
-        className='!h-6 text-xs font-medium'
+        size='small'
         disabled={!imageLink || disabled}
         onClick={handleClick}
       >

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

@@ -54,7 +54,7 @@ const DeleteConfirmModal: FC<Props> = ({
           <Button
             variant='warning'
             onClick={onRemove}
-            className='border-red-700 border-[0.5px]'
+            className='border-red-700'
           >
             {t('common.operation.sure')}
           </Button>

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

@@ -39,8 +39,8 @@ const TagRemoveModal = ({ show, tag, onConfirm, onClose }: TagRemoveModalProps)
         {t('common.tag.deleteTip')}
       </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]' variant="warning" onClick={onConfirm}>{t('common.operation.delete')}</Button>
+        <Button className='mr-2' onClick={onClose}>{t('common.operation.cancel')}</Button>
+        <Button className='border-red-700' variant="warning" onClick={onConfirm}>{t('common.operation.delete')}</Button>
       </div>
     </Modal>
   )