Austin/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2024-11-16 11:42:29 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: KVOJJJin <jzongcode@gmail.com>
This commit is contained in:
TinsFox 2024-06-19 14:13:16 +08:00 committed by GitHub
parent bb33ffc332
commit a3bd5eba02
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
100 changed files with 218 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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"

6
web/app/activate/activateForm.tsx
View File

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

2
web/app/components/app/annotation/add-annotation-modal/index.tsx
View File

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

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

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

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

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

2
web/app/components/app/annotation/header-opts/index.tsx
View File

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

4
web/app/components/app/app-publisher/index.tsx
View File

@ -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',

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

@ -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'
>

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

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

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

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

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

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

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

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

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

@ -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>
)

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

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

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

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

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

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

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

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

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

@ -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>
)

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

@ -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>
)

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

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

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

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

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

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

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

@ -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">

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

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

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

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

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

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

8
web/app/components/app/create-app-modal/index.tsx
View File

@ -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' />

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

@ -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>
)

2
web/app/components/app/duplicate-modal/index.tsx
View File

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

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

@ -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' })}
>

2
web/app/components/app/overview/settings/index.tsx
View File

@ -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) => {

4
web/app/components/app/switch-app-modal/index.tsx
View File

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

82
web/app/components/base/button/index.tsx
View File

@ -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
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',
},
},
)
export type ButtonProps = {
loading?: boolean
tabIndex?: number
onClick?: MouseEventHandler<HTMLDivElement>
}>
} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
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
}
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'
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>
)
}
export default memo(Button)
export default Button
export { Button, buttonVariants }

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

@ -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' />

2
web/app/components/base/confirm-ui/index.tsx
View File

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

4
web/app/components/base/confirm/common.tsx
View File

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

4
web/app/components/base/emoji-picker/index.tsx
View File

@ -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)

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

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

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

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

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

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

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

@ -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]'
>

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

@ -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>
)

2
web/app/components/custom/custom-web-app-brand/index.tsx
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

2
web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
View File

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

4
web/app/components/datasets/documents/detail/completed/index.tsx
View File

@ -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: '' }}

2
web/app/components/datasets/documents/detail/embedding/index.tsx
View File

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

8
web/app/components/datasets/documents/detail/metadata/index.tsx
View File

@ -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]'

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

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

2
web/app/components/datasets/documents/index.tsx
View File

@ -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')}

2
web/app/components/datasets/documents/list.tsx
View File

@ -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]'
>

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

@ -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>
)

2
web/app/components/datasets/hit-testing/textarea.tsx
View File

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

4
web/app/components/datasets/rename-modal/index.tsx
View File

@ -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>
)

2
web/app/components/datasets/settings/form/index.tsx
View File

@ -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')}

2
web/app/components/develop/secret-key/secret-key-button.tsx
View File

@ -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" />

2
web/app/components/develop/secret-key/secret-key-generate.tsx
View File

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

4
web/app/components/develop/secret-key/secret-key-modal.tsx
View File

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

4
web/app/components/explore/app-card/index.tsx
View File

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

2
web/app/components/explore/create-app-modal/index.tsx
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -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>
)

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

@ -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')}

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

@ -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">

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

@ -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')}

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

@ -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">

2
web/app/components/share/text-generation/index.tsx
View File

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

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

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

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

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

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

@ -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'>

10
web/app/components/tools/add-tool-modal/tools.tsx
View File

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

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

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

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

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

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

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

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

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

8
web/app/components/tools/provider/detail.tsx
View File

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

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

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

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

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

4
web/app/components/tools/workflow-tool/index.tsx
View File

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

4
web/app/components/workflow/header/index.tsx
View File

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

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

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

2
web/app/components/workflow/nodes/http/components/authorization/index.tsx
View File

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

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

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

2
web/app/components/workflow/nodes/tool/panel.tsx
View File

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

2
web/app/components/workflow/panel/inputs-panel.tsx
View File

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

2
web/app/init/InitPasswordPopup.tsx
View File

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

2
web/app/install/installForm.tsx
View File

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

6
web/app/signin/normalForm.tsx
View File

@ -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"

2
web/app/signin/oneMoreStep.tsx
View File

@ -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={() => {

2
web/app/signin/userSSOForm.tsx
View File

@ -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"