Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>tags/1.7.2
| @@ -87,7 +87,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => { | |||
| <Avatar {...props} /> | |||
| <div | |||
| onClick={() => { setIsShowAvatarPicker(true) }} | |||
| className="absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black bg-opacity-50 opacity-0 transition-opacity group-hover:opacity-100" | |||
| className="absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100" | |||
| > | |||
| <span className="text-xs text-white"> | |||
| <RiPencilLine /> | |||
| @@ -32,7 +32,7 @@ const AccessControlDialog = ({ | |||
| leaveFrom="opacity-100" | |||
| leaveTo="opacity-0" | |||
| > | |||
| <div className="fixed inset-0 bg-background-overlay bg-opacity-25" /> | |||
| <div className="bg-background-overlay/25 fixed inset-0" /> | |||
| </Transition.Child> | |||
| <div className="fixed inset-0 flex items-center justify-center"> | |||
| @@ -106,7 +106,7 @@ function SelectedGroupsBreadCrumb() { | |||
| setSelectedGroupsForBreadcrumb([]) | |||
| }, [setSelectedGroupsForBreadcrumb]) | |||
| return <div className='flex h-7 items-center gap-x-0.5 px-2 py-0.5'> | |||
| <span className={classNames('system-xs-regular text-text-tertiary', selectedGroupsForBreadcrumb.length > 0 && 'text-text-accent cursor-pointer')} onClick={handleReset}>{t('app.accessControlDialog.operateGroupAndMember.allMembers')}</span> | |||
| <span className={classNames('system-xs-regular text-text-tertiary', selectedGroupsForBreadcrumb.length > 0 && 'cursor-pointer text-text-accent')} onClick={handleReset}>{t('app.accessControlDialog.operateGroupAndMember.allMembers')}</span> | |||
| {selectedGroupsForBreadcrumb.map((group, index) => { | |||
| return <div key={index} className='system-xs-regular flex items-center gap-x-0.5 text-text-tertiary'> | |||
| <span>/</span> | |||
| @@ -198,7 +198,7 @@ type BaseItemProps = { | |||
| children: React.ReactNode | |||
| } | |||
| function BaseItem({ children, className }: BaseItemProps) { | |||
| return <div className={classNames('p-1 pl-2 flex items-center space-x-2 hover:rounded-lg hover:bg-state-base-hover cursor-pointer', className)}> | |||
| return <div className={classNames('flex cursor-pointer items-center space-x-2 p-1 pl-2 hover:rounded-lg hover:bg-state-base-hover', className)}> | |||
| {children} | |||
| </div> | |||
| } | |||
| @@ -40,13 +40,13 @@ type CategoryItemProps = { | |||
| } | |||
| function CategoryItem({ category, active, onClick }: CategoryItemProps) { | |||
| return <li | |||
| className={classNames('p-1 pl-3 h-8 rounded-lg flex items-center gap-2 group cursor-pointer hover:bg-state-base-hover [&.active]:bg-state-base-active', active && 'active')} | |||
| className={classNames('group flex h-8 cursor-pointer items-center gap-2 rounded-lg p-1 pl-3 hover:bg-state-base-hover [&.active]:bg-state-base-active', active && 'active')} | |||
| onClick={() => { onClick?.(category) }}> | |||
| {category === AppCategories.RECOMMENDED && <div className='inline-flex h-5 w-5 items-center justify-center rounded-md'> | |||
| <RiThumbUpLine className='h-4 w-4 text-components-menu-item-text group-[.active]:text-components-menu-item-text-active' /> | |||
| </div>} | |||
| <AppCategoryLabel category={category} | |||
| className={classNames('system-sm-medium text-components-menu-item-text group-[.active]:text-components-menu-item-text-active group-hover:text-components-menu-item-text-hover', active && 'system-sm-semibold')} /> | |||
| className={classNames('system-sm-medium text-components-menu-item-text group-hover:text-components-menu-item-text-hover group-[.active]:text-components-menu-item-text-active', active && 'system-sm-semibold')} /> | |||
| </li > | |||
| } | |||
| @@ -94,7 +94,7 @@ const ImageInput: FC<UploaderProps> = ({ | |||
| <div | |||
| className={classNames( | |||
| isDragActive && 'border-primary-600', | |||
| 'relative aspect-square border-[1.5px] border-dashed rounded-lg flex flex-col justify-center items-center text-gray-500')} | |||
| 'relative flex aspect-square flex-col items-center justify-center rounded-lg border-[1.5px] border-dashed text-gray-500')} | |||
| onDragEnter={handleDragEnter} | |||
| onDragOver={handleDragOver} | |||
| onDragLeave={handleDragLeave} | |||
| @@ -112,7 +112,7 @@ const BlockInput: FC<IBlockInputProps> = ({ | |||
| ? <div className='h-full px-4 py-2'> | |||
| <textarea | |||
| ref={contentEditableRef} | |||
| className={classNames(editAreaClassName, 'block w-full h-full resize-none')} | |||
| className={classNames(editAreaClassName, 'block h-full w-full resize-none')} | |||
| placeholder={placeholder} | |||
| onChange={onValueChange} | |||
| value={currentValue} | |||
| @@ -130,7 +130,7 @@ const BlockInput: FC<IBlockInputProps> = ({ | |||
| </div>) | |||
| return ( | |||
| <div className={classNames('block-input w-full overflow-y-auto bg-white border-none rounded-xl')}> | |||
| <div className={classNames('block-input w-full overflow-y-auto rounded-xl border-none bg-white')}> | |||
| {textAreaContent} | |||
| {/* footer */} | |||
| {!readonly && ( | |||
| @@ -51,7 +51,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( | |||
| {...props} | |||
| > | |||
| {children} | |||
| {loading && <Spinner loading={loading} className={classNames('!text-white !h-3 !w-3 !border-2 !ml-1', spinnerClassName)} />} | |||
| {loading && <Spinner loading={loading} className={classNames('!ml-1 !h-3 !w-3 !border-2 !text-white', spinnerClassName)} />} | |||
| </button> | |||
| ) | |||
| }, | |||
| @@ -24,7 +24,7 @@ const ContentDialog = ({ | |||
| <TransitionChild> | |||
| <div | |||
| className={classNames( | |||
| 'absolute left-0 inset-0 w-full bg-app-detail-overlay-bg', | |||
| 'absolute inset-0 left-0 w-full bg-app-detail-overlay-bg', | |||
| 'duration-300 ease-in data-[closed]:opacity-0', | |||
| 'data-[enter]:opacity-100', | |||
| 'data-[leave]:opacity-0', | |||
| @@ -35,10 +35,10 @@ const ContentDialog = ({ | |||
| <TransitionChild> | |||
| <div className={classNames( | |||
| 'absolute left-0 w-full bg-app-detail-bg border-r border-divider-burn', | |||
| 'absolute left-0 w-full border-r border-divider-burn bg-app-detail-bg', | |||
| 'duration-100 ease-in data-[closed]:-translate-x-full', | |||
| 'data-[enter]:ease-out data-[enter]:duration-300 data-[enter]:translate-x-0', | |||
| 'data-[leave]:ease-in data-[leave]:duration-200 data-[leave]:-translate-x-full', | |||
| 'data-[enter]:translate-x-0 data-[enter]:duration-300 data-[enter]:ease-out', | |||
| 'data-[leave]:-translate-x-full data-[leave]:duration-200 data-[leave]:ease-in', | |||
| className, | |||
| )}> | |||
| {children} | |||
| @@ -47,16 +47,16 @@ const CustomDialog = ({ | |||
| <div className="flex min-h-full items-center justify-center"> | |||
| <TransitionChild> | |||
| <DialogPanel className={classNames( | |||
| 'w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl', | |||
| 'duration-100 ease-in data-[closed]:opacity-0 data-[closed]:scale-95', | |||
| 'data-[enter]:opacity-100 data-[enter]:scale-100', | |||
| 'data-[leave]:opacity-0 data-[enter]:scale-95', | |||
| 'w-full max-w-[800px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl transition-all', | |||
| 'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0', | |||
| 'data-[enter]:scale-100 data-[enter]:opacity-100', | |||
| 'data-[enter]:scale-95 data-[leave]:opacity-0', | |||
| className, | |||
| )}> | |||
| {Boolean(title) && ( | |||
| <DialogTitle | |||
| as={titleAs || 'h3'} | |||
| className={classNames('pr-8 pb-3 title-2xl-semi-bold text-text-primary', titleClassName)} | |||
| className={classNames('title-2xl-semi-bold pb-3 pr-8 text-text-primary', titleClassName)} | |||
| > | |||
| {title} | |||
| </DialogTitle> | |||
| @@ -24,7 +24,7 @@ const DialogWrapper = ({ | |||
| <Dialog as="div" className="relative z-40" onClose={close}> | |||
| <TransitionChild> | |||
| <div className={cn( | |||
| 'fixed inset-0 bg-black bg-opacity-25', | |||
| 'fixed inset-0 bg-black/25', | |||
| 'data-[closed]:opacity-0', | |||
| 'data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out', | |||
| 'data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in', | |||
| @@ -48,9 +48,9 @@ export default function FullScreenModal({ | |||
| <DialogPanel className={classNames( | |||
| 'h-full', | |||
| overflowVisible ? 'overflow-visible' : 'overflow-hidden', | |||
| 'duration-100 ease-in data-[closed]:opacity-0 data-[closed]:scale-95', | |||
| 'data-[enter]:opacity-100 data-[enter]:scale-100', | |||
| 'data-[leave]:opacity-0 data-[enter]:scale-95', | |||
| 'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0', | |||
| 'data-[enter]:scale-100 data-[enter]:opacity-100', | |||
| 'data-[enter]:scale-95 data-[leave]:opacity-0', | |||
| className, | |||
| )}> | |||
| {closable | |||
| @@ -16,8 +16,8 @@ const GridMask: FC<GridMaskProps> = ({ | |||
| }) => { | |||
| return ( | |||
| <div className={classNames('relative bg-saas-background', wrapperClassName)}> | |||
| <div className={classNames('absolute inset-0 w-full h-full z-0 opacity-70', canvasClassName, Style.gridBg)} /> | |||
| <div className={classNames('absolute w-full h-full z-[1] bg-grid-mask-background rounded-lg', gradientClassName)} /> | |||
| <div className={classNames('absolute inset-0 z-0 h-full w-full opacity-70', canvasClassName, Style.gridBg)} /> | |||
| <div className={classNames('absolute z-[1] h-full w-full rounded-lg bg-grid-mask-background', gradientClassName)} /> | |||
| <div className='relative z-[2]'>{children}</div> | |||
| </div> | |||
| ) | |||
| @@ -13,7 +13,7 @@ const LogoSite: FC<LogoSiteProps> = ({ | |||
| return ( | |||
| <img | |||
| src={`${basePath}/logo/logo.png`} | |||
| className={classNames('block w-[22.651px] h-[24.5px]', className)} | |||
| className={classNames('block h-[24.5px] w-[22.651px]', className)} | |||
| alt='logo' | |||
| /> | |||
| ) | |||
| @@ -50,11 +50,11 @@ export default function Modal({ | |||
| <div className="flex min-h-full items-center justify-center p-4 text-center"> | |||
| <TransitionChild> | |||
| <DialogPanel className={classNames( | |||
| 'w-full max-w-[480px] transform rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all', | |||
| 'w-full max-w-[480px] rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all', | |||
| overflowVisible ? 'overflow-visible' : 'overflow-hidden', | |||
| 'duration-100 ease-in data-[closed]:opacity-0 data-[closed]:scale-95', | |||
| 'data-[enter]:opacity-100 data-[enter]:scale-100', | |||
| 'data-[leave]:opacity-0 data-[enter]:scale-95', | |||
| 'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0', | |||
| 'data-[enter]:scale-100 data-[enter]:opacity-100', | |||
| 'data-[enter]:scale-95 data-[leave]:opacity-0', | |||
| className, | |||
| )}> | |||
| {title && <DialogTitle | |||
| @@ -61,7 +61,7 @@ const PremiumBadge: React.FC<PremiumBadgeProps> = ({ | |||
| {children} | |||
| <Highlight | |||
| className={classNames( | |||
| 'absolute top-0 opacity-50 right-1/2 translate-x-[20%] transition-all duration-100 ease-out hover:opacity-80 hover:translate-x-[30%]', | |||
| 'absolute right-1/2 top-0 translate-x-[20%] opacity-50 transition-all duration-100 ease-out hover:translate-x-[30%] hover:opacity-80', | |||
| size === 's' ? 'h-[18px] w-12' : 'h-6 w-12', | |||
| )} | |||
| /> | |||
| @@ -21,7 +21,7 @@ export const SegmentedControl = <T extends string | number | symbol>({ | |||
| return ( | |||
| <div className={classNames( | |||
| 'flex items-center rounded-lg bg-components-segmented-control-bg-normal gap-x-[1px] p-0.5', | |||
| 'flex items-center gap-x-[1px] rounded-lg bg-components-segmented-control-bg-normal p-0.5', | |||
| className, | |||
| )}> | |||
| {options.map((option, index) => { | |||
| @@ -34,7 +34,7 @@ export const SegmentedControl = <T extends string | number | symbol>({ | |||
| type='button' | |||
| key={String(option.value)} | |||
| className={classNames( | |||
| 'flex items-center justify-center relative px-2 py-1 rounded-lg gap-x-0.5 group border-0.5 border-transparent', | |||
| 'border-0.5 group relative flex items-center justify-center gap-x-0.5 rounded-lg border-transparent px-2 py-1', | |||
| isSelected | |||
| ? 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg shadow-xs shadow-shadow-shadow-3' | |||
| : 'hover:bg-state-base-hover', | |||
| @@ -43,12 +43,12 @@ export const SegmentedControl = <T extends string | number | symbol>({ | |||
| > | |||
| <span className='flex h-5 w-5 items-center justify-center'> | |||
| <Icon className={classNames( | |||
| 'w-4 h-4 text-text-tertiary', | |||
| 'h-4 w-4 text-text-tertiary', | |||
| isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary', | |||
| )} /> | |||
| </span> | |||
| <span className={classNames( | |||
| 'p-0.5 text-text-tertiary system-sm-medium', | |||
| 'system-sm-medium p-0.5 text-text-tertiary', | |||
| isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary', | |||
| )}> | |||
| {option.text} | |||
| @@ -24,7 +24,7 @@ export const SkeletonRow: FC<SkeletonProps> = (props) => { | |||
| export const SkeletonRectangle: FC<SkeletonProps> = (props) => { | |||
| const { className, children, ...rest } = props | |||
| return ( | |||
| <div className={classNames('h-2 rounded-sm opacity-20 bg-text-quaternary my-1', className)} {...rest}> | |||
| <div className={classNames('my-1 h-2 rounded-sm bg-text-quaternary opacity-20', className)} {...rest}> | |||
| {children} | |||
| </div> | |||
| ) | |||
| @@ -33,7 +33,7 @@ export const SkeletonRectangle: FC<SkeletonProps> = (props) => { | |||
| export const SkeletonPoint: FC<SkeletonProps> = (props) => { | |||
| const { className, ...rest } = props | |||
| return ( | |||
| <div className={classNames('text-text-quaternary text-xs font-medium', className)} {...rest}>·</div> | |||
| <div className={classNames('text-xs font-medium text-text-quaternary', className)} {...rest}>·</div> | |||
| ) | |||
| } | |||
| /** Usage | |||
| @@ -63,8 +63,8 @@ const Switch = ( | |||
| className={classNames( | |||
| wrapStyle[size], | |||
| enabled ? 'bg-components-toggle-bg' : 'bg-components-toggle-bg-unchecked', | |||
| 'relative inline-flex flex-shrink-0 cursor-pointer rounded-[5px] border-2 border-transparent transition-colors duration-200 ease-in-out', | |||
| disabled ? '!opacity-50 !cursor-not-allowed' : '', | |||
| 'relative inline-flex shrink-0 cursor-pointer rounded-[5px] border-2 border-transparent transition-colors duration-200 ease-in-out', | |||
| disabled ? '!cursor-not-allowed !opacity-50' : '', | |||
| size === 'xs' && 'rounded-sm', | |||
| className, | |||
| )} | |||
| @@ -75,7 +75,7 @@ const Switch = ( | |||
| circleStyle[size], | |||
| enabled ? translateLeft[size] : 'translate-x-0', | |||
| size === 'xs' && 'rounded-[1px]', | |||
| 'pointer-events-none inline-block transform rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out', | |||
| 'pointer-events-none inline-block rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out', | |||
| )} | |||
| /> | |||
| </OriginalSwitch> | |||
| @@ -31,10 +31,10 @@ const COLOR_MAP = { | |||
| export default function Tag({ children, color = 'green', className = '', bordered = false, hideBg = false }: ITagProps) { | |||
| return ( | |||
| <div className={ | |||
| classNames('px-2.5 py-px text-xs leading-5 rounded-md inline-flex items-center flex-shrink-0', | |||
| classNames('inline-flex shrink-0 items-center rounded-md px-2.5 py-px text-xs leading-5', | |||
| COLOR_MAP[color] ? `${COLOR_MAP[color].text} ${COLOR_MAP[color].bg}` : '', | |||
| bordered ? 'border-[1px]' : '', | |||
| hideBg ? 'bg-opacity-0' : '', | |||
| hideBg ? 'bg-transparent' : '', | |||
| className)} > | |||
| {children} | |||
| </div> | |||
| @@ -71,14 +71,14 @@ const Pricing: FC<Props> = ({ | |||
| { | |||
| value: 'cloud', | |||
| text: <div className={ | |||
| classNames('inline-flex items-center system-md-semibold-uppercase text-text-secondary', | |||
| classNames('system-md-semibold-uppercase inline-flex items-center text-text-secondary', | |||
| currentPlan === 'cloud' && 'text-text-accent-light-mode-only')} > | |||
| <RiCloudFill className='mr-2 size-4' />{t('billing.plansCommon.cloud')}</div>, | |||
| }, | |||
| { | |||
| value: 'self', | |||
| text: <div className={ | |||
| classNames('inline-flex items-center system-md-semibold-uppercase text-text-secondary', | |||
| classNames('system-md-semibold-uppercase inline-flex items-center text-text-secondary', | |||
| currentPlan === 'self' && 'text-text-accent-light-mode-only')}> | |||
| <RiTerminalBoxFill className='mr-2 size-4' />{t('billing.plansCommon.self')}</div>, | |||
| }]} | |||
| @@ -70,7 +70,7 @@ const style = { | |||
| priceTip: 'text-text-primary-on-surface', | |||
| description: 'text-text-primary-on-surface', | |||
| bg: 'border-effects-highlight bg-[#155AEF] text-text-primary-on-surface', | |||
| btnStyle: 'bg-white bg-opacity-96 hover:opacity-85 border-[0.5px] border-components-button-secondary-border text-[#155AEF] shadow-xs', | |||
| btnStyle: 'bg-white/96 hover:opacity-85 border-[0.5px] border-components-button-secondary-border text-[#155AEF] shadow-xs', | |||
| values: 'text-text-primary-on-surface', | |||
| tooltipIconColor: 'text-text-primary-on-surface', | |||
| }, | |||
| @@ -21,7 +21,7 @@ type OptionCardHeaderProps = { | |||
| export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => { | |||
| const { icon, title, description, isActive, activeClassName, effectImg, disabled } = props | |||
| return <div className={classNames( | |||
| 'flex h-full overflow-hidden rounded-t-xl relative', | |||
| 'relative flex h-full overflow-hidden rounded-t-xl', | |||
| isActive && activeClassName, | |||
| !disabled && 'cursor-pointer', | |||
| )}> | |||
| @@ -34,7 +34,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => { | |||
| </div> | |||
| </div> | |||
| <TriangleArrow | |||
| className={classNames('absolute left-4 -bottom-1.5 text-transparent', isActive && 'text-components-panel-bg')} | |||
| className={classNames('absolute -bottom-1.5 left-4 text-transparent', isActive && 'text-components-panel-bg')} | |||
| /> | |||
| <div className='flex-1 space-y-0.5 py-3 pr-4'> | |||
| <div className='system-md-semibold text-text-secondary'>{title}</div> | |||
| @@ -70,7 +70,7 @@ export const OptionCard: FC<OptionCardProps> = ( | |||
| (isActive && !noHighlight) | |||
| ? 'border-[1.5px] border-components-option-card-option-selected-border' | |||
| : 'border border-components-option-card-option-border', | |||
| disabled && 'opacity-50 pointer-events-none', | |||
| disabled && 'pointer-events-none opacity-50', | |||
| className, | |||
| )} | |||
| style={{ | |||
| @@ -17,15 +17,15 @@ export const StepperStep: FC<StepperStepProps> = (props) => { | |||
| const label = isActive ? `STEP ${index + 1}` : `${index + 1}` | |||
| return <div className='flex items-center gap-2'> | |||
| <div className={classNames( | |||
| 'h-5 py-1 rounded-3xl flex-col justify-center items-center gap-2 inline-flex', | |||
| 'inline-flex h-5 flex-col items-center justify-center gap-2 rounded-3xl py-1', | |||
| isActive | |||
| ? 'px-2 bg-state-accent-solid' | |||
| ? 'bg-state-accent-solid px-2' | |||
| : !isDisabled | |||
| ? 'w-5 border border-text-quaternary' | |||
| : 'w-5 border border-divider-deep', | |||
| )}> | |||
| <div className={classNames( | |||
| 'text-center system-2xs-semibold-uppercase', | |||
| 'system-2xs-semibold-uppercase text-center', | |||
| isActive | |||
| ? 'text-text-primary-on-surface' | |||
| : !isDisabled | |||
| @@ -37,7 +37,7 @@ export const StepperStep: FC<StepperStepProps> = (props) => { | |||
| </div> | |||
| <div className={classNames('system-xs-medium-uppercase', | |||
| isActive | |||
| ? 'text-text-accent system-xs-semibold-uppercase' | |||
| ? 'system-xs-semibold-uppercase text-text-accent' | |||
| : !isDisabled | |||
| ? 'text-text-tertiary' | |||
| : 'text-text-quaternary', | |||
| @@ -24,7 +24,7 @@ export const TopBar: FC<TopBarProps> = (props) => { | |||
| return datasetId ? `/datasets/${datasetId}/documents` : '/datasets' | |||
| }, [datasetId]) | |||
| return <div className={classNames('flex shrink-0 h-[52px] items-center justify-between relative border-b border-b-divider-subtle', className)}> | |||
| return <div className={classNames('relative flex h-[52px] shrink-0 items-center justify-between border-b border-b-divider-subtle', className)}> | |||
| <Link href={fallbackRoute} replace className="inline-flex h-12 items-center justify-start gap-1 py-2 pl-2 pr-6"> | |||
| <div className='p-2'> | |||
| <RiArrowLeftLine className='size-4 text-text-primary' /> | |||
| @@ -84,20 +84,19 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({ | |||
| const count = text === '--' ? 0 : total | |||
| return `${count} ${t('datasetDocuments.segment.searchResults', { count })}` | |||
| } | |||
| // eslint-disable-next-line react-hooks/exhaustive-deps | |||
| }, [isFullDocMode, total, childChunks.length, inputValue]) | |||
| return ( | |||
| <div className={classNames( | |||
| 'flex flex-col', | |||
| contentOpacity, | |||
| isParagraphMode ? 'pt-1 pb-2' : 'px-3 grow', | |||
| isParagraphMode ? 'pb-2 pt-1' : 'grow px-3', | |||
| (isFullDocMode && isLoading) && 'overflow-y-hidden', | |||
| )}> | |||
| {isFullDocMode ? <Divider type='horizontal' className='my-1 h-[1px] bg-divider-subtle' /> : null} | |||
| <div className={classNames('flex items-center justify-between', isFullDocMode ? 'pt-2 pb-3 sticky -top-2 left-0 bg-background-default' : '')}> | |||
| <div className={classNames('flex items-center justify-between', isFullDocMode ? 'sticky -top-2 left-0 bg-background-default pb-3 pt-2' : '')}> | |||
| <div className={classNames( | |||
| 'h-7 flex items-center pl-1 pr-3 rounded-lg', | |||
| 'flex h-7 items-center rounded-lg pl-1 pr-3', | |||
| isParagraphMode && 'cursor-pointer', | |||
| (isParagraphMode && collapsed) && 'bg-dataset-child-chunk-expand-btn-bg', | |||
| isFullDocMode && 'pl-0', | |||
| @@ -117,11 +116,11 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({ | |||
| : null | |||
| } | |||
| <span className='system-sm-semibold-uppercase text-text-secondary'>{totalText}</span> | |||
| <span className={classNames('text-text-quaternary text-xs font-medium pl-1.5', isParagraphMode ? 'hidden group-hover/card:inline-block' : '')}>·</span> | |||
| <span className={classNames('pl-1.5 text-xs font-medium text-text-quaternary', isParagraphMode ? 'hidden group-hover/card:inline-block' : '')}>·</span> | |||
| <button | |||
| type='button' | |||
| className={classNames( | |||
| 'px-1.5 py-1 text-components-button-secondary-accent-text system-xs-semibold-uppercase', | |||
| 'system-xs-semibold-uppercase px-1.5 py-1 text-components-button-secondary-accent-text', | |||
| isParagraphMode ? 'hidden group-hover/card:inline-block' : '', | |||
| (isFullDocMode && isLoading) ? 'text-components-button-secondary-accent-text-disabled' : '', | |||
| )} | |||
| @@ -147,14 +146,14 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({ | |||
| </div> | |||
| {isLoading ? <FullDocListSkeleton /> : null} | |||
| {((isFullDocMode && !isLoading) || !collapsed) | |||
| ? <div className={classNames('flex gap-x-0.5', isFullDocMode ? 'grow mb-6' : 'items-center')}> | |||
| ? <div className={classNames('flex gap-x-0.5', isFullDocMode ? 'mb-6 grow' : 'items-center')}> | |||
| {isParagraphMode && ( | |||
| <div className='self-stretch'> | |||
| <Divider type='vertical' className='mx-[7px] w-[2px] bg-text-accent-secondary' /> | |||
| </div> | |||
| )} | |||
| {childChunks.length > 0 | |||
| ? <FormattedText className={classNames('w-full !leading-6 flex flex-col', isParagraphMode ? 'gap-y-2' : 'gap-y-3')}> | |||
| ? <FormattedText className={classNames('flex w-full flex-col !leading-6', isParagraphMode ? 'gap-y-2' : 'gap-y-3')}> | |||
| {childChunks.map((childChunk) => { | |||
| const edited = childChunk.updated_at !== childChunk.created_at | |||
| const focused = currChildChunk?.childChunkInfo?.id === childChunk.id | |||
| @@ -17,7 +17,7 @@ const Textarea: FC<IContentProps> = React.memo(({ | |||
| return ( | |||
| <textarea | |||
| className={classNames( | |||
| 'bg-transparent inset-0 outline-none border-none appearance-none resize-none w-full overflow-y-auto', | |||
| 'inset-0 w-full resize-none appearance-none overflow-y-auto border-none bg-transparent outline-none', | |||
| className, | |||
| )} | |||
| placeholder={placeholder} | |||
| @@ -83,7 +83,7 @@ const AutoResizeTextArea: FC<IAutoResizeTextAreaProps> = React.memo(({ | |||
| <textarea | |||
| ref={textareaRef} | |||
| className={classNames( | |||
| 'bg-transparent inset-0 outline-none border-none appearance-none resize-none w-full', | |||
| 'inset-0 w-full resize-none appearance-none border-none bg-transparent outline-none', | |||
| className, | |||
| )} | |||
| style={{ | |||
| @@ -20,10 +20,10 @@ const FullScreenDrawer: FC<IFullScreenDrawerProps> = ({ | |||
| <Drawer | |||
| isOpen={isOpen} | |||
| onClose={onClose} | |||
| panelClassName={classNames('!p-0 bg-components-panel-bg', | |||
| panelClassName={classNames('bg-components-panel-bg !p-0', | |||
| fullScreen | |||
| ? '!max-w-full !w-full' | |||
| : 'mt-16 mr-2 mb-2 !max-w-[560px] !w-[560px] border-[0.5px] border-components-panel-border rounded-xl', | |||
| ? '!w-full !max-w-full' | |||
| : 'mb-2 mr-2 mt-16 !w-[560px] !max-w-[560px] rounded-xl border-[0.5px] border-components-panel-border', | |||
| )} | |||
| mask={false} | |||
| unmount | |||
| @@ -110,12 +110,11 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({ | |||
| const wordCountText = useMemo(() => { | |||
| const count = content.length | |||
| return `${formatNumber(count)} ${t('datasetDocuments.segment.characters', { count })}` | |||
| // eslint-disable-next-line react-hooks/exhaustive-deps | |||
| }, [content.length]) | |||
| return ( | |||
| <div className={'flex h-full flex-col'}> | |||
| <div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}> | |||
| <div className={classNames('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}> | |||
| <div className='flex flex-col'> | |||
| <div className='system-xl-semibold text-text-primary'>{t('datasetDocuments.segment.addChildChunk')}</div> | |||
| <div className='flex items-center gap-x-2'> | |||
| @@ -146,8 +145,8 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({ | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div className={classNames('flex grow w-full', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'py-3 px-4')}> | |||
| <div className={classNames('break-all overflow-hidden whitespace-pre-line h-full', fullScreen ? 'w-1/2' : 'w-full')}> | |||
| <div className={classNames('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}> | |||
| <div className={classNames('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}> | |||
| <ChunkContent | |||
| docForm={ChunkingMode.parentChild} | |||
| question={content} | |||
| @@ -101,7 +101,6 @@ const RuleDetail: FC<IRuleDetailProps> = React.memo(({ | |||
| break | |||
| } | |||
| return value | |||
| // eslint-disable-next-line react-hooks/exhaustive-deps | |||
| }, [sourceData]) | |||
| return <div className='py-3'> | |||
| @@ -198,7 +197,6 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({ | |||
| await sleep(2500) | |||
| await startQueryStatus() | |||
| } | |||
| // eslint-disable-next-line react-hooks/exhaustive-deps | |||
| }, [stopQueryStatus]) | |||
| useEffect(() => { | |||
| @@ -288,7 +286,7 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({ | |||
| {/* progress bar */} | |||
| <div className={cn( | |||
| 'flex h-2 w-full items-center overflow-hidden rounded-md border border-components-progress-bar-border', | |||
| isEmbedding ? 'bg-components-progress-bar-bg bg-opacity-50' : 'bg-components-progress-bar-bg', | |||
| isEmbedding ? 'bg-components-progress-bar-bg/50' : 'bg-components-progress-bar-bg', | |||
| )}> | |||
| <div | |||
| className={cn( | |||
| @@ -56,7 +56,7 @@ export const EditSlice: FC<EditSliceProps> = (props) => { | |||
| return ( | |||
| <> | |||
| <SliceContainer {...rest} | |||
| className={classNames('block mr-0', className)} | |||
| className={classNames('mr-0 block', className)} | |||
| ref={(ref) => { | |||
| refs.setReference(ref) | |||
| if (ref) | |||
| @@ -13,7 +13,7 @@ export const SliceContainer: FC<SliceContainerProps> = ( | |||
| ) => { | |||
| const { className, ...rest } = props | |||
| return <span {...rest} ref={ref} className={classNames( | |||
| 'group align-bottom mr-1 select-none text-sm', | |||
| 'group mr-1 select-none align-bottom text-sm', | |||
| className, | |||
| )} /> | |||
| } | |||
| @@ -30,7 +30,7 @@ export const SliceLabel: FC<SliceLabelProps> = ( | |||
| const { className, children, labelInnerClassName, ...rest } = props | |||
| return <span {...rest} ref={ref} className={classNames( | |||
| baseStyle, | |||
| 'px-1 bg-state-base-hover-alt group-hover:bg-state-accent-solid group-hover:text-text-primary-on-surface uppercase text-text-tertiary', | |||
| 'bg-state-base-hover-alt px-1 uppercase text-text-tertiary group-hover:bg-state-accent-solid group-hover:text-text-primary-on-surface', | |||
| className, | |||
| )}> | |||
| <span className={classNames('text-nowrap', labelInnerClassName)}> | |||
| @@ -51,7 +51,7 @@ export const SliceContent: FC<SliceContentProps> = ( | |||
| const { className, children, ...rest } = props | |||
| return <span {...rest} ref={ref} className={classNames( | |||
| baseStyle, | |||
| 'px-1 bg-state-base-hover group-hover:bg-state-accent-hover-alt group-hover:text-text-primary leading-7 whitespace-pre-line break-all', | |||
| 'whitespace-pre-line break-all bg-state-base-hover px-1 leading-7 group-hover:bg-state-accent-hover-alt group-hover:text-text-primary', | |||
| className, | |||
| )}> | |||
| {children} | |||
| @@ -70,7 +70,7 @@ export const SliceDivider: FC<SliceDividerProps> = ( | |||
| const { className, ...rest } = props | |||
| return <span {...rest} ref={ref} className={classNames( | |||
| baseStyle, | |||
| 'bg-state-base-active group-hover:bg-state-accent-solid text-sm px-[1px]', | |||
| 'bg-state-base-active px-[1px] text-sm group-hover:bg-state-accent-solid', | |||
| className, | |||
| )}> | |||
| {/* use a zero-width space to make the hover area bigger */} | |||
| @@ -14,13 +14,13 @@ export const PreviewContainer: FC<PreviewContainerProps> = forwardRef((props, re | |||
| {...rest} | |||
| ref={ref} | |||
| className={classNames( | |||
| 'flex flex-col w-full h-full overflow-y-auto rounded-l-xl border-t-[0.5px] border-l-[0.5px] border-components-panel-border bg-background-default-lighter shadow shadow-shadow-shadow-5', | |||
| 'flex h-full w-full flex-col overflow-y-auto rounded-l-xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-background-default-lighter shadow shadow-shadow-shadow-5', | |||
| )} | |||
| > | |||
| <header className='border-b border-divider-subtle pb-3 pl-5 pr-4 pt-4'> | |||
| {header} | |||
| </header> | |||
| <main className={classNames('py-5 px-6 w-full h-full', mainClassName)}> | |||
| <main className={classNames('h-full w-full px-6 py-5', mainClassName)}> | |||
| {children} | |||
| </main> | |||
| </div> | |||
| @@ -50,7 +50,7 @@ const IndexMethodRadio = ({ | |||
| ] | |||
| return ( | |||
| <div className={classNames('flex justify-between w-full gap-2')}> | |||
| <div className={classNames('flex w-full justify-between gap-2')}> | |||
| { | |||
| options.map((option) => { | |||
| const isParentChild = docForm === ChunkingMode.parentChild | |||
| @@ -66,10 +66,10 @@ function CopyButton({ code }: { code: string }) { | |||
| <button | |||
| type="button" | |||
| className={classNames( | |||
| 'group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100', | |||
| 'group/button absolute right-4 top-3.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100', | |||
| copied | |||
| ? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20' | |||
| : 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5', | |||
| : 'hover:bg-white/7.5 dark:bg-white/2.5 bg-white/5 dark:hover:bg-white/5', | |||
| )} | |||
| onClick={() => { | |||
| writeTextToClipboard(code).then(() => { | |||
| @@ -35,7 +35,7 @@ export default function IntegrationsPage() { | |||
| { | |||
| integrates.map(integrate => ( | |||
| <div key={integrate.provider} className='mb-2 flex items-center rounded-lg border-[0.5px] border-gray-200 bg-gray-50 px-3 py-2'> | |||
| <div className={classNames('w-8 h-8 mr-3 bg-white rounded-lg border border-gray-100', s[`${integrate.provider}-icon`])} /> | |||
| <div className={classNames('mr-3 h-8 w-8 rounded-lg border border-gray-100 bg-white', s[`${integrate.provider}-icon`])} /> | |||
| <div className='grow'> | |||
| <div className='text-sm font-medium leading-[21px] text-gray-800'>{integrateMap[integrate.provider].name}</div> | |||
| <div className='text-xs font-normal leading-[18px] text-gray-500'>{integrateMap[integrate.provider].description}</div> | |||
| @@ -25,7 +25,7 @@ const Collapse = ({ | |||
| const toggle = () => setOpen(!open) | |||
| return ( | |||
| <div className={classNames('bg-background-section-burn rounded-xl overflow-hidden', wrapperClassName)}> | |||
| <div className={classNames('overflow-hidden rounded-xl bg-background-section-burn', wrapperClassName)}> | |||
| <div className='flex cursor-pointer items-center justify-between px-3 py-2 text-xs font-medium leading-[18px] text-text-secondary' onClick={toggle}> | |||
| {title} | |||
| { | |||
| @@ -11,7 +11,7 @@ const ModelBadge: FC<ModelBadgeProps> = ({ | |||
| }) => { | |||
| return ( | |||
| <div className={classNames( | |||
| 'flex items-center px-1 h-[18px] rounded-[5px] border border-divider-deep system-2xs-medium-uppercase text-text-tertiary cursor-default', | |||
| 'system-2xs-medium-uppercase flex h-[18px] cursor-default items-center rounded-[5px] border border-divider-deep px-1 text-text-tertiary', | |||
| className, | |||
| )}> | |||
| {children} | |||
| @@ -145,7 +145,7 @@ const ModelLoadBalancingConfigs = ({ | |||
| <> | |||
| <div | |||
| className={classNames( | |||
| 'min-h-16 bg-components-panel-bg border rounded-xl transition-colors', | |||
| 'min-h-16 rounded-xl border bg-components-panel-bg transition-colors', | |||
| (withSwitch || !draftConfig.enabled) ? 'border-components-panel-border' : 'border-util-colors-blue-blue-600', | |||
| (withSwitch || draftConfig.enabled) ? 'cursor-default' : 'cursor-pointer', | |||
| className, | |||
| @@ -259,7 +259,7 @@ const ModelLoadBalancingConfigs = ({ | |||
| <GridMask canvasClassName='!rounded-xl'> | |||
| <div className='mt-2 flex h-14 items-center justify-between rounded-xl border-[0.5px] border-components-panel-border px-4 shadow-md'> | |||
| <div | |||
| className={classNames('text-sm font-semibold leading-tight text-gradient', s.textGradient)} | |||
| className={classNames('text-gradient text-sm font-semibold leading-tight', s.textGradient)} | |||
| > | |||
| {t('common.modelProvider.upgradeForLoadBalancing')} | |||
| </div> | |||
| @@ -137,8 +137,8 @@ const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSav | |||
| <div className='py-2'> | |||
| <div | |||
| className={classNames( | |||
| 'min-h-16 bg-components-panel-bg border rounded-xl transition-colors', | |||
| draftConfig.enabled ? 'border-components-panel-border cursor-pointer' : 'border-util-colors-blue-blue-600 cursor-default', | |||
| 'min-h-16 rounded-xl border bg-components-panel-bg transition-colors', | |||
| draftConfig.enabled ? 'cursor-pointer border-components-panel-border' : 'cursor-default border-util-colors-blue-blue-600', | |||
| )} | |||
| onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined} | |||
| > | |||
| @@ -17,9 +17,9 @@ export default function AppBack({ curApp }: IAppBackProps) { | |||
| return ( | |||
| <div | |||
| className={classNames(` | |||
| flex items-center h-7 pl-2.5 pr-2 | |||
| text-[#1C64F2] font-semibold cursor-pointer | |||
| rounded-[10px] | |||
| flex h-7 cursor-pointer items-center rounded-[10px] | |||
| pl-2.5 pr-2 font-semibold | |||
| text-[#1C64F2] | |||
| ${curApp && 'hover:bg-[#EBF5FF]'} | |||
| `)} | |||
| onMouseEnter={() => setHovered(true)} | |||
| @@ -47,7 +47,7 @@ export default function Indicator({ | |||
| }: IndicatorProps) { | |||
| return ( | |||
| <div className={classNames( | |||
| 'w-2 h-2 border border-solid rounded-[3px]', | |||
| 'h-2 w-2 rounded-[3px] border border-solid', | |||
| BACKGROUND_MAP[color], | |||
| BORDER_MAP[color], | |||
| SHADOW_MAP[color], | |||
| @@ -36,9 +36,9 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => { | |||
| <div | |||
| data-tooltip-id='workflow.undo' | |||
| className={ | |||
| classNames('flex items-center px-1.5 w-8 h-8 rounded-md system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer select-none', | |||
| classNames('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', | |||
| (nodesReadOnly || buttonsDisabled.undo) | |||
| && 'hover:bg-transparent text-text-disabled hover:text-text-disabled cursor-not-allowed')} | |||
| && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')} | |||
| onClick={() => !nodesReadOnly && !buttonsDisabled.undo && handleUndo()} | |||
| > | |||
| <RiArrowGoBackLine className='h-4 w-4' /> | |||
| @@ -48,9 +48,9 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => { | |||
| <div | |||
| data-tooltip-id='workflow.redo' | |||
| className={ | |||
| classNames('flex items-center px-1.5 w-8 h-8 rounded-md system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer select-none', | |||
| classNames('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', | |||
| (nodesReadOnly || buttonsDisabled.redo) | |||
| && 'hover:bg-transparent text-text-disabled hover:text-text-disabled cursor-not-allowed', | |||
| && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled', | |||
| )} | |||
| onClick={() => !nodesReadOnly && !buttonsDisabled.redo && handleRedo()} | |||
| > | |||
| @@ -127,7 +127,7 @@ const ViewWorkflowHistory = () => { | |||
| > | |||
| <div | |||
| className={ | |||
| classNames('flex items-center justify-center w-8 h-8 rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer', | |||
| classNames('flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', | |||
| open && 'bg-state-accent-active text-text-accent', | |||
| nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled', | |||
| )} | |||
| @@ -5,7 +5,7 @@ export type GroupLabelProps = ComponentProps<'div'> | |||
| export const GroupLabel: FC<GroupLabelProps> = (props) => { | |||
| const { children, className, ...rest } = props | |||
| return <div {...rest} className={classNames('mb-1 system-2xs-medium-uppercase text-text-tertiary', className)}> | |||
| return <div {...rest} className={classNames('system-2xs-medium-uppercase mb-1 text-text-tertiary', className)}> | |||
| {children} | |||
| </div> | |||
| } | |||
| @@ -66,7 +66,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({ | |||
| > | |||
| <div | |||
| className={classNames( | |||
| 'flex items-center px-2 py-1 gap-0.5 rounded-lg bg-components-input-bg-normal', | |||
| 'flex items-center gap-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1', | |||
| disabled ? 'cursor-not-allowed !bg-components-input-bg-disabled' : 'cursor-pointer hover:bg-state-base-hover-alt', | |||
| open && 'bg-state-base-hover-alt', | |||
| className, | |||
| @@ -99,7 +99,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({ | |||
| <div | |||
| key={item.value} | |||
| className={classNames( | |||
| 'flex items-center px-2 py-1 gap-1 self-stretch rounded-lg', | |||
| 'flex items-center gap-1 self-stretch rounded-lg px-2 py-1', | |||
| 'cursor-pointer hover:bg-state-base-hover', | |||
| )} | |||
| onClick={() => { | |||
| @@ -13,7 +13,7 @@ const ErrorMessage: FC<ErrorMessageProps> = ({ | |||
| }) => { | |||
| return ( | |||
| <div className={classNames( | |||
| 'flex gap-x-1 mt-1 p-2 rounded-lg border-[0.5px] border-components-panel-border bg-toast-error-bg', | |||
| 'mt-1 flex gap-x-1 rounded-lg border-[0.5px] border-components-panel-border bg-toast-error-bg p-2', | |||
| className, | |||
| )}> | |||
| <RiErrorWarningFill className='h-4 w-4 shrink-0 text-text-destructive' /> | |||