opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-06-07 07:52:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: migrate to tailwind v4 style (#36417)

Browse Source
This commit is contained in:
Stephen Zhou 2026-05-20 11:39:44 +08:00 committed by GitHub
parent 468cc19e68
commit 2b2a5824c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
926 changed files with 2235 additions and 2240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
View File

@ -253,11 +253,11 @@ const Panel: FC = () => {
<TracingIcon size="md" />
<div className="mx-2 system-sm-semibold text-text-secondary">{t(`${I18N_PREFIX}.title`, { ns: 'app' })}</div>
<div className="rounded-md p-1">
<RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
<RiEqualizer2Line className="size-4 text-text-tertiary" />
</div>
<Divider type="vertical" className="h-3.5" />
<div className="rounded-md p-1">
<RiArrowDownDoubleLine className="h-4 w-4 text-text-tertiary" />
<RiArrowDownDoubleLine className="size-4 text-text-tertiary" />
</div>
</div>
</ConfigButton>
@ -297,7 +297,7 @@ const Panel: FC = () => {
</div>
{InUseProviderIcon && <InUseProviderIcon className="ml-1 h-4" />}
<div className="ml-2 rounded-md p-1">
<RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
<RiEqualizer2Line className="size-4 text-text-tertiary" />
</div>
<Divider type="vertical" className="h-3.5" />
</div>

4
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
View File

@ -649,7 +649,7 @@ const ProviderConfigModal: FC<Props> = ({
href={docURL[type]}
>
<span>{t(`${I18N_PREFIX}.viewDocsLink`, { ns: 'app', key: t(`tracing.${type}.title`, { ns: 'app' }) })}</span>
<LinkExternal02 className="h-3 w-3" />
<LinkExternal02 className="size-3" />
</a>
<div className="flex items-center">
{isEdit && (
@ -683,7 +683,7 @@ const ProviderConfigModal: FC<Props> = ({
</div>
<div className="border-t-[0.5px] border-divider-regular">
<div className="flex items-center justify-center bg-background-section-burn py-3 text-xs text-text-tertiary">
<Lock01 className="mr-1 h-3 w-3 text-text-tertiary" />
<Lock01 className="mr-1 size-3 text-text-tertiary" />
{t('modelProvider.encrypted.front', { ns: 'common' })}
<a
className="mx-1 text-primary-600"

4
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
View File

@ -88,7 +88,7 @@ const ProviderPanel: FC<Props> = ({
<div className="flex items-center justify-between space-x-1">
{hasConfigured && (
<div className="flex h-6 cursor-pointer items-center space-x-1 rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-text-secondary shadow-xs" onClick={viewBtnClick}>
<View className="h-3 w-3" />
<View className="size-3" />
<div className="text-xs font-medium">{t(`${I18N_PREFIX}.view`, { ns: 'app' })}</div>
</div>
)}
@ -96,7 +96,7 @@ const ProviderPanel: FC<Props> = ({
className="flex h-6 cursor-pointer items-center space-x-1 rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-text-secondary shadow-xs"
onClick={handleConfigBtnClick}
>
<RiEqualizer2Line className="h-3 w-3" />
<RiEqualizer2Line className="size-3" />
<div className="text-xs font-medium">{t(`${I18N_PREFIX}.config`, { ns: 'app' })}</div>
</div>
</div>

2
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
View File

@ -21,7 +21,7 @@ const TracingIcon: FC<Props> = ({
const sizeClass = sizeClassMap[size]
return (
<div className={cn(className, sizeClass, 'bg-primary-500 shadow-md')}>
<Icon className="h-full w-full" />
<Icon className="size-full" />
</div>
)
}

2
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx
View File

@ -2,7 +2,7 @@ import WorkflowApp from '@/app/components/workflow-app'
const Page = () => {
return (
<div className="h-full w-full overflow-x-auto">
<div className="size-full overflow-x-auto">
<WorkflowApp />
</div>
)

2
web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/pipeline/page.tsx
View File

@ -3,7 +3,7 @@ import RagPipeline from '@/app/components/rag-pipeline'
const PipelinePage = () => {
return (
<div className="h-full w-full overflow-x-auto">
<div className="size-full overflow-x-auto">
<RagPipeline />
</div>
)

28
web/app/(humanInputLayout)/form/[token]/form.tsx
View File

@ -99,11 +99,11 @@ const FormContent = () => {
if (success) {
return (
<div className={cn('flex h-full w-full flex-col items-center justify-center')}>
<div className={cn('flex size-full flex-col items-center justify-center')}>
<div className="max-w-[640px] min-w-[480px]">
<div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
<div className="h-[56px] w-[56px] shrink-0 rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
<RiCheckboxCircleFill className="h-8 w-8 text-text-success" />
<RiCheckboxCircleFill className="size-8 text-text-success" />
</div>
<div className="grow">
<div className="title-4xl-semi-bold text-text-primary">{t('humanInput.thanks', { ns: 'share' })}</div>
@ -127,11 +127,11 @@ const FormContent = () => {
if (expired) {
return (
<div className={cn('flex h-full w-full flex-col items-center justify-center')}>
<div className={cn('flex size-full flex-col items-center justify-center')}>
<div className="max-w-[640px] min-w-[480px]">
<div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
<div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
<RiInformation2Fill className="h-8 w-8 text-text-accent" />
<div className="flex size-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
<RiInformation2Fill className="size-8 text-text-accent" />
</div>
<div className="grow">
<div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
@ -155,11 +155,11 @@ const FormContent = () => {
if (submitted) {
return (
<div className={cn('flex h-full w-full flex-col items-center justify-center')}>
<div className={cn('flex size-full flex-col items-center justify-center')}>
<div className="max-w-[640px] min-w-[480px]">
<div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
<div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
<RiInformation2Fill className="h-8 w-8 text-text-accent" />
<div className="flex size-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
<RiInformation2Fill className="size-8 text-text-accent" />
</div>
<div className="grow">
<div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
@ -183,11 +183,11 @@ const FormContent = () => {
if (rateLimitExceeded) {
return (
<div className={cn('flex h-full w-full flex-col items-center justify-center')}>
<div className={cn('flex size-full flex-col items-center justify-center')}>
<div className="max-w-[640px] min-w-[480px]">
<div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
<div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
<RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
<div className="flex size-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
<RiErrorWarningFill className="size-8 text-text-destructive" />
</div>
<div className="grow">
<div className="title-4xl-semi-bold text-text-primary">{t('humanInput.rateLimitExceeded', { ns: 'share' })}</div>
@ -209,11 +209,11 @@ const FormContent = () => {
if (!formData) {
return (
<div className={cn('flex h-full w-full flex-col items-center justify-center')}>
<div className={cn('flex size-full flex-col items-center justify-center')}>
<div className="max-w-[640px] min-w-[480px]">
<div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
<div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
<RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
<div className="flex size-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
<RiErrorWarningFill className="size-8 text-text-destructive" />
</div>
<div className="grow">
<div className="title-4xl-semi-bold text-text-primary">{t('humanInput.formNotFound', { ns: 'share' })}</div>

2
web/app/(shareLayout)/components/authenticated-layout.tsx
View File

@ -82,7 +82,7 @@ const AuthenticatedLayout = ({ children }: { children: React.ReactNode }) => {
if (userCanAccessApp && !userCanAccessApp.result) {
return (
<div className="flex h-full flex-col items-center justify-center gap-y-2">
<AppUnavailable className="h-auto w-auto" code={403} unknownReason="no permission." />
<AppUnavailable className="size-auto" code={403} unknownReason="no permission." />
<span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>{t('userProfile.logout', { ns: 'common' })}</span>
</div>
)

2
web/app/(shareLayout)/components/splash.tsx
View File

@ -94,7 +94,7 @@ const Splash: FC<PropsWithChildren> = ({ children }) => {
if (message) {
return (
<div className="flex h-full flex-col items-center justify-center gap-y-4">
<AppUnavailable className="h-auto w-auto" code={code || t('common.appUnavailable', { ns: 'share' })} unknownReason={message} />
<AppUnavailable className="size-auto" code={code || t('common.appUnavailable', { ns: 'share' })} unknownReason={message} />
<span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>{code === '403' ? t('userProfile.logout', { ns: 'common' }) : t('login.backToHome', { ns: 'share' })}</span>
</div>
)

4
web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
View File

@ -59,8 +59,8 @@ export default function CheckCode() {
return (
<div className="flex flex-col gap-3">
<div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge text-text-accent-light-mode-only shadow-lg">
<RiMailSendFill className="h-6 w-6 text-2xl" />
<div className="inline-flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge text-text-accent-light-mode-only shadow-lg">
<RiMailSendFill className="size-6 text-2xl" />
</div>
<div className="pt-2 pb-4">
<h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>

4
web/app/(shareLayout)/webapp-reset-password/page.tsx
View File

@ -61,8 +61,8 @@ export default function CheckCode() {
return (
<div className="flex flex-col gap-3">
<div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
<RiLockPasswordLine className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
<div className="inline-flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
<RiLockPasswordLine className="size-6 text-2xl text-text-accent-light-mode-only" />
</div>
<div className="pt-2 pb-4">
<h2 className="title-4xl-semi-bold text-text-primary">{t('resetPassword', { ns: 'login' })}</h2>

4
web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
View File

@ -164,8 +164,8 @@ const ChangePasswordForm = () => {
{showSuccess && (
<div className="flex flex-col md:w-[400px]">
<div className="mx-auto w-full">
<div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
<RiCheckboxCircleFill className="h-6 w-6 text-text-success" />
<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" />
</div>
<h2 className="title-4xl-semi-bold text-text-primary">
{t('passwordChangedTip', { ns: 'login' })}

4
web/app/(shareLayout)/webapp-signin/check-code/page.tsx
View File

@ -97,8 +97,8 @@ export default function CheckCode() {
return (
<div className="flex w-[400px] flex-col gap-3">
<div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
<RiMailSendFill className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
<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>
<div className="pt-2 pb-4">
<h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>

2
web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
View File

@ -75,7 +75,7 @@ const SSOAuth: FC<SSOAuthProps> = ({
disabled={isLoading}
className="w-full"
>
<Lock01 className="mr-2 h-5 w-5 text-text-accent-light-mode-only" />
<Lock01 className="mr-2 size-5 text-text-accent-light-mode-only" />
<span className="truncate">{t('withSSO', { ns: 'login' })}</span>
</Button>
)

22
web/app/(shareLayout)/webapp-signin/normalForm.tsx
View File

@ -57,9 +57,9 @@ const NormalForm = () => {
<div className="mx-auto mt-8 w-full">
<div className="relative">
<div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
<div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
<RiContractLine className="h-5 w-5" />
<RiErrorWarningFill className="absolute -top-1 -right-1 h-4 w-4 text-text-warning-secondary" />
<div className="shadows-shadow-lg relative mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
<RiContractLine className="size-5" />
<RiErrorWarningFill className="absolute -top-1 -right-1 size-4 text-text-warning-secondary" />
</div>
<p className="system-sm-medium text-text-primary">{t('licenseLost', { ns: 'login' })}</p>
<p className="mt-1 system-xs-regular text-text-tertiary">{t('licenseLostTip', { ns: 'login' })}</p>
@ -73,9 +73,9 @@ const NormalForm = () => {
<div className="mx-auto mt-8 w-full">
<div className="relative">
<div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
<div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
<RiContractLine className="h-5 w-5" />
<RiErrorWarningFill className="absolute -top-1 -right-1 h-4 w-4 text-text-warning-secondary" />
<div className="shadows-shadow-lg relative mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
<RiContractLine className="size-5" />
<RiErrorWarningFill className="absolute -top-1 -right-1 size-4 text-text-warning-secondary" />
</div>
<p className="system-sm-medium text-text-primary">{t('licenseExpired', { ns: 'login' })}</p>
<p className="mt-1 system-xs-regular text-text-tertiary">{t('licenseExpiredTip', { ns: 'login' })}</p>
@ -89,9 +89,9 @@ const NormalForm = () => {
<div className="mx-auto mt-8 w-full">
<div className="relative">
<div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
<div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
<RiContractLine className="h-5 w-5" />
<RiErrorWarningFill className="absolute -top-1 -right-1 h-4 w-4 text-text-warning-secondary" />
<div className="shadows-shadow-lg relative mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
<RiContractLine className="size-5" />
<RiErrorWarningFill className="absolute -top-1 -right-1 size-4 text-text-warning-secondary" />
</div>
<p className="system-sm-medium text-text-primary">{t('licenseInactive', { ns: 'login' })}</p>
<p className="mt-1 system-xs-regular text-text-tertiary">{t('licenseInactiveTip', { ns: 'login' })}</p>
@ -156,8 +156,8 @@ const NormalForm = () => {
{allMethodsAreDisabled && (
<>
<div className="rounded-lg bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
<div className="shadows-shadow-lg mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
<RiDoorLockLine className="h-5 w-5" />
<div className="shadows-shadow-lg mb-2 flex size-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
<RiDoorLockLine className="size-5" />
</div>
<p className="system-sm-medium text-text-primary">{t('noLoginMethod', { ns: 'login' })}</p>
<p className="mt-1 system-xs-regular text-text-tertiary">{t('noLoginMethodTip', { ns: 'login' })}</p>

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

@ -63,7 +63,7 @@ const WebSSOForm: FC = () => {
return (
<div className="flex h-full flex-col items-center justify-center gap-y-4">
<AppUnavailable className="h-auto w-auto" isUnknownReason={true} />
<AppUnavailable className="size-auto" isUnknownReason={true} />
<span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>{t('login.backToHome', { ns: 'share' })}</span>
</div>
)

2
web/app/account/(commonLayout)/account-page/email-change-modal.tsx
View File

@ -196,7 +196,7 @@ const EmailChangeModal = ({ onClose, email }: Props) => {
<Dialog open onOpenChange={open => !open && onClose()}>
<DialogContent className="w-[420px]! p-6!">
<div className="absolute top-5 right-5 cursor-pointer p-1.5" onClick={onClose}>
<RiCloseLine className="h-5 w-5 text-text-tertiary" />
<RiCloseLine className="size-5 text-text-tertiary" />
</div>
{step === STEP.start && (
<>

8
web/app/account/(commonLayout)/account-page/index.tsx
View File

@ -159,14 +159,14 @@ export default function AccountPage() {
<div className="pt-2 pb-3">
<h4 className="title-2xl-semi-bold text-text-primary">{t('account.myAccount', { ns: 'common' })}</h4>
</div>
<div className="mb-8 flex items-center rounded-xl bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6">
<div className="mb-8 flex items-center rounded-xl bg-linear-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6">
<AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={mutateUserProfile} size="3xl" />
<div className="ml-4">
<p className="system-xl-semibold text-text-primary">
{userProfile.name}
{isEducationAccount && (
<PremiumBadge size="s" color="blue" className="ml-1 !px-2">
<RiGraduationCapFill aria-hidden="true" className="mr-1 h-3 w-3" />
<PremiumBadge size="s" color="blue" className="ml-1 px-2!">
<RiGraduationCapFill aria-hidden="true" className="mr-1 size-3" />
<span className="system-2xs-medium">EDU</span>
</PremiumBadge>
)}
@ -209,7 +209,7 @@ export default function AccountPage() {
</div>
)
}
<div className="mb-6 border-[1px] border-divider-subtle" />
<div className="mb-6 border border-divider-subtle" />
<div className="mb-8">
<div className={titleClassName}>{t('account.langGeniusAccount', { ns: 'common' })}</div>
<div className={descriptionClassName}>{t('account.langGeniusAccountTip', { ns: 'common' })}</div>

2
web/app/account/(commonLayout)/avatar.tsx
View File

@ -61,7 +61,7 @@ export default function AppSelector() {
{userProfile.name}
{isEducationAccount && (
<PremiumBadge size="s" color="blue" className="ml-1 px-2!">
<span aria-hidden="true" className="mr-1 i-ri-graduation-cap-fill h-3 w-3" />
<span aria-hidden="true" className="mr-1 i-ri-graduation-cap-fill size-3" />
<span className="system-2xs-medium">EDU</span>
</PremiumBadge>
)}

4
web/app/account/(commonLayout)/header.tsx
View File

@ -37,9 +37,9 @@ const Header = () => {
</div>
<div className="flex shrink-0 items-center gap-3">
<Button className="gap-2 px-3 py-2 system-sm-medium" onClick={goToStudio}>
<RiRobot2Line className="h-4 w-4" />
<RiRobot2Line className="size-4" />
<p>{t('account.studio', { ns: 'common' })}</p>
<RiArrowRightUpLine className="h-4 w-4" />
<RiArrowRightUpLine className="size-4" />
</Button>
<div className="h-4 w-px bg-divider-regular" />
<Avatar />

6
web/app/account/oauth/authorize/page.tsx
View File

@ -127,14 +127,14 @@ export default function OAuthAuthorize() {
<div className="bg-background-default-subtle">
{authAppInfo?.app_icon && (
<div className="w-max rounded-2xl border-[0.5px] border-components-panel-border bg-text-primary-on-surface p-3 shadow-lg">
<img src={authAppInfo.app_icon} alt="app icon" className="h-10 w-10 rounded-sm" />
<img src={authAppInfo.app_icon} alt="app icon" className="size-10 rounded-sm" />
</div>
)}
<div className={`mt-5 mb-4 flex flex-col gap-2 ${isLoggedIn ? 'pb-2' : ''}`}>
<div className="title-4xl-semi-bold">
{isLoggedIn && <div className="text-text-primary">{t('connect', { ns: 'oauth' })}</div>}
<div className="text-(--color-saas-dify-blue-inverted)">{authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })}</div>
<div className="text-saas-dify-blue-inverted">{authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })}</div>
{!isLoggedIn && <div className="text-text-primary">{t('tips.notLoggedIn', { ns: 'oauth' })}</div>}
</div>
<div className="body-md-regular text-text-secondary">{isLoggedIn ? `${authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })} ${t('tips.loggedIn', { ns: 'oauth' })}` : t('tips.needLogin', { ns: 'oauth' })}</div>
@ -159,7 +159,7 @@ export default function OAuthAuthorize() {
const Icon = SCOPE_INFO_MAP[scope]
return (
<div key={scope} className="flex items-center gap-2 body-sm-medium text-text-secondary">
{Icon ? <Icon.icon className="h-4 w-4" /> : <RiAccountCircleLine className="h-4 w-4" />}
{Icon ? <Icon.icon className="size-4" /> : <RiAccountCircleLine className="size-4" />}
{Icon!.label}
</div>
)

8
web/app/components/app-sidebar/app-info/app-info-trigger.tsx
View File

@ -36,16 +36,16 @@ const AppInfoTrigger = ({ appDetail, expand, onClick }: AppInfoTriggerProps) =>
</div>
{expand && (
<div className="ml-auto flex items-center justify-center rounded-md p-0.5">
<div className="flex h-5 w-5 items-center justify-center">
<RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
<div className="flex size-5 items-center justify-center">
<RiEqualizer2Line className="size-4 text-text-tertiary" />
</div>
</div>
)}
</div>
{!expand && (
<div className="flex items-center justify-center">
<div className="flex h-5 w-5 items-center justify-center rounded-md p-0.5">
<RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
<div className="flex size-5 items-center justify-center rounded-md p-0.5">
<RiEqualizer2Line className="size-4 text-text-tertiary" />
</div>
</div>
)}

4
web/app/components/app-sidebar/app-info/app-operations.tsx
View File

@ -149,7 +149,7 @@ const AppOperations = ({
className="gap-px focus-visible:ring-inset"
tabIndex={-1}
>
<RiMoreLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
<RiMoreLine className="size-3.5 text-components-button-secondary-text" />
<span className="system-xs-medium text-components-button-secondary-text">
{t('operation.more', { ns: 'common' })}
</span>
@ -183,7 +183,7 @@ const AppOperations = ({
)}
>
<>
<RiMoreLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
<RiMoreLine className="size-3.5 text-components-button-secondary-text" />
<span className="system-xs-medium text-components-button-secondary-text">
{t('operation.more', { ns: 'common' })}
</span>

6
web/app/components/app-sidebar/app-sidebar-dropdown.tsx
View File

@ -59,7 +59,7 @@ const AppSidebarDropdown = ({ navigation, appInfoActions }: Props) => {
background={appDetail.icon_background}
imageUrl={appDetail.icon_url}
/>
<RiMenuLine className="h-4 w-4 text-text-tertiary" />
<RiMenuLine className="size-4 text-text-tertiary" />
</DropdownMenuTrigger>
<DropdownMenuContent
placement="bottom-start"
@ -87,8 +87,8 @@ const AppSidebarDropdown = ({ navigation, appInfoActions }: Props) => {
imageUrl={appDetail.icon_url}
/>
<div className="flex items-center justify-center rounded-md p-0.5">
<div className="flex h-5 w-5 items-center justify-center">
<RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
<div className="flex size-5 items-center justify-center">
<RiEqualizer2Line className="size-4 text-text-tertiary" />
</div>
</div>
</div>

4
web/app/components/app-sidebar/basic.tsx
View File

@ -46,13 +46,13 @@ const ICON_MAP = {
app: <AppIcon className="border border-[rgba(0,0,0,0.05)]!" />,
api: (
<div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 p-1 shadow-md">
<ApiAggregate className="h-4 w-4 text-text-primary-on-surface" />
<ApiAggregate className="size-4 text-text-primary-on-surface" />
</div>
),
dataset: <AppIcon innerIcon={DatasetSvg} className="border-[0.5px]! border-indigo-100! bg-indigo-25!" />,
webapp: (
<div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 p-1 shadow-md">
<WindowCursor className="h-4 w-4 text-text-primary-on-surface" />
<WindowCursor className="size-4 text-text-primary-on-surface" />
</div>
),
notion: <AppIcon innerIcon={NotionSvg} className="border-[0.5px]! border-indigo-100! bg-white!" />,

12
web/app/components/app-sidebar/nav-link/__tests__/index.spec.tsx
View File

@ -109,8 +109,8 @@ describe('NavLink Animation and Layout Issues', () => {
expect(expandedIconWrapper).not.toHaveClass('-ml-1')
// Icon itself maintains consistent classes - no margin changes
expect(iconElement).toHaveClass('h-4')
expect(iconElement).toHaveClass('w-4')
expect(iconElement).toHaveClass('size-4')
expect(iconElement).toHaveClass('size-4')
expect(iconElement).toHaveClass('shrink-0')
// This wrapper approach eliminates the icon margin shift issue
@ -168,8 +168,8 @@ describe('NavLink Animation and Layout Issues', () => {
expect(iconWrapper).toHaveClass('-ml-1')
// Icon itself has consistent classes
expect(iconElement).toHaveClass('h-4')
expect(iconElement).toHaveClass('w-4')
expect(iconElement).toHaveClass('size-4')
expect(iconElement).toHaveClass('size-4')
expect(iconElement).toHaveClass('shrink-0')
rerender(<NavLink {...mockProps} mode="expand" />)
@ -180,8 +180,8 @@ describe('NavLink Animation and Layout Issues', () => {
expect(expandedIconWrapper).not.toHaveClass('-ml-1')
// Icon classes remain consistent - no margin shifts
expect(iconElement).toHaveClass('h-4')
expect(iconElement).toHaveClass('w-4')
expect(iconElement).toHaveClass('size-4')
expect(iconElement).toHaveClass('size-4')
expect(iconElement).toHaveClass('shrink-0')
})
})

2
web/app/components/app-sidebar/nav-link/index.tsx
View File

@ -44,7 +44,7 @@ const NavLink = ({
const renderIcon = () => (
<div className={cn(mode !== 'expand' && '-ml-1')}>
<NavIcon className="h-4 w-4 shrink-0" aria-hidden="true" />
<NavIcon className="size-4 shrink-0" aria-hidden="true" />
</div>
)

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

@ -21,7 +21,7 @@ const EditItem: FC<Props> = ({
onChange,
}) => {
const { t } = useTranslation()
const avatar = type === EditItemType.Query ? <User className="h-6 w-6" /> : <Robot className="h-6 w-6" />
const avatar = type === EditItemType.Query ? <User className="size-6" /> : <Robot className="size-6" />
const name = type === EditItemType.Query ? t('addModal.queryName', { ns: 'appAnnotation' }) : t('addModal.answerName', { ns: 'appAnnotation' })
const placeholder = type === EditItemType.Query ? t('addModal.queryPlaceholder', { ns: 'appAnnotation' }) : t('addModal.answerPlaceholder', { ns: 'appAnnotation' })

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

@ -103,7 +103,7 @@ const AddAnnotationModal: FC<Props> = ({
</DrawerTitle>
<DrawerCloseButton
aria-label={t('operation.close', { ns: 'common' })}
className="h-6 w-6 rounded-md"
className="size-6 rounded-md"
/>
</div>
</div>
@ -127,7 +127,7 @@ const AddAnnotationModal: FC<Props> = ({
<AnnotationFull />
</div>
)}
<div className="flex h-16 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
<div className="flex h-16 items-center justify-between rounded-b-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
<label className="flex items-center space-x-2">
<Checkbox checked={isCreateNext} onCheckedChange={setIsCreateNext} />
<span>{t('addModal.createNext', { ns: 'appAnnotation' })}</span>

2
web/app/components/app/annotation/batch-action.tsx
View File

@ -49,7 +49,7 @@ const BatchAction: FC<IBatchActionProps> = ({
<div className={cn('pointer-events-none flex w-full justify-center gap-x-2', className)}>
<div className="pointer-events-auto flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5">
<div className="inline-flex items-center gap-x-2 py-1 pr-3 pl-2">
<span className="flex h-5 w-5 items-center justify-center rounded-md bg-text-accent system-xs-medium text-text-primary-on-surface">
<span className="flex size-5 items-center justify-center rounded-md bg-text-accent system-xs-medium text-text-primary-on-surface">
{selectedIds.length}
</span>
<span className="system-sm-semibold text-text-accent">{t(`${i18nPrefix}.selected`, { ns: 'appAnnotation' })}</span>

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

@ -78,7 +78,7 @@ const CSVDownload: FC = () => {
data={getTemplate()}
>
<div className="flex h-[18px] items-center space-x-1 system-xs-medium text-text-accent">
<DownloadIcon className="mr-1 h-3 w-3" />
<DownloadIcon className="mr-1 size-3" />
{t('batchModal.template', { ns: 'appAnnotation' })}
</div>
</CSVDownloader>

4
web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
View File

@ -106,7 +106,7 @@ const CSVUploader: FC<Props> = ({
</button>
</div>
</div>
{dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
{dragging && <div ref={dragRef} className="absolute top-0 left-0 size-full" />}
</div>
)}
{file && (
@ -125,7 +125,7 @@ const CSVUploader: FC<Props> = ({
aria-label={t('operation.delete', { ns: 'common' })}
onClick={removeFile}
>
<RiDeleteBinLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
<RiDeleteBinLine className="size-4 text-text-tertiary" aria-hidden="true" />
</button>
</div>
</div>

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

@ -97,7 +97,7 @@ const BatchModal: FC<IBatchModalProps> = ({
aria-label={t('operation.close', { ns: 'common' })}
onClick={onCancel}
>
<RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
<RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
</button>
<CSVUploader
file={currentCSV}

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

@ -22,7 +22,7 @@ type Props = {
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')}>
<RiEditFill className="mr-1 h-3.5 w-3.5" />
<RiEditFill className="mr-1 size-3.5" />
<div>{title}</div>
<div
className="ml-2 h-px grow"
@ -42,7 +42,7 @@ const EditItem: FC<Props> = ({
const { t } = useTranslation()
const [newContent, setNewContent] = useState('')
const showNewContent = newContent && newContent !== content
const avatar = type === EditItemType.Query ? <User className="h-6 w-6" /> : <Robot className="h-6 w-6" />
const avatar = type === EditItemType.Query ? <User className="size-6" /> : <Robot className="size-6" />
const name = type === EditItemType.Query ? t('editModal.queryName', { ns: 'appAnnotation' }) : t('editModal.answerName', { ns: 'appAnnotation' })
const editTitle = type === EditItemType.Query ? t('editModal.yourQuery', { ns: 'appAnnotation' }) : t('editModal.yourAnswer', { ns: 'appAnnotation' })
const placeholder = type === EditItemType.Query ? t('editModal.queryPlaceholder', { ns: 'appAnnotation' }) : t('editModal.answerPlaceholder', { ns: 'appAnnotation' })
@ -94,7 +94,7 @@ const EditItem: FC<Props> = ({
setIsEdit(true)
}}
>
<RiEditLine className="mr-1 h-3.5 w-3.5" />
<RiEditLine className="mr-1 size-3.5" />
<div>{t('operation.edit', { ns: 'common' })}</div>
</div>
)}
@ -116,8 +116,8 @@ const EditItem: FC<Props> = ({
}
}}
>
<div className="h-3.5 w-3.5">
<RiDeleteBinLine className="h-3.5 w-3.5" />
<div className="size-3.5">
<RiDeleteBinLine className="size-3.5" />
</div>
<div>{t('operation.delete', { ns: 'common' })}</div>
</div>

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

@ -126,7 +126,7 @@ const EditAnnotationModal: FC<Props> = ({
</DrawerTitle>
<DrawerCloseButton
aria-label={t('operation.close', { ns: 'common' })}
className="h-6 w-6 rounded-md"
className="size-6 rounded-md"
/>
</div>
</div>
@ -183,7 +183,7 @@ const EditAnnotationModal: FC<Props> = ({
{
annotationId
? (
<div className="flex h-16 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
<div className="flex h-16 items-center justify-between rounded-b-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
<div
className="flex cursor-pointer items-center space-x-2 pl-3"
onClick={() => setShowModal(true)}

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

@ -186,7 +186,7 @@ const HeaderOptions: FC<Props> = ({
return (
<div className="flex space-x-2">
<Button variant="primary" onClick={() => setShowAddModal(true)}>
<span aria-hidden className="mr-0.5 i-ri-add-line h-4 w-4" />
<span aria-hidden className="mr-0.5 i-ri-add-line size-4" />
<div>{t('table.header.addAnnotation', { ns: 'appAnnotation' })}</div>
</Button>
<DropdownMenu modal={false} open={isOperationsMenuOpen} onOpenChange={setIsOperationsMenuOpen}>
@ -194,7 +194,7 @@ const HeaderOptions: FC<Props> = ({
aria-label={t('operation.more', { ns: 'common' })}
className="mr-0 box-border inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg p-0 text-components-button-secondary-text shadow-xs backdrop-blur-[5px] hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover data-popup-open:border-components-button-secondary-border-hover data-popup-open:bg-components-button-secondary-bg-hover"
>
<span aria-hidden className="i-ri-more-fill h-4 w-4" />
<span aria-hidden className="i-ri-more-fill size-4" />
</DropdownMenuTrigger>
<DropdownMenuContent
placement="bottom-end"

4
web/app/components/app/annotation/index.tsx
View File

@ -151,7 +151,7 @@ const Annotation: FC<Props> = (props) => {
{isChatApp && (
<>
<div className={cn(!annotationConfig?.enabled && 'pr-2', 'flex h-7 items-center space-x-1 rounded-lg border border-components-panel-border bg-components-panel-bg-blur pl-2')}>
<MessageFast className="h-4 w-4 text-util-colors-indigo-indigo-600" />
<MessageFast className="size-4 text-util-colors-indigo-indigo-600" />
<div className="system-sm-medium text-text-primary">{t('name', { ns: 'appAnnotation' })}</div>
<Switch
key={controlRefreshSwitch}
@ -179,7 +179,7 @@ const Annotation: FC<Props> = (props) => {
<div className="flex items-center pr-1 pl-1.5">
<div className="mr-1 h-3.5 w-px shrink-0 bg-divider-subtle"></div>
<ActionButton onClick={() => setIsShowEdit(true)}>
<RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
<RiEqualizer2Line className="size-4 text-text-tertiary" />
</ActionButton>
</div>
)}

8
web/app/components/app/annotation/list.tsx
View File

@ -49,13 +49,13 @@ function AnnotationTableRow({
</div>
</td>
<td
className="max-w-62.5 overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
className="max-w-62.5 truncate p-3 pr-2"
title={item.question}
>
<span id={questionId}>{item.question}</span>
</td>
<td
className="max-w-62.5 overflow-hidden p-3 pr-2 text-ellipsis whitespace-nowrap"
className="max-w-62.5 truncate p-3 pr-2"
title={item.answer}
>
{item.answer}
@ -65,13 +65,13 @@ function AnnotationTableRow({
<td className="w-24 p-3 pr-2" onClick={e => e.stopPropagation()}>
<div className="flex space-x-1 text-text-tertiary">
<ActionButton aria-label={t('feature.annotation.edit', { ns: 'appDebug' })} onClick={() => onView(item)}>
<span aria-hidden className="i-ri-edit-line h-4 w-4" />
<span aria-hidden className="i-ri-edit-line size-4" />
</ActionButton>
<ActionButton
aria-label={t('feature.annotation.remove', { ns: 'appDebug' })}
onClick={() => onRemoveClick(item.id)}
>
<span aria-hidden className="i-ri-delete-bin-line h-4 w-4" />
<span aria-hidden className="i-ri-delete-bin-line size-4" />
</ActionButton>
</div>
</td>

2
web/app/components/app/annotation/view-annotation-modal/hit-history-no-data.tsx
View File

@ -9,7 +9,7 @@ const HitHistoryNoData: FC = () => {
return (
<div className="mx-auto mt-20 w-[480px] 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="h-5 w-5 text-text-tertiary" />
<ClockFastForward className="size-5 text-text-tertiary" />
</div>
<div className="system-sm-regular text-text-tertiary">{t('viewModal.noHitHistory', { ns: 'appAnnotation' })}</div>
</div>

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

@ -241,7 +241,7 @@ const ViewAnnotationModal: FC<Props> = ({
</DrawerTitle>
<DrawerCloseButton
aria-label={t('operation.close', { ns: 'common' })}
className="h-6 w-6 rounded-md"
className="size-6 rounded-md"
/>
</div>
</div>
@ -278,7 +278,7 @@ const ViewAnnotationModal: FC<Props> = ({
</AlertDialog>
</div>
{id && (
<div className="flex h-16 shrink-0 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
<div className="flex h-16 shrink-0 items-center justify-between rounded-b-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
<div
className="flex cursor-pointer items-center space-x-2 pl-3"
onClick={() => setShowModal(true)}

2
web/app/components/app/app-access-control/access-control-dialog.tsx
View File

@ -32,7 +32,7 @@ const AccessControlDialog = ({
className,
)}
>
<DialogCloseButton className="top-5 right-5 h-8 w-8" />
<DialogCloseButton className="top-5 right-5 size-8" />
{children}
</DialogContent>
</Dialog>

12
web/app/components/app/app-access-control/add-member-or-group-pop.tsx
View File

@ -111,7 +111,7 @@ export default function AddMemberOrGroupDialog() {
size="small"
className="flex h-6 w-auto shrink-0 items-center gap-x-0.5 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 focus-visible:ring-2 focus-visible:ring-state-accent-solid data-open:bg-state-accent-hover"
>
<RiAddCircleFill className="h-4 w-4" aria-hidden="true" />
<RiAddCircleFill className="size-4" aria-hidden="true" />
<span>{t('operation.add', { ns: 'common' })}</span>
</ComboboxTrigger>
<ComboboxContent
@ -277,8 +277,8 @@ function GroupItem({ group, subject }: GroupItemProps) {
<BaseItem subject={subject}>
<SelectionBox checked={isChecked} />
<ComboboxItemText className="flex grow items-center px-0">
<div className="mr-2 h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
<div className="bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center">
<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" aria-hidden="true" />
</div>
</div>
@ -295,7 +295,7 @@ function GroupItem({ group, subject }: GroupItemProps) {
onClick={handleExpandClick}
>
<span className="px-[3px]">{t('accessControlDialog.operateGroupAndMember.expand', { ns: 'app' })}</span>
<RiArrowRightSLine className="h-4 w-4" aria-hidden="true" />
<RiArrowRightSLine className="size-4" aria-hidden="true" />
</Button>
</div>
)
@ -314,8 +314,8 @@ function MemberItem({ member, subject }: MemberItemProps) {
<BaseItem subject={subject} className="pr-3">
<SelectionBox checked={isChecked} />
<ComboboxItemText className="flex grow items-center px-0">
<div className="mr-2 h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
<div className="bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center">
<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">
<Avatar size="xxs" avatar={null} name={member.name} />
</div>
</div>

6
web/app/components/app/app-access-control/index.tsx
View File

@ -79,7 +79,7 @@ export default function AccessControl(props: AccessControlProps) {
<AccessControlItem type={AccessMode.ORGANIZATION}>
<div className="flex items-center p-3">
<div className="flex grow items-center gap-x-2">
<RiBuildingLine className="h-4 w-4 text-text-primary" />
<RiBuildingLine className="size-4 text-text-primary" />
<p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.organization', { ns: 'app' })}</p>
</div>
</div>
@ -90,7 +90,7 @@ export default function AccessControl(props: AccessControlProps) {
<AccessControlItem type={AccessMode.EXTERNAL_MEMBERS}>
<div className="flex items-center p-3">
<div className="flex grow items-center gap-x-2">
<RiVerifiedBadgeLine className="h-4 w-4 text-text-primary" />
<RiVerifiedBadgeLine className="size-4 text-text-primary" />
<p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.external', { ns: 'app' })}</p>
</div>
{!hideTip && <WebAppSSONotEnabledTip />}
@ -98,7 +98,7 @@ export default function AccessControl(props: AccessControlProps) {
</AccessControlItem>
<AccessControlItem type={AccessMode.PUBLIC}>
<div className="flex items-center gap-x-2 p-3">
<RiGlobalLine className="h-4 w-4 text-text-primary" />
<RiGlobalLine className="size-4 text-text-primary" />
<p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.anyone', { ns: 'app' })}</p>
</div>
</AccessControlItem>

10
web/app/components/app/app-access-control/specific-groups-or-members.tsx
View File

@ -28,7 +28,7 @@ export default function SpecificGroupsOrMembers() {
return (
<div className="flex items-center p-3">
<div className="flex grow items-center gap-x-2">
<RiLockLine className="h-4 w-4 text-text-primary" />
<RiLockLine className="size-4 text-text-primary" />
<p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.specific', { ns: 'app' })}</p>
</div>
</div>
@ -39,7 +39,7 @@ export default function SpecificGroupsOrMembers() {
<div>
<div className="flex items-center gap-x-1 p-3">
<div className="flex grow items-center gap-x-1">
<RiLockLine className="h-4 w-4 text-text-primary" />
<RiLockLine className="size-4 text-text-primary" />
<p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.specific', { ns: 'app' })}</p>
</div>
<div className="flex items-center gap-x-1">
@ -124,15 +124,15 @@ function BaseItem({ icon, onRemove, children }: BaseItemProps) {
return (
<div className="group flex flex-row items-center gap-x-1 rounded-full border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark p-1 pr-1.5 shadow-xs">
<div className="h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
<div className="bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center">
<div className="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">
{icon}
</div>
</div>
{children}
<button
type="button"
className="flex h-4 w-4 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
className="flex size-4 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
aria-label={t('operation.remove', { ns: 'common' })}
onClick={onRemove}
>

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

@ -382,7 +382,7 @@ const AppPublisher = ({
disabled={disabled}
>
{t('common.publish', { ns: 'workflow' })}
<span className="i-ri-arrow-down-s-line h-4 w-4 text-components-button-primary-text" />
<span className="i-ri-arrow-down-s-line size-4 text-components-button-primary-text" />
</Button>
)}
/>
@ -451,7 +451,7 @@ const AppPublisher = ({
{systemFeatures.enable_creators_platform && (
<div className="border-t border-divider-subtle p-4">
<SuggestedAction
icon={<span className="i-ri-store-line h-4 w-4" />}
icon={<span className="i-ri-store-line size-4" />}
disabled={!publishedAt || publishingToMarketplace}
onClick={handlePublishToMarketplace}
>

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

@ -68,7 +68,7 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
>
<>
{t('operation.applyConfig', { ns: 'appDebug' })}
<RiArrowDownSLine className="ml-0.5 h-3 w-3" />
<RiArrowDownSLine className="ml-0.5 size-3" />
</>
</DropdownMenuTrigger>
<DropdownMenuContent

24
web/app/components/app/app-publisher/sections.tsx
View File

@ -85,7 +85,7 @@ export const AccessModeDisplay = ({ mode }: { mode?: keyof typeof ACCESS_MODE_MA
return (
<>
<span className={`${icon} h-4 w-4 shrink-0 text-text-secondary`} />
<span className={`${icon} size-4 shrink-0 text-text-secondary`} />
<div className="grow truncate">
<span className="system-sm-medium text-text-secondary">{t(`accessControlDialog.accessItems.${label}`, { ns: 'app' })}</span>
</div>
@ -170,13 +170,13 @@ export const PublisherSummarySection = ({
{startNodeLimitExceeded && (
<div className="mt-3 flex flex-col items-stretch">
<p
className="text-sm leading-5 font-semibold text-transparent"
className="text-sm/5 font-semibold text-transparent"
style={upgradeHighlightStyle}
>
<span className="block">{t('publishLimit.startNodeTitlePrefix', { ns: 'workflow' })}</span>
<span className="block">{t('publishLimit.startNodeTitleSuffix', { ns: 'workflow' })}</span>
</p>
<p className="mt-1 text-xs leading-4 text-text-secondary">
<p className="mt-1 text-xs/4 text-text-secondary">
{t('publishLimit.startNodeDesc', { ns: 'workflow' })}
</p>
<UpgradeBtn
@ -219,8 +219,8 @@ export const PublisherAccessSection = ({
<AccessModeDisplay mode={accessMode} />
</div>
{!isAppAccessSet && <p className="shrink-0 system-xs-regular text-text-tertiary">{t('publishApp.notSet', { ns: 'app' })}</p>}
<div className="flex h-4 w-4 shrink-0 items-center justify-center">
<span className="i-ri-arrow-right-s-line h-4 w-4 text-text-quaternary" />
<div className="flex size-4 shrink-0 items-center justify-center">
<span className="i-ri-arrow-right-s-line size-4 text-text-quaternary" />
</div>
</div>
{!isAppAccessSet && <p className="mt-1 system-xs-regular text-text-warning">{t('publishApp.notSetDesc', { ns: 'app' })}</p>}
@ -288,11 +288,11 @@ export const PublisherActionsSection = ({
className="flex-1"
disabled={disabledFunctionButton}
link={appURL}
icon={<span className="i-ri-play-circle-line h-4 w-4" />}
icon={<span className="i-ri-play-circle-line size-4" />}
actionButton={showRunConfig
? {
ariaLabel: t('operation.config', { ns: 'common' }),
icon: <RiSettings2Line className="h-4 w-4" />,
icon: <RiSettings2Line className="size-4" />,
onClick: () => handleOpenRunConfig?.(appURL),
}
: undefined}
@ -307,11 +307,11 @@ export const PublisherActionsSection = ({
className="flex-1"
disabled={disabledFunctionButton}
link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
icon={<span className="i-ri-play-list-2-line h-4 w-4" />}
icon={<span className="i-ri-play-list-2-line size-4" />}
actionButton={showBatchRunConfig
? {
ariaLabel: t('operation.config', { ns: 'common' }),
icon: <RiSettings2Line className="h-4 w-4" />,
icon: <RiSettings2Line className="size-4" />,
onClick: () => handleOpenRunConfig?.(`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`),
}
: undefined}
@ -324,7 +324,7 @@ export const PublisherActionsSection = ({
<SuggestedAction
onClick={handleEmbed}
disabled={!publishedAt}
icon={<span className="i-custom-vender-line-development-code-browser h-4 w-4" />}
icon={<span className="i-custom-vender-line-development-code-browser size-4" />}
>
{t('common.embedIntoSite', { ns: 'workflow' })}
</SuggestedAction>
@ -337,7 +337,7 @@ export const PublisherActionsSection = ({
handleOpenInExplore()
}}
disabled={disabledFunctionButton}
icon={<span className="i-ri-planet-line h-4 w-4" />}
icon={<span className="i-ri-planet-line size-4" />}
>
{t('common.openInExplore', { ns: 'workflow' })}
</SuggestedAction>
@ -350,7 +350,7 @@ export const PublisherActionsSection = ({
className="flex-1"
disabled={!publishedAt || missingStartNode}
link="./develop"
icon={<span className="i-ri-terminal-box-line h-4 w-4" />}
icon={<span className="i-ri-terminal-box-line size-4" />}
>
{t('common.accessAPIReference', { ns: 'workflow' })}
</SuggestedAction>

4
web/app/components/app/app-publisher/suggested-action.tsx
View File

@ -56,9 +56,9 @@ const SuggestedAction = ({
onClick={handleClick}
{...props}
>
<div className="relative h-4 w-4 shrink-0">{icon}</div>
<div className="relative size-4 shrink-0">{icon}</div>
<div className="shrink grow basis-0 system-sm-medium">{children}</div>
<RiArrowRightUpLine className="h-3.5 w-3.5 shrink-0" />
<RiArrowRightUpLine className="size-3.5 shrink-0" />
</a>
)

2
web/app/components/app/app-publisher/version-info-modal.tsx
View File

@ -81,7 +81,7 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
</div>
<button
type="button"
className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
className="absolute top-5 right-5 flex size-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
aria-label={t('operation.close', { ns: 'common' })}
onClick={onClose}
>

2
web/app/components/app/configuration/base/feature-panel/index.tsx
View File

@ -28,7 +28,7 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
<div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-b border-divider-subtle')} data-testid="feature-panel-header">
<div className="flex h-8 items-center justify-between">
<div className="flex shrink-0 items-center space-x-1">
{!!headerIcon && <div className="flex h-6 w-6 items-center justify-center">{headerIcon}</div>}
{!!headerIcon && <div className="flex size-6 items-center justify-center">{headerIcon}</div>}
<div className="system-sm-semibold text-text-secondary">{title}</div>
</div>
<div className="flex items-center gap-2">

4
web/app/components/app/configuration/base/operation-btn/index.tsx
View File

@ -17,8 +17,8 @@ type IOperationBtnProps = {
}
const iconMap = {
add: <RiAddLine className="h-3.5 w-3.5" />,
edit: <RiEditLine className="h-3.5 w-3.5" />,
add: <RiAddLine className="size-3.5" />,
edit: <RiEditLine className="size-3.5" />,
}
const OperationBtn: FC<IOperationBtnProps> = ({

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

@ -17,7 +17,7 @@ const HasNotSetAPI: FC<IHasNotSetAPIProps> = ({
<div className="flex w-full max-w-[400px] 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 h-5 w-5 text-text-tertiary" />
<span className="i-ri-brain-2-line size-5 text-text-tertiary" />
</div>
</div>
<div className="flex flex-col gap-1">
@ -30,7 +30,7 @@ const HasNotSetAPI: FC<IHasNotSetAPIProps> = ({
onClick={onSetting}
>
<span className="system-sm-medium text-components-button-secondary-accent-text">{t('manageModels', { ns: 'appDebug' })}</span>
<span className="i-ri-arrow-right-line h-4 w-4 text-components-button-secondary-accent-text" />
<span className="i-ri-arrow-right-line size-4 text-components-button-secondary-accent-text" />
</button>
</div>
</div>

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

@ -24,7 +24,7 @@ const WarningMask: FC<IWarningMaskProps> = ({
return (
<div className={`${s.mask} absolute inset-0 z-10 bg-components-panel-bg-blur pt-16`}>
<div className="mx-auto px-10">
<div className={`${s.icon} flex h-11 w-11 items-center justify-center rounded-xl bg-components-panel-bg`}>{warningIcon}</div>
<div className={`${s.icon} flex size-11 items-center justify-center rounded-xl bg-components-panel-bg`}>{warningIcon}</div>
<div className="mt-4 text-[24px] leading-normal font-semibold text-text-primary">
{title}
</div>

10
web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
View File

@ -144,7 +144,7 @@ const AdvancedPromptInput: FC<Props> = ({
const [editorHeight, setEditorHeight] = React.useState(isChatMode ? 200 : 508)
const contextMissing = (
<div
className="flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl pt-2 pr-3 pb-1 pl-4"
className="flex h-11 items-center justify-between rounded-t-xl pt-2 pr-3 pb-1 pl-4"
style={{
background: 'linear-gradient(180deg, #FEF0C7 0%, rgba(254, 240, 199, 0) 100%)',
}}
@ -168,7 +168,7 @@ const AdvancedPromptInput: FC<Props> = ({
{isContextMissing
? contextMissing
: (
<div className={cn(s.boxHeader, 'flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl bg-background-default pt-2 pr-3 pb-1 pl-4 hover:shadow-xs')}>
<div className={cn(s.boxHeader, 'flex h-11 items-center justify-between rounded-t-xl bg-background-default pt-2 pr-3 pb-1 pl-4 hover:shadow-xs')}>
{isChatMode
? (
<MessageTypeSelector value={type} onChange={onTypeChange} />
@ -190,12 +190,12 @@ const AdvancedPromptInput: FC<Props> = ({
)}
<div className={cn(s.optionWrap, 'items-center space-x-1')}>
{canDelete && (
<RiDeleteBinLine onClick={onDelete} className="h-6 w-6 cursor-pointer p-1 text-text-tertiary" />
<RiDeleteBinLine onClick={onDelete} className="size-6 cursor-pointer p-1 text-text-tertiary" />
)}
{!isCopied
? (
<Copy
className="h-6 w-6 cursor-pointer p-1 text-text-tertiary"
className="size-6 cursor-pointer p-1 text-text-tertiary"
onClick={() => {
copy(value)
setIsCopied(true)
@ -203,7 +203,7 @@ const AdvancedPromptInput: FC<Props> = ({
/>
)
: (
<CopyCheck className="h-6 w-6 p-1 text-text-tertiary" />
<CopyCheck className="size-6 p-1 text-text-tertiary" />
)}
</div>
</div>

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

@ -49,7 +49,7 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
>
<div className="flex items-start space-x-3">
<div
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-components-card-border bg-components-card-bg-alt shadow-lg"
className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-components-card-border bg-components-card-bg-alt shadow-lg"
>
{VarIcon}
</div>

4
web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
View File

@ -39,7 +39,7 @@ const EditModal: FC<Props> = ({
<div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('feature.conversationHistory.editModal.userPrefix', { ns: 'appDebug' })}</div>
<input
className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10"
className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm/10"
value={tempData.user_prefix}
onChange={e => setTempData({
...tempData,
@ -49,7 +49,7 @@ const EditModal: FC<Props> = ({
<div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('feature.conversationHistory.editModal.assistantPrefix', { ns: 'appDebug' })}</div>
<input
className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10"
className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm/10"
value={tempData.assistant_prefix}
onChange={e => setTempData({
...tempData,

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

@ -161,7 +161,7 @@ const Prompt: FC<IPromptProps> = ({
onClick={handleAddMessage}
className="mt-3 w-full"
>
<RiAddLine className="mr-2 h-4 w-4" />
<RiAddLine className="mr-2 size-4" />
<div>{t('promptMode.operation.addMessage', { ns: 'appDebug' })}</div>
</Button>
)}

2
web/app/components/app/configuration/config-prompt/message-type-selector.tsx
View File

@ -28,7 +28,7 @@ const MessageTypeSelector: FC<Props> = ({
className={cn(showOption && 'bg-indigo-100', 'flex h-7 cursor-pointer items-center space-x-0.5 rounded-lg pr-1 pl-1.5 text-indigo-800')}
>
<div className="text-sm font-semibold uppercase">{value}</div>
<ChevronSelectorVertical className="h-3 w-3" />
<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">

2
web/app/components/app/configuration/config-var/__tests__/var-item.spec.tsx
View File

@ -20,7 +20,7 @@ describe('VarItem', () => {
expect(screen.getByTitle('api_key · API Key')).toBeInTheDocument()
expect(screen.getByText('required')).toBeInTheDocument()
const editButton = container.querySelector('.mr-1.flex.h-6.w-6') as HTMLElement
const editButton = container.querySelector('.mr-1.flex.size-6') as HTMLElement
fireEvent.click(editButton)
expect(onEdit).toHaveBeenCalledTimes(1)

8
web/app/components/app/configuration/config-var/config-select/index.tsx
View File

@ -49,7 +49,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
)}
key={index}
>
<RiDraggable className="handle h-4 w-4 cursor-grab text-text-quaternary" />
<RiDraggable className="handle size-4 cursor-grab text-text-quaternary" />
<input
key={index}
type="input"
@ -63,7 +63,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
return item
}))
}}
className="h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pr-8 pl-1.5 text-sm leading-9 text-text-secondary focus:outline-hidden"
className="h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pr-8 pl-1.5 text-sm/9 text-text-secondary focus:outline-hidden"
onFocus={() => setFocusID(index)}
onBlur={() => setFocusID(null)}
/>
@ -78,7 +78,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
onMouseEnter={() => setDeletingID(index)}
onMouseLeave={() => setDeletingID(null)}
>
<RiDeleteBinLine className="h-3.5 w-3.5" aria-hidden="true" />
<RiDeleteBinLine className="size-3.5" aria-hidden="true" />
</button>
</div>
))}
@ -90,7 +90,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
onClick={() => { onChange([...options, '']) }}
className="mt-1 flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-components-button-tertiary-bg px-3 text-components-button-tertiary-text hover:bg-components-button-tertiary-bg-hover"
>
<RiAddLine className="h-4 w-4" />
<RiAddLine className="size-4" />
<div className="system-sm-medium text-[13px]">{t('variableConfig.addOption', { ns: 'appDebug' })}</div>
</div>
</div>

2
web/app/components/app/configuration/config-var/input-type-icon.tsx
View File

@ -11,7 +11,7 @@ export type IInputTypeIconProps = {
}
const IconMap = (type: IInputTypeIconProps['type'], className: string) => {
const classNames = `h-3.5 w-3.5 ${className}`
const classNames = `size-3.5 ${className}`
const icons = {
string: (
<InputVarTypeIcon type={InputVarType.textInput} className={classNames} />

2
web/app/components/app/configuration/config-var/select-type-item/index.tsx
View File

@ -38,7 +38,7 @@ const SelectTypeItem: FC<ISelectTypeItemProps> = ({
onClick={onClick}
>
<div className="shrink-0">
<InputVarTypeIcon type={type} className="h-5 w-5" />
<InputVarTypeIcon type={type} className="size-5" />
</div>
<span>{typeName}</span>
</div>

2
web/app/components/app/configuration/config-var/select-var-type.tsx
View File

@ -33,7 +33,7 @@ const SelectItem: FC<ItemProps> = ({ text, type, value, Icon, onClick }) => {
className="h-8 rounded-lg px-3 text-text-primary"
onClick={() => onClick(value)}
>
{Icon ? <Icon className="h-4 w-4 text-text-secondary" /> : <InputVarTypeIcon type={type!} className="h-4 w-4 text-text-secondary" />}
{Icon ? <Icon className="size-4 text-text-secondary" /> : <InputVarTypeIcon type={type!} className="size-4 text-text-secondary" />}
<div className="ml-2 truncate text-xs text-text-primary">{text}</div>
</DropdownMenuItem>
)

12
web/app/components/app/configuration/config-var/var-item.tsx
View File

@ -42,9 +42,9 @@ 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', isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover', readonly && 'cursor-not-allowed', className)}>
<VarIcon className={cn('mr-1 h-4 w-4 shrink-0 text-text-accent', canDrag && 'group-hover:opacity-0')} />
<VarIcon className={cn('mr-1 size-4 shrink-0 text-text-accent', canDrag && 'group-hover:opacity-0')} />
{canDrag && (
<RiDraggable className="absolute top-3 left-3 hidden h-3 w-3 cursor-pointer text-text-tertiary group-hover:block" />
<RiDraggable className="absolute top-3 left-3 hidden size-3 cursor-pointer text-text-tertiary group-hover:block" />
)}
<div className="flex w-0 grow items-center">
<div className="truncate" title={`${name} · ${label}`}>
@ -63,20 +63,20 @@ const VarItem: FC<ItemProps> = ({
<button
type="button"
aria-label={t('operation.edit', { ns: 'common' })}
className="mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 hover:bg-black/5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
className="mr-1 flex size-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 hover:bg-black/5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
onClick={onEdit}
>
<RiEditLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
<RiEditLine className="size-4 text-text-tertiary" aria-hidden="true" />
</button>
<button
type="button"
aria-label={t('operation.delete', { ns: 'common' })}
className="flex h-6 w-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-text-tertiary hover:text-text-destructive focus-visible:ring-1 focus-visible:ring-state-destructive-border focus-visible:outline-hidden"
className="flex size-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-text-tertiary hover:text-text-destructive focus-visible:ring-1 focus-visible:ring-state-destructive-border focus-visible:outline-hidden"
onClick={onRemove}
onMouseOver={() => setIsDeleting(true)}
onMouseLeave={() => setIsDeleting(false)}
>
<RiDeleteBinLine className="h-4 w-4" aria-hidden="true" />
<RiDeleteBinLine className="size-4" aria-hidden="true" />
</button>
</div>
</div>

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

@ -65,7 +65,7 @@ const ConfigVision: FC = () => {
<div className="mt-2 flex items-center gap-2 rounded-xl border-t-[0.5px] border-l-[0.5px] border-effects-highlight bg-background-section-burn p-2">
<div className="shrink-0 p-1">
<div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs">
<Vision className="h-4 w-4 text-text-primary-on-surface" />
<Vision className="size-4 text-text-primary-on-surface" />
</div>
</div>
<div className="flex grow items-center">

2
web/app/components/app/configuration/config-vision/param-config-content.tsx
View File

@ -42,7 +42,7 @@ const ParamConfigContent: FC = () => {
return (
<div>
<div className="text-base leading-6 font-semibold text-text-primary">{t('vision.visionSettings.title', { ns: 'appDebug' })}</div>
<div className="text-base/6 font-semibold text-text-primary">{t('vision.visionSettings.title', { ns: 'appDebug' })}</div>
<div className="space-y-6 pt-3">
<div>
<div className="mb-2 flex items-center space-x-1">

2
web/app/components/app/configuration/config-vision/param-config.tsx
View File

@ -20,7 +20,7 @@ const ParamsConfig: FC = () => {
<PopoverTrigger
render={(
<Button variant="ghost" size="small" className={cn('')}>
<RiSettings2Line className="h-3.5 w-3.5" />
<RiSettings2Line className="size-3.5" />
<div className="ml-1">{t('voice.settings', { ns: 'appDebug' })}</div>
</Button>
)}

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

@ -27,7 +27,7 @@ const AgentSettingButton: FC<Props> = ({
return (
<>
<Button onClick={() => setIsShowAgentSetting(true)} className="mr-2 shrink-0">
<RiSettings2Line className="mr-1 h-4 w-4 text-text-tertiary" />
<RiSettings2Line className="mr-1 size-4 text-text-tertiary" />
{t('agent.setting.name', { ns: 'appDebug' })}
</Button>
{isShowAgentSetting && (

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

@ -66,9 +66,9 @@ const AgentSetting: FC<Props> = ({
<div className="flex items-center">
<div
onClick={onCancel}
className="flex h-6 w-6 cursor-pointer items-center justify-center"
className="flex size-6 cursor-pointer items-center justify-center"
>
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
<RiCloseLine className="size-4 text-text-tertiary" />
</div>
</div>
</div>
@ -83,7 +83,7 @@ const AgentSetting: FC<Props> = ({
<ItemPanel
className="mb-4"
icon={
<CuteRobot className="h-4 w-4 text-indigo-600" />
<CuteRobot className="size-4 text-indigo-600" />
}
name={t('agent.agentMode', { ns: 'appDebug' })}
description={t('agent.agentModeDes', { ns: 'appDebug' })}
@ -139,7 +139,7 @@ const AgentSetting: FC<Props> = ({
{!isFunctionCall && (
<div className="rounded-xl bg-background-section-burn py-2 shadow-xs">
<div className="flex h-8 items-center px-4 text-sm leading-6 font-semibold text-text-secondary">{t('builtInPromptTitle', { ns: 'tools' })}</div>
<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">
{isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion}
</div>

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

@ -23,7 +23,7 @@ const ItemPanel: FC<Props> = ({
<div className={cn(className, 'flex h-12 items-center justify-between rounded-lg bg-background-section-burn px-3')}>
<div className="flex items-center">
{icon}
<div className="mr-1 ml-3 text-sm leading-6 font-semibold text-text-secondary">{name}</div>
<div className="mr-1 ml-3 text-sm/6 font-semibold text-text-secondary">{name}</div>
<Infotip aria-label={description} popupClassName="w-[180px]">
{description}
</Infotip>

10
web/app/components/app/configuration/config/agent/agent-tools/index.tsx
View File

@ -198,10 +198,10 @@ const AgentTools: FC = () => {
)}
>
<div className="flex w-0 grow items-center">
{item.isDeleted && <DefaultToolIcon className="h-5 w-5" />}
{item.isDeleted && <DefaultToolIcon className="size-5" />}
{!item.isDeleted && (
<div className={cn((item.notAuthor || !item.enabled) && 'shrink-0 opacity-50')}>
{typeof item.icon === 'string' && <div className="h-5 w-5 rounded-md bg-cover bg-center" style={{ backgroundImage: `url(${item.icon})` }} />}
{typeof item.icon === 'string' && <div className="size-5 rounded-md bg-cover bg-center" style={{ backgroundImage: `url(${item.icon})` }} />}
{typeof item.icon !== 'string' && <AppIcon className="rounded-md" size="xs" icon={item.icon?.content} background={item.icon?.background} />}
</div>
)}
@ -268,7 +268,7 @@ const AgentTools: FC = () => {
onMouseOver={() => setIsDeleting(index)}
onMouseLeave={() => setIsDeleting(-1)}
>
<RiDeleteBinLine className="h-4 w-4" aria-hidden="true" />
<RiDeleteBinLine className="size-4" aria-hidden="true" />
</button>
</div>
)}
@ -287,7 +287,7 @@ const AgentTools: FC = () => {
setIsShowSettingTool(true)
}}
>
<RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
<RiEqualizer2Line className="size-4 text-text-tertiary" />
</button>
)}
/>
@ -310,7 +310,7 @@ const AgentTools: FC = () => {
onMouseOver={() => setIsDeleting(index)}
onMouseLeave={() => setIsDeleting(-1)}
>
<RiDeleteBinLine className="h-4 w-4" aria-hidden="true" />
<RiDeleteBinLine className="size-4" aria-hidden="true" />
</button>
</div>
)}

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

@ -192,7 +192,7 @@ const SettingBuiltInTool: FC<Props> = ({
<div className="relative border-b border-divider-subtle p-4 pb-3">
<div className="absolute top-3 right-3">
<ActionButton onClick={onHide}>
<RiCloseLine className="h-4 w-4" />
<RiCloseLine className="size-4" />
</ActionButton>
</div>
{showBackButton && (
@ -200,12 +200,12 @@ const SettingBuiltInTool: FC<Props> = ({
className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
onClick={onHide}
>
<RiArrowLeftLine className="h-4 w-4" />
<RiArrowLeftLine className="size-4" />
{t('detailPanel.operation.back', { ns: 'plugin' })}
</div>
)}
<div className="flex items-center gap-1">
<Icon size="tiny" className="h-6 w-6" src={collection.icon} />
<Icon size="tiny" className="size-6" src={collection.icon} />
<OrgInfo
packageNameClassName="w-auto"
orgName={collection.author}

10
web/app/components/app/configuration/config/assistant-type-picker/index.tsx
View File

@ -47,9 +47,9 @@ const SelectItem: FC<ItemProps> = ({ text, value, Icon, isChecked, description,
<div className="flex items-center justify-between">
<div className="flex items-center">
<div className="mr-3 rounded-lg bg-indigo-50 p-1">
<Icon className="h-4 w-4 text-indigo-600" />
<Icon className="size-4 text-indigo-600" />
</div>
<div className="text-sm leading-5 font-medium text-gray-900">{text}</div>
<div className="text-sm/5 font-medium text-gray-900">{text}</div>
</div>
<Radio isChecked={isChecked} />
</div>
@ -117,9 +117,9 @@ const AssistantTypePicker: FC<Props> = ({
<div className={cn(open && 'bg-gray-50', 'flex h-8 cursor-pointer items-center space-x-1 rounded-lg border border-black/5 px-3 text-indigo-600 select-none')} />
)}
>
{isAgent ? <BubbleText className="h-3 w-3" /> : <CuteRobot className="h-3 w-3" />}
{isAgent ? <BubbleText className="size-3" /> : <CuteRobot className="size-3" />}
<div className="text-xs font-medium">{t(`assistantType.${isAgent ? 'agentAssistant' : 'chatAssistant'}.name`, { ns: 'appDebug' })}</div>
<RiArrowDownSLine className="h-3 w-3" />
<RiArrowDownSLine className="size-3" />
</PopoverTrigger>
<PopoverContent
placement="bottom-end"
@ -127,7 +127,7 @@ const AssistantTypePicker: FC<Props> = ({
alignOffset={-2}
popupClassName="relative left-0.5 w-[480px] rounded-xl border border-black/8 bg-white p-6 shadow-lg"
>
<div className="mb-2 text-sm leading-5 font-semibold text-gray-900">{t('assistantType.name', { ns: 'appDebug' })}</div>
<div className="mb-2 text-sm/5 font-semibold text-gray-900">{t('assistantType.name', { ns: 'appDebug' })}</div>
<SelectItem
Icon={BubbleText}
value="chat"

2
web/app/components/app/configuration/config/automatic/automatic-btn.tsx
View File

@ -17,7 +17,7 @@ const AutomaticBtn: FC<IAutomaticBtnProps> = ({
return (
<Button variant="secondary-accent" size="small" onClick={onClick}>
<RiSparklingFill className="mr-1 h-3.5 w-3.5" />
<RiSparklingFill className="mr-1 size-3.5" />
<span className="">{t('operation.automatic', { ns: 'appDebug' })}</span>
</Button>
)

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

@ -72,7 +72,7 @@ const TryLabel: FC<{
className="mt-2 mr-1 flex h-7 shrink-0 cursor-pointer items-center rounded-lg bg-components-button-secondary-bg px-2"
onClick={onClick}
>
<Icon className="h-4 w-4 text-text-tertiary"></Icon>
<Icon className="size-4 text-text-tertiary"></Icon>
<div className="ml-1 text-xs font-medium text-text-secondary">{text}</div>
</div>
)
@ -375,7 +375,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
onClick={onGenerate}
disabled={isLoading}
>
<Generator className="h-4 w-4" />
<Generator className="size-4" />
<span className="text-xs font-semibold">{t('generate.generate', { ns: 'appDebug' })}</span>
</Button>
</div>

2
web/app/components/app/configuration/config/automatic/idea-output.tsx
View File

@ -27,7 +27,7 @@ const IdeaOutput: FC<Props> = ({
return (
<div className="mt-4 text-[0px]">
<div
className="mb-1.5 flex cursor-pointer items-center text-sm leading-5 font-medium text-text-primary"
className="mb-1.5 flex cursor-pointer items-center text-sm/5 font-medium text-text-primary"
onClick={toggleFoldIdeaOutput}
>
<div className="mr-1 system-sm-semibold-uppercase text-text-secondary">{t(`${i18nPrefix}.idealOutput`, { ns: 'appDebug' })}</div>

2
web/app/components/app/configuration/config/automatic/result.tsx
View File

@ -57,7 +57,7 @@ const Result: FC<Props> = ({
toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
}}
>
<RiClipboardLine className="h-4 w-4 text-text-secondary" />
<RiClipboardLine className="size-4 text-text-secondary" />
</Button>
<Button variant="primary" onClick={onApply}>
{t('generate.apply', { ns: 'appDebug' })}

2
web/app/components/app/configuration/config/automatic/version-selector.tsx
View File

@ -85,7 +85,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
{option.label}
</div>
{
value === option.value && <RiCheckLine className="h-4 w-4 shrink-0 text-text-accent" />
value === option.value && <RiCheckLine className="size-4 shrink-0 text-text-accent" />
}
</DropdownMenuRadioItem>
))}

2
web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
View File

@ -254,7 +254,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
onClick={onGenerate}
disabled={isLoading}
>
<Generator className="h-4 w-4" />
<Generator className="size-4" />
<span className="text-xs font-semibold">{t('codegen.generate', { ns: 'appDebug' })}</span>
</Button>
</div>

2
web/app/components/app/configuration/config/config-audio.tsx
View File

@ -52,7 +52,7 @@ const ConfigAudio: FC = () => {
<div className="mt-2 flex items-center gap-2 rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn p-2">
<div className="shrink-0 p-1">
<div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs">
<Microphone01 className="h-4 w-4 text-text-primary-on-surface" />
<Microphone01 className="size-4 text-text-primary-on-surface" />
</div>
</div>
<div className="flex grow items-center">

2
web/app/components/app/configuration/config/config-document.tsx
View File

@ -52,7 +52,7 @@ const ConfigDocument: FC = () => {
<div className="mt-2 flex items-center gap-2 rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn p-2">
<div className="shrink-0 p-1">
<div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs">
<Document className="h-4 w-4 text-text-primary-on-surface" />
<Document className="size-4 text-text-primary-on-surface" />
</div>
</div>
<div className="flex grow items-center">

6
web/app/components/app/configuration/configuration-view.tsx
View File

@ -130,14 +130,14 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
{isMobile && (
<Button className="mr-2 h-8! text-[13px]! font-medium" onClick={onOpenDebugPanel}>
<span className="mr-1">{t('operation.debugConfig', { ns: 'appDebug' })}</span>
<CodeBracketIcon className="h-4 w-4 text-text-tertiary" />
<CodeBracketIcon className="size-4 text-text-tertiary" />
</Button>
)}
<AppPublisher {...appPublisherProps} />
</div>
</div>
</div>
<div className={`flex h-full w-full shrink-0 flex-col sm:w-1/2 ${debugWithMultipleModel && 'max-w-[560px]'}`}>
<div className={`flex size-full shrink-0 flex-col sm:w-1/2 ${debugWithMultipleModel && 'max-w-[560px]'}`}>
<Config />
</div>
{!isMobile && (
@ -217,7 +217,7 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
<div className="mb-4 flex shrink-0 justify-end">
<DrawerCloseButton
aria-label={t('operation.close', { ns: 'common' })}
className="h-6 w-6 rounded-md"
className="size-6 rounded-md"
/>
</div>
<Debug

4
web/app/components/app/configuration/dataset-config/card-item/index.tsx
View File

@ -86,7 +86,7 @@ const Item: FC<ItemProps> = ({
setShowSettingsModal(true)
}}
>
<RiEditLine className="h-4 w-4 shrink-0 text-text-tertiary" />
<RiEditLine className="size-4 shrink-0 text-text-tertiary" />
</ActionButton>
)
}
@ -98,7 +98,7 @@ const Item: FC<ItemProps> = ({
onMouseEnter={() => setIsDeleting(true)}
onMouseLeave={() => setIsDeleting(false)}
>
<RiDeleteBinLine className={cn('h-4 w-4 shrink-0 text-text-tertiary', isDeleting && 'text-text-destructive')} />
<RiDeleteBinLine className={cn('size-4 shrink-0 text-text-tertiary', isDeleting && 'text-text-destructive')} />
</ActionButton>
)
}

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

@ -17,7 +17,7 @@ const ContextVar: FC<Props> = (props) => {
<div className={cn(notSetVar ? 'rounded-br-xl rounded-bl-xl border-[#FEF0C7] bg-[#FEF0C7]' : 'border-components-panel-border-subtle', 'flex h-12 items-center justify-between border-t px-3')}>
<div className="flex shrink-0 items-center space-x-1">
<div className="p-1">
<BracketsX className="h-4 w-4 text-text-accent" />
<BracketsX className="size-4 text-text-accent" />
</div>
<div className="mr-1 text-sm font-medium text-text-secondary">{t('feature.dataSet.queryVariable.title', { ns: 'appDebug' })}</div>
<Infotip

4
web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
View File

@ -74,7 +74,7 @@ const VarPicker: FC<Props> = ({
</div>
)}
</div>
<ChevronDownIcon className={cn(open && 'rotate-180 text-text-tertiary', 'h-3.5 w-3.5')} />
<ChevronDownIcon className={cn(open && 'rotate-180 text-text-tertiary', 'size-3.5')} />
</div>
</div>
)}
@ -104,7 +104,7 @@ const VarPicker: FC<Props> = ({
: (
<div className="w-[240px] 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>
<div className="text-xs leading-normal text-text-tertiary">{t('feature.dataSet.queryVariable.noVarTip', { ns: 'appDebug' })}</div>
<div className="text-xs/normal text-text-tertiary">{t('feature.dataSet.queryVariable.noVarTip', { ns: 'appDebug' })}</div>
</div>
)}
</PopoverContent>

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

@ -246,7 +246,7 @@ const ConfigContent: FC<Props> = ({
<div className="truncate">{option.label}</div>
<Infotip
aria-label={option.tips}
className="ml-0.5 h-3.5 w-3.5"
className="ml-0.5 size-3.5"
iconClassName="h-3.5 w-3.5"
popupClassName="w-[200px]"
>

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

@ -118,7 +118,7 @@ const ParamsConfig = ({
}}
disabled={disabled}
>
<RiEqualizer2Line className="mr-1 h-3.5 w-3.5" />
<RiEqualizer2Line className="mr-1 size-3.5" />
{t('retrievalSettings', { ns: 'dataset' })}
</Button>
{

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

@ -199,9 +199,9 @@ const SettingsModal: FC<SettingsModalProps> = ({
<div className="flex items-center">
<div
onClick={onCancel}
className="flex h-6 w-6 cursor-pointer items-center justify-center"
className="flex size-6 cursor-pointer items-center justify-center"
>
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
<RiCloseLine className="size-4 text-text-tertiary" />
</div>
</div>
</div>
@ -279,7 +279,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
modelList={embeddingModelList}
/>
</div>
<div className="mt-2 w-full text-xs leading-6 text-text-tertiary">
<div className="mt-2 w-full text-xs/6 text-text-tertiary">
{t('form.embeddingModelTip', { ns: 'datasetSettings' })}
<button
type="button"

4
web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
View File

@ -57,7 +57,7 @@ const ExternalRetrievalSection: FC<ExternalRetrievalSectionProps> = ({
</div>
<div className="w-full max-w-[480px]">
<div className="flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2">
<ApiConnectionMod className="h-4 w-4 text-text-secondary" />
<ApiConnectionMod className="size-4 text-text-secondary" />
<div className="overflow-hidden system-sm-medium text-ellipsis text-text-secondary">
{currentDataset?.external_knowledge_info.external_knowledge_api_name}
</div>
@ -212,7 +212,7 @@ export const RetrievalChangeTip: FC<RetrievalChangeTipProps> = ({
}}
aria-label="close-retrieval-change-tip"
>
<RiCloseLine className="h-4 w-4 text-gray-500" />
<RiCloseLine className="size-4 text-gray-500" />
</button>
</div>
)

2
web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx
View File

@ -99,7 +99,7 @@ const DebugItem: FC<DebugItemProps> = ({
className={cn(open && 'bg-state-base-hover', 'focus-visible:ring-2 focus-visible:ring-state-accent-solid')}
aria-label={t('operation.more', { ns: 'common' })}
>
<span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
<span aria-hidden className="i-ri-more-fill size-4 text-text-tertiary" />
</ActionButton>
)}
/>

8
web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx
View File

@ -94,7 +94,7 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
{
iconProvider && !isEmpty && (
<ModelIcon
className="mr-1 h-4! w-4!"
className="mr-1 size-4!"
provider={iconProvider}
modelName={currentModel?.model || modelAndParameter.model}
/>
@ -102,8 +102,8 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
}
{
(!iconProvider || isEmpty) && (
<div className="mr-1 flex h-4 w-4 items-center justify-center rounded-sm">
<span className="i-custom-vender-line-shapes-cube-outline h-4 w-4 text-text-accent" />
<div className="mr-1 flex size-4 items-center justify-center rounded-sm">
<span className="i-custom-vender-line-shapes-cube-outline size-4 text-text-accent" />
</div>
)
}
@ -129,7 +129,7 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
</div>
)
}
<span className={`i-ri-arrow-down-s-line h-3 w-3 ${isEmpty ? 'text-text-accent' : 'text-text-tertiary'}`} />
<span className={`i-ri-arrow-down-s-line size-3 ${isEmpty ? 'text-text-accent' : 'text-text-tertiary'}`} />
{
!isEmpty && !isActive && statusLabelKey && (
<Tooltip>

10
web/app/components/app/configuration/debug/index.tsx
View File

@ -406,7 +406,7 @@ const Debug: FC<IDebug> = ({
onClick={() => onMultipleModelConfigsChange(true, [...multipleModelConfigs, { id: `${Date.now()}`, model: '', provider: '', parameters: {} }])}
disabled={multipleModelConfigs.length >= 4}
>
<RiAddLine className="mr-1 h-3.5 w-3.5" />
<RiAddLine className="mr-1 size-3.5" />
{t('modelProvider.addModel', { ns: 'common' })}
(
{multipleModelConfigs.length}
@ -422,7 +422,7 @@ const Debug: FC<IDebug> = ({
{
!readonly && (
<Tooltip>
<TooltipTrigger render={<ActionButton onClick={clearConversation}><RefreshCcw01 className="h-4 w-4" /></ActionButton>} />
<TooltipTrigger render={<ActionButton onClick={clearConversation}><RefreshCcw01 className="size-4" /></ActionButton>} />
<TooltipContent>
{t('operation.refresh', { ns: 'common' })}
</TooltipContent>
@ -434,7 +434,7 @@ const Debug: FC<IDebug> = ({
varList.length > 0 && (
<div className="relative mr-2 ml-1">
<Tooltip>
<TooltipTrigger render={<ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => !readonly && setExpanded(!expanded)}><RiEqualizer2Line className="h-4 w-4" /></ActionButton>} />
<TooltipTrigger render={<ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => !readonly && setExpanded(!expanded)}><RiEqualizer2Line className="size-4" /></ActionButton>} />
<TooltipContent>
{t('panel.userInputField', { ns: 'workflow' })}
</TooltipContent>
@ -513,7 +513,7 @@ const Debug: FC<IDebug> = ({
<div className="flex w-full max-w-[400px] 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 h-5 w-5 text-text-tertiary" />
<span className="i-ri-brain-2-line size-5 text-text-tertiary" />
</div>
</div>
<div className="flex flex-col gap-1">
@ -556,7 +556,7 @@ const Debug: FC<IDebug> = ({
)}
{!completionRes && !isResponding && (
<div className="flex grow flex-col items-center justify-center gap-2">
<RiSparklingFill className="h-12 w-12 text-text-empty-state-icon" />
<RiSparklingFill className="size-12 text-text-empty-state-icon" />
<div className="system-sm-regular text-text-quaternary">{t('noResult', { ns: 'appDebug' })}</div>
</div>
)}

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

@ -117,8 +117,8 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}
>
<div className="system-md-semibold-uppercase text-text-secondary">{t('inputs.userInputField', { ns: 'appDebug' })}</div>
{userInputFieldCollapse && <RiArrowRightSLine className="h-4 w-4 text-text-secondary" aria-hidden="true" />}
{!userInputFieldCollapse && <RiArrowDownSLine className="h-4 w-4 text-text-secondary" aria-hidden="true" />}
{userInputFieldCollapse && <RiArrowRightSLine className="size-4 text-text-secondary" aria-hidden="true" />}
{!userInputFieldCollapse && <RiArrowDownSLine className="size-4 text-text-secondary" aria-hidden="true" />}
</button>
{!userInputFieldCollapse && (
<div className="mt-1 system-xs-regular text-text-tertiary">{t('inputs.completionVarTip', { ns: 'appDebug' })}</div>
@ -237,7 +237,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
onClick={() => onSend?.()}
className="w-[96px]"
>
<RiPlayLargeFill className="mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
<RiPlayLargeFill className="mr-0.5 size-4 shrink-0" aria-hidden="true" />
{t('inputs.run', { ns: 'appDebug' })}
</Button>
)}
@ -254,7 +254,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
onClick={() => onSend?.()}
className="w-[96px]"
>
<RiPlayLargeFill className="mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
<RiPlayLargeFill className="mr-0.5 size-4 shrink-0" aria-hidden="true" />
{t('inputs.run', { ns: 'appDebug' })}
</Button>
)}

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

@ -116,7 +116,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
{`${action} ${t('variableConfig.apiBasedVar', { ns: 'appDebug' })}`}
</div>
<div className="py-2">
<div className="text-sm leading-9 font-medium text-text-primary">
<div className="text-sm/9 font-medium text-text-primary">
{t('apiBasedExtension.type', { ns: 'common' })}
</div>
<Select
@ -137,7 +137,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
</Select>
</div>
<div className="py-2">
<div className="text-sm leading-9 font-medium text-text-primary">
<div className="text-sm/9 font-medium text-text-primary">
{t('feature.tools.modal.name.title', { ns: 'appDebug' })}
</div>
<div className="flex items-center">
@ -157,7 +157,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
</div>
</div>
<div className="py-2">
<div className="text-sm leading-9 font-medium text-text-primary">
<div className="text-sm/9 font-medium text-text-primary">
{t('feature.tools.modal.variableName.title', { ns: 'appDebug' })}
</div>
<input
@ -178,7 +178,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
rel="noopener noreferrer"
className="group flex items-center text-xs font-normal text-text-tertiary hover:text-text-accent"
>
<BookOpen01 className="mr-1 h-3 w-3 text-text-tertiary group-hover:text-text-accent" />
<BookOpen01 className="mr-1 size-3 text-text-tertiary group-hover:text-text-accent" />
{t('apiBasedExtension.link', { ns: 'common' })}
</a>
</div>

6
web/app/components/app/create-app-dialog-shell.tsx
View File

@ -29,9 +29,9 @@ export function CreateAppDialogShell({
>
<DialogContent
backdropClassName="bg-background-overlay-backdrop backdrop-blur-[6px]"
className="top-0 left-0 h-screen max-h-none w-screen max-w-none translate-x-0 translate-y-0 overflow-hidden rounded-none border-none bg-transparent p-4 shadow-none"
className="top-0 left-0 h-screen max-h-none w-screen max-w-none translate-0 overflow-hidden rounded-none border-none bg-transparent p-4 shadow-none"
>
<div className="h-full w-full rounded-2xl border border-effects-highlight bg-background-default-subtle">
<div className="size-full rounded-2xl border border-effects-highlight bg-background-default-subtle">
<div className={cn('relative h-full overflow-hidden', contentClassName)}>
<DialogTitle className="sr-only">{title}</DialogTitle>
<button
@ -40,7 +40,7 @@ export function CreateAppDialogShell({
className="absolute top-3 right-3 z-50 flex h-9 w-9 cursor-pointer items-center justify-center rounded-[10px] bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover"
onClick={onClose}
>
<span aria-hidden="true" className="i-ri-close-large-line h-3.5 w-3.5 text-components-button-tertiary-text" />
<span aria-hidden="true" className="i-ri-close-large-line size-3.5 text-components-button-tertiary-text" />
</button>
{children}
</div>

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

@ -53,7 +53,7 @@ const AppCard = ({
/>
<AppTypeIcon
wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-sm border border-divider-regular outline-solid outline-components-panel-on-panel-item-bg"
className="h-3 w-3"
className="size-3"
type={appBasicInfo.mode}
/>
</div>
@ -74,7 +74,7 @@ const AppCard = ({
<div className={cn('grid h-8 w-full grid-cols-1 items-center space-x-2', canCreate && 'grid-cols-2')}>
{canCreate && (
<Button variant="primary" onClick={() => onCreate()}>
<PlusIcon className="mr-1 h-4 w-4" />
<PlusIcon className="mr-1 size-4" />
<span className="text-xs">{t('newApp.useTemplate', { ns: 'app' })}</span>
</Button>
)}

4
web/app/components/app/create-app-dialog/app-list/index.tsx
View File

@ -237,8 +237,8 @@ function NoTemplateFound() {
const { t } = useTranslation()
return (
<div className="w-full rounded-lg bg-workflow-process-bg p-4">
<div className="mb-2 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-components-card-bg shadow-lg">
<RiRobot2Line className="h-5 w-5 text-text-tertiary" />
<div className="mb-2 inline-flex size-8 items-center justify-center rounded-lg bg-components-card-bg shadow-lg">
<RiRobot2Line className="size-5 text-text-tertiary" />
</div>
<p className="title-md-semi-bold text-text-primary">{t('newApp.noTemplateFound', { ns: 'app' })}</p>
<p className="system-sm-regular text-text-tertiary">{t('newApp.noTemplateFoundTip', { ns: 'app' })}</p>

8
web/app/components/app/create-app-dialog/app-list/sidebar.tsx
View File

@ -18,7 +18,7 @@ type SidebarProps = {
export default function Sidebar({ current, categories, onClick, onCreateFromBlank }: SidebarProps) {
const { t } = useTranslation()
return (
<div className="flex h-full w-full flex-col">
<div className="flex size-full flex-col">
<ul className="pt-0.5">
<CategoryItem category={AppCategories.RECOMMENDED} active={current === AppCategories.RECOMMENDED} onClick={onClick} />
</ul>
@ -32,7 +32,7 @@ export default function Sidebar({ current, categories, onClick, onCreateFromBlan
className="flex w-full cursor-pointer items-center gap-1 border-none bg-transparent px-3 py-1 text-left text-text-tertiary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
onClick={onCreateFromBlank}
>
<RiStickyNoteAddLine className="h-3.5 w-3.5" aria-hidden="true" />
<RiStickyNoteAddLine className="size-3.5" aria-hidden="true" />
<span className="system-xs-regular">{t('newApp.startFromBlank', { ns: 'app' })}</span>
</button>
</div>
@ -53,8 +53,8 @@ function CategoryItem({ category, active, onClick }: CategoryItemProps) {
onClick={() => { onClick?.(category) }}
>
{category === AppCategories.RECOMMENDED && (
<div className="inline-flex h-5 w-5 items-center justify-center rounded-md">
<RiThumbUpLine className="h-4 w-4 text-components-menu-item-text group-[.active]:text-components-menu-item-text-active" aria-hidden="true" />
<div className="inline-flex size-5 items-center justify-center rounded-md">
<RiThumbUpLine className="size-4 text-components-menu-item-text group-[.active]:text-components-menu-item-text-active" aria-hidden="true" />
</div>
)}
<AppCategoryLabel

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

@ -119,8 +119,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
title={t('types.workflow', { ns: 'app' })}
description={t('newApp.workflowShortDescription', { ns: 'app' })}
icon={(
<div className="flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-indigo-solid">
<RiExchange2Fill className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
<div className="flex size-6 items-center justify-center rounded-md bg-components-icon-bg-indigo-solid">
<RiExchange2Fill className="size-4 text-components-avatar-shape-fill-stop-100" />
</div>
)}
onClick={() => {
@ -132,8 +132,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
title={t('types.advanced', { ns: 'app' })}
description={t('newApp.advancedShortDescription', { ns: 'app' })}
icon={(
<div className="flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-light-solid">
<BubbleTextMod className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
<div className="flex size-6 items-center justify-center rounded-md bg-components-icon-bg-blue-light-solid">
<BubbleTextMod className="size-4 text-components-avatar-shape-fill-stop-100" />
</div>
)}
onClick={() => {
@ -150,7 +150,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
onClick={() => setIsAppTypeExpanded(!isAppTypeExpanded)}
>
<span className="system-2xs-medium-uppercase text-text-tertiary">{t('newApp.forBeginners', { ns: 'app' })}</span>
<RiArrowRightSLine className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isAppTypeExpanded ? 'rotate-90' : ''}`} aria-hidden="true" />
<RiArrowRightSLine className={`ml-1 size-4 text-text-tertiary transition-transform ${isAppTypeExpanded ? 'rotate-90' : ''}`} aria-hidden="true" />
</button>
</div>
{isAppTypeExpanded && (
@ -160,8 +160,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
title={t('types.chatbot', { ns: 'app' })}
description={t('newApp.chatbotShortDescription', { ns: 'app' })}
icon={(
<div className="flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid">
<ChatBot className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
<div className="flex size-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid">
<ChatBot className="size-4 text-components-avatar-shape-fill-stop-100" />
</div>
)}
onClick={() => {
@ -173,8 +173,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
title={t('types.agent', { ns: 'app' })}
description={t('newApp.agentShortDescription', { ns: 'app' })}
icon={(
<div className="flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-violet-solid">
<Logic className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
<div className="flex size-6 items-center justify-center rounded-md bg-components-icon-bg-violet-solid">
<Logic className="size-4 text-components-avatar-shape-fill-stop-100" />
</div>
)}
onClick={() => {
@ -186,8 +186,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
title={t('newApp.completeApp', { ns: 'app' })}
description={t('newApp.completionShortDescription', { ns: 'app' })}
icon={(
<div className="flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-teal-solid">
<ListSparkle className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
<div className="flex size-6 items-center justify-center rounded-md bg-components-icon-bg-teal-solid">
<ListSparkle className="size-4 text-components-avatar-shape-fill-stop-100" />
</div>
)}
onClick={() => {
@ -256,7 +256,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
>
<span>{t('newApp.noIdeaTip', { ns: 'app' })}</span>
<div className="p-px">
<RiArrowRightLine className="h-3.5 w-3.5" aria-hidden="true" />
<RiArrowRightLine className="size-3.5" aria-hidden="true" />
</div>
</button>
<div className="flex gap-2">
@ -274,7 +274,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
<div className="max-w-[760px] border-x border-x-divider-subtle">
<div className="h-6 2xl:h-[139px]" />
<AppPreview mode={appMode} />
<div className="absolute right-0 left-0 border-b border-b-divider-subtle"></div>
<div className="absolute inset-x-0 border-b border-b-divider-subtle"></div>
<div className="flex h-[448px] w-[664px] items-center justify-center" style={{ background: 'repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16,24,40,0.04) 4px,transparent 3px, transparent 6px)' }}>
<AppScreenShot show={appMode === AppModeEnum.CHAT} mode={AppModeEnum.CHAT} />
<AppScreenShot show={appMode === AppModeEnum.ADVANCED_CHAT} mode={AppModeEnum.ADVANCED_CHAT} />
@ -282,7 +282,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
<AppScreenShot show={appMode === AppModeEnum.COMPLETION} mode={AppModeEnum.COMPLETION} />
<AppScreenShot show={appMode === AppModeEnum.WORKFLOW} mode={AppModeEnum.WORKFLOW} />
</div>
<div className="absolute right-0 left-0 border-b border-b-divider-subtle"></div>
<div className="absolute inset-x-0 border-b border-b-divider-subtle"></div>
</div>
</div>
</div>

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

@ -221,10 +221,10 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
<div className="flex items-center justify-between pt-6 pr-5 pb-3 pl-6 title-2xl-semi-bold text-text-primary">
{t('importApp', { ns: 'app' })}
<div
className="flex h-8 w-8 cursor-pointer items-center"
className="flex size-8 cursor-pointer items-center"
onClick={() => onClose()}
>
<span className="i-ri-close-line h-5 w-5 text-text-tertiary" />
<span className="i-ri-close-line size-5 text-text-tertiary" />
</div>
</div>
<div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 system-md-semibold text-text-tertiary">

Some files were not shown because too many files have changed in this diff Show More