mirror of
https://github.com/langgenius/dify.git
synced 2026-07-31 01:09:32 +08:00
chore: canonicalize Tailwind classes (#39762)
This commit is contained in:
Stephen Zhou
GitHub
parent
10621b5a9e
commit
0441d27cac
@ -3,6 +3,22 @@ import path from 'node:path'
|
||||
|
||||
const rootDir = import.meta.dirname
|
||||
const difyUiPackageJson = path.resolve(rootDir, 'packages/dify-ui/package.json')
|
||||
const enableTailwindCanonicalClasses = process.env.TAILWIND_CANONICAL_CLASSES === 'true'
|
||||
const tailwindCanonicalClassesOverride = {
|
||||
files: [
|
||||
'web/**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}',
|
||||
'packages/dify-ui/**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}',
|
||||
],
|
||||
rules: {
|
||||
'better-tailwindcss/enforce-canonical-classes': [
|
||||
'warn',
|
||||
{
|
||||
collapse: false,
|
||||
logical: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
} satisfies NonNullable<OxlintConfig['overrides']>[number]
|
||||
|
||||
/**
|
||||
* Oxlint equivalent of the ESLint configurations that were active before the migration.
|
||||
@ -55,6 +71,7 @@ export const lintConfig = {
|
||||
jsPlugins: [
|
||||
'@tanstack/eslint-plugin-query',
|
||||
'eslint-plugin-antfu',
|
||||
...(enableTailwindCanonicalClasses ? ['eslint-plugin-better-tailwindcss'] : []),
|
||||
'eslint-plugin-command',
|
||||
'eslint-plugin-erasable-syntax-only',
|
||||
{
|
||||
@ -86,6 +103,15 @@ export const lintConfig = {
|
||||
typeCheck: true,
|
||||
},
|
||||
settings: {
|
||||
...(enableTailwindCanonicalClasses
|
||||
? {
|
||||
'better-tailwindcss': {
|
||||
cwd: path.resolve(rootDir, 'web'),
|
||||
entryPoint: 'app/styles/globals.css',
|
||||
rootFontSize: 16,
|
||||
},
|
||||
}
|
||||
: {}),
|
||||
'react-x': {
|
||||
additionalStateHooks: '/^use\\w*State(?:s)?|useAtom$/u',
|
||||
},
|
||||
@ -425,6 +451,7 @@ export const lintConfig = {
|
||||
'no-undef': 'error',
|
||||
},
|
||||
overrides: [
|
||||
...(enableTailwindCanonicalClasses ? [tailwindCanonicalClassesOverride] : []),
|
||||
{
|
||||
files: ['**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}'],
|
||||
rules: {
|
||||
|
||||
@ -10,6 +10,8 @@
|
||||
"lint:oxlint": "vp lint",
|
||||
"lint:oxlint:fix": "vp lint --fix",
|
||||
"lint:oxlint:quiet": "vp lint --quiet",
|
||||
"lint:tailwind": "TAILWIND_CANONICAL_CLASSES=true vp lint web packages/dify-ui",
|
||||
"lint:tailwind:fix": "TAILWIND_CANONICAL_CLASSES=true vp lint --fix web packages/dify-ui",
|
||||
"lint:eslint": "eslint --concurrency=auto",
|
||||
"lint:eslint:fix": "eslint --fix --concurrency=auto",
|
||||
"lint:eslint:quiet": "eslint --quiet --concurrency=auto"
|
||||
@ -27,6 +29,7 @@
|
||||
"eslint": "catalog:",
|
||||
"eslint-markdown": "catalog:",
|
||||
"eslint-plugin-antfu": "catalog:",
|
||||
"eslint-plugin-better-tailwindcss": "catalog:",
|
||||
"eslint-plugin-command": "catalog:",
|
||||
"eslint-plugin-erasable-syntax-only": "catalog:",
|
||||
"eslint-plugin-hyoban": "catalog:",
|
||||
|
||||
@ -119,7 +119,7 @@ const autocompleteInputVariants = cva(
|
||||
variants: {
|
||||
size: {
|
||||
small: 'px-2 py-1 system-xs-regular',
|
||||
medium: 'px-3 py-[7px] system-sm-regular',
|
||||
medium: 'px-3 py-1.75 system-sm-regular',
|
||||
large: 'px-4 py-2 system-md-regular',
|
||||
},
|
||||
},
|
||||
|
||||
@ -7,41 +7,41 @@ import { cva } from 'class-variance-authority'
|
||||
import { cn } from '../cn'
|
||||
|
||||
export const buttonVariants = cva(
|
||||
'inline-flex cursor-pointer items-center justify-center whitespace-nowrap outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid data-[disabled]:cursor-not-allowed',
|
||||
'inline-flex cursor-pointer items-center justify-center whitespace-nowrap outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid data-disabled:cursor-not-allowed',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
primary: [
|
||||
'border-components-button-primary-border bg-components-button-primary-bg text-components-button-primary-text shadow-sm',
|
||||
'hover:border-components-button-primary-border-hover hover:bg-components-button-primary-bg-hover',
|
||||
'data-[disabled]:border-components-button-primary-border-disabled data-[disabled]:bg-components-button-primary-bg-disabled data-[disabled]:text-components-button-primary-text-disabled data-[disabled]:shadow-none',
|
||||
'data-disabled:border-components-button-primary-border-disabled data-disabled:bg-components-button-primary-bg-disabled data-disabled:text-components-button-primary-text-disabled data-disabled:shadow-none',
|
||||
],
|
||||
secondary: [
|
||||
'border-[0.5px] shadow-xs backdrop-blur-[5px]',
|
||||
'border-components-button-secondary-border bg-components-button-secondary-bg text-components-button-secondary-text',
|
||||
'hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover',
|
||||
'data-[disabled]:border-components-button-secondary-border-disabled data-[disabled]:bg-components-button-secondary-bg-disabled data-[disabled]:text-components-button-secondary-text-disabled data-[disabled]:backdrop-blur-xs',
|
||||
'data-disabled:border-components-button-secondary-border-disabled data-disabled:bg-components-button-secondary-bg-disabled data-disabled:text-components-button-secondary-text-disabled data-disabled:backdrop-blur-xs',
|
||||
],
|
||||
'secondary-accent': [
|
||||
'border-[0.5px] shadow-xs',
|
||||
'border-components-button-secondary-border bg-components-button-secondary-bg text-components-button-secondary-accent-text',
|
||||
'hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover',
|
||||
'data-[disabled]:border-components-button-secondary-border-disabled data-[disabled]:bg-components-button-secondary-bg-disabled data-[disabled]:text-components-button-secondary-accent-text-disabled',
|
||||
'data-disabled:border-components-button-secondary-border-disabled data-disabled:bg-components-button-secondary-bg-disabled data-disabled:text-components-button-secondary-accent-text-disabled',
|
||||
],
|
||||
tertiary: [
|
||||
'bg-components-button-tertiary-bg text-components-button-tertiary-text',
|
||||
'hover:bg-components-button-tertiary-bg-hover',
|
||||
'data-[disabled]:bg-components-button-tertiary-bg-disabled data-[disabled]:text-components-button-tertiary-text-disabled',
|
||||
'data-disabled:bg-components-button-tertiary-bg-disabled data-disabled:text-components-button-tertiary-text-disabled',
|
||||
],
|
||||
ghost: [
|
||||
'text-components-button-ghost-text',
|
||||
'hover:bg-components-button-ghost-bg-hover',
|
||||
'data-[disabled]:text-components-button-ghost-text-disabled',
|
||||
'data-disabled:text-components-button-ghost-text-disabled',
|
||||
],
|
||||
'ghost-accent': [
|
||||
'text-components-button-secondary-accent-text',
|
||||
'hover:bg-state-accent-hover',
|
||||
'data-[disabled]:text-components-button-secondary-accent-text-disabled',
|
||||
'data-disabled:text-components-button-secondary-accent-text-disabled',
|
||||
],
|
||||
},
|
||||
size: {
|
||||
@ -61,7 +61,7 @@ export const buttonVariants = cva(
|
||||
class: [
|
||||
'border-components-button-destructive-primary-border bg-components-button-destructive-primary-bg text-components-button-destructive-primary-text',
|
||||
'hover:border-components-button-destructive-primary-border-hover hover:bg-components-button-destructive-primary-bg-hover',
|
||||
'data-[disabled]:border-components-button-destructive-primary-border-disabled data-[disabled]:bg-components-button-destructive-primary-bg-disabled data-[disabled]:text-components-button-destructive-primary-text-disabled data-[disabled]:shadow-none',
|
||||
'data-disabled:border-components-button-destructive-primary-border-disabled data-disabled:bg-components-button-destructive-primary-bg-disabled data-disabled:text-components-button-destructive-primary-text-disabled data-disabled:shadow-none',
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -70,7 +70,7 @@ export const buttonVariants = cva(
|
||||
class: [
|
||||
'border-components-button-destructive-secondary-border bg-components-button-destructive-secondary-bg text-components-button-destructive-secondary-text',
|
||||
'hover:border-components-button-destructive-secondary-border-hover hover:bg-components-button-destructive-secondary-bg-hover',
|
||||
'data-[disabled]:border-components-button-destructive-secondary-border-disabled data-[disabled]:bg-components-button-destructive-secondary-bg-disabled data-[disabled]:text-components-button-destructive-secondary-text-disabled',
|
||||
'data-disabled:border-components-button-destructive-secondary-border-disabled data-disabled:bg-components-button-destructive-secondary-bg-disabled data-disabled:text-components-button-destructive-secondary-text-disabled',
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -79,7 +79,7 @@ export const buttonVariants = cva(
|
||||
class: [
|
||||
'bg-components-button-destructive-tertiary-bg text-components-button-destructive-tertiary-text',
|
||||
'hover:bg-components-button-destructive-tertiary-bg-hover',
|
||||
'data-[disabled]:bg-components-button-destructive-tertiary-bg-disabled data-[disabled]:text-components-button-destructive-tertiary-text-disabled',
|
||||
'data-disabled:bg-components-button-destructive-tertiary-bg-disabled data-disabled:text-components-button-destructive-tertiary-text-disabled',
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -88,7 +88,7 @@ export const buttonVariants = cva(
|
||||
class: [
|
||||
'text-components-button-destructive-ghost-text',
|
||||
'hover:bg-components-button-destructive-ghost-bg-hover',
|
||||
'data-[disabled]:text-components-button-destructive-ghost-text-disabled',
|
||||
'data-disabled:text-components-button-destructive-ghost-text-disabled',
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@ -166,7 +166,7 @@ const comboboxInputVariants = cva(
|
||||
variants: {
|
||||
size: {
|
||||
small: 'px-2 py-1 system-xs-regular',
|
||||
medium: 'px-3 py-[7px] system-sm-regular',
|
||||
medium: 'px-3 py-1.75 system-sm-regular',
|
||||
large: 'px-4 py-2 system-md-regular',
|
||||
},
|
||||
},
|
||||
|
||||
@ -278,7 +278,7 @@ const OutsideScrollingContentDemo = () => {
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger render={<Button />}>Review long release notes</DialogTrigger>
|
||||
<DialogPortal>
|
||||
<DialogBackdrop className="duration-[600ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:duration-[350ms] data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)]" />
|
||||
<DialogBackdrop className="duration-600 ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:duration-350 data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)]" />
|
||||
<DialogViewport className="group/dialog">
|
||||
<ScrollAreaRoot className="h-full overscroll-contain group-data-ending-style/dialog:pointer-events-none">
|
||||
<ScrollAreaViewport
|
||||
@ -290,7 +290,7 @@ const OutsideScrollingContentDemo = () => {
|
||||
<DialogPopup
|
||||
ref={popupRef}
|
||||
initialFocus={popupRef}
|
||||
className="relative mx-auto flex w-120 max-w-[calc(100vw-2rem)] flex-col overflow-hidden outline-hidden transition-[translate] duration-[700ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-ending-style:translate-y-[max(100dvh,100%)] data-ending-style:scale-100 data-ending-style:opacity-100 data-ending-style:duration-[350ms] data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] data-starting-style:translate-y-[100dvh] data-starting-style:scale-100 data-starting-style:opacity-100"
|
||||
className="relative mx-auto flex w-120 max-w-[calc(100vw-2rem)] flex-col overflow-hidden outline-hidden transition-[translate] duration-700 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-ending-style:translate-y-[max(100dvh,100%)] data-ending-style:scale-100 data-ending-style:opacity-100 data-ending-style:duration-350 data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] data-starting-style:translate-y-[100dvh] data-starting-style:scale-100 data-starting-style:opacity-100"
|
||||
>
|
||||
<DialogCloseButton />
|
||||
<ReleaseNoteHeader
|
||||
@ -323,12 +323,12 @@ export const OutsidePopupElements: Story = {
|
||||
<DialogPortal>
|
||||
<DialogBackdrop className="min-h-dvh" />
|
||||
<DialogViewport className="grid place-items-center px-4 py-12 xl:py-6">
|
||||
<DialogPopup className="group/popup pointer-events-none relative flex h-full w-full max-w-[70rem] justify-center border-0 bg-transparent shadow-none transition-opacity data-ending-style:scale-100 data-ending-style:opacity-0 data-starting-style:scale-100 data-starting-style:opacity-0">
|
||||
<DialogPopup className="group/popup pointer-events-none relative flex h-full w-full max-w-280 justify-center border-0 bg-transparent shadow-none transition-opacity data-ending-style:scale-100 data-ending-style:opacity-0 data-starting-style:scale-100 data-starting-style:opacity-0">
|
||||
<DialogCloseButton
|
||||
aria-label="Close"
|
||||
className="pointer-events-auto absolute -top-10 right-0 z-10 flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg text-text-tertiary shadow-xs outline-hidden hover:bg-components-button-secondary-bg-hover hover:text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid xl:top-0"
|
||||
></DialogCloseButton>
|
||||
<div className="pointer-events-auto flex h-full w-full max-w-[70rem] flex-col overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-starting-style/popup:scale-105">
|
||||
<div className="pointer-events-auto flex h-full w-full max-w-280 flex-col overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-starting-style/popup:scale-105">
|
||||
<div className="grid gap-2">
|
||||
<DialogTitle className="text-lg leading-7 font-semibold text-text-primary">
|
||||
Knowledge review
|
||||
|
||||
@ -247,7 +247,7 @@ export const Positions: Story = {
|
||||
<DrawerPortal>
|
||||
<DrawerBackdrop className="fixed" />
|
||||
<DrawerViewport className="flex items-end justify-center">
|
||||
<DrawerPopup className="-mb-12 touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)] data-[swipe-direction=down]:max-h-[calc(80dvh_+_3rem)] data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_3rem_+_2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_3rem_+_2px))]">
|
||||
<DrawerPopup className="-mb-12 touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[swipe-direction=down]:max-h-[calc(80dvh+3rem)] data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-3rem+2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-3rem+2px))]">
|
||||
<div className={handleClassName} />
|
||||
<DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-12">
|
||||
<div className="mx-auto w-full max-w-lg px-6 pt-6 pb-4 text-center">
|
||||
@ -258,7 +258,7 @@ export const Positions: Story = {
|
||||
This drawer uses the default swipeDirection="down" bottom sheet behavior.
|
||||
</DrawerDescription>
|
||||
</div>
|
||||
<div className="mx-auto min-h-0 w-full max-w-128 flex-1 overflow-y-auto px-6 pb-6">
|
||||
<div className="mx-auto min-h-0 w-full max-w-lg flex-1 overflow-y-auto px-6 pb-6">
|
||||
<div className="rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg-alt p-4 text-sm/5 text-text-secondary">
|
||||
The drag handle sits at the top because the sheet dismisses downward.
|
||||
</div>
|
||||
@ -278,9 +278,9 @@ export const Positions: Story = {
|
||||
<DrawerPortal>
|
||||
<DrawerBackdrop className="fixed" />
|
||||
<DrawerViewport className="flex items-start justify-center">
|
||||
<DrawerPopup className="-mt-12 touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)] data-[swipe-direction=up]:max-h-[calc(80dvh_+_3rem)] data-[swipe-direction=up]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(-100%_+_3rem_-_2px))] data-starting-style:data-[swipe-direction=up]:transform-[translateY(calc(-100%_+_3rem_-_2px))]">
|
||||
<DrawerPopup className="-mt-12 touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[swipe-direction=up]:max-h-[calc(80dvh+3rem)] data-[swipe-direction=up]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(-100%+3rem-2px))] data-starting-style:data-[swipe-direction=up]:transform-[translateY(calc(-100%+3rem-2px))]">
|
||||
<DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pt-12">
|
||||
<div className="mx-auto w-full max-w-128 px-6 pt-6 pb-4 text-center">
|
||||
<div className="mx-auto w-full max-w-lg px-6 pt-6 pb-4 text-center">
|
||||
<DrawerTitle className="text-lg/6 font-semibold text-text-primary">
|
||||
Top sheet
|
||||
</DrawerTitle>
|
||||
@ -288,7 +288,7 @@ export const Positions: Story = {
|
||||
This drawer is positioned with swipeDirection="up" and dismisses upward.
|
||||
</DrawerDescription>
|
||||
</div>
|
||||
<div className="mx-auto min-h-0 w-full max-w-128 flex-1 overflow-y-auto px-6 pb-6">
|
||||
<div className="mx-auto min-h-0 w-full max-w-lg flex-1 overflow-y-auto px-6 pb-6">
|
||||
<div className="rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg-alt p-4 text-sm/5 text-text-secondary">
|
||||
The drag handle sits at the bottom because the sheet dismisses upward.
|
||||
</div>
|
||||
@ -331,9 +331,9 @@ function SnapPointsDemo() {
|
||||
className={cn(
|
||||
'relative touch-none overflow-visible',
|
||||
'[--bleed:3rem] [--top-margin:1rem]',
|
||||
'pb-[max(0px,calc(var(--drawer-snap-point-offset,0px)_+_var(--drawer-swipe-movement-y,0px)))]',
|
||||
'pb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)))]',
|
||||
'after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-(--bleed) after:bg-inherit after:content-[""]',
|
||||
'data-[swipe-direction=down]:max-h-[calc(100dvh_-_var(--top-margin))]',
|
||||
'data-[swipe-direction=down]:max-h-[calc(100dvh-var(--top-margin))]',
|
||||
'data-ending-style:pb-0 data-starting-style:pb-0',
|
||||
)}
|
||||
>
|
||||
@ -343,7 +343,7 @@ function SnapPointsDemo() {
|
||||
Snap points
|
||||
</DrawerTitle>
|
||||
</div>
|
||||
<DrawerContent className="min-h-0 flex-1 touch-auto overflow-y-auto overscroll-contain px-6 pt-4 pb-[calc(1.5rem_+_env(safe-area-inset-bottom,0))]">
|
||||
<DrawerContent className="min-h-0 flex-1 touch-auto overflow-y-auto overscroll-contain px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0))]">
|
||||
<div className="mx-auto w-full max-w-90">
|
||||
<DrawerDescription className="mb-4 text-center text-sm/5 text-text-tertiary">
|
||||
Drag the sheet to snap between a compact peek and a near full-height view.
|
||||
@ -392,19 +392,19 @@ export const NestedDrawers: Story = {
|
||||
<DrawerViewport>
|
||||
<DrawerPopup
|
||||
className={cn(
|
||||
'[--bleed:3rem] [--stack-scale:calc(1_-_(var(--nested-drawers,0)_*_var(--stack-step)))] [--stack-step:0.05]',
|
||||
'[--stack-height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))_-_var(--bleed)))]',
|
||||
'[--bleed:3rem] [--stack-scale:calc(1-(var(--nested-drawers,0)*var(--stack-step)))] [--stack-step:0.05]',
|
||||
'[--stack-height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))]',
|
||||
'-mb-12 origin-bottom touch-auto',
|
||||
'after:pointer-events-none after:absolute after:inset-0 after:bg-transparent after:transition-[background-color] after:duration-200 after:content-[""]',
|
||||
'data-[swipe-direction=down]:h-(--drawer-height) data-[swipe-direction=down]:max-h-[calc(82dvh_+_3rem)]',
|
||||
'data-[swipe-direction=down]:transform-[translateY(calc(var(--drawer-snap-point-offset,0px)_+_var(--drawer-swipe-movement-y,0px)))_scale(var(--stack-scale))]',
|
||||
'data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_var(--bleed)_+_2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_var(--bleed)_+_2px))]',
|
||||
'data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)]',
|
||||
'data-nested-drawer-open:data-[swipe-direction=down]:h-[calc(var(--stack-height)_+_var(--bleed))]',
|
||||
'data-[swipe-direction=down]:h-(--drawer-height) data-[swipe-direction=down]:max-h-[calc(82dvh+3rem)]',
|
||||
'data-[swipe-direction=down]:transform-[translateY(calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)))_scale(var(--stack-scale))]',
|
||||
'data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-var(--bleed)+2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-var(--bleed)+2px))]',
|
||||
'data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)]',
|
||||
'data-nested-drawer-open:data-[swipe-direction=down]:h-[calc(var(--stack-height)+var(--bleed))]',
|
||||
'data-nested-drawer-open:overflow-hidden data-nested-drawer-open:shadow-lg',
|
||||
'data-nested-drawer-open:after:bg-black/5',
|
||||
'data-nested-drawer-open:[&_[data-nested-content]]:opacity-0 data-nested-drawer-swiping:[&_[data-nested-content]]:opacity-100',
|
||||
'data-nested-drawer-open:[&_[data-nested-handle]]:opacity-0 data-nested-drawer-swiping:[&_[data-nested-handle]]:opacity-100',
|
||||
'data-nested-drawer-open:**:data-nested-content:opacity-0 data-nested-drawer-swiping:**:data-nested-content:opacity-100',
|
||||
'data-nested-drawer-open:**:data-nested-handle:opacity-0 data-nested-drawer-swiping:**:data-nested-handle:opacity-100',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
@ -437,19 +437,19 @@ export const NestedDrawers: Story = {
|
||||
<DrawerViewport className="flex items-end justify-center">
|
||||
<DrawerPopup
|
||||
className={cn(
|
||||
'[--bleed:3rem] [--stack-scale:calc(1_-_(var(--nested-drawers,0)_*_var(--stack-step)))] [--stack-step:0.05]',
|
||||
'[--stack-height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))_-_var(--bleed)))]',
|
||||
'[--bleed:3rem] [--stack-scale:calc(1-(var(--nested-drawers,0)*var(--stack-step)))] [--stack-step:0.05]',
|
||||
'[--stack-height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))]',
|
||||
'-mb-12 origin-bottom touch-auto',
|
||||
'after:pointer-events-none after:absolute after:inset-0 after:bg-transparent after:transition-[background-color] after:duration-200 after:content-[""]',
|
||||
'data-[swipe-direction=down]:h-(--drawer-height) data-[swipe-direction=down]:max-h-[calc(82dvh_+_3rem)]',
|
||||
'data-[swipe-direction=down]:transform-[translateY(calc(var(--drawer-snap-point-offset,0px)_+_var(--drawer-swipe-movement-y,0px)))_scale(var(--stack-scale))]',
|
||||
'data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_var(--bleed)_+_2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_var(--bleed)_+_2px))]',
|
||||
'data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)]',
|
||||
'data-nested-drawer-open:data-[swipe-direction=down]:h-[calc(var(--stack-height)_+_var(--bleed))]',
|
||||
'data-[swipe-direction=down]:h-(--drawer-height) data-[swipe-direction=down]:max-h-[calc(82dvh+3rem)]',
|
||||
'data-[swipe-direction=down]:transform-[translateY(calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)))_scale(var(--stack-scale))]',
|
||||
'data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-var(--bleed)+2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-var(--bleed)+2px))]',
|
||||
'data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)]',
|
||||
'data-nested-drawer-open:data-[swipe-direction=down]:h-[calc(var(--stack-height)+var(--bleed))]',
|
||||
'data-nested-drawer-open:overflow-hidden data-nested-drawer-open:shadow-lg',
|
||||
'data-nested-drawer-open:after:bg-black/5',
|
||||
'data-nested-drawer-open:[&_[data-nested-content]]:opacity-0 data-nested-drawer-swiping:[&_[data-nested-content]]:opacity-100',
|
||||
'data-nested-drawer-open:[&_[data-nested-handle]]:opacity-0 data-nested-drawer-swiping:[&_[data-nested-handle]]:opacity-100',
|
||||
'data-nested-drawer-open:**:data-nested-content:opacity-0 data-nested-drawer-swiping:**:data-nested-content:opacity-100',
|
||||
'data-nested-drawer-open:**:data-nested-handle:opacity-0 data-nested-drawer-swiping:**:data-nested-handle:opacity-100',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
@ -494,19 +494,19 @@ export const NestedDrawers: Story = {
|
||||
<DrawerViewport className="flex items-end justify-center">
|
||||
<DrawerPopup
|
||||
className={cn(
|
||||
'[--bleed:3rem] [--stack-scale:calc(1_-_(var(--nested-drawers,0)_*_var(--stack-step)))] [--stack-step:0.05]',
|
||||
'[--stack-height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))_-_var(--bleed)))]',
|
||||
'[--bleed:3rem] [--stack-scale:calc(1-(var(--nested-drawers,0)*var(--stack-step)))] [--stack-step:0.05]',
|
||||
'[--stack-height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))]',
|
||||
'-mb-12 origin-bottom touch-auto',
|
||||
'after:pointer-events-none after:absolute after:inset-0 after:bg-transparent after:transition-[background-color] after:duration-200 after:content-[""]',
|
||||
'data-[swipe-direction=down]:h-(--drawer-height) data-[swipe-direction=down]:max-h-[calc(82dvh_+_3rem)]',
|
||||
'data-[swipe-direction=down]:transform-[translateY(calc(var(--drawer-snap-point-offset,0px)_+_var(--drawer-swipe-movement-y,0px)))_scale(var(--stack-scale))]',
|
||||
'data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_var(--bleed)_+_2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_var(--bleed)_+_2px))]',
|
||||
'data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)]',
|
||||
'data-nested-drawer-open:data-[swipe-direction=down]:h-[calc(var(--stack-height)_+_var(--bleed))]',
|
||||
'data-[swipe-direction=down]:h-(--drawer-height) data-[swipe-direction=down]:max-h-[calc(82dvh+3rem)]',
|
||||
'data-[swipe-direction=down]:transform-[translateY(calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px)))_scale(var(--stack-scale))]',
|
||||
'data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-var(--bleed)+2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-var(--bleed)+2px))]',
|
||||
'data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)]',
|
||||
'data-nested-drawer-open:data-[swipe-direction=down]:h-[calc(var(--stack-height)+var(--bleed))]',
|
||||
'data-nested-drawer-open:overflow-hidden data-nested-drawer-open:shadow-lg',
|
||||
'data-nested-drawer-open:after:bg-black/5',
|
||||
'data-nested-drawer-open:[&_[data-nested-content]]:opacity-0 data-nested-drawer-swiping:[&_[data-nested-content]]:opacity-100',
|
||||
'data-nested-drawer-open:[&_[data-nested-handle]]:opacity-0 data-nested-drawer-swiping:[&_[data-nested-handle]]:opacity-100',
|
||||
'data-nested-drawer-open:**:data-nested-content:opacity-0 data-nested-drawer-swiping:**:data-nested-content:opacity-100',
|
||||
'data-nested-drawer-open:**:data-nested-handle:opacity-0 data-nested-drawer-swiping:**:data-nested-handle:opacity-100',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
@ -574,7 +574,7 @@ function IndentEffectDemo() {
|
||||
<DrawerProvider>
|
||||
<div
|
||||
ref={setPortalContainer}
|
||||
className="relative h-[420px] w-[640px] overflow-hidden rounded-2xl border-[0.5px] border-divider-subtle bg-background-default"
|
||||
className="relative h-105 w-160 overflow-hidden rounded-2xl border-[0.5px] border-divider-subtle bg-background-default"
|
||||
>
|
||||
<DrawerIndentBackground className="absolute inset-0 bg-state-accent-hover opacity-0 transition-opacity duration-200 data-active:opacity-100" />
|
||||
<DrawerIndent className="relative flex size-full flex-col items-center justify-center gap-4 bg-background-body transition-[border-radius,transform] duration-200 data-active:scale-[0.96] data-active:rounded-[20px]">
|
||||
@ -591,7 +591,7 @@ function IndentEffectDemo() {
|
||||
<DrawerPortal container={portalContainer}>
|
||||
<DrawerBackdrop />
|
||||
<DrawerViewport className="absolute flex items-end justify-center">
|
||||
<DrawerPopup className="absolute -mb-12 touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)] data-[swipe-direction=down]:max-h-[calc(80dvh_+_3rem)] data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_3rem_+_2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_-_3rem_+_2px))]">
|
||||
<DrawerPopup className="absolute -mb-12 touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[swipe-direction=down]:max-h-[calc(80dvh+3rem)] data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-3rem+2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%-3rem+2px))]">
|
||||
<div className={handleClassName} />
|
||||
<DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-12">
|
||||
<div className="mx-auto w-full max-w-96 px-6 pt-6 pb-4 text-center">
|
||||
@ -646,7 +646,7 @@ function NonModalDemo() {
|
||||
</div>
|
||||
<DrawerPortal>
|
||||
<DrawerViewport className="pointer-events-none">
|
||||
<DrawerPopup className="pointer-events-auto touch-auto data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-3 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:max-w-[420px] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-r-[0.5px]">
|
||||
<DrawerPopup className="pointer-events-auto touch-auto data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-3 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:max-w-105 data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-r-[0.5px]">
|
||||
<DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
|
||||
<div className="flex shrink-0 items-start justify-between gap-4 px-6 pt-6 pb-4">
|
||||
<div className="min-w-0">
|
||||
@ -732,7 +732,7 @@ export const MobileNavigation: Story = {
|
||||
aria-label="Mobile drawer viewport"
|
||||
>
|
||||
<ScrollAreaContent className="flex min-h-full min-w-0 items-end justify-center pt-8 min-[42rem]:px-16 min-[42rem]:py-16">
|
||||
<DrawerPopup className="relative w-full max-w-[42rem] touch-auto overflow-visible transition-transform duration-600 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-ending-style:duration-350 data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] data-swiping:select-none data-[swipe-direction=down]:inset-auto data-[swipe-direction=down]:max-h-none data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(max(100dvh,100%)_+_2px))] motion-reduce:transition-none min-[42rem]:rounded-2xl min-[42rem]:border-[0.5px] min-[42rem]:border-b-[0.5px]">
|
||||
<DrawerPopup className="relative w-full max-w-2xl touch-auto overflow-visible transition-transform duration-600 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-ending-style:duration-350 data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] data-swiping:select-none data-[swipe-direction=down]:inset-auto data-[swipe-direction=down]:max-h-none data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(max(100dvh,100%)+2px))] motion-reduce:transition-none min-[42rem]:rounded-2xl min-[42rem]:border-[0.5px] min-[42rem]:border-b-[0.5px]">
|
||||
<nav
|
||||
aria-label="Mobile navigation"
|
||||
className="relative flex flex-col bg-components-panel-bg"
|
||||
@ -801,7 +801,7 @@ function SwipeToOpenDemo() {
|
||||
return (
|
||||
<div
|
||||
ref={setPortalContainer}
|
||||
className="relative h-[360px] w-[560px] overflow-hidden rounded-2xl border-[0.5px] border-divider-subtle bg-background-body"
|
||||
className="relative h-90 w-140 overflow-hidden rounded-2xl border-[0.5px] border-divider-subtle bg-background-body"
|
||||
>
|
||||
<Drawer swipeDirection="right" modal={false}>
|
||||
<DrawerSwipeArea className="absolute inset-y-0 right-0 z-10 flex w-10 touch-none items-center justify-center bg-state-accent-hover text-text-accent">
|
||||
@ -823,7 +823,7 @@ function SwipeToOpenDemo() {
|
||||
<DrawerPortal container={portalContainer}>
|
||||
<DrawerBackdrop className="absolute" />
|
||||
<DrawerViewport className="absolute">
|
||||
<DrawerPopup className="absolute touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)] data-[swipe-direction=right]:-right-12 data-[swipe-direction=right]:h-full data-[swipe-direction=right]:w-[calc(22.5rem_+_3rem)] data-[swipe-direction=right]:max-w-[calc(100%_+_3rem)] data-[swipe-direction=right]:transform-[translateX(var(--drawer-swipe-movement-x,0px))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(100%_-_3rem_+_2px))] data-starting-style:data-[swipe-direction=right]:transform-[translateX(calc(100%_-_3rem_+_2px))]">
|
||||
<DrawerPopup className="absolute touch-auto data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[swipe-direction=right]:-right-12 data-[swipe-direction=right]:h-full data-[swipe-direction=right]:w-102 data-[swipe-direction=right]:max-w-[calc(100%+3rem)] data-[swipe-direction=right]:transform-[translateX(var(--drawer-swipe-movement-x,0px))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(100%-3rem+2px))] data-starting-style:data-[swipe-direction=right]:transform-[translateX(calc(100%-3rem+2px))]">
|
||||
<DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pr-12 pb-0">
|
||||
<div className="flex shrink-0 items-start justify-between gap-4 px-6 pt-6 pb-4">
|
||||
<div className="min-w-0">
|
||||
@ -870,7 +870,7 @@ function ActionSheetDemo() {
|
||||
<DrawerPortal>
|
||||
<DrawerBackdrop className="fixed" />
|
||||
<DrawerViewport className="flex items-end justify-center">
|
||||
<DrawerPopup className="pointer-events-none relative flex w-full max-w-80 flex-col gap-3 overflow-visible border-none bg-transparent px-4 pb-[calc(1rem_+_env(safe-area-inset-bottom,0px))] shadow-none data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)] data-[swipe-direction=down]:inset-auto data-[swipe-direction=down]:max-h-none data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_+_1rem_+_2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%_+_1rem_+_2px))]">
|
||||
<DrawerPopup className="pointer-events-none relative flex w-full max-w-80 flex-col gap-3 overflow-visible border-none bg-transparent px-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] shadow-none data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[swipe-direction=down]:inset-auto data-[swipe-direction=down]:max-h-none data-[swipe-direction=down]:transform-[translateY(var(--drawer-swipe-movement-y,0px))] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(100%+1rem+2px))] data-starting-style:data-[swipe-direction=down]:transform-[translateY(calc(100%+1rem+2px))]">
|
||||
<DrawerContent className="pointer-events-auto flex-none overflow-hidden rounded-2xl border-[0.5px] border-divider-subtle bg-components-panel-bg p-0 pb-0 shadow-xl">
|
||||
<DrawerTitle className="sr-only">App actions</DrawerTitle>
|
||||
<DrawerDescription className="sr-only">
|
||||
@ -1035,7 +1035,7 @@ export const StackingAndAnimations: Story = {
|
||||
<DrawerPortal>
|
||||
<DrawerBackdrop className="fixed" />
|
||||
<DrawerViewport>
|
||||
<DrawerPopup className="duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)] data-nested-drawer-open:brightness-95 data-swiping:shadow-none data-[swipe-direction=right]:max-w-105 data-[swipe-direction=right]:transform-[translateX(var(--drawer-swipe-movement-x,0px))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(100%_+_2px))] data-starting-style:data-[swipe-direction=right]:transform-[translateX(calc(100%_+_2px))] data-nested-drawer-open:[&_[data-animation-content]]:opacity-0 data-nested-drawer-swiping:[&_[data-animation-content]]:opacity-100">
|
||||
<DrawerPopup className="duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:brightness-95 data-nested-drawer-open:**:data-animation-content:opacity-0 data-nested-drawer-swiping:**:data-animation-content:opacity-100 data-swiping:shadow-none data-[swipe-direction=right]:max-w-105 data-[swipe-direction=right]:transform-[translateX(var(--drawer-swipe-movement-x,0px))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(100%+2px))] data-starting-style:data-[swipe-direction=right]:transform-[translateX(calc(100%+2px))]">
|
||||
<DrawerContent
|
||||
data-animation-content
|
||||
className="flex min-h-0 flex-1 flex-col p-0 pb-0 transition-opacity duration-300"
|
||||
@ -1066,7 +1066,7 @@ export const StackingAndAnimations: Story = {
|
||||
</DrawerTrigger>
|
||||
<DrawerPortal>
|
||||
<DrawerViewport>
|
||||
<DrawerPopup className="duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:duration-[calc(var(--drawer-swipe-strength)_*_400ms)] data-swiping:shadow-none data-[swipe-direction=right]:max-w-105 data-[swipe-direction=right]:transform-[translateX(var(--drawer-swipe-movement-x,0px))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(100%_+_2px))] data-starting-style:data-[swipe-direction=right]:transform-[translateX(calc(100%_+_2px))]">
|
||||
<DrawerPopup className="duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:shadow-none data-[swipe-direction=right]:max-w-105 data-[swipe-direction=right]:transform-[translateX(var(--drawer-swipe-movement-x,0px))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(100%+2px))] data-starting-style:data-[swipe-direction=right]:transform-[translateX(calc(100%+2px))]">
|
||||
<DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
|
||||
<div className="flex shrink-0 items-start justify-between gap-4 px-6 pt-6 pb-4">
|
||||
<div className="min-w-0">
|
||||
|
||||
@ -30,7 +30,7 @@ function fileTreeRowClassName({ className }: { className?: string }) {
|
||||
return cn(
|
||||
'group/file-tree-row relative flex h-6 w-full min-w-0 cursor-pointer items-center rounded-md ps-2 pe-1.5 text-start outline-hidden select-none',
|
||||
'hover:bg-state-base-hover focus-visible:inset-ring-2 focus-visible:inset-ring-state-accent-solid',
|
||||
'data-[selected]:bg-state-base-active',
|
||||
'data-selected:bg-state-base-active',
|
||||
'data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-transparent',
|
||||
'aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent',
|
||||
className,
|
||||
@ -180,7 +180,7 @@ export function FileTreeGuide({ render, className, ...props }: FileTreeGuideProp
|
||||
const defaultProps: useRender.ElementProps<'span'> = {
|
||||
'aria-hidden': true,
|
||||
className: cn(
|
||||
'relative h-6 w-5 shrink-0 before:absolute before:top-0 before:bottom-[-1px] before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-divider-subtle',
|
||||
'relative h-6 w-5 shrink-0 before:absolute before:top-0 before:-bottom-px before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-divider-subtle',
|
||||
className,
|
||||
),
|
||||
}
|
||||
@ -271,7 +271,7 @@ export function FileTreeLabel({ render, className, children, ...props }: FileTre
|
||||
'w-0 min-w-0 flex-1 truncate rounded-[5px] px-1 py-0.5',
|
||||
labelText &&
|
||||
'after:invisible after:block after:h-0 after:overflow-hidden after:system-sm-medium after:content-[attr(data-label)]',
|
||||
'system-sm-regular text-text-secondary group-data-[selected]/file-tree-row:system-sm-medium group-data-[selected]/file-tree-row:text-text-primary',
|
||||
'system-sm-regular text-text-secondary group-data-selected/file-tree-row:system-sm-medium group-data-selected/file-tree-row:text-text-primary',
|
||||
className,
|
||||
),
|
||||
children,
|
||||
|
||||
@ -24,9 +24,9 @@ export const textControlVariants = cva(
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
small: 'rounded-md px-2 py-[3px] system-xs-regular',
|
||||
medium: 'rounded-lg px-3 py-[7px] system-sm-regular',
|
||||
large: 'rounded-[10px] px-4 py-[7px] system-md-regular',
|
||||
small: 'rounded-md px-2 py-0.75 system-xs-regular',
|
||||
medium: 'rounded-lg px-3 py-1.75 system-sm-regular',
|
||||
large: 'rounded-[10px] px-4 py-1.75 system-md-regular',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@ -59,7 +59,7 @@ export const numberFieldInputVariants = cva(
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
medium: 'px-3 py-[7px] system-sm-regular',
|
||||
medium: 'px-3 py-1.75 system-sm-regular',
|
||||
large: 'px-4 py-2 system-md-regular',
|
||||
},
|
||||
},
|
||||
|
||||
@ -213,7 +213,7 @@ export const ScrollFade: Story = {
|
||||
role="region"
|
||||
className={cn(
|
||||
'h-full max-h-full max-w-full rounded-xl bg-components-panel-bg outline-none focus-visible:outline-none',
|
||||
'mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat',
|
||||
'mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%-min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat',
|
||||
)}
|
||||
>
|
||||
<VerticalContent className="flex flex-col gap-4 px-4 py-3 pr-6 system-sm-regular leading-6 text-text-secondary">
|
||||
|
||||
@ -47,7 +47,7 @@ const sliderThumbClassName = cn(
|
||||
'border-components-slider-knob-border bg-components-slider-knob shadow-sm',
|
||||
'transition-[background-color,border-color,box-shadow,opacity] motion-reduce:transition-none',
|
||||
'hover:bg-components-slider-knob-hover',
|
||||
'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-state-accent-solid has-[:focus-visible]:ring-offset-0',
|
||||
'has-focus-visible:ring-2 has-focus-visible:ring-state-accent-solid has-focus-visible:ring-offset-0',
|
||||
'active:shadow-md',
|
||||
'group-data-disabled/slider:border-components-slider-knob-border group-data-disabled/slider:bg-components-slider-knob-disabled group-data-disabled/slider:shadow-none',
|
||||
)
|
||||
|
||||
@ -18,7 +18,7 @@ const switchRootVariants = cva(
|
||||
xs: 'h-2.5 w-3.5 rounded-xs p-0.5',
|
||||
sm: 'h-3 w-5 rounded-[3.5px] p-0.5',
|
||||
md: 'h-4 w-7 rounded-[5px] p-0.5',
|
||||
lg: 'h-5 w-9 rounded-md p-[3px]',
|
||||
lg: 'h-5 w-9 rounded-md p-0.75',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
@ -33,8 +33,8 @@ const switchThumbVariants = cva(
|
||||
variants: {
|
||||
size: {
|
||||
xs: 'h-1.5 w-1 rounded-[1px] data-checked:translate-x-1.5',
|
||||
sm: 'h-2 w-[7px] rounded-xs data-checked:translate-x-[9px]',
|
||||
md: 'h-3 w-2.5 rounded-[3px] data-checked:translate-x-[14px]',
|
||||
sm: 'h-2 w-1.75 rounded-xs data-checked:translate-x-2.25',
|
||||
md: 'h-3 w-2.5 rounded-[3px] data-checked:translate-x-3.5',
|
||||
lg: 'size-3.5 rounded-sm data-checked:translate-x-4',
|
||||
},
|
||||
},
|
||||
|
||||
293
pnpm-lock.yaml
generated
293
pnpm-lock.yaml
generated
@ -333,6 +333,9 @@ catalogs:
|
||||
eslint-plugin-antfu:
|
||||
specifier: 3.2.3
|
||||
version: 3.2.3
|
||||
eslint-plugin-better-tailwindcss:
|
||||
specifier: 4.7.0
|
||||
version: 4.7.0
|
||||
eslint-plugin-command:
|
||||
specifier: 3.5.3
|
||||
version: 3.5.3
|
||||
@ -695,6 +698,9 @@ importers:
|
||||
eslint-plugin-antfu:
|
||||
specifier: 'catalog:'
|
||||
version: 3.2.3(eslint@10.8.0(jiti@2.7.0)(supports-color@10.2.2))
|
||||
eslint-plugin-better-tailwindcss:
|
||||
specifier: 'catalog:'
|
||||
version: 4.7.0(@typescript/typescript6@6.0.2)(eslint@10.8.0(jiti@2.7.0)(supports-color@10.2.2))(oxlint@1.75.0(oxlint-tsgolint@7.0.2001)(vite-plus@0.2.6(@types/node@26.0.1)(@typescript/typescript6@6.0.2)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@voidzero-dev/vite-plus-core@0.2.6(@types/node@26.0.1)(@typescript/typescript6@6.0.2)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.23.1)(yaml@2.9.0))(esbuild@0.28.1)(happy-dom@20.11.1)(jiti@2.7.0)(tsx@4.23.1)(yaml@2.9.0)))(tailwindcss@4.3.3)
|
||||
eslint-plugin-command:
|
||||
specifier: 'catalog:'
|
||||
version: 3.5.3(@typescript-eslint/typescript-estree@8.65.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(@typescript-eslint/utils@8.65.0(@typescript/typescript6@6.0.2)(eslint@10.8.0(jiti@2.7.0)(supports-color@10.2.2))(supports-color@10.2.2))(eslint@10.8.0(jiti@2.7.0)(supports-color@10.2.2))
|
||||
@ -1960,18 +1966,12 @@ packages:
|
||||
peerDependencies:
|
||||
tailwindcss: '*'
|
||||
|
||||
'@emnapi/core@1.11.0':
|
||||
resolution: {integrity: sha512-l9Oo58x0HOP5znGzVhYW9U3e5wVuA4LAZU2AGezTmkhO1CgQRFDhDg4nneHsu/t3WniXg9QrG2nIXL/ZS8ln8Q==}
|
||||
|
||||
'@emnapi/core@1.11.2':
|
||||
resolution: {integrity: sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA==}
|
||||
|
||||
'@emnapi/core@1.9.2':
|
||||
resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
|
||||
|
||||
'@emnapi/runtime@1.11.0':
|
||||
resolution: {integrity: sha512-55coeOFKHv1ywEcUXJtWU5f+Jr/W5tZDvZig8DLKSwUN1JpROQ4rk/SNOQiFWmaR/VKF4zuFyW1B8JduOSv6Pg==}
|
||||
|
||||
'@emnapi/runtime@1.11.1':
|
||||
resolution: {integrity: sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==}
|
||||
|
||||
@ -2239,6 +2239,10 @@ packages:
|
||||
resolution: {integrity: sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==}
|
||||
engines: {node: ^20.19.0 || ^22.13.0 || >=24}
|
||||
|
||||
'@eslint/css-tree@4.0.5':
|
||||
resolution: {integrity: sha512-iPmijIAq4hlIJB86PYmY/fcZORHtjphSqICDbwuw32A/JmkhZQ/K/6TjHE03zqf3n5yABpVcbRAMG8Mi9ojy8g==}
|
||||
engines: {node: ^20.19.0 || ^22.13.0 || >=24}
|
||||
|
||||
'@eslint/markdown@7.5.1':
|
||||
resolution: {integrity: sha512-R8uZemG9dKTbru/DQRPblbJyXpObwKzo8rv1KYGGuPUPtjM4LXBYM9q5CIZAComzZupws3tWbDwam5AFpPLyJQ==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
@ -3425,207 +3429,104 @@ packages:
|
||||
'@oxc-project/types@0.141.0':
|
||||
resolution: {integrity: sha512-S4as7z0j0xQkXcJlyY5ehntwK8/wRkQb9Cyqw+J/N2rkWGQGK0SxD6X6DhQTc7qsxVTBxXbxZtBJh3mr3PtIzQ==}
|
||||
|
||||
'@oxc-resolver/binding-android-arm-eabi@11.21.3':
|
||||
resolution: {integrity: sha512-eNU11A2WNizh04v3uyaJCootrHIaS0B9aHYXvAvVnPNk4xYSjMUjHnhQ6dewPN2MRYDskV85d1N0Aw0WNWhcyg==}
|
||||
cpu: [arm]
|
||||
os: [android]
|
||||
|
||||
'@oxc-resolver/binding-android-arm-eabi@11.24.2':
|
||||
resolution: {integrity: sha512-y09e0L0SRI2OA2tUIrjBgoV3eH5hvUKXNkJqXmNo5V2WxIjyC7I7aJfRLMEVpA8yi95f90gFDvO0VMgrDw+vwA==}
|
||||
cpu: [arm]
|
||||
os: [android]
|
||||
|
||||
'@oxc-resolver/binding-android-arm64@11.21.3':
|
||||
resolution: {integrity: sha512-8Q+ZjTLvn2dIcWsrmhdrEihm7q+ag/k+mkry7Z+t0QbbHaVxXQfvH9AewyVMh/WrpEKhQ3DDgx9fYbqeCpeOEw==}
|
||||
cpu: [arm64]
|
||||
os: [android]
|
||||
|
||||
'@oxc-resolver/binding-android-arm64@11.24.2':
|
||||
resolution: {integrity: sha512-cl4icWaZFnLdg8m6qtnh5rBMuGbxc/ptStFHLeCNwr+2cZjkjNwQu/jYRS0CHlnPecOJMpuS5M6/BH+0J/YkEg==}
|
||||
cpu: [arm64]
|
||||
os: [android]
|
||||
|
||||
'@oxc-resolver/binding-darwin-arm64@11.21.3':
|
||||
resolution: {integrity: sha512-wkh0qKZGHXVUDxFw3oA1TXnU2BDYY/r775oJflGeIr8uDPPoN2pk8gijQIzYRT6hoql/lg3+Tx/SaTn9e2/aGg==}
|
||||
cpu: [arm64]
|
||||
os: [darwin]
|
||||
|
||||
'@oxc-resolver/binding-darwin-arm64@11.24.2':
|
||||
resolution: {integrity: sha512-At29QEMF6HajbQvgY8K6OXnHD1x9rad74xBEfmCB6ZqCGsdq75aK7tOYcTbOanMy8qdIBrfL3SMr3p/lfSlb9w==}
|
||||
cpu: [arm64]
|
||||
os: [darwin]
|
||||
|
||||
'@oxc-resolver/binding-darwin-x64@11.21.3':
|
||||
resolution: {integrity: sha512-HbNc23FAQYbuyDV2vBWMez4u4mrsm5RAkniGZAWqr6lYZ3N4beeqIb776jzwRl8qL2zRhHVXpUj97X0QgogVzg==}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
|
||||
'@oxc-resolver/binding-darwin-x64@11.24.2':
|
||||
resolution: {integrity: sha512-A5Kqr1EUj4oIL5CF4WRssq/o5P0Y11cwoFouMRmQ7YnC/A8V93nv1nb7aSU8HwcgmXropjLNkVTl4MN87cu28Q==}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
|
||||
'@oxc-resolver/binding-freebsd-x64@11.21.3':
|
||||
resolution: {integrity: sha512-K6xNsTUPEUdfrn0+kbMq5nOUB5w1C5pavPQngt4TM2FpN91lP0PBe2srSpamb4d69O7h86oAi/qWX/kZNRSjkw==}
|
||||
cpu: [x64]
|
||||
os: [freebsd]
|
||||
|
||||
'@oxc-resolver/binding-freebsd-x64@11.24.2':
|
||||
resolution: {integrity: sha512-R5xkRBRRz7ceH/P5Jrc6G7FmdUdgpLYyESFAUDVTNQ9K0sGPxcp4ljiwEwEqsvNcQ4sYbMRrWcHHBCu7ksAJVw==}
|
||||
cpu: [x64]
|
||||
os: [freebsd]
|
||||
|
||||
'@oxc-resolver/binding-linux-arm-gnueabihf@11.21.3':
|
||||
resolution: {integrity: sha512-VcFmOpcpWX1zoEy8M58tR2M9YxM+Z9RuQhqAx5q0CTmrruaP7Gveejg75hzd/5sg5nk9G3aLALEa3hE2FsmmTQ==}
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
|
||||
'@oxc-resolver/binding-linux-arm-gnueabihf@11.24.2':
|
||||
resolution: {integrity: sha512-k/RuYL4L/R58IBn3wT5ma3Wh4k62bp1eYCFRWCmMsasUOqL+H6sW0VGFadEzKWXFFlz+2uIMoeMk9ySSZJHgbg==}
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
|
||||
'@oxc-resolver/binding-linux-arm-musleabihf@11.21.3':
|
||||
resolution: {integrity: sha512-quVoxFLBy43hWaQbbDtQNRwAX5vX76mv7n64icAtQcJ3eNgVeblqmkupF/hAneNthdqSlnd1sTjb3aQSaDPaCQ==}
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
|
||||
'@oxc-resolver/binding-linux-arm-musleabihf@11.24.2':
|
||||
resolution: {integrity: sha512-bnHAak3ujYfH5pKk4NieFNbvYvernfoQDgwLddbZ3OtMYrem87/qjlA+u+aKG0oZcqSLGCful/6/CEA+aeAgaA==}
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
|
||||
'@oxc-resolver/binding-linux-arm64-gnu@11.21.3':
|
||||
resolution: {integrity: sha512-X0AqNZgcD07Q4V3RDK18/vYOj/HQT/FnmEFGYS2jTWqY7JO13ryE3TEs3eAIgUJhBnNkpEaiXqz3VK8M7qQhWQ==}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@oxc-resolver/binding-linux-arm64-gnu@11.24.2':
|
||||
resolution: {integrity: sha512-vDT3KHgzYp47gmtNOqL2VNhCyl5Zv643eyxm//A68J8DeUGXrvD1pZFiaT4jSfe+RInfnn1R2yVHye4enx6RnA==}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@oxc-resolver/binding-linux-arm64-musl@11.21.3':
|
||||
resolution: {integrity: sha512-YkaQnaKYdbuaXvRt5Qd0GpbihzVnyfR6z1SpYfIUC6RTu4NF7lDKPjVkYb+jRI2gedVO2rVpN35Y6akG6ud4Lw==}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
'@oxc-resolver/binding-linux-arm64-musl@11.24.2':
|
||||
resolution: {integrity: sha512-+kMlQvbzfyEYtu5FcjE4p+ttBLpKW4d/AsAsuE69BxV6V4twZJeIQZFfD8gh/wqglY0MkPSezWXQH0jBV13MUw==}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
'@oxc-resolver/binding-linux-ppc64-gnu@11.21.3':
|
||||
resolution: {integrity: sha512-gB9HwhrPiFqUzDeEq+y/CgAijz1YdI6BnXz5GaH2Pa9cWdutchlkGFAiAuGb/PjVQpiK6NFKzFuztxrweoit7A==}
|
||||
cpu: [ppc64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@oxc-resolver/binding-linux-ppc64-gnu@11.24.2':
|
||||
resolution: {integrity: sha512-shjfMhmZ3gq9fv/w7bi3PnZlgOPG+2QAOFf0BJF0EgBSIGZ6PMLN2zbGEblTUYB/NKVDRyYhE2ff3dJ1QqNPkA==}
|
||||
cpu: [ppc64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@oxc-resolver/binding-linux-riscv64-gnu@11.21.3':
|
||||
resolution: {integrity: sha512-zjDWBlYk8QGv0H8dsPUWqkfjYIIjG2TvspGkzXL0eImbgxtZorA/klKeHyolevoT3Kvbi+1iMr9Lhrh7jf54Og==}
|
||||
cpu: [riscv64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@oxc-resolver/binding-linux-riscv64-gnu@11.24.2':
|
||||
resolution: {integrity: sha512-zGelwFR5oRo+b69k8Lrzun86DyUHzfKN6cnjbR9l7Z7NIRznOE/2ZvPa1IUKqAL2PzAXOdwkfVqNvO1H2RlpAw==}
|
||||
cpu: [riscv64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@oxc-resolver/binding-linux-riscv64-musl@11.21.3':
|
||||
resolution: {integrity: sha512-4UfsQvacV388y1zpXL7C1x1FNYaV52JtuNRiuzrfQA2z1z6ElVrsidkGsrvQ5EgeSq1Pj7kaKqrgGkvFuxJ/tw==}
|
||||
cpu: [riscv64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
'@oxc-resolver/binding-linux-riscv64-musl@11.24.2':
|
||||
resolution: {integrity: sha512-qxZ1SWCXJY0eyhAlP6Lmo9F2Nrtx7EkYj9oCgL8apDPCwXwCEDA2U697bbT81JIc2IrVjxO4KX6WU2N+oN9Z4w==}
|
||||
cpu: [riscv64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
'@oxc-resolver/binding-linux-s390x-gnu@11.21.3':
|
||||
resolution: {integrity: sha512-b5uH+HKH0MP5mNBYaK75SKsJbw52URqrx2LavYdq6wb0l3ExAG5niYRP9DWUNHdKilpaBVM2bXk9HNWrH3ew7Q==}
|
||||
cpu: [s390x]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@oxc-resolver/binding-linux-s390x-gnu@11.24.2':
|
||||
resolution: {integrity: sha512-sGCecF3cx2DFlH4t/z7ApnOnXqN48p5p5mlHDEnHTAukQa2P+qMVE4CwyWE9W+q/m3QJ7kKfGrIjax31f44oFQ==}
|
||||
cpu: [s390x]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@oxc-resolver/binding-linux-x64-gnu@11.21.3':
|
||||
resolution: {integrity: sha512-PjYlmilBpNRh2ntXNYAK3Am5w/nPfEpnU/96iNx7CI8EzAn12J4JRiec63wHJTH31nLoCNxBg/829pN+3CfG3Q==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@oxc-resolver/binding-linux-x64-gnu@11.24.2':
|
||||
resolution: {integrity: sha512-k/VlMMcSzMlahb3/fENM4rTlsJ0s3fFROA0KXPBmKggqmTSaE383sl8F3KCOXPLmVsYfW6hCitMhXCEtNeZxxg==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
'@oxc-resolver/binding-linux-x64-musl@11.21.3':
|
||||
resolution: {integrity: sha512-QTBAb7JuHlZ7JUEyM8UiQi2f7m/L4swBhP2TNpYIDc9Wp/wRw1G/8sl6i13aIzQAXH7LKIm294LeOHd0lQR8zA==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
'@oxc-resolver/binding-linux-x64-musl@11.24.2':
|
||||
resolution: {integrity: sha512-8hbnZyNi97b/8wapYaIF9+t9GmZKBW2vunaOc3h9HGJptH7b7XpvZqOTBSm/MpTjr7H497BlgOaSfLUdhmy2bw==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
'@oxc-resolver/binding-openharmony-arm64@11.21.3':
|
||||
resolution: {integrity: sha512-4j1DFwjwv36ec9kds0jU/ucQ5Ha4ERO/H95BxR5JFf0kqUUAJ1kwII7XhTc1vZrkdJkvLGC9Q2MbpObpum8RBg==}
|
||||
cpu: [arm64]
|
||||
os: [openharmony]
|
||||
|
||||
'@oxc-resolver/binding-openharmony-arm64@11.24.2':
|
||||
resolution: {integrity: sha512-MvyGik3a6pVgZ0t/kWlbmFxFLmXQJwgLsY2eYFHLpy0wGwRbfzeIGgDwQ3kXqE30z+kSXennRkCrT7TUvkptNg==}
|
||||
cpu: [arm64]
|
||||
os: [openharmony]
|
||||
|
||||
'@oxc-resolver/binding-wasm32-wasi@11.21.3':
|
||||
resolution: {integrity: sha512-i8oluoel5kru/j1WNrjmQSiA3GQ7wvIYVR1IwIoZtKogAhya2iub+ZKIeSIkcJOrnzQ18Tzl/F+kL3fYOxZLvA==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
cpu: [wasm32]
|
||||
|
||||
'@oxc-resolver/binding-wasm32-wasi@11.24.2':
|
||||
resolution: {integrity: sha512-vHcssMPwO08RTvj/c0iOBz90attxyG3wQJ0dTcyEQK43LRpcdLWZlV5feBhv6Isn6ahbQIzHbCgfa81+RiML0Q==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
cpu: [wasm32]
|
||||
|
||||
'@oxc-resolver/binding-win32-arm64-msvc@11.21.3':
|
||||
resolution: {integrity: sha512-M/8dw8dD6aOs+NlPJax401CZB9I7Aut84isQLgALGGwke4Afvw+/7yYhZb94yXf6t2sPLhQLmSmtSV+2FhsOWg==}
|
||||
cpu: [arm64]
|
||||
os: [win32]
|
||||
|
||||
'@oxc-resolver/binding-win32-arm64-msvc@11.24.2':
|
||||
resolution: {integrity: sha512-uokJqro2iBqkFvJdKQLP7d8/BUmFwESQFVmIJUQKj1Xn1a/LysJoe1vmeECLF5b3jsV8CAL5sEMJXX6SdK9Nhg==}
|
||||
cpu: [arm64]
|
||||
os: [win32]
|
||||
|
||||
'@oxc-resolver/binding-win32-x64-msvc@11.21.3':
|
||||
resolution: {integrity: sha512-H7BCt/VnS9hnmMp42eGhZ99izSCRvlnWwy/N71K1/J8QoExwY4262Z8QiEkMDtduRJrztayDxETTckmUuAVL9Q==}
|
||||
cpu: [x64]
|
||||
os: [win32]
|
||||
|
||||
'@oxc-resolver/binding-win32-x64-msvc@11.24.2':
|
||||
resolution: {integrity: sha512-UqGPmo56KDfLlfXFAFIrNflHT8tFxWGEivWg3Zeyp4Uy2NlKN1FGPr6/BxcLGG3+kZ6Wp14g5Uj+n71boqZfiw==}
|
||||
cpu: [x64]
|
||||
@ -6254,6 +6155,19 @@ packages:
|
||||
peerDependencies:
|
||||
eslint: '*'
|
||||
|
||||
eslint-plugin-better-tailwindcss@4.7.0:
|
||||
resolution: {integrity: sha512-lrdlVW4pzLPj/zX5HRqMhKPesGijDfRhnSRJMlNcsrCyJHsndmHCLKTiRNa1eREUZ6G3D3QjdLc+G4tlfGrmkw==}
|
||||
engines: {node: ^20.19.0 || ^22.12.0 || >=23.0.0}
|
||||
peerDependencies:
|
||||
eslint: ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0
|
||||
oxlint: ^1.35.0
|
||||
tailwindcss: ^3.3.0 || ^4.1.17
|
||||
peerDependenciesMeta:
|
||||
eslint:
|
||||
optional: true
|
||||
oxlint:
|
||||
optional: true
|
||||
|
||||
eslint-plugin-command@3.5.3:
|
||||
resolution: {integrity: sha512-JIhmUOW2K2Dw1K+p4mtj5potkqTZ4ZaicrTkgCygPZCWErP2+O2F46n7ZwGKapeEjiwcVqoY8u01SxNUUXWPeQ==}
|
||||
peerDependencies:
|
||||
@ -7419,6 +7333,9 @@ packages:
|
||||
mdn-data@2.0.30:
|
||||
resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
|
||||
|
||||
mdn-data@2.29.0:
|
||||
resolution: {integrity: sha512-pVxQFCcaYUEAH853+v7yoI/qzhxXSq1bTb9obMYGYAN1c3Hen+XDCEvr296XhstrwlSTNgOR7mCSD4JPjbJe5A==}
|
||||
|
||||
mediabunny@1.51.0:
|
||||
resolution: {integrity: sha512-u327374xU8Ho0gCaMII7fUK8t0PnqkabCox1k8uUwvgvGb9o6YQGZEG2Qr4DTe7nTMpzfL7ukgnHDvDROySZ+Q==}
|
||||
|
||||
@ -7914,9 +7831,6 @@ packages:
|
||||
resolution: {integrity: sha512-h6QFWd6lBMfjESqgQ27GjzrSDb0qbznp7VDQqp2zvgsrWut4vcchyMIzOVXvGQ2GMZgKw9RWrFNWv9WqGL0p7Q==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
|
||||
oxc-resolver@11.21.3:
|
||||
resolution: {integrity: sha512-2Mx3fKQz7+xgrBONjsxOgCGtMHOn38/HxMzW1I5efwXB5a4lRN0Vp40gYUJFBWJslcrvwoofTrqoTnLbwTd3pA==}
|
||||
|
||||
oxc-resolver@11.24.2:
|
||||
resolution: {integrity: sha512-FY91FiDBj7ls5MsFS9jN3tjz2o0/zsdSsymlakySaBwVJZorHhkWyICLZMKxlu1R9vYo+sd3z1jwb4J8x7bNDw==}
|
||||
|
||||
@ -8736,6 +8650,15 @@ packages:
|
||||
resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
|
||||
engines: {node: '>=20'}
|
||||
|
||||
tailwind-csstree@0.3.3:
|
||||
resolution: {integrity: sha512-je9J5UYRsTJqAjYrIBMMlge8T/rreRd44pJxgG5Zx/zeo4kAC/liUKqzztRZrGlYRJLvIf2Cb1DVJMTXSzEShA==}
|
||||
engines: {node: '>=18.18'}
|
||||
peerDependencies:
|
||||
'@eslint/css': '>=1.0.0'
|
||||
peerDependenciesMeta:
|
||||
'@eslint/css':
|
||||
optional: true
|
||||
|
||||
tailwind-merge@3.6.0:
|
||||
resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
|
||||
|
||||
@ -8863,6 +8786,10 @@ packages:
|
||||
typescript:
|
||||
optional: true
|
||||
|
||||
tsconfig-paths-webpack-plugin@4.2.0:
|
||||
resolution: {integrity: sha512-zbem3rfRS8BgeNK50Zz5SIQgXzLafiHjOwUAvk/38/o1jHn/V5QAgVUcz884or7WYcPaH3N2CIfUc2u0ul7UcA==}
|
||||
engines: {node: '>=10.13.0'}
|
||||
|
||||
tsconfig-paths@4.2.0:
|
||||
resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
|
||||
engines: {node: '>=6'}
|
||||
@ -9502,7 +9429,7 @@ snapshots:
|
||||
|
||||
'@amplitude/rrweb-snapshot@2.1.0':
|
||||
dependencies:
|
||||
postcss: 8.5.19
|
||||
postcss: 8.5.23
|
||||
|
||||
'@amplitude/rrweb-types@2.0.0-alpha.40': {}
|
||||
|
||||
@ -9878,12 +9805,6 @@ snapshots:
|
||||
'@iconify/utils': 3.1.3
|
||||
tailwindcss: 4.3.3
|
||||
|
||||
'@emnapi/core@1.11.0':
|
||||
dependencies:
|
||||
'@emnapi/wasi-threads': 1.2.2
|
||||
tslib: 2.8.1
|
||||
optional: true
|
||||
|
||||
'@emnapi/core@1.11.2':
|
||||
dependencies:
|
||||
'@emnapi/wasi-threads': 1.2.2
|
||||
@ -9896,11 +9817,6 @@ snapshots:
|
||||
tslib: 2.8.1
|
||||
optional: true
|
||||
|
||||
'@emnapi/runtime@1.11.0':
|
||||
dependencies:
|
||||
tslib: 2.8.1
|
||||
optional: true
|
||||
|
||||
'@emnapi/runtime@1.11.1':
|
||||
dependencies:
|
||||
tslib: 2.8.1
|
||||
@ -10143,6 +10059,11 @@ snapshots:
|
||||
dependencies:
|
||||
'@types/json-schema': 7.0.15
|
||||
|
||||
'@eslint/css-tree@4.0.5':
|
||||
dependencies:
|
||||
mdn-data: 2.29.0
|
||||
source-map-js: 1.2.1
|
||||
|
||||
'@eslint/markdown@7.5.1(supports-color@10.2.2)':
|
||||
dependencies:
|
||||
'@eslint/core': 0.17.0
|
||||
@ -10925,13 +10846,6 @@ snapshots:
|
||||
'@napi-rs/keyring-win32-ia32-msvc': 1.3.0
|
||||
'@napi-rs/keyring-win32-x64-msvc': 1.3.0
|
||||
|
||||
'@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)':
|
||||
dependencies:
|
||||
'@emnapi/core': 1.11.0
|
||||
'@emnapi/runtime': 1.11.0
|
||||
'@tybys/wasm-util': 0.10.3
|
||||
optional: true
|
||||
|
||||
'@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)':
|
||||
dependencies:
|
||||
'@emnapi/core': 1.11.2
|
||||
@ -11199,109 +11113,54 @@ snapshots:
|
||||
|
||||
'@oxc-project/types@0.141.0': {}
|
||||
|
||||
'@oxc-resolver/binding-android-arm-eabi@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-android-arm-eabi@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-android-arm64@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-android-arm64@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-darwin-arm64@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-darwin-arm64@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-darwin-x64@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-darwin-x64@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-freebsd-x64@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-freebsd-x64@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-arm-gnueabihf@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-arm-gnueabihf@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-arm-musleabihf@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-arm-musleabihf@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-arm64-gnu@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-arm64-gnu@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-arm64-musl@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-arm64-musl@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-ppc64-gnu@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-ppc64-gnu@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-riscv64-gnu@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-riscv64-gnu@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-riscv64-musl@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-riscv64-musl@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-s390x-gnu@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-s390x-gnu@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-x64-gnu@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-x64-gnu@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-x64-musl@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-linux-x64-musl@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-openharmony-arm64@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-openharmony-arm64@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-wasm32-wasi@11.21.3':
|
||||
dependencies:
|
||||
'@emnapi/core': 1.11.0
|
||||
'@emnapi/runtime': 1.11.0
|
||||
'@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-wasm32-wasi@11.24.2':
|
||||
dependencies:
|
||||
'@emnapi/core': 1.11.2
|
||||
@ -11309,15 +11168,9 @@ snapshots:
|
||||
'@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-win32-arm64-msvc@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-win32-arm64-msvc@11.24.2':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-win32-x64-msvc@11.21.3':
|
||||
optional: true
|
||||
|
||||
'@oxc-resolver/binding-win32-x64-msvc@11.24.2':
|
||||
optional: true
|
||||
|
||||
@ -14001,6 +13854,24 @@ snapshots:
|
||||
dependencies:
|
||||
eslint: 10.8.0(jiti@2.7.0)(supports-color@10.2.2)
|
||||
|
||||
eslint-plugin-better-tailwindcss@4.7.0(@typescript/typescript6@6.0.2)(eslint@10.8.0(jiti@2.7.0)(supports-color@10.2.2))(oxlint@1.75.0(oxlint-tsgolint@7.0.2001)(vite-plus@0.2.6(@types/node@26.0.1)(@typescript/typescript6@6.0.2)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@voidzero-dev/vite-plus-core@0.2.6(@types/node@26.0.1)(@typescript/typescript6@6.0.2)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.23.1)(yaml@2.9.0))(esbuild@0.28.1)(happy-dom@20.11.1)(jiti@2.7.0)(tsx@4.23.1)(yaml@2.9.0)))(tailwindcss@4.3.3):
|
||||
dependencies:
|
||||
'@eslint/css-tree': 4.0.5
|
||||
'@valibot/to-json-schema': 1.7.1(valibot@1.4.2(@typescript/typescript6@6.0.2))
|
||||
enhanced-resolve: 5.24.1
|
||||
jiti: 2.7.0
|
||||
synckit: 0.11.13
|
||||
tailwind-csstree: 0.3.3
|
||||
tailwindcss: 4.3.3
|
||||
tsconfig-paths-webpack-plugin: 4.2.0
|
||||
valibot: 1.4.2(@typescript/typescript6@6.0.2)
|
||||
optionalDependencies:
|
||||
eslint: 10.8.0(jiti@2.7.0)(supports-color@10.2.2)
|
||||
oxlint: 1.75.0(oxlint-tsgolint@7.0.2001)(vite-plus@0.2.6(@types/node@26.0.1)(@typescript/typescript6@6.0.2)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@voidzero-dev/vite-plus-core@0.2.6(@types/node@26.0.1)(@typescript/typescript6@6.0.2)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.23.1)(yaml@2.9.0))(esbuild@0.28.1)(happy-dom@20.11.1)(jiti@2.7.0)(tsx@4.23.1)(yaml@2.9.0))
|
||||
transitivePeerDependencies:
|
||||
- '@eslint/css'
|
||||
- typescript
|
||||
|
||||
eslint-plugin-command@3.5.3(@typescript-eslint/typescript-estree@8.65.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2))(@typescript-eslint/utils@8.65.0(@typescript/typescript6@6.0.2)(eslint@10.8.0(jiti@2.7.0)(supports-color@10.2.2))(supports-color@10.2.2))(eslint@10.8.0(jiti@2.7.0)(supports-color@10.2.2)):
|
||||
dependencies:
|
||||
'@es-joy/jsdoccomment': 0.88.0
|
||||
@ -15418,6 +15289,8 @@ snapshots:
|
||||
|
||||
mdn-data@2.0.30: {}
|
||||
|
||||
mdn-data@2.29.0: {}
|
||||
|
||||
mediabunny@1.51.0:
|
||||
dependencies:
|
||||
'@types/dom-mediacapture-transform': 0.1.11
|
||||
@ -15992,28 +15865,6 @@ snapshots:
|
||||
'@oxc-parser/binding-win32-ia32-msvc': 0.140.0
|
||||
'@oxc-parser/binding-win32-x64-msvc': 0.140.0
|
||||
|
||||
oxc-resolver@11.21.3:
|
||||
optionalDependencies:
|
||||
'@oxc-resolver/binding-android-arm-eabi': 11.21.3
|
||||
'@oxc-resolver/binding-android-arm64': 11.21.3
|
||||
'@oxc-resolver/binding-darwin-arm64': 11.21.3
|
||||
'@oxc-resolver/binding-darwin-x64': 11.21.3
|
||||
'@oxc-resolver/binding-freebsd-x64': 11.21.3
|
||||
'@oxc-resolver/binding-linux-arm-gnueabihf': 11.21.3
|
||||
'@oxc-resolver/binding-linux-arm-musleabihf': 11.21.3
|
||||
'@oxc-resolver/binding-linux-arm64-gnu': 11.21.3
|
||||
'@oxc-resolver/binding-linux-arm64-musl': 11.21.3
|
||||
'@oxc-resolver/binding-linux-ppc64-gnu': 11.21.3
|
||||
'@oxc-resolver/binding-linux-riscv64-gnu': 11.21.3
|
||||
'@oxc-resolver/binding-linux-riscv64-musl': 11.21.3
|
||||
'@oxc-resolver/binding-linux-s390x-gnu': 11.21.3
|
||||
'@oxc-resolver/binding-linux-x64-gnu': 11.21.3
|
||||
'@oxc-resolver/binding-linux-x64-musl': 11.21.3
|
||||
'@oxc-resolver/binding-openharmony-arm64': 11.21.3
|
||||
'@oxc-resolver/binding-wasm32-wasi': 11.21.3
|
||||
'@oxc-resolver/binding-win32-arm64-msvc': 11.21.3
|
||||
'@oxc-resolver/binding-win32-x64-msvc': 11.21.3
|
||||
|
||||
oxc-resolver@11.24.2:
|
||||
optionalDependencies:
|
||||
'@oxc-resolver/binding-android-arm-eabi': 11.24.2
|
||||
@ -17029,7 +16880,7 @@ snapshots:
|
||||
jsonc-parser: 3.3.1
|
||||
open: 10.2.0
|
||||
oxc-parser: 0.127.0
|
||||
oxc-resolver: 11.21.3
|
||||
oxc-resolver: 11.24.2
|
||||
recast: 0.23.12
|
||||
semver: 7.8.5
|
||||
use-sync-external-store: 1.6.0(react@19.2.8)
|
||||
@ -17056,7 +16907,7 @@ snapshots:
|
||||
jsonc-parser: 3.3.1
|
||||
open: 10.2.0
|
||||
oxc-parser: 0.127.0
|
||||
oxc-resolver: 11.21.3
|
||||
oxc-resolver: 11.24.2
|
||||
recast: 0.23.12
|
||||
semver: 7.8.5
|
||||
use-sync-external-store: 1.6.0(react@19.2.8)
|
||||
@ -17183,6 +17034,8 @@ snapshots:
|
||||
|
||||
tagged-tag@1.0.0: {}
|
||||
|
||||
tailwind-csstree@0.3.3: {}
|
||||
|
||||
tailwind-merge@3.6.0: {}
|
||||
|
||||
tailwindcss@4.3.3: {}
|
||||
@ -17286,6 +17139,13 @@ snapshots:
|
||||
optionalDependencies:
|
||||
typescript: '@typescript/typescript6@6.0.2'
|
||||
|
||||
tsconfig-paths-webpack-plugin@4.2.0:
|
||||
dependencies:
|
||||
chalk: 4.1.2
|
||||
enhanced-resolve: 5.24.1
|
||||
tapable: 2.3.3
|
||||
tsconfig-paths: 4.2.0
|
||||
|
||||
tsconfig-paths@4.2.0:
|
||||
dependencies:
|
||||
json5: 2.2.3
|
||||
@ -18139,6 +17999,7 @@ time:
|
||||
es-toolkit@1.50.0: '2026-07-24T08:24:09.928Z'
|
||||
eslint-markdown@0.12.1: '2026-07-10T23:35:26.055Z'
|
||||
eslint-plugin-antfu@3.2.3: '2026-05-11T02:24:38.348Z'
|
||||
eslint-plugin-better-tailwindcss@4.7.0: '2026-07-19T13:26:01.366Z'
|
||||
eslint-plugin-command@3.5.3: '2026-07-14T04:59:31.991Z'
|
||||
eslint-plugin-erasable-syntax-only@0.4.2: '2026-06-18T00:56:01.038Z'
|
||||
eslint-plugin-hyoban@0.14.1: '2026-03-08T02:51:00.805Z'
|
||||
|
||||
@ -160,6 +160,7 @@ catalog:
|
||||
eslint: 10.8.0
|
||||
eslint-markdown: 0.12.1
|
||||
eslint-plugin-antfu: 3.2.3
|
||||
eslint-plugin-better-tailwindcss: 4.7.0
|
||||
eslint-plugin-command: 3.5.3
|
||||
eslint-plugin-erasable-syntax-only: 0.4.2
|
||||
eslint-plugin-hyoban: 0.14.1
|
||||
|
||||
@ -143,7 +143,7 @@ describe('Base Chat Flow', () => {
|
||||
expect(hoverArea).toHaveClass('left-0')
|
||||
|
||||
fireEvent.mouseLeave(hoverArea)
|
||||
expect(hoverArea).toHaveClass('left-[-248px]')
|
||||
expect(hoverArea).toHaveClass('-left-62')
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -112,7 +112,7 @@ function ChartViewContent({
|
||||
|
||||
return (
|
||||
<div className="flex h-full min-h-0 flex-col">
|
||||
<div className="h-[106px] shrink-0">
|
||||
<div className="h-26.5 shrink-0">
|
||||
<div className="px-6 pt-3">
|
||||
<div className="flex h-6 items-center">
|
||||
<h1 className="title-2xl-semi-bold text-text-primary">
|
||||
|
||||
@ -86,7 +86,7 @@ const RangeSelector: FC<Props> = ({ isCustomRange, ranges, onSelect }) => {
|
||||
<RiArrowDownSLine className="size-4 text-text-quaternary group-data-popup-open:text-text-secondary" />
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="translate-x-[-24px]" popupClassName="w-[200px]" listClassName="p-1">
|
||||
<SelectContent className="-translate-x-6" popupClassName="w-[200px]" listClassName="p-1">
|
||||
{items.map((item) => (
|
||||
<SelectItem
|
||||
key={item.value}
|
||||
@ -94,7 +94,7 @@ const RangeSelector: FC<Props> = ({ isCustomRange, ranges, onSelect }) => {
|
||||
className="relative h-8 py-0 pr-2 pl-7 system-md-regular"
|
||||
>
|
||||
<SelectItemText className="px-0">{item.name}</SelectItemText>
|
||||
<SelectItemIndicator className="absolute top-[8px] left-2 ml-0" />
|
||||
<SelectItemIndicator className="absolute top-2 left-2 ml-0" />
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
|
||||
@ -359,7 +359,7 @@ const ConfigPopup: FC<PopupProps> = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-[420px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-xl">
|
||||
<div className="w-105 rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<TracingIcon size="md" className="mr-2" />
|
||||
|
||||
@ -25,11 +25,11 @@ const Field: FC<Props> = ({
|
||||
}) => {
|
||||
return (
|
||||
<div className={cn(className)}>
|
||||
<div className="flex py-[7px]">
|
||||
<div className="flex py-1.75">
|
||||
<div
|
||||
className={cn(
|
||||
labelClassName,
|
||||
'flex h-[18px] items-center text-[13px] font-medium text-text-primary',
|
||||
'flex h-4.5 items-center text-[13px] font-medium text-text-primary',
|
||||
)}
|
||||
>
|
||||
{label}{' '}
|
||||
|
||||
@ -251,7 +251,7 @@ const Panel: FC = () => {
|
||||
if (!isLoaded) {
|
||||
return (
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div className="w-[200px]">
|
||||
<div className="w-50">
|
||||
<Loading />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -370,7 +370,7 @@ const ProviderConfigModal: FC<Props> = ({
|
||||
>
|
||||
<DialogContent className="max-h-[calc(100dvh-1rem)] w-auto max-w-[calc(100vw-1rem)] overflow-visible border-none bg-transparent p-0 shadow-none">
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="mx-2 max-h-[calc(100vh-120px)] w-[640px] overflow-y-auto rounded-2xl bg-components-panel-bg shadow-xl">
|
||||
<div className="mx-2 max-h-[calc(100vh-120px)] w-160 overflow-y-auto rounded-2xl bg-components-panel-bg shadow-xl">
|
||||
<div className="px-8 pt-8">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="title-2xl-semi-bold text-text-primary">
|
||||
@ -773,7 +773,7 @@ const ProviderConfigModal: FC<Props> = ({
|
||||
</div>
|
||||
<div className="my-8 flex h-8 items-center justify-between">
|
||||
<a
|
||||
className="flex items-center space-x-1 text-xs leading-[18px] font-normal text-[#155EEF]"
|
||||
className="flex items-center space-x-1 text-xs leading-4.5 font-normal text-primary-600"
|
||||
target="_blank"
|
||||
href={docURL[type]}
|
||||
>
|
||||
@ -796,7 +796,7 @@ const ProviderConfigModal: FC<Props> = ({
|
||||
{t(($) => $['operation.remove'], { ns: 'common' })}
|
||||
</span>
|
||||
</Button>
|
||||
<Divider type="vertical" className="mx-3 h-[18px]" />
|
||||
<Divider type="vertical" className="mx-3 h-4.5" />
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
|
||||
@ -4,7 +4,7 @@ import Splash from './components/splash'
|
||||
|
||||
const Layout: FC<PropsWithChildren> = ({ children }) => {
|
||||
return (
|
||||
<div className="h-full min-w-[300px] pb-[env(safe-area-inset-bottom)]">
|
||||
<div className="h-full min-w-75 pb-[env(safe-area-inset-bottom)]">
|
||||
<WebAppStoreProvider>
|
||||
<Splash>{children}</Splash>
|
||||
</WebAppStoreProvider>
|
||||
|
||||
@ -19,10 +19,10 @@ export default function SignInLayout({ children }: any) {
|
||||
className={cn(
|
||||
'flex w-full grow flex-col items-center justify-center',
|
||||
'px-6',
|
||||
'md:px-[108px]',
|
||||
'md:px-27',
|
||||
)}
|
||||
>
|
||||
<div className="flex w-[400px] flex-col">{children}</div>
|
||||
<div className="flex w-100 flex-col">{children}</div>
|
||||
</div>
|
||||
{!systemFeatures.branding.enabled && (
|
||||
<div className="px-8 py-6 system-xs-regular text-text-tertiary">
|
||||
|
||||
@ -76,14 +76,10 @@ const ChangePasswordForm = () => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex w-full grow flex-col items-center justify-center',
|
||||
'px-6',
|
||||
'md:px-[108px]',
|
||||
)}
|
||||
className={cn('flex w-full grow flex-col items-center justify-center', 'px-6', 'md:px-27')}
|
||||
>
|
||||
{!showSuccess && (
|
||||
<div className="flex flex-col md:w-[400px]">
|
||||
<div className="flex flex-col md:w-100">
|
||||
<div className="mx-auto w-full">
|
||||
<h2 className="title-4xl-semi-bold text-text-primary">
|
||||
{t(($) => $.changePassword, { ns: 'login' })}
|
||||
@ -160,7 +156,7 @@ const ChangePasswordForm = () => {
|
||||
</div>
|
||||
)}
|
||||
{showSuccess && (
|
||||
<div className="flex flex-col md:w-[400px]">
|
||||
<div className="flex flex-col md:w-100">
|
||||
<div className="mx-auto w-full">
|
||||
<div className="mb-3 flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
|
||||
<RiCheckboxCircleFill className="size-6 text-text-success" />
|
||||
|
||||
@ -105,7 +105,7 @@ export default function CheckCode() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex w-[400px] flex-col gap-3">
|
||||
<div className="flex w-100 flex-col gap-3">
|
||||
<div className="inline-flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
|
||||
<RiMailSendFill className="size-6 text-2xl text-text-accent-light-mode-only" />
|
||||
</div>
|
||||
|
||||
@ -21,11 +21,9 @@ export default function SignInLayout({ children }: PropsWithChildren) {
|
||||
>
|
||||
{/* <Header /> */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex w-full grow flex-col items-center justify-center px-6 md:px-[108px]',
|
||||
)}
|
||||
className={cn('flex w-full grow flex-col items-center justify-center px-6 md:px-27')}
|
||||
>
|
||||
<div className="flex justify-center md:w-[440px] lg:w-[600px]">{children}</div>
|
||||
<div className="flex justify-center md:w-110 lg:w-150">{children}</div>
|
||||
</div>
|
||||
{systemFeatures.branding.enabled === false && (
|
||||
<div className="px-8 py-6 system-xs-regular text-text-tertiary">
|
||||
|
||||
@ -51,11 +51,7 @@ const NormalForm = () => {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex w-full grow flex-col items-center justify-center',
|
||||
'px-6',
|
||||
'md:px-[108px]',
|
||||
)}
|
||||
className={cn('flex w-full grow flex-col items-center justify-center', 'px-6', 'md:px-27')}
|
||||
>
|
||||
<Loading type="area" />
|
||||
</div>
|
||||
|
||||
@ -74,7 +74,7 @@ function WebSSOForm() {
|
||||
webAppAccessMode === AccessMode.SPECIFIC_GROUPS_MEMBERS)
|
||||
) {
|
||||
return (
|
||||
<div className="w-full max-w-[400px]">
|
||||
<div className="w-full max-w-100">
|
||||
<NormalForm />
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -140,7 +140,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
|
||||
open={isShowAvatarPicker}
|
||||
onOpenChange={(open) => !open && setIsShowAvatarPicker(false)}
|
||||
>
|
||||
<DialogContent className="w-[362px]! p-0!">
|
||||
<DialogContent className="w-90.5! p-0!">
|
||||
<ImageInput onImageInput={handleImageInput} cropShape="round" />
|
||||
<Divider className="m-0" />
|
||||
|
||||
@ -171,7 +171,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
|
||||
open={isShowDeleteConfirm}
|
||||
onOpenChange={(open) => !open && setIsShowDeleteConfirm(false)}
|
||||
>
|
||||
<DialogContent className="w-[362px]! p-6!">
|
||||
<DialogContent className="w-90.5! p-6!">
|
||||
<div className="mb-3 title-2xl-semi-bold text-text-primary">
|
||||
{t(($) => $['avatar.deleteTitle'], { ns: 'common' })}
|
||||
</div>
|
||||
|
||||
@ -148,7 +148,7 @@ export default function AccountPage() {
|
||||
imageUrl={icon_url}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-[3px] system-sm-medium text-text-secondary">{item.name}</div>
|
||||
<div className="mt-0.75 system-sm-medium text-text-secondary">{item.name}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -276,7 +276,7 @@ export default function AccountPage() {
|
||||
open={editPasswordModalVisible}
|
||||
onOpenChange={(open) => !open && (setEditPasswordModalVisible(false), resetPasswordForm())}
|
||||
>
|
||||
<DialogContent className="w-[420px]! p-6!">
|
||||
<DialogContent className="w-105! p-6!">
|
||||
<div className="mb-6 title-2xl-semi-bold text-text-primary">
|
||||
{userProfile.is_password_set
|
||||
? t(($) => $['account.resetPassword'], { ns: 'common' })
|
||||
|
||||
@ -57,7 +57,7 @@ export default function FeedBack(props: DeleteAccountProps) {
|
||||
}}
|
||||
>
|
||||
<DialogContent
|
||||
className="max-w-[480px] overflow-hidden!"
|
||||
className="max-w-120 overflow-hidden!"
|
||||
backdropClassName="bg-background-overlay-backdrop backdrop-blur-[6px]"
|
||||
>
|
||||
<DialogTitle className="pr-8 pb-3 title-2xl-semi-bold text-text-primary">
|
||||
|
||||
@ -38,7 +38,7 @@ export default function DeleteAccount(props: DeleteAccountProps) {
|
||||
}}
|
||||
>
|
||||
<DialogContent
|
||||
className="max-w-[480px] overflow-hidden!"
|
||||
className="max-w-120 overflow-hidden!"
|
||||
backdropClassName="bg-background-overlay-backdrop backdrop-blur-[6px]"
|
||||
>
|
||||
<DialogTitle className="pr-8 pb-3 title-2xl-semi-bold text-text-primary">
|
||||
|
||||
@ -33,7 +33,7 @@ const Header = () => {
|
||||
{systemFeatures.branding.enabled && systemFeatures.branding.login_page_logo ? (
|
||||
<img
|
||||
src={systemFeatures.branding.login_page_logo}
|
||||
className="block h-[22px] w-auto object-contain"
|
||||
className="block h-5.5 w-auto object-contain"
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
@ -41,7 +41,7 @@ const Header = () => {
|
||||
)}
|
||||
</Link>
|
||||
<div className="h-4 w-px origin-center rotate-[11.31deg] bg-divider-regular" />
|
||||
<p className="relative mt-[-2px] title-3xl-semi-bold text-text-primary">
|
||||
<p className="relative -mt-0.5 title-3xl-semi-bold text-text-primary">
|
||||
{t(($) => $['account.account'], { ns: 'common' })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@ export default function Account() {
|
||||
const { t } = useTranslation()
|
||||
useDocumentTitle(t(($) => $['menus.account'], { ns: 'common' }))
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-[640px] px-6 pt-12">
|
||||
<div className="mx-auto w-full max-w-160 px-6 pt-12">
|
||||
<AccountPage />
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -19,8 +19,8 @@ export default function OAuthAuthorizeLayout({ children }: Props) {
|
||||
<div className="flex min-h-screen w-full justify-center bg-background-default-burn p-6">
|
||||
<div className="flex w-full shrink-0 flex-col items-center rounded-2xl border border-effects-highlight bg-background-default-subtle">
|
||||
<Header />
|
||||
<div className="flex w-full grow flex-col items-center justify-center px-6 md:px-[108px]">
|
||||
<div className="flex flex-col md:w-[400px]">{children}</div>
|
||||
<div className="flex w-full grow flex-col items-center justify-center px-6 md:px-27">
|
||||
<div className="flex flex-col md:w-100">{children}</div>
|
||||
</div>
|
||||
{systemFeatures.branding.enabled === false && (
|
||||
<div className="px-8 py-6 system-xs-regular text-text-tertiary">
|
||||
|
||||
@ -190,7 +190,7 @@ export default function OAuthAuthorize() {
|
||||
)}
|
||||
|
||||
{isLoggedIn && Boolean(authAppInfo?.scope) && (
|
||||
<div className="mt-2 flex flex-col gap-2.5 rounded-xl bg-background-section-burn-inverted px-[22px] py-5 text-text-secondary">
|
||||
<div className="mt-2 flex flex-col gap-2.5 rounded-xl bg-background-section-burn-inverted px-5.5 py-5 text-text-secondary">
|
||||
{authAppInfo!.scope
|
||||
.split(/\s+/)
|
||||
.filter(Boolean)
|
||||
|
||||
@ -46,15 +46,11 @@ const ActivateForm = () => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex w-full grow flex-col items-center justify-center',
|
||||
'px-6',
|
||||
'md:px-[108px]',
|
||||
)}
|
||||
className={cn('flex w-full grow flex-col items-center justify-center', 'px-6', 'md:px-27')}
|
||||
>
|
||||
{!checkRes && <Loading />}
|
||||
{checkRes && !checkRes.is_valid && (
|
||||
<div className="flex flex-col md:w-[400px]">
|
||||
<div className="flex flex-col md:w-100">
|
||||
<div className="mx-auto w-full">
|
||||
<div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">
|
||||
🤷♂️
|
||||
|
||||
@ -162,11 +162,11 @@ const AppDetailSection = ({ expand = true }: AppDetailSectionProps) => {
|
||||
return (
|
||||
<div className={cn('flex min-h-0 flex-1 flex-col', expand ? 'px-2 pb-2' : 'pb-2')}>
|
||||
{!expand && (
|
||||
<div className="flex w-full shrink-0 justify-center px-3.5 pt-0.5 pb-[3px]">
|
||||
<div className="flex w-full shrink-0 justify-center px-3.5 pt-0.5 pb-0.75">
|
||||
<Divider
|
||||
type="horizontal"
|
||||
bgStyle="solid"
|
||||
className="my-0 h-px w-[27px] bg-divider-subtle"
|
||||
className="my-0 h-px w-6.75 bg-divider-subtle"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -28,7 +28,7 @@ export function AppInfoDetailDrawer({ open, onClose, children }: AppInfoDetailDr
|
||||
<DrawerViewport>
|
||||
<DrawerPopup
|
||||
aria-label="App info"
|
||||
className="border-divider-burn bg-app-detail-bg p-0 data-[swipe-direction=left]:top-2 data-[swipe-direction=left]:bottom-2 data-[swipe-direction=left]:left-2 data-[swipe-direction=left]:h-auto data-[swipe-direction=left]:w-[452px] data-[swipe-direction=left]:max-w-[calc(100vw-1rem)] data-[swipe-direction=left]:rounded-2xl data-[swipe-direction=left]:border-r"
|
||||
className="border-divider-burn bg-app-detail-bg p-0 data-[swipe-direction=left]:top-2 data-[swipe-direction=left]:bottom-2 data-[swipe-direction=left]:left-2 data-[swipe-direction=left]:h-auto data-[swipe-direction=left]:w-113 data-[swipe-direction=left]:max-w-[calc(100vw-1rem)] data-[swipe-direction=left]:rounded-2xl data-[swipe-direction=left]:border-r"
|
||||
>
|
||||
<DrawerContent className="flex min-h-0 flex-1 flex-col overflow-hidden p-0 pb-0">
|
||||
{children}
|
||||
|
||||
@ -159,7 +159,7 @@ const AppInfoDetailPanel = ({
|
||||
</div>
|
||||
</div>
|
||||
{appDetail.description && (
|
||||
<p className="overflow-wrap-anywhere max-h-[105px] w-full max-w-full overflow-y-auto system-xs-regular wrap-break-word whitespace-normal text-text-tertiary">
|
||||
<p className="overflow-wrap-anywhere max-h-26.25 w-full max-w-full overflow-y-auto system-xs-regular wrap-break-word whitespace-normal text-text-tertiary">
|
||||
{appDetail.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
@ -178,7 +178,7 @@ const AppInfoModals = ({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setConfirmDeleteInput(appDetail.name)}
|
||||
className="absolute top-1/2 right-2 -translate-y-1/2 rounded-full bg-black/[0.06] px-2.5 py-1 system-xs-medium text-text-secondary hover:bg-black/[0.1]"
|
||||
className="absolute top-1/2 right-2 -translate-y-1/2 rounded-full bg-black/6 px-2.5 py-1 system-xs-medium text-text-secondary hover:bg-black/10"
|
||||
>
|
||||
{t(($) => $['operation.fill'], { ns: 'common' })}
|
||||
</button>
|
||||
|
||||
@ -137,11 +137,11 @@ const DatasetDetailSection = ({ expand = true }: DatasetDetailSectionProps) => {
|
||||
>
|
||||
<div className={cn('flex min-h-0 flex-1 flex-col', expand ? 'px-2 pb-2' : 'pb-2')}>
|
||||
{!expand && (
|
||||
<div className="flex w-full shrink-0 justify-center px-3.5 pt-0.5 pb-[3px]">
|
||||
<div className="flex w-full shrink-0 justify-center px-3.5 pt-0.5 pb-0.75">
|
||||
<Divider
|
||||
type="horizontal"
|
||||
bgStyle="solid"
|
||||
className="my-0 h-px w-[27px] bg-divider-subtle"
|
||||
className="my-0 h-px w-6.75 bg-divider-subtle"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -30,7 +30,7 @@ const Menu = ({
|
||||
const runtimeMode = useDatasetDetailContextWithSelector((state) => state.dataset?.runtime_mode)
|
||||
|
||||
return (
|
||||
<div className="flex w-[200px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
|
||||
<div className="flex w-50 flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
|
||||
<div className="flex flex-col p-1">
|
||||
{showEdit && (
|
||||
<MenuItem
|
||||
|
||||
@ -66,7 +66,7 @@ const NavLink = ({
|
||||
|
||||
const renderIcon = () => (
|
||||
<div className="flex size-5 items-center justify-center">
|
||||
<NavIcon className="size-[18px] shrink-0" aria-hidden="true" />
|
||||
<NavIcon className="size-4.5 shrink-0" aria-hidden="true" />
|
||||
</div>
|
||||
)
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@ const CSVDownload: FC = () => {
|
||||
<div className="system-sm-medium text-text-primary">
|
||||
{t(($) => $['generation.csvStructureTitle'], { ns: 'share' })}
|
||||
</div>
|
||||
<div className="mt-2 max-h-[500px] overflow-auto">
|
||||
<div className="mt-2 max-h-125 overflow-auto">
|
||||
<table className="w-full table-fixed border-separate border-spacing-0 rounded-lg border border-divider-regular text-xs">
|
||||
<thead className="text-text-tertiary">
|
||||
<tr>
|
||||
@ -72,7 +72,7 @@ const CSVDownload: FC = () => {
|
||||
bom={true}
|
||||
data={getTemplate()}
|
||||
>
|
||||
<div className="flex h-[18px] items-center space-x-1 system-xs-medium text-text-accent">
|
||||
<div className="flex h-4.5 items-center space-x-1 system-xs-medium text-text-accent">
|
||||
<DownloadIcon className="mr-1 size-3" />
|
||||
{t(($) => $['batchModal.template'], { ns: 'appAnnotation' })}
|
||||
</div>
|
||||
|
||||
@ -84,7 +84,7 @@ const BatchModal: FC<IBatchModalProps> = ({ appId, isShow, onCancel, onAdded })
|
||||
|
||||
return (
|
||||
<Dialog open={isShow}>
|
||||
<DialogContent className="w-full max-w-[520px]! overflow-hidden! rounded-xl! border-none px-8 py-6 text-left align-middle">
|
||||
<DialogContent className="w-full max-w-130! overflow-hidden! rounded-xl! border-none px-8 py-6 text-left align-middle">
|
||||
<div className="relative pb-1 system-xl-medium text-text-primary">
|
||||
{t(($) => $['batchModal.title'], { ns: 'appAnnotation' })}
|
||||
</div>
|
||||
@ -105,7 +105,7 @@ const BatchModal: FC<IBatchModalProps> = ({ appId, isShow, onCancel, onAdded })
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-[28px] flex justify-end pt-6">
|
||||
<div className="mt-7 flex justify-end pt-6">
|
||||
<Button className="mr-2 system-sm-medium text-text-tertiary" onClick={onCancel}>
|
||||
{t(($) => $['batchModal.cancel'], { ns: 'appAnnotation' })}
|
||||
</Button>
|
||||
|
||||
@ -21,7 +21,7 @@ type Props = Readonly<{
|
||||
}>
|
||||
|
||||
export const EditTitle: FC<{ className?: string; title: string }> = ({ className, title }) => (
|
||||
<div className={cn(className, 'flex h-[18px] items-center system-xs-medium text-text-tertiary')}>
|
||||
<div className={cn(className, 'flex h-4.5 items-center system-xs-medium text-text-tertiary')}>
|
||||
<RiEditFill className="mr-1 size-3.5" />
|
||||
<div>{title}</div>
|
||||
<div
|
||||
|
||||
@ -29,7 +29,7 @@ const EmptyElement: FC = () => {
|
||||
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="box-border h-fit w-[560px] rounded-2xl bg-background-section-burn px-5 py-4">
|
||||
<div className="box-border h-fit w-140 rounded-2xl bg-background-section-burn px-5 py-4">
|
||||
<span className="system-md-semibold text-text-secondary">
|
||||
{t(($) => $['noData.title'], { ns: 'appAnnotation' })}
|
||||
<ThreeDotsIcon className="relative -top-3 -left-1.5 inline" />
|
||||
|
||||
@ -7,7 +7,7 @@ import { ClockFastForward } from '@/app/components/base/icons/src/vender/line/ti
|
||||
const HitHistoryNoData: FC = () => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className="mx-auto mt-20 w-[480px] space-y-2 rounded-2xl bg-background-section-burn p-5">
|
||||
<div className="mx-auto mt-20 w-120 space-y-2 rounded-2xl bg-background-section-burn p-5">
|
||||
<div className="inline-block rounded-lg border border-divider-subtle p-3">
|
||||
<ClockFastForward className="size-5 text-text-tertiary" />
|
||||
</div>
|
||||
|
||||
@ -144,7 +144,7 @@ const ViewAnnotationModal: FC<Props> = ({ appId, isShow, onHide, item, onSave, o
|
||||
<HitHistoryNoData />
|
||||
) : (
|
||||
<div>
|
||||
<table className={cn('w-full min-w-[440px] border-collapse border-0')}>
|
||||
<table className={cn('w-full min-w-110 border-collapse border-0')}>
|
||||
<thead className="system-xs-medium-uppercase text-text-tertiary">
|
||||
<tr>
|
||||
<td className="w-5 rounded-l-lg bg-background-section-burn pr-1 pl-2 whitespace-nowrap">
|
||||
@ -162,7 +162,7 @@ const ViewAnnotationModal: FC<Props> = ({ appId, isShow, onHide, item, onSave, o
|
||||
<td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">
|
||||
{t(($) => $['hitHistoryTable.score'], { ns: 'appAnnotation' })}
|
||||
</td>
|
||||
<td className="w-[160px] rounded-r-lg bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">
|
||||
<td className="w-40 rounded-r-lg bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">
|
||||
{t(($) => $['hitHistoryTable.time'], { ns: 'appAnnotation' })}
|
||||
</td>
|
||||
</tr>
|
||||
@ -174,19 +174,19 @@ const ViewAnnotationModal: FC<Props> = ({ appId, isShow, onHide, item, onSave, o
|
||||
className="cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover"
|
||||
>
|
||||
<td
|
||||
className="max-w-[250px] overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
|
||||
className="max-w-62.5 overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
|
||||
title={item.question}
|
||||
>
|
||||
{item.question}
|
||||
</td>
|
||||
<td
|
||||
className="max-w-[250px] overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
|
||||
className="max-w-62.5 overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
|
||||
title={item.match}
|
||||
>
|
||||
{item.match}
|
||||
</td>
|
||||
<td
|
||||
className="max-w-[250px] overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
|
||||
className="max-w-62.5 overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
|
||||
title={item.response}
|
||||
>
|
||||
{item.response}
|
||||
@ -241,7 +241,7 @@ const ViewAnnotationModal: FC<Props> = ({ appId, isShow, onHide, item, onSave, o
|
||||
<div className="flex h-6 items-center justify-between pr-5 pl-6">
|
||||
<DrawerTitle render={<div />} className="min-w-0">
|
||||
<TabSlider
|
||||
className="relative top-[9px] shrink-0"
|
||||
className="relative top-2.25 shrink-0"
|
||||
value={activeTab}
|
||||
onChange={(v) => setActiveTab(v as TabType)}
|
||||
options={tabs}
|
||||
|
||||
@ -19,7 +19,7 @@ const AccessControlDialog = ({ className, children, show, onClose }: DialogProps
|
||||
<Dialog open={show} disablePointerDismissal onOpenChange={(open) => !open && close()}>
|
||||
<DialogContent
|
||||
className={cn(
|
||||
'h-auto max-h-[calc(100dvh-2rem)] min-h-[323px] w-[600px] max-w-none overflow-y-auto rounded-2xl border-none bg-components-panel-bg p-0 shadow-xl transition-all',
|
||||
'h-auto max-h-[calc(100dvh-2rem)] min-h-80.75 w-150 max-w-none overflow-y-auto rounded-2xl border-none bg-components-panel-bg p-0 shadow-xl transition-all',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
|
||||
@ -118,7 +118,7 @@ export default function AddMemberOrGroupDialog() {
|
||||
aria-label={t(($) => $['operation.add'], { ns: 'common' })}
|
||||
icon={false}
|
||||
size="small"
|
||||
className="h-6 w-auto min-w-[52px] shrink-0 rounded-md border-0 bg-transparent px-2 py-0 text-xs font-medium text-components-button-secondary-accent-text hover:bg-state-accent-hover focus-visible:bg-state-accent-hover data-popup-open:bg-state-accent-hover"
|
||||
className="h-6 w-auto min-w-13 shrink-0 rounded-md border-0 bg-transparent px-2 py-0 text-xs font-medium text-components-button-secondary-accent-text hover:bg-state-accent-hover focus-visible:bg-state-accent-hover data-popup-open:bg-state-accent-hover"
|
||||
>
|
||||
<span className="inline-flex min-w-0 items-center justify-center gap-x-0.5 whitespace-nowrap">
|
||||
<span className="i-ri-add-circle-fill size-4 shrink-0" aria-hidden="true" />
|
||||
@ -304,7 +304,7 @@ function GroupItem({ group, subject }: GroupItemProps) {
|
||||
<div className="mr-2 size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
|
||||
<div className="bg-access-app-icon-mask-bg flex size-full items-center justify-center">
|
||||
<RiOrganizationChart
|
||||
className="h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0"
|
||||
className="h-3.5 w-3.5 text-components-avatar-shape-fill-stop-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
@ -321,7 +321,7 @@ function GroupItem({ group, subject }: GroupItemProps) {
|
||||
onPointerDown={(event) => event.preventDefault()}
|
||||
onClick={handleExpandClick}
|
||||
>
|
||||
<span className="px-[3px]">
|
||||
<span className="px-0.75">
|
||||
{t(($) => $['accessControlDialog.operateGroupAndMember.expand'], { ns: 'app' })}
|
||||
</span>
|
||||
<RiArrowRightSLine className="size-4" aria-hidden="true" />
|
||||
|
||||
@ -54,7 +54,7 @@ export default function SpecificGroupsOrMembers() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-1 pb-1">
|
||||
<div className="flex max-h-[400px] flex-col gap-y-2 overflow-y-auto rounded-lg bg-background-section p-2">
|
||||
<div className="flex max-h-100 flex-col gap-y-2 overflow-y-auto rounded-lg bg-background-section p-2">
|
||||
{isPending ? <Loading /> : <RenderGroupsAndMembers />}
|
||||
</div>
|
||||
</div>
|
||||
@ -114,7 +114,7 @@ function GroupItem({ group }: GroupItemProps) {
|
||||
return (
|
||||
<BaseItem
|
||||
icon={
|
||||
<RiOrganizationChart className="h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0" />
|
||||
<RiOrganizationChart className="h-3.5 w-3.5 text-components-avatar-shape-fill-stop-0" />
|
||||
}
|
||||
onRemove={handleRemoveGroup}
|
||||
>
|
||||
@ -165,7 +165,7 @@ function BaseItem({ icon, onRemove, children }: BaseItemProps) {
|
||||
aria-label={t(($) => $['operation.remove'], { ns: 'common' })}
|
||||
onClick={onRemove}
|
||||
>
|
||||
<RiCloseCircleFill className="h-[14px] w-[14px] text-text-quaternary" aria-hidden="true" />
|
||||
<RiCloseCircleFill className="h-3.5 w-3.5 text-text-quaternary" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -69,12 +69,12 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
|
||||
</>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent placement="bottom-end" sideOffset={4} popupClassName="w-[288px] p-1">
|
||||
<div className="flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary">
|
||||
<div className="flex h-5.5 items-center px-3 text-xs font-medium text-text-tertiary">
|
||||
{t(($) => $.publishAs, { ns: 'appDebug' })}
|
||||
</div>
|
||||
{validModelConfigs.map((item, index) => (
|
||||
<DropdownMenuItem key={item.id} className="gap-0 px-3" onClick={() => onSelect(item)}>
|
||||
<span className="min-w-[18px] italic">#{index + 1}</span>
|
||||
<span className="min-w-4.5 italic">#{index + 1}</span>
|
||||
<ModelIcon modelName={item.model} provider={item.providerItem} className="ml-2" />
|
||||
<div
|
||||
className="ml-1 truncate text-text-secondary"
|
||||
|
||||
@ -184,7 +184,7 @@ export const PublisherSummarySection = ({
|
||||
<p className="mt-1 text-xs/4 text-text-secondary">
|
||||
{t(($) => $['publishLimit.startNodeDesc'], { ns: 'workflow' })}
|
||||
</p>
|
||||
<UpgradeBtn isShort className="mt-[9px] mb-[12px] h-[32px] w-[93px] self-start" />
|
||||
<UpgradeBtn isShort className="mt-2.25 mb-3 h-8 w-23.25 self-start" />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -74,7 +74,7 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
|
||||
if (!open) onClose()
|
||||
}}
|
||||
>
|
||||
<DialogContent className="w-full max-w-[480px] overflow-hidden! border-none p-0 text-left align-middle">
|
||||
<DialogContent className="w-full max-w-120 overflow-hidden! border-none p-0 text-left align-middle">
|
||||
<div className="relative w-full p-6 pr-14 pb-4">
|
||||
<div className="title-2xl-semi-bold text-text-primary first-letter:capitalize">
|
||||
{versionInfo?.marked_name
|
||||
@ -87,7 +87,7 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
|
||||
aria-label={t(($) => $['operation.close'], { ns: 'common' })}
|
||||
onClick={onClose}
|
||||
>
|
||||
<RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" aria-hidden="true" />
|
||||
<RiCloseLine className="h-4.5 w-4.5 text-text-tertiary" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-y-4 px-6 py-3">
|
||||
|
||||
@ -9,7 +9,7 @@ type IGroupNameProps = {
|
||||
const GroupName: FC<IGroupNameProps> = ({ name }) => {
|
||||
return (
|
||||
<div className="mb-1 flex items-center">
|
||||
<div className="mr-3 text-xs leading-[18px] font-semibold text-text-tertiary uppercase">
|
||||
<div className="mr-3 text-xs leading-4.5 font-semibold text-text-tertiary uppercase">
|
||||
{name}
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -20,7 +20,7 @@ const FormattingChanged: FC<IFormattingChangedProps> = ({ onConfirm }) => {
|
||||
})}
|
||||
footer={
|
||||
<div className="flex space-x-2">
|
||||
<Button variant="primary" className="flex w-[96px]! justify-start" onClick={onConfirm}>
|
||||
<Button variant="primary" className="flex w-24! justify-start" onClick={onConfirm}>
|
||||
<span className="text-[13px] font-medium">
|
||||
{t(($) => $['feature.dataSet.queryVariable.ok'], { ns: 'appDebug' })}
|
||||
</span>
|
||||
|
||||
@ -11,8 +11,8 @@ const HasNotSetAPI: FC<IHasNotSetAPIProps> = ({ onSetting }) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className="flex grow flex-col items-center justify-center pb-[120px]">
|
||||
<div className="flex w-full max-w-[400px] flex-col gap-2 px-4 py-4">
|
||||
<div className="flex grow flex-col items-center justify-center pb-30">
|
||||
<div className="flex w-full max-w-100 flex-col gap-2 px-4 py-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-[10px]">
|
||||
<div className="flex h-full w-full items-center justify-center overflow-hidden rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg backdrop-blur-[5px]">
|
||||
<span className="i-ri-brain-2-line size-5 text-text-tertiary" />
|
||||
|
||||
@ -159,7 +159,7 @@ const AdvancedPromptInput: FC<Props> = ({
|
||||
>
|
||||
<div className="flex items-center pr-2">
|
||||
<RiErrorWarningFill className="mr-1 h-4 w-4 text-[#F79009]" />
|
||||
<div className="text-[13px] leading-[18px] font-medium text-[#DC6803]">
|
||||
<div className="text-[13px] leading-4.5 font-medium text-[#DC6803]">
|
||||
{t(($) => $['promptMode.contextMissing'], { ns: 'appDebug' })}
|
||||
</div>
|
||||
</div>
|
||||
@ -221,13 +221,13 @@ const AdvancedPromptInput: FC<Props> = ({
|
||||
)}
|
||||
|
||||
<PromptEditorHeightResizeWrap
|
||||
className="min-h-[102px] overflow-y-auto px-4 text-sm text-text-secondary"
|
||||
className="min-h-25.5 overflow-y-auto px-4 text-sm text-text-secondary"
|
||||
height={editorHeight}
|
||||
minHeight={minHeight}
|
||||
onHeightChange={setEditorHeight}
|
||||
footer={
|
||||
<div className="flex pb-2 pl-4">
|
||||
<div className="h-[18px] rounded-md bg-divider-regular px-1 text-xs leading-[18px] text-text-tertiary">
|
||||
<div className="h-4.5 rounded-md bg-divider-regular px-1 text-xs leading-4.5 text-text-tertiary">
|
||||
{value.length}
|
||||
</div>
|
||||
</div>
|
||||
@ -235,7 +235,7 @@ const AdvancedPromptInput: FC<Props> = ({
|
||||
hideResize={noResize}
|
||||
>
|
||||
<PromptEditor
|
||||
className="min-h-[84px]"
|
||||
className="min-h-21"
|
||||
value={value}
|
||||
contextBlock={{
|
||||
show: true,
|
||||
|
||||
@ -51,7 +51,7 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
|
||||
>
|
||||
<div
|
||||
ref={mainContentRef}
|
||||
className="w-[420px] rounded-xl bg-components-panel-bg p-6"
|
||||
className="w-105 rounded-xl bg-components-panel-bg p-6"
|
||||
style={{
|
||||
boxShadow:
|
||||
'0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)',
|
||||
@ -65,7 +65,7 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
|
||||
<div className="text-sm font-medium text-text-primary">
|
||||
{t(($) => $.autoAddVar, { ns: 'appDebug' })}
|
||||
</div>
|
||||
<div className="mt-[15px] flex max-h-[66px] flex-wrap space-x-1 overflow-y-auto px-1">
|
||||
<div className="mt-3.75 flex max-h-16.5 flex-wrap space-x-1 overflow-y-auto px-1">
|
||||
{varNameArr.map((name) => (
|
||||
<VarHighlight key={name} name={name} />
|
||||
))}
|
||||
|
||||
@ -25,12 +25,12 @@ const EditModal: FC<Props> = ({ isShow, saveLoading, data, onClose, onSave }) =>
|
||||
if (!open) onClose()
|
||||
}}
|
||||
>
|
||||
<DialogContent className="w-full max-w-[480px] overflow-hidden! border-none p-6 text-left align-middle">
|
||||
<DialogContent className="w-full max-w-120 overflow-hidden! border-none p-6 text-left align-middle">
|
||||
<DialogTitle className="title-2xl-semi-bold text-text-primary">
|
||||
{t(($) => $['feature.conversationHistory.editModal.title'], { ns: 'appDebug' })}
|
||||
</DialogTitle>
|
||||
|
||||
<div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">
|
||||
<div className="mt-6 text-sm leading-5.25 font-medium text-text-primary">
|
||||
{t(($) => $['feature.conversationHistory.editModal.userPrefix'], { ns: 'appDebug' })}
|
||||
</div>
|
||||
<input
|
||||
@ -44,7 +44,7 @@ const EditModal: FC<Props> = ({ isShow, saveLoading, data, onClose, onSave }) =>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">
|
||||
<div className="mt-6 text-sm leading-5.25 font-medium text-text-primary">
|
||||
{t(($) => $['feature.conversationHistory.editModal.assistantPrefix'], { ns: 'appDebug' })}
|
||||
</div>
|
||||
<input
|
||||
|
||||
@ -31,7 +31,7 @@ const HistoryPanel: FC<Props> = ({ showWarning, onShowEditModal }) => {
|
||||
<div className="text-xs text-text-tertiary">
|
||||
{t(($) => $['feature.conversationHistory.description'], { ns: 'appDebug' })}
|
||||
</div>
|
||||
<div className="ml-3 h-[14px] w-px bg-divider-regular"></div>
|
||||
<div className="ml-3 h-3.5 w-px bg-divider-regular"></div>
|
||||
<OperationButton operation="edit" onClick={onShowEditModal} />
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@ const MessageTypeSelector: FC<Props> = ({ value, onChange }) => {
|
||||
setHide()
|
||||
}, ref)
|
||||
return (
|
||||
<div className="relative left-[-8px]" ref={ref}>
|
||||
<div className="relative -left-2" ref={ref}>
|
||||
<div
|
||||
onClick={toggleShow}
|
||||
className={cn(
|
||||
@ -31,7 +31,7 @@ const MessageTypeSelector: FC<Props> = ({ value, onChange }) => {
|
||||
<ChevronSelectorVertical className="size-3" />
|
||||
</div>
|
||||
{showOption && (
|
||||
<div className="absolute top-[30px] z-10 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
|
||||
<div className="absolute top-7.5 z-10 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
|
||||
{allTypes.map((type) => (
|
||||
<div
|
||||
key={type}
|
||||
@ -39,7 +39,7 @@ const MessageTypeSelector: FC<Props> = ({ value, onChange }) => {
|
||||
setHide()
|
||||
onChange(type)
|
||||
}}
|
||||
className="flex h-9 min-w-[44px] cursor-pointer items-center rounded-lg px-3 text-sm font-medium text-text-secondary uppercase hover:bg-state-base-hover"
|
||||
className="flex h-9 min-w-11 cursor-pointer items-center rounded-lg px-3 text-sm font-medium text-text-secondary uppercase hover:bg-state-base-hover"
|
||||
>
|
||||
{type}
|
||||
</div>
|
||||
|
||||
@ -94,7 +94,7 @@ const PromptEditorHeightResizeWrap: FC<Props> = ({
|
||||
className="absolute bottom-0 left-0 flex h-2 w-full cursor-row-resize justify-center"
|
||||
onMouseDown={handleStartResize}
|
||||
>
|
||||
<div className="h-[3px] w-5 rounded-xs bg-gray-300"></div>
|
||||
<div className="h-0.75 w-5 rounded-xs bg-gray-300"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -219,21 +219,21 @@ const Prompt: FC<ISimplePromptInput> = ({
|
||||
)}
|
||||
|
||||
<PromptEditorHeightResizeWrap
|
||||
className="min-h-[228px] rounded-t-xl bg-background-default px-4 pt-2 text-sm text-text-secondary"
|
||||
className="min-h-57 rounded-t-xl bg-background-default px-4 pt-2 text-sm text-text-secondary"
|
||||
height={editorHeight}
|
||||
minHeight={minHeight}
|
||||
onHeightChange={setEditorHeight}
|
||||
hideResize={noResize}
|
||||
footer={
|
||||
<div className="flex rounded-b-xl bg-background-default pb-2 pl-4">
|
||||
<div className="h-[18px] rounded-md bg-components-badge-bg-gray-soft px-1 text-xs leading-[18px] text-text-tertiary">
|
||||
<div className="h-4.5 rounded-md bg-components-badge-bg-gray-soft px-1 text-xs leading-4.5 text-text-tertiary">
|
||||
{promptTemplate.length}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<PromptEditor
|
||||
className="min-h-[210px]"
|
||||
className="min-h-52.5"
|
||||
compact
|
||||
value={promptTemplate}
|
||||
contextBlock={{
|
||||
|
||||
@ -270,7 +270,7 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
|
||||
value={jsonSchemaStr}
|
||||
onChange={onJSONSchemaChange}
|
||||
noWrapper
|
||||
className="h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
|
||||
className="h-20 overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
|
||||
placeholder={<div className="whitespace-pre">{jsonConfigPlaceHolder}</div>}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
@ -39,7 +39,7 @@ const VarItem: FC<ItemProps> = ({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'group relative mb-1 flex h-[34px] w-full items-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pr-3 pl-2.5 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
|
||||
'group relative mb-1 flex h-8.5 w-full items-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pr-3 pl-2.5 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
|
||||
isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover',
|
||||
readonly && 'cursor-not-allowed',
|
||||
className,
|
||||
|
||||
@ -48,7 +48,7 @@ const ParamConfigContent: FC = () => {
|
||||
<div className="space-y-6 pt-3">
|
||||
<div>
|
||||
<div className="mb-2 flex items-center space-x-1">
|
||||
<div className="text-[13px] leading-[18px] font-semibold text-text-secondary">
|
||||
<div className="text-[13px] leading-4.5 font-semibold text-text-secondary">
|
||||
{t(($) => $['vision.visionSettings.resolution'], { ns: 'appDebug' })}
|
||||
</div>
|
||||
<Infotip
|
||||
@ -90,7 +90,7 @@ const ParamConfigContent: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mb-2 text-[13px] leading-[18px] font-semibold text-text-secondary">
|
||||
<div className="mb-2 text-[13px] leading-4.5 font-semibold text-text-secondary">
|
||||
{t(($) => $['vision.visionSettings.uploadMethod'], { ns: 'appDebug' })}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
|
||||
@ -27,7 +27,7 @@ const ParamsConfig: FC = () => {
|
||||
sideOffset={4}
|
||||
popupClassName="border-none bg-transparent shadow-none"
|
||||
>
|
||||
<div className="w-80 space-y-3 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-lg sm:w-[412px]">
|
||||
<div className="w-80 space-y-3 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-lg sm:w-103">
|
||||
<ParamConfigContent />
|
||||
</div>
|
||||
</PopoverContent>
|
||||
|
||||
@ -39,7 +39,7 @@ export function AgentSetting({ isChatModel, payload, isFunctionCall, onCancel, o
|
||||
if (!open) onCancel()
|
||||
}}
|
||||
>
|
||||
<DialogContent className="top-2 right-2 bottom-2 left-auto flex h-auto max-h-none w-[640px] max-w-[calc(100vw-1rem)] translate-x-0 translate-y-0 flex-col overflow-hidden rounded-xl p-0">
|
||||
<DialogContent className="top-2 right-2 bottom-2 left-auto flex h-auto max-h-none w-160 max-w-[calc(100vw-1rem)] translate-x-0 translate-y-0 flex-col overflow-hidden rounded-xl p-0">
|
||||
<div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pr-5 pl-6">
|
||||
<DialogTitle className="text-base leading-6 font-semibold text-text-primary">
|
||||
{t(($) => $['agent.setting.name'], { ns: 'appDebug' })}
|
||||
@ -51,7 +51,7 @@ export function AgentSetting({ isChatModel, payload, isFunctionCall, onCancel, o
|
||||
</div>
|
||||
{/* Body */}
|
||||
<div
|
||||
className="grow overflow-y-auto border-b border-divider-regular p-6 pt-5 pb-[68px]"
|
||||
className="grow overflow-y-auto border-b border-divider-regular p-6 pt-5 pb-17"
|
||||
style={{
|
||||
borderBottom: 'rgba(0, 0, 0, 0.05)',
|
||||
}}
|
||||
@ -63,7 +63,7 @@ export function AgentSetting({ isChatModel, payload, isFunctionCall, onCancel, o
|
||||
name={t(($) => $['agent.agentMode'], { ns: 'appDebug' })}
|
||||
description={t(($) => $['agent.agentModeDes'], { ns: 'appDebug' })}
|
||||
>
|
||||
<div className="text-[13px] leading-[18px] font-medium text-text-primary">
|
||||
<div className="text-[13px] leading-4.5 font-medium text-text-primary">
|
||||
{isFunctionCall
|
||||
? t(($) => $['agent.agentModeType.functionCall'], { ns: 'appDebug' })
|
||||
: t(($) => $['agent.agentModeType.ReACT'], { ns: 'appDebug' })}
|
||||
@ -81,7 +81,7 @@ export function AgentSetting({ isChatModel, payload, isFunctionCall, onCancel, o
|
||||
<Fieldset className="flex items-center">
|
||||
<FieldsetLegend className="sr-only">{maximumIterationsLabel}</FieldsetLegend>
|
||||
<Slider
|
||||
className="mr-3 w-[156px]"
|
||||
className="mr-3 w-39"
|
||||
min={maxIterationsMin}
|
||||
max={MAX_ITERATIONS_NUM}
|
||||
value={tempPayload.max_iteration}
|
||||
@ -121,11 +121,11 @@ export function AgentSetting({ isChatModel, payload, isFunctionCall, onCancel, o
|
||||
<div className="flex h-8 items-center px-4 text-sm/6 font-semibold text-text-secondary">
|
||||
{t(($) => $.builtInPromptTitle, { ns: 'tools' })}
|
||||
</div>
|
||||
<div className="h-[396px] overflow-y-auto px-4 text-sm leading-5 font-normal whitespace-pre-line text-text-secondary">
|
||||
<div className="h-99 overflow-y-auto px-4 text-sm leading-5 font-normal whitespace-pre-line text-text-secondary">
|
||||
{isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion}
|
||||
</div>
|
||||
<div className="px-4">
|
||||
<div className="inline-flex h-5 items-center rounded-md bg-components-input-bg-normal px-1 text-xs leading-[18px] font-medium text-text-tertiary">
|
||||
<div className="inline-flex h-5 items-center rounded-md bg-components-input-bg-normal px-1 text-xs leading-4.5 font-medium text-text-tertiary">
|
||||
{
|
||||
(isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion)
|
||||
.length
|
||||
|
||||
@ -183,7 +183,7 @@ const AgentTools: FC = () => {
|
||||
}
|
||||
headerRight={
|
||||
<div className="flex items-center">
|
||||
<div className="text-xs leading-[18px] font-normal text-text-tertiary">
|
||||
<div className="text-xs leading-4.5 font-normal text-text-tertiary">
|
||||
{tools.filter((item) => !!item.enabled).length}/{tools.length}
|
||||
|
||||
{t(($) => $['agent.tools.enabled'], { ns: 'appDebug' })}
|
||||
|
||||
@ -179,7 +179,7 @@ const SettingBuiltInTool: FC<Props> = ({
|
||||
<DrawerViewport>
|
||||
<DrawerPopup
|
||||
className={cn(
|
||||
'justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-6 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-6 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-[420px] data-[swipe-direction=right]:max-w-[420px] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
|
||||
'justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-6 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-6 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-105 data-[swipe-direction=right]:max-w-105 data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border',
|
||||
)}
|
||||
>
|
||||
<DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
|
||||
|
||||
@ -297,11 +297,11 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
|
||||
if (!open) onClose()
|
||||
}}
|
||||
>
|
||||
<DialogContent className="h-[min(680px,calc(100dvh-2rem))] max-h-none! w-[1140px] max-w-none! min-w-[1140px] overflow-hidden! border-none p-0! text-left align-middle">
|
||||
<DialogContent className="h-[min(680px,calc(100dvh-2rem))] max-h-none! w-285 max-w-none! min-w-285 overflow-hidden! border-none p-0! text-left align-middle">
|
||||
<div className="flex h-full min-h-0 flex-wrap">
|
||||
<div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
|
||||
<div className="h-full w-142.5 shrink-0 overflow-y-auto border-r border-divider-regular p-6">
|
||||
<div className="mb-5">
|
||||
<div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>
|
||||
<div className={`text-lg leading-7 font-bold ${s.textGradient}`}>
|
||||
{t(($) => $['generate.title'], { ns: 'appDebug' })}
|
||||
</div>
|
||||
<div className="mt-1 text-[13px] font-normal text-text-tertiary">
|
||||
@ -323,7 +323,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
|
||||
{isBasicMode && (
|
||||
<div className="mt-4">
|
||||
<div className="flex items-center">
|
||||
<div className="mr-3 shrink-0 text-xs leading-[18px] font-semibold text-text-tertiary uppercase">
|
||||
<div className="mr-3 shrink-0 text-xs leading-4.5 font-semibold text-text-tertiary uppercase">
|
||||
{t(($) => $['generate.tryIt'], { ns: 'appDebug' })}
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -41,7 +41,7 @@ const IdeaOutput: FC<Props> = ({ value, onChange }) => {
|
||||
{!isFoldIdeaOutput && (
|
||||
<Textarea
|
||||
aria-label={t(($) => $[`${i18nPrefix}.idealOutput`], { ns: 'appDebug' })}
|
||||
className="h-[80px]"
|
||||
className="h-20"
|
||||
placeholder={t(($) => $[`${i18nPrefix}.idealOutputPlaceholder`], { ns: 'appDebug' })}
|
||||
value={value}
|
||||
onValueChange={(value) => onChange(value)}
|
||||
|
||||
@ -70,7 +70,7 @@ const InstructionEditor: FC<Props> = ({
|
||||
instanceId={editorKey}
|
||||
placeholder={placeholder}
|
||||
placeholderClassName="px-4 pt-3"
|
||||
className={cn('min-h-[240px] pb-8')}
|
||||
className={cn('min-h-60 pb-8')}
|
||||
value={value}
|
||||
workflowVariableBlock={{
|
||||
show: true,
|
||||
|
||||
@ -49,7 +49,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
|
||||
alignOffset={-12}
|
||||
popupClassName="w-[208px] rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
|
||||
>
|
||||
<div className="flex h-[22px] items-center px-3 pl-3 system-xs-medium-uppercase text-text-tertiary">
|
||||
<div className="flex h-5.5 items-center px-3 pl-3 system-xs-medium-uppercase text-text-tertiary">
|
||||
{t(($) => $['generate.versions'], { ns: 'appDebug' })}
|
||||
</div>
|
||||
<DropdownMenuRadioGroup
|
||||
|
||||
@ -211,11 +211,11 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = ({
|
||||
if (!open) onClose()
|
||||
}}
|
||||
>
|
||||
<DialogContent className="h-[min(680px,calc(100dvh-2rem))] max-h-none! w-full min-w-[1140px] overflow-hidden! border-none p-0! text-left align-middle">
|
||||
<DialogContent className="h-[min(680px,calc(100dvh-2rem))] max-h-none! w-full min-w-285 overflow-hidden! border-none p-0! text-left align-middle">
|
||||
<div className="relative flex h-full min-h-0 flex-wrap">
|
||||
<div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
|
||||
<div className="h-full w-142.5 shrink-0 overflow-y-auto border-r border-divider-regular p-6">
|
||||
<div className="mb-5">
|
||||
<div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>
|
||||
<div className={`text-lg leading-7 font-bold ${s.textGradient}`}>
|
||||
{t(($) => $['codegen.title'], { ns: 'appDebug' })}
|
||||
</div>
|
||||
<div className="mt-1 text-[13px] font-normal text-text-tertiary">
|
||||
|
||||
@ -59,7 +59,7 @@ const Config: FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative h-0 grow overflow-y-auto px-6 pb-[50px]">
|
||||
<div className="relative h-0 grow overflow-y-auto px-6 pb-12.5">
|
||||
{/* Template */}
|
||||
<ConfigPrompt
|
||||
mode={mode}
|
||||
|
||||
@ -131,7 +131,7 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
|
||||
<FeaturesProvider features={featuresData}>
|
||||
<MittProvider>
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="relative flex h-[200px] grow pt-14">
|
||||
<div className="relative flex h-50 grow pt-14">
|
||||
<div className="bg-default-subtle absolute top-0 left-0 h-14 w-full">
|
||||
<div className="flex h-14 items-center justify-between px-6">
|
||||
<div className="flex items-center gap-2">
|
||||
@ -168,7 +168,7 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
|
||||
debugWithMultipleModel={debugWithMultipleModel}
|
||||
onDebugWithMultipleModelChange={onEnableMultipleModelDebug}
|
||||
/>
|
||||
<Divider type="vertical" className="mx-2 h-[14px]" />
|
||||
<Divider type="vertical" className="mx-2 h-3.5" />
|
||||
</>
|
||||
)}
|
||||
{isMobile && (
|
||||
@ -187,7 +187,7 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`flex size-full shrink-0 flex-col sm:w-1/2 ${debugWithMultipleModel && 'max-w-[560px]'}`}
|
||||
className={`flex size-full shrink-0 flex-col sm:w-1/2 ${debugWithMultipleModel && 'max-w-140'}`}
|
||||
>
|
||||
<Config />
|
||||
</div>
|
||||
|
||||
@ -124,7 +124,7 @@ const Item: FC<ItemProps> = ({ config, onSave, onRemove, readonly = false, edita
|
||||
<DrawerPortal>
|
||||
<DrawerBackdrop className={cn(!isMobile && 'bg-transparent')} />
|
||||
<DrawerViewport>
|
||||
<DrawerPopup className="p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-[640px] data-[swipe-direction=right]:rounded-xl">
|
||||
<DrawerPopup className="p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-160 data-[swipe-direction=right]:rounded-xl">
|
||||
<DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
|
||||
{showSettingsModal && (
|
||||
<SettingsModal
|
||||
|
||||
@ -20,11 +20,11 @@ export type Props = Readonly<{
|
||||
}>
|
||||
|
||||
const VarItem: FC<{ item: Option }> = ({ item }) => (
|
||||
<div className="flex h-[18px] items-center space-x-1 rounded-sm bg-[#EFF8FF] px-1">
|
||||
<div className="flex h-4.5 items-center space-x-1 rounded-sm bg-[#EFF8FF] px-1">
|
||||
<IconTypeIcon type={item.type as IInputTypeIconProps['type']} className="text-[#1570EF]" />
|
||||
<div className="flex text-xs font-medium text-[#1570EF]">
|
||||
<span className="opacity-60">{'{{'}</span>
|
||||
<span className="max-w-[150px] truncate">{item.value}</span>
|
||||
<span className="max-w-37.5 truncate">{item.value}</span>
|
||||
<span className="opacity-60">{'}}'}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -82,7 +82,7 @@ const VarPicker: FC<Props> = ({
|
||||
popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
|
||||
>
|
||||
{options.length > 0 ? (
|
||||
<div className="max-h-[50vh] w-[240px] overflow-y-auto rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
|
||||
<div className="max-h-[50vh] w-60 overflow-y-auto rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg">
|
||||
{options.map(({ name, value, type }) => (
|
||||
<div
|
||||
key={value}
|
||||
@ -97,7 +97,7 @@ const VarPicker: FC<Props> = ({
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-[240px] rounded-lg border border-components-panel-border bg-components-panel-bg p-6 shadow-lg">
|
||||
<div className="w-60 rounded-lg border border-components-panel-border bg-components-panel-bg p-6 shadow-lg">
|
||||
<div className="mb-1 text-sm font-medium text-text-secondary">
|
||||
{t(($) => $['feature.dataSet.queryVariable.noVar'], { ns: 'appDebug' })}
|
||||
</div>
|
||||
|
||||
@ -265,7 +265,7 @@ const ConfigContent: FC<Props> = ({
|
||||
onCheckedChange={handleManuallyToggleRerank}
|
||||
/>
|
||||
)}
|
||||
<div className="ml-1 system-sm-semibold leading-[32px] text-text-secondary">
|
||||
<div className="ml-1 system-sm-semibold leading-8 text-text-secondary">
|
||||
{t(($) => $['modelProvider.rerankModel.key'], { ns: 'common' })}
|
||||
</div>
|
||||
<Infotip
|
||||
@ -341,7 +341,7 @@ const ConfigContent: FC<Props> = ({
|
||||
{isInWorkflow && type === RETRIEVE_TYPE.oneWay && (
|
||||
<div className="mt-4">
|
||||
<div className="flex items-center space-x-0.5">
|
||||
<div className="text-[13px] leading-[32px] font-medium text-text-primary">
|
||||
<div className="text-[13px] leading-8 font-medium text-text-primary">
|
||||
{t(($) => $['modelProvider.systemReasoningModel.key'], { ns: 'common' })}
|
||||
</div>
|
||||
<Infotip
|
||||
|
||||
@ -125,7 +125,7 @@ const ParamsConfig = ({ disabled, selectedDatasets }: ParamsConfigProps) => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent className="w-full max-w-[480px] border-none text-left align-middle sm:min-w-[528px]">
|
||||
<DialogContent className="w-full max-w-120 border-none text-left align-middle sm:min-w-132">
|
||||
<ConfigContent
|
||||
datasetConfigs={tempDataSetConfigs}
|
||||
onChange={handleSetTempDataSetConfigs}
|
||||
|
||||
@ -44,7 +44,7 @@ const WeightedScore = ({ value, onChange = noop, readonly = false }: WeightedSco
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 flex justify-between">
|
||||
<div className="flex w-[90px] shrink-0 items-center system-xs-semibold-uppercase text-util-colors-blue-light-blue-light-500">
|
||||
<div className="flex w-22.5 shrink-0 items-center system-xs-semibold-uppercase text-util-colors-blue-light-blue-light-500">
|
||||
<div
|
||||
className="mr-1 truncate uppercase"
|
||||
title={t(($) => $['weightedScore.semantic'], { ns: 'dataset' }) || ''}
|
||||
@ -53,7 +53,7 @@ const WeightedScore = ({ value, onChange = noop, readonly = false }: WeightedSco
|
||||
</div>
|
||||
{formatNumber(value.value[0]!)}
|
||||
</div>
|
||||
<div className="flex w-[90px] shrink-0 items-center justify-end system-xs-semibold-uppercase text-util-colors-teal-teal-500">
|
||||
<div className="flex w-22.5 shrink-0 items-center justify-end system-xs-semibold-uppercase text-util-colors-teal-teal-500">
|
||||
{formatNumber(value.value[1]!)}
|
||||
<div
|
||||
className="ml-1 truncate uppercase"
|
||||
|
||||
@ -166,7 +166,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
|
||||
{item.name}
|
||||
</div>
|
||||
{!item.embedding_available && (
|
||||
<span className="ml-1 shrink-0 rounded-md border border-divider-deep px-1 text-xs leading-[18px] font-normal text-text-tertiary">
|
||||
<span className="ml-1 shrink-0 rounded-md border border-divider-deep px-1 text-xs leading-4.5 font-normal text-text-tertiary">
|
||||
{t(($) => $.unavailable, { ns: 'dataset' })}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@ -229,7 +229,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
{/* Body */}
|
||||
<div className="overflow-y-auto border-b border-divider-regular p-6 pt-5 pb-[68px]">
|
||||
<div className="overflow-y-auto border-b border-divider-regular p-6 pt-5 pb-17">
|
||||
<div className={cn(rowClass, 'items-center')}>
|
||||
<div className={labelClass}>
|
||||
<div className="system-sm-semibold text-text-secondary">
|
||||
|
||||
@ -73,7 +73,7 @@ const ExternalRetrievalSection: FC<ExternalRetrievalSectionProps> = ({
|
||||
{t(($) => $['form.externalKnowledgeAPI'], { ns: 'datasetSettings' })}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full max-w-[480px]">
|
||||
<div className="w-full max-w-120">
|
||||
<div className="flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2">
|
||||
<ApiConnectionMod className="size-4 text-text-secondary" />
|
||||
<div className="overflow-hidden system-sm-medium text-ellipsis text-text-secondary">
|
||||
@ -92,7 +92,7 @@ const ExternalRetrievalSection: FC<ExternalRetrievalSectionProps> = ({
|
||||
{t(($) => $['form.externalKnowledgeID'], { ns: 'datasetSettings' })}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full max-w-[480px]">
|
||||
<div className="w-full max-w-120">
|
||||
<div className="flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2">
|
||||
<div className="system-xs-regular text-text-tertiary">
|
||||
{currentDataset?.external_knowledge_info.external_knowledge_id}
|
||||
@ -125,12 +125,12 @@ const InternalRetrievalSection: FC<InternalRetrievalSectionProps> = ({
|
||||
docLink,
|
||||
}) => (
|
||||
<div className={rowClass}>
|
||||
<div className={cn(labelClass, 'w-auto min-w-[168px]')}>
|
||||
<div className={cn(labelClass, 'w-auto min-w-42')}>
|
||||
<div>
|
||||
<div className="system-sm-semibold text-text-secondary">
|
||||
{t(($) => $['form.retrievalSetting.title'], { ns: 'datasetSettings' })}
|
||||
</div>
|
||||
<div className="text-xs leading-[18px] font-normal text-text-tertiary">
|
||||
<div className="text-xs leading-4.5 font-normal text-text-tertiary">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
@ -230,10 +230,10 @@ export const RetrievalChangeTip: FC<RetrievalChangeTipProps> = ({
|
||||
if (!visible) return null
|
||||
|
||||
return (
|
||||
<div className="absolute right-[30px] bottom-[76px] left-[30px] z-10 flex h-10 items-center justify-between rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 shadow-lg">
|
||||
<div className="absolute right-7.5 bottom-19 left-7.5 z-10 flex h-10 items-center justify-between rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 shadow-lg">
|
||||
<div className="flex items-center">
|
||||
<AlertTriangle className="mr-1 h-3 w-3 text-[#F79009]" />
|
||||
<div className="text-xs leading-[18px] font-medium text-gray-700">{message}</div>
|
||||
<div className="text-xs leading-4.5 font-medium text-gray-700">{message}</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@ -108,7 +108,7 @@ const ChatUserInput = ({ inputs }: Props) => {
|
||||
)}
|
||||
{type === 'paragraph' && (
|
||||
<Textarea
|
||||
className="h-[120px] grow"
|
||||
className="h-30 grow"
|
||||
aria-label={name || key}
|
||||
placeholder={name}
|
||||
value={inputs[key] ? `${inputs[key]}` : ''}
|
||||
|
||||
@ -115,7 +115,7 @@ const DebugWithMultipleModel = () => {
|
||||
<DebugItem
|
||||
key={modelConfig.id}
|
||||
modelAndParameter={modelConfig}
|
||||
className={`absolute top-0 left-6 min-h-[200px] ${twoLine && index === 0 && 'mr-2'} ${threeLine && (index === 0 || index === 1) && 'mr-2'} ${fourLine && (index === 0 || index === 2) && 'mr-2'} ${fourLine && (index === 0 || index === 1) && 'mb-2'} `}
|
||||
className={`absolute top-0 left-6 min-h-50 ${twoLine && index === 0 && 'mr-2'} ${threeLine && (index === 0 || index === 1) && 'mr-2'} ${fourLine && (index === 0 || index === 2) && 'mr-2'} ${fourLine && (index === 0 || index === 1) && 'mb-2'} `}
|
||||
style={{
|
||||
width: size.width,
|
||||
height: size.height,
|
||||
|
||||
@ -80,7 +80,7 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({ modelAndParamet
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex h-8 max-w-[200px] cursor-pointer items-center rounded-lg px-2 ${open && 'bg-state-base-hover'} ${!isEmpty && !isActive && 'bg-[#FFFAEB]!'} `}
|
||||
className={`flex h-8 max-w-50 cursor-pointer items-center rounded-lg px-2 ${open && 'bg-state-base-hover'} ${!isEmpty && !isActive && 'bg-[#FFFAEB]!'} `}
|
||||
>
|
||||
{iconProvider && !isEmpty && (
|
||||
<ModelIcon
|
||||
|
||||
@ -432,7 +432,7 @@ const Debug: FC<IDebug> = ({
|
||||
{multipleModelConfigs.length}
|
||||
/4)
|
||||
</Button>
|
||||
<div className="mx-2 h-[14px] w-px bg-divider-regular" />
|
||||
<div className="mx-2 h-3.5 w-px bg-divider-regular" />
|
||||
</>
|
||||
) : null}
|
||||
{mode !== AppModeEnum.COMPLETION && (
|
||||
@ -471,7 +471,7 @@ const Debug: FC<IDebug> = ({
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
{expanded && (
|
||||
<div className="absolute right-[5px] bottom-[-14px] z-10 h-3 w-3 rotate-45 border-t-[0.5px] border-l-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg" />
|
||||
<div className="absolute right-1.25 -bottom-3.5 z-10 h-3 w-3 rotate-45 border-t-[0.5px] border-l-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@ -534,8 +534,8 @@ const Debug: FC<IDebug> = ({
|
||||
{(!modelConfig.provider || !isAPIKeySet) && <HasNotSetAPIKEY onSetting={onSetting} />}
|
||||
{/* No model selected */}
|
||||
{modelConfig.provider && isAPIKeySet && !modelConfig.model_id && (
|
||||
<div className="flex grow flex-col items-center justify-center pb-[120px]">
|
||||
<div className="flex w-full max-w-[400px] flex-col gap-2 px-4 py-4">
|
||||
<div className="flex grow flex-col items-center justify-center pb-30">
|
||||
<div className="flex w-full max-w-100 flex-col gap-2 px-4 py-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-[10px]">
|
||||
<div className="flex h-full w-full items-center justify-center overflow-hidden rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg backdrop-blur-[5px]">
|
||||
<span className="i-ri-brain-2-line size-5 text-text-tertiary" />
|
||||
|
||||
@ -187,7 +187,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
|
||||
{type === 'paragraph' && (
|
||||
<Textarea
|
||||
aria-label={name}
|
||||
className="h-[120px] grow"
|
||||
className="h-30 grow"
|
||||
placeholder={name}
|
||||
value={inputs[key] ? `${inputs[key]}` : ''}
|
||||
onValueChange={(value) => {
|
||||
@ -252,7 +252,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
|
||||
))}
|
||||
{visionConfig?.enabled && (
|
||||
<div className="mt-3 justify-between xl:flex">
|
||||
<div className="mr-1 w-[120px] shrink-0 py-2 text-sm text-text-primary">
|
||||
<div className="mr-1 w-30 shrink-0 py-2 text-sm text-text-primary">
|
||||
{t(($) => $['imageUploader.imageUpload'], { ns: 'common' })}
|
||||
</div>
|
||||
<div className="grow">
|
||||
@ -279,7 +279,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
|
||||
)}
|
||||
{!userInputFieldCollapse && (
|
||||
<div className="flex justify-between border-t border-divider-subtle p-4 pt-3">
|
||||
<Button className="w-[72px]" disabled={debugInputReadonly} onClick={onClear}>
|
||||
<Button className="w-18" disabled={debugInputReadonly} onClick={onClear}>
|
||||
{t(($) => $['operation.clear'], { ns: 'common' })}
|
||||
</Button>
|
||||
{canNotRun && (
|
||||
@ -290,7 +290,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
|
||||
variant="primary"
|
||||
disabled={canNotRun || !canTestAndRun}
|
||||
onClick={() => onSend?.()}
|
||||
className="w-[96px]"
|
||||
className="w-24"
|
||||
>
|
||||
<RiPlayLargeFill className="mr-0.5 size-4 shrink-0" aria-hidden="true" />
|
||||
{t(($) => $['inputs.run'], { ns: 'appDebug' })}
|
||||
@ -307,7 +307,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
|
||||
variant="primary"
|
||||
disabled={canNotRun || !canTestAndRun}
|
||||
onClick={() => onSend?.()}
|
||||
className="w-[96px]"
|
||||
className="w-24"
|
||||
>
|
||||
<RiPlayLargeFill className="mr-0.5 size-4 shrink-0" aria-hidden="true" />
|
||||
{t(($) => $['inputs.run'], { ns: 'appDebug' })}
|
||||
|
||||
@ -115,7 +115,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
|
||||
|
||||
return (
|
||||
<Dialog open onOpenChange={noop}>
|
||||
<DialogContent className="w-[640px]! max-w-none! p-8! pb-6!">
|
||||
<DialogContent className="w-160! max-w-none! p-8! pb-6!">
|
||||
<div className="mb-2 text-xl font-semibold text-text-primary">
|
||||
{`${action} ${t(($) => $['variableConfig.apiBasedVar'], { ns: 'appDebug' })}`}
|
||||
</div>
|
||||
|
||||
@ -42,7 +42,7 @@ const AppCard = ({ app, canCreate, onCreate }: AppCardProps) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'group relative flex h-[132px] cursor-pointer flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 shadow-xs hover:shadow-lg',
|
||||
'group relative flex h-33 cursor-pointer flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 shadow-xs hover:shadow-lg',
|
||||
)}
|
||||
>
|
||||
<div className="flex shrink-0 grow-0 items-center gap-3 pb-2">
|
||||
|
||||
@ -186,14 +186,14 @@ const Apps = ({ onSuccess, onCreateFromBlank }: AppsProps) => {
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex items-center justify-between border-b border-divider-burn py-3">
|
||||
<div className="min-w-[180px] pl-5">
|
||||
<div className="min-w-45 pl-5">
|
||||
<span className="title-xl-semi-bold text-text-primary">
|
||||
{t(($) => $['newApp.startFromTemplate'], { ns: 'app' })}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex max-w-[548px] flex-1 items-center rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-1.5 shadow-md">
|
||||
<div className="flex max-w-137 flex-1 items-center rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-1.5 shadow-md">
|
||||
<AppTypeSelector value={currentType} onChange={setCurrentType} />
|
||||
<div className="h-[14px]">
|
||||
<div className="h-3.5">
|
||||
<Divider type="vertical" />
|
||||
</div>
|
||||
<Input
|
||||
@ -208,11 +208,11 @@ const Apps = ({ onSuccess, onCreateFromBlank }: AppsProps) => {
|
||||
onClear={() => handleKeywordsChange('')}
|
||||
/>
|
||||
</div>
|
||||
<div className="h-8 w-[180px]"></div>
|
||||
<div className="h-8 w-45"></div>
|
||||
</div>
|
||||
<div className="relative flex flex-1 overflow-y-auto">
|
||||
{!searchKeywords && (
|
||||
<div className="h-full w-[200px] p-4">
|
||||
<div className="h-full w-50 p-4">
|
||||
<Sidebar
|
||||
current={activeCategory as AppCategories}
|
||||
categories={visibleCategories}
|
||||
@ -240,7 +240,7 @@ const Apps = ({ onSuccess, onCreateFromBlank }: AppsProps) => {
|
||||
})}
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex h-[22px] items-center">
|
||||
<div className="flex h-5.5 items-center">
|
||||
<AppCategoryLabel
|
||||
category={activeCategory as AppCategories}
|
||||
className="title-md-semi-bold text-text-primary"
|
||||
|
||||
@ -169,7 +169,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
|
||||
<div className="flex h-full justify-center overflow-x-hidden overflow-y-auto">
|
||||
<div className="flex flex-1 shrink-0 justify-end">
|
||||
<div className="px-10">
|
||||
<div className="h-6 w-full 2xl:h-[139px]" />
|
||||
<div className="h-6 w-full 2xl:h-34.75" />
|
||||
<div className="pt-1 pb-6">
|
||||
<span className="title-2xl-semi-bold text-text-primary">
|
||||
{t(($) => $['newApp.startFromBlank'], { ns: 'app' })}
|
||||
@ -180,7 +180,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
|
||||
{t(($) => $['newApp.chooseAppType'], { ns: 'app' })}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex w-[660px] flex-col gap-4">
|
||||
<div className="flex w-165 flex-col gap-4">
|
||||
<div>
|
||||
<div className="flex flex-row gap-2">
|
||||
<AppTypeCard
|
||||
@ -363,13 +363,13 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative flex h-full flex-1 shrink justify-start overflow-hidden">
|
||||
<div className="absolute top-0 right-0 left-0 h-6 border-b border-b-divider-subtle 2xl:h-[139px]"></div>
|
||||
<div className="max-w-[760px] border-x border-x-divider-subtle">
|
||||
<div className="h-6 2xl:h-[139px]" />
|
||||
<div className="absolute top-0 right-0 left-0 h-6 border-b border-b-divider-subtle 2xl:h-34.75"></div>
|
||||
<div className="max-w-190 border-x border-x-divider-subtle">
|
||||
<div className="h-6 2xl:h-34.75" />
|
||||
<AppPreview mode={appMode} />
|
||||
<div className="absolute inset-x-0 border-b border-b-divider-subtle"></div>
|
||||
<div
|
||||
className="flex h-[448px] w-[664px] items-center justify-center"
|
||||
className="flex h-112 w-166 items-center justify-center"
|
||||
style={{
|
||||
background:
|
||||
'repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16,24,40,0.04) 4px,transparent 3px, transparent 6px)',
|
||||
@ -440,7 +440,7 @@ function AppTypeCard({ icon, title, description, active, onClick }: AppTypeCardP
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'relative box-content h-[84px] w-[191px] cursor-pointer rounded-xl border-[0.5px] border-components-option-card-option-border bg-components-panel-on-panel-item-bg p-3 text-left shadow-xs outline-hidden hover:shadow-md focus-visible:ring-2 focus-visible:ring-state-accent-solid',
|
||||
'relative box-content h-21 w-47.75 cursor-pointer rounded-xl border-[0.5px] border-components-option-card-option-border bg-components-panel-on-panel-item-bg p-3 text-left shadow-xs outline-hidden hover:shadow-md focus-visible:ring-2 focus-visible:ring-state-accent-solid',
|
||||
active
|
||||
? 'shadow-md outline-[1.5px] outline-components-option-card-option-selected-border outline-solid'
|
||||
: '',
|
||||
|
||||
@ -36,7 +36,7 @@ function DSLConfirmModal({
|
||||
if (!open && !confirmLoading) onCancel()
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent className="w-[480px] overflow-hidden! border-none text-left align-middle shadow-xl">
|
||||
<AlertDialogContent className="w-120 overflow-hidden! border-none text-left align-middle shadow-xl">
|
||||
<div className="flex flex-col items-start gap-2 self-stretch p-6 pb-4">
|
||||
<AlertDialogTitle className="title-2xl-semi-bold text-text-primary">
|
||||
{t(($) => $['newApp.appCreateDSLErrorTitle'], { ns: 'app' })}
|
||||
|
||||
@ -183,7 +183,7 @@ export function Uploader({
|
||||
</span>
|
||||
<div
|
||||
id={fileMetadataId}
|
||||
className="font-inter flex h-3 items-center gap-1 self-stretch text-[10px] leading-3 font-medium text-text-tertiary uppercase"
|
||||
className="font-inter flex h-3 items-center gap-1 self-stretch text-2xs leading-3 font-medium text-text-tertiary uppercase"
|
||||
>
|
||||
<span>{displayName}</span>
|
||||
<span className="text-text-quaternary">·</span>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user