github-mirrors/dify
1
0
Fork 0
mirror of https://mirror.skon.top/github.com/langgenius/dify.git synced 2026-04-20 15:20:15 +08:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

chore: auto fix for tailwind rules (#35332)
Some checks failed
autofix.ci / autofix (push) Has been cancelled
Details
Build and Push API & Web / build (api, {{defaultContext}}:api, Dockerfile, DIFY_API_IMAGE_NAME, linux/amd64, ubuntu-latest, build-api-amd64) (push) Has been cancelled
Details
Build and Push API & Web / build (api, {{defaultContext}}:api, Dockerfile, DIFY_API_IMAGE_NAME, linux/arm64, ubuntu-24.04-arm, build-api-arm64) (push) Has been cancelled
Details
Build and Push API & Web / build (web, {{defaultContext}}, web/Dockerfile, DIFY_WEB_IMAGE_NAME, linux/amd64, ubuntu-latest, build-web-amd64) (push) Has been cancelled
Details
Build and Push API & Web / build (web, {{defaultContext}}, web/Dockerfile, DIFY_WEB_IMAGE_NAME, linux/arm64, ubuntu-24.04-arm, build-web-arm64) (push) Has been cancelled
Details
Build and Push API & Web / create-manifest (api, DIFY_API_IMAGE_NAME, merge-api-images) (push) Has been cancelled
Details
Build and Push API & Web / create-manifest (web, DIFY_WEB_IMAGE_NAME, merge-web-images) (push) Has been cancelled
Details
Main CI Pipeline / Skip Duplicate Checks (push) Has been cancelled
Details
Main CI Pipeline / Check Changed Files (push) Has been cancelled
Details
Main CI Pipeline / Run API Tests (push) Has been cancelled
Details
Main CI Pipeline / Skip API Tests (push) Has been cancelled
Details
Main CI Pipeline / API Tests (push) Has been cancelled
Details
Main CI Pipeline / Run Web Tests (push) Has been cancelled
Details
Main CI Pipeline / Skip Web Tests (push) Has been cancelled
Details
Main CI Pipeline / Web Tests (push) Has been cancelled
Details
Main CI Pipeline / Run Web Full-Stack E2E (push) Has been cancelled
Details
Main CI Pipeline / Skip Web Full-Stack E2E (push) Has been cancelled
Details
Main CI Pipeline / Web Full-Stack E2E (push) Has been cancelled
Details
Main CI Pipeline / Style Check (push) Has been cancelled
Details
Main CI Pipeline / Run VDB Tests (push) Has been cancelled
Details
Main CI Pipeline / Skip VDB Tests (push) Has been cancelled
Details
Main CI Pipeline / VDB Tests (push) Has been cancelled
Details
Main CI Pipeline / Run DB Migration Test (push) Has been cancelled
Details
Main CI Pipeline / Skip DB Migration Test (push) Has been cancelled
Details
Main CI Pipeline / DB Migration Test (push) Has been cancelled
Details
Mark stale issues and pull requests / stale (push) Has been cancelled
Details

Browse Source 
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Stephen Zhou
2026-04-17 01:11:06 +08:00
committed by GitHub
parent 40e040ca1a
commit 6ca066983d
306 changed files with 605 additions and 2034 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1416
eslint-suppressions.json
View File

File diff suppressed because it is too large Load Diff

2
web/.storybook/utils/form-story-wrapper.tsx
View File

@@ -47,7 +47,7 @@ export const FormStoryWrapper = ({
{children(form)}
</div>
<aside className="w-full max-w-sm rounded-xl border border-divider-subtle bg-components-panel-bg p-4 text-xs text-text-secondary shadow-sm">
<div className="flex items-center justify-between text-[11px] uppercase tracking-wide text-text-tertiary">
<div className="flex items-center justify-between text-[11px] tracking-wide text-text-tertiary uppercase">
<span>Form State</span>
<span>
{submitCount}

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

@@ -48,7 +48,7 @@ export default function ChartView({ appId, headerRight }: IChartViewProps) {
return (
<div>
<div className="mb-4">
<div className="system-xl-semibold mb-2 text-text-primary">{t('appMenus.overview', { ns: 'common' })}</div>
<div className="mb-2 system-xl-semibold text-text-primary">{t('appMenus.overview', { ns: 'common' })}</div>
<div className="flex items-center justify-between">
{IS_CLOUD_EDITION
? (

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

@@ -6,7 +6,7 @@ const Settings = () => {
return (
<div className="h-full overflow-y-auto">
<div className="flex flex-col gap-y-0.5 px-6 pb-2 pt-3">
<div className="flex flex-col gap-y-0.5 px-6 pt-3 pb-2">
<div className="system-xl-semibold text-text-primary">{t('title')}</div>
<div className="system-sm-regular text-text-tertiary">{t('desc')}</div>
</div>

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

@@ -81,7 +81,7 @@ const AuthenticatedLayout = ({ children }: { children: React.ReactNode }) => {
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." />
<span className="system-sm-regular cursor-pointer text-text-tertiary" onClick={backToHome}>{t('userProfile.logout', { ns: 'common' })}</span>
<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

@@ -95,7 +95,7 @@ const Splash: FC<PropsWithChildren> = ({ children }) => {
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} />
<span className="system-sm-regular cursor-pointer text-text-tertiary" onClick={backToHome}>{code === '403' ? t('userProfile.logout', { ns: 'common' }) : t('login.backToHome', { ns: 'share' })}</span>
<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>
)
}

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} />
<span className="system-sm-regular cursor-pointer text-text-tertiary" onClick={backToHome}>{t('login.backToHome', { ns: 'share' })}</span>
<span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>{t('login.backToHome', { ns: 'share' })}</span>
</div>
)
}

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

@@ -76,8 +76,8 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
)}
{mode === 'expand' && (
<div className="group w-full">
<div className={`flex flex-row items-center text-text-secondary system-md-semibold group-hover:text-text-primary ${textStyle?.main ?? ''}`}>
<div className="min-w-0 overflow-hidden text-ellipsis break-normal">
<div className={`flex flex-row items-center system-md-semibold text-text-secondary group-hover:text-text-primary ${textStyle?.main ?? ''}`}>
<div className="min-w-0 overflow-hidden break-normal text-ellipsis">
{name}
</div>
{hoverTip
@@ -95,10 +95,10 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
)}
</div>
{!hideType && isExtraInLine && (
<div className="flex text-text-tertiary system-2xs-medium-uppercase">{type}</div>
<div className="flex system-2xs-medium-uppercase text-text-tertiary">{type}</div>
)}
{!hideType && !isExtraInLine && (
<div className="text-text-tertiary system-2xs-medium-uppercase">{isExternal ? t('externalTag', { ns: 'dataset' }) : type}</div>
<div className="system-2xs-medium-uppercase text-text-tertiary">{isExternal ? t('externalTag', { ns: 'dataset' }) : type}</div>
)}
</div>
)}

2
web/app/components/app-sidebar/dataset-info/menu-item.tsx
View File

@@ -22,7 +22,7 @@ const MenuItem = ({
}}
>
<Icon className="size-4 text-text-tertiary" />
<span className="px-1 text-text-secondary system-md-regular">{name}</span>
<span className="px-1 system-md-regular text-text-secondary">{name}</span>
</div>
)
}

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

@@ -31,7 +31,7 @@ const EditItem: FC<Props> = ({
{avatar}
</div>
<div className="grow">
<div className="system-xs-semibold mb-1 text-text-primary">{name}</div>
<div className="mb-1 system-xs-semibold text-text-primary">{name}</div>
<Textarea
value={content}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}

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

@@ -38,30 +38,30 @@ const CSVDownload: FC = () => {
<table className="w-full table-fixed border-separate border-spacing-0 rounded-lg border border-divider-regular text-xs">
<thead className="text-text-tertiary">
<tr>
<td className="h-9 border-b border-divider-regular pl-3 pr-2">{t('batchModal.question', { ns: 'appAnnotation' })}</td>
<td className="h-9 border-b border-divider-regular pl-3 pr-2">{t('batchModal.answer', { ns: 'appAnnotation' })}</td>
<td className="h-9 border-b border-divider-regular pr-2 pl-3">{t('batchModal.question', { ns: 'appAnnotation' })}</td>
<td className="h-9 border-b border-divider-regular pr-2 pl-3">{t('batchModal.answer', { ns: 'appAnnotation' })}</td>
</tr>
</thead>
<tbody className="text-text-secondary">
<tr>
<td className="h-9 border-b border-divider-subtle pl-3 pr-2 text-[13px]">
<td className="h-9 border-b border-divider-subtle pr-2 pl-3 text-[13px]">
{t('batchModal.question', { ns: 'appAnnotation' })}
{' '}
1
</td>
<td className="h-9 border-b border-divider-subtle pl-3 pr-2 text-[13px]">
<td className="h-9 border-b border-divider-subtle pr-2 pl-3 text-[13px]">
{t('batchModal.answer', { ns: 'appAnnotation' })}
{' '}
1
</td>
</tr>
<tr>
<td className="h-9 pl-3 pr-2 text-[13px]">
<td className="h-9 pr-2 pl-3 text-[13px]">
{t('batchModal.question', { ns: 'appAnnotation' })}
{' '}
2
</td>
<td className="h-9 pl-3 pr-2 text-[13px]">
<td className="h-9 pr-2 pl-3 text-[13px]">
{t('batchModal.answer', { ns: 'appAnnotation' })}
{' '}
2
@@ -77,7 +77,7 @@ const CSVDownload: FC = () => {
bom={true}
data={getTemplate()}
>
<div className="system-xs-medium flex h-[18px] items-center space-x-1 text-text-accent">
<div className="flex h-[18px] items-center space-x-1 system-xs-medium text-text-accent">
<DownloadIcon className="mr-1 h-3 w-3" />
{t('batchModal.template', { ns: 'appAnnotation' })}
</div>

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

@@ -146,7 +146,7 @@ const EditAnnotationModal: FC<Props> = ({
foot={(
<div>
{isAnnotationFull && (
<div className="mb-4 mt-6 px-6">
<div className="mt-6 mb-4 px-6">
<AnnotationFull />
</div>
)}
@@ -154,7 +154,7 @@ const EditAnnotationModal: FC<Props> = ({
{
annotationId
? (
<div className="system-sm-medium flex h-16 items-center justify-between rounded-bl-xl rounded-br-xl border-t border-divider-subtle bg-background-section-burn px-4 text-text-tertiary">
<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 cursor-pointer items-center space-x-2 pl-3"
onClick={() => setShowModal(true)}

4
web/app/components/app/annotation/empty-element.tsx
View File

@@ -19,9 +19,9 @@ const EmptyElement: FC = () => {
<div className="box-border h-fit w-[560px] rounded-2xl bg-background-section-burn px-5 py-4">
<span className="system-md-semibold text-text-secondary">
{t('noData.title', { ns: 'appAnnotation' })}
<ThreeDotsIcon className="relative -left-1.5 -top-3 inline" />
<ThreeDotsIcon className="relative -top-3 -left-1.5 inline" />
</span>
<div className="system-sm-regular mt-2 text-text-tertiary">
<div className="mt-2 system-sm-regular text-text-tertiary">
{t('noData.description', { ns: 'appAnnotation' })}
</div>
</div>

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

@@ -60,14 +60,14 @@ function RenderGroupsAndMembers() {
const specificGroups = useAccessControlStore(s => s.specificGroups)
const specificMembers = useAccessControlStore(s => s.specificMembers)
if (specificGroups.length <= 0 && specificMembers.length <= 0)
return <div className="px-2 pb-1.5 pt-5"><p className="system-xs-regular text-center text-text-tertiary">{t('accessControlDialog.noGroupsOrMembers', { ns: 'app' })}</p></div>
return <div className="px-2 pt-5 pb-1.5"><p className="text-center system-xs-regular text-text-tertiary">{t('accessControlDialog.noGroupsOrMembers', { ns: 'app' })}</p></div>
return (
<>
<p className="system-2xs-medium-uppercase sticky top-0 text-text-tertiary">{t('accessControlDialog.groups', { ns: 'app', count: specificGroups.length ?? 0 })}</p>
<p className="sticky top-0 system-2xs-medium-uppercase text-text-tertiary">{t('accessControlDialog.groups', { ns: 'app', count: specificGroups.length ?? 0 })}</p>
<div className="flex flex-row flex-wrap gap-1">
{specificGroups.map((group, index) => <GroupItem key={index} group={group} />)}
</div>
<p className="system-2xs-medium-uppercase sticky top-0 text-text-tertiary">{t('accessControlDialog.members', { ns: 'app', count: specificMembers.length ?? 0 })}</p>
<p className="sticky top-0 system-2xs-medium-uppercase text-text-tertiary">{t('accessControlDialog.members', { ns: 'app', count: specificMembers.length ?? 0 })}</p>
<div className="flex flex-row flex-wrap gap-1">
{specificMembers.map((member, index) => <MemberItem key={index} member={member} />)}
</div>

2
web/app/components/app/configuration/base/group-name/index.tsx
View File

@@ -11,7 +11,7 @@ const GroupName: FC<IGroupNameProps> = ({
}) => {
return (
<div className="mb-1 flex items-center">
<div className="mr-3 text-xs font-semibold uppercase leading-[18px] text-text-tertiary">{name}</div>
<div className="mr-3 text-xs leading-[18px] font-semibold text-text-tertiary uppercase">{name}</div>
<div
className="h-px grow"
style={{

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

@@ -25,7 +25,7 @@ const WarningMask: FC<IWarningMaskProps> = ({
<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="mt-4 text-[24px] font-semibold leading-normal text-text-primary">
<div className="mt-4 text-[24px] leading-normal font-semibold text-text-primary">
{title}
</div>
<div className="mt-3 text-base text-text-secondary">

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 = `w-3.5 h-3.5 ${className}`
const classNames = `h-3.5 w-3.5 ${className}`
const icons = {
string: (
<InputVarTypeIcon type={InputVarType.textInput} className={classNames} />

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

@@ -42,11 +42,11 @@ const ParamConfigContent: FC = () => {
return (
<div>
<div className="text-base font-semibold leading-6 text-text-primary">{t('vision.visionSettings.title', { ns: 'appDebug' })}</div>
<div className="text-base leading-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">
<div className="text-[13px] font-semibold leading-[18px] text-text-secondary">{t('vision.visionSettings.resolution', { ns: 'appDebug' })}</div>
<div className="mb-2 flex items-center space-x-1">
<div className="text-[13px] leading-[18px] font-semibold text-text-secondary">{t('vision.visionSettings.resolution', { ns: 'appDebug' })}</div>
<Tooltip
popupContent={(
<div className="w-[180px]">
@@ -79,7 +79,7 @@ const ParamConfigContent: FC = () => {
</div>
</div>
<div>
<div className="mb-2 text-[13px] font-semibold leading-[18px] text-text-secondary">{t('vision.visionSettings.uploadMethod', { ns: 'appDebug' })}</div>
<div className="mb-2 text-[13px] leading-[18px] font-semibold text-text-secondary">{t('vision.visionSettings.uploadMethod', { ns: 'appDebug' })}</div>
<div className="flex items-center gap-1">
<OptionCard
className="grow"

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

@@ -9,7 +9,7 @@ const ResPlaceholder: FC = () => {
return (
<div className="flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8">
<Generator className="size-8 text-text-quaternary" />
<div className="text-center text-[13px] font-normal leading-5 text-text-tertiary">
<div className="text-center text-[13px] leading-5 font-normal text-text-tertiary">
<div>{t('generate.newNoDataLine1', { ns: 'appDebug' })}</div>
</div>
</div>

6
web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
View File

@@ -36,7 +36,7 @@ const WeightedScore = ({
return (
<div>
<div className="space-x-3 rounded-lg border border-components-panel-border px-3 pb-2 pt-5">
<div className="space-x-3 rounded-lg border border-components-panel-border px-3 pt-5 pb-2">
<div className="grow" style={weightedScoreSliderStyle}>
<Slider
className="grow"
@@ -50,13 +50,13 @@ const WeightedScore = ({
/>
</div>
<div className="mt-3 flex justify-between">
<div className="flex w-[90px] shrink-0 items-center text-util-colors-blue-light-blue-light-500 system-xs-semibold-uppercase">
<div className="flex w-[90px] shrink-0 items-center system-xs-semibold-uppercase text-util-colors-blue-light-blue-light-500">
<div className="mr-1 truncate uppercase" title={t('weightedScore.semantic', { ns: 'dataset' }) || ''}>
{t('weightedScore.semantic', { ns: 'dataset' })}
</div>
{formatNumber(value.value[0]!)}
</div>
<div className="flex w-[90px] shrink-0 items-center justify-end text-util-colors-teal-teal-500 system-xs-semibold-uppercase">
<div className="flex w-[90px] shrink-0 items-center justify-end system-xs-semibold-uppercase text-util-colors-teal-teal-500">
{formatNumber(value.value[1]!)}
<div className="ml-1 truncate uppercase" title={t('weightedScore.keyword', { ns: 'dataset' }) || ''}>
{t('weightedScore.keyword', { ns: 'dataset' })}

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

@@ -69,7 +69,7 @@ const DebugItem: FC<DebugItemProps> = ({
style={style}
>
<div className="flex h-10 shrink-0 items-center justify-between border-b-[0.5px] border-divider-regular px-3">
<div className="flex h-5 w-6 items-center justify-center font-medium italic text-text-tertiary">
<div className="flex h-5 w-6 items-center justify-center font-medium text-text-tertiary italic">
#
{index + 1}
</div>

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

@@ -122,7 +122,7 @@ const DebugWithMultipleModel = () => {
key={modelConfig.id}
modelAndParameter={modelConfig}
className={`
absolute left-6 top-0 min-h-[200px]
absolute top-0 left-6 min-h-[200px]
${twoLine && index === 0 && 'mr-2'}
${threeLine && (index === 0 || index === 1) && 'mr-2'}
${fourLine && (index === 0 || index === 2) && 'mr-2'}

4
web/app/components/app/log/empty-element.tsx
View File

@@ -30,9 +30,9 @@ const EmptyElement: FC<{ appDetail: App }> = ({ appDetail }) => {
<div className="box-border h-fit w-[560px] rounded-2xl bg-background-section-burn px-5 py-4">
<span className="system-md-semibold text-text-secondary">
{t('table.empty.element.title', { ns: 'appLog' })}
<ThreeDotsIcon className="relative -left-1.5 -top-3 inline text-text-secondary" />
<ThreeDotsIcon className="relative -top-3 -left-1.5 inline text-text-secondary" />
</span>
<div className="system-sm-regular mt-2 text-text-tertiary">
<div className="mt-2 system-sm-regular text-text-tertiary">
<Trans
i18nKey="table.empty.element.content"
ns="appLog"

2
web/app/components/app/log/index.tsx
View File

@@ -118,7 +118,7 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
return (
<div className="flex h-full grow flex-col">
<p className="system-sm-regular shrink-0 text-text-tertiary">{t('description', { ns: 'appLog' })}</p>
<p className="shrink-0 system-sm-regular text-text-tertiary">{t('description', { ns: 'appLog' })}</p>
<div className="flex max-h-[calc(100%-16px)] flex-1 grow flex-col py-4">
<Filter isChatMode={isChatMode} appId={appDetail.id} queryParams={queryParams} setQueryParams={handleQueryParamsChange} />
{total === undefined

4
web/app/components/app/text-generate/item/result-tab.tsx
View File

@@ -24,8 +24,8 @@ const ResultTab = ({
{!!data?.files?.length && (
<div className="flex flex-col gap-2">
{data?.files.map((item: any) => (
<div key={item.varName} className="system-xs-regular flex flex-col gap-1">
<div className="py-1 text-text-tertiary ">{item.varName}</div>
<div key={item.varName} className="flex flex-col gap-1 system-xs-regular">
<div className="py-1 text-text-tertiary">{item.varName}</div>
<FileList
files={item.list}
showDeleteAction={false}

4
web/app/components/app/workflow-log/detail.tsx
View File

@@ -27,11 +27,11 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose, canReplay = false }) => {
return (
<div className="relative flex grow flex-col pt-3">
<span className="absolute right-3 top-4 z-20 cursor-pointer p-1" onClick={onClose}>
<span className="absolute top-4 right-3 z-20 cursor-pointer p-1" onClick={onClose}>
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
</span>
<div className="flex items-center bg-components-panel-bg">
<h1 className="system-xl-semibold shrink-0 px-4 py-1 text-text-primary">{t('runDetail.workflowTitle', { ns: 'appLog' })}</h1>
<h1 className="shrink-0 px-4 py-1 system-xl-semibold text-text-primary">{t('runDetail.workflowTitle', { ns: 'appLog' })}</h1>
{canReplay && (
<TooltipPlus
popupContent={t('runDetail.testWithParams', { ns: 'appLog' })}

4
web/app/components/apps/footer.tsx
View File

@@ -29,8 +29,8 @@ const Footer = () => {
return (
<footer className="relative shrink-0 grow-0 px-12 py-2">
<h3 className="text-gradient text-xl font-semibold leading-tight">{t('join', { ns: 'app' })}</h3>
<p className="system-sm-regular mt-1 text-text-tertiary">{t('communityIntro', { ns: 'app' })}</p>
<h3 className="text-gradient text-xl leading-tight font-semibold">{t('join', { ns: 'app' })}</h3>
<p className="mt-1 system-sm-regular text-text-tertiary">{t('communityIntro', { ns: 'app' })}</p>
<div className="mt-3 flex items-center gap-2">
<CustomLink href="https://github.com/langgenius/dify">
<RiGithubFill className="h-5 w-5 text-text-tertiary" />

2
web/app/components/apps/list.tsx
View File

@@ -241,7 +241,7 @@ const List: FC<Props> = ({
<>
<div ref={containerRef} className="relative flex h-0 shrink-0 grow flex-col overflow-y-auto bg-background-body">
{dragging && (
<div className="inset-0 absolute z-50 m-0.5 rounded-2xl border-2 border-dashed border-components-dropzone-border-accent bg-[rgba(21,90,239,0.14)] p-2">
<div className="absolute inset-0 z-50 m-0.5 rounded-2xl border-2 border-dashed border-components-dropzone-border-accent bg-[rgba(21,90,239,0.14)] p-2">
</div>
)}

2
web/app/components/base/agent-log-modal/result.tsx
View File

@@ -66,7 +66,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
</div>
<div className="px-4 py-2">
<div className="relative">
<div className="h-6 text-xs font-medium leading-6 text-text-tertiary">{t('meta.title', { ns: 'runLog' })}</div>
<div className="h-6 text-xs leading-6 font-medium text-text-tertiary">{t('meta.title', { ns: 'runLog' })}</div>
<div className="py-1">
<div className="flex">
<div className="w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary">{t('meta.status', { ns: 'runLog' })}</div>

2
web/app/components/base/app-icon/index.stories.tsx
View File

@@ -52,7 +52,7 @@ export const Sizes: Story = {
{sizes.map(size => (
<div key={size} className="flex flex-col items-center gap-2">
<AppIcon {...args} size={size} icon="🚀" background="#E5DEFF" />
<span className="text-xs uppercase text-text-tertiary">{size}</span>
<span className="text-xs text-text-tertiary uppercase">{size}</span>
</div>
))}
</div>

4
web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
View File

@@ -39,11 +39,11 @@ const MobileOperationDropdown = ({
<div
className="min-w-[160px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-xs"
>
<div className="flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover" onClick={handleResetChat}>
<div className="flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover" onClick={handleResetChat}>
<span className="grow">{t('chat.resetChat', { ns: 'share' })}</span>
</div>
{!hideViewChatSettings && (
<div className="flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover" onClick={handleViewChatSettings}>
<div className="flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover" onClick={handleViewChatSettings}>
<span className="grow">{t('chat.viewChatSettings', { ns: 'share' })}</span>
</div>
)}

2
web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx
View File

@@ -33,7 +33,7 @@ const ViewFormDropdown = () => {
<div className="w-[400px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-xs">
<div className="flex items-center gap-3 rounded-t-2xl border-b border-divider-subtle px-6 py-4">
<Message3Fill className="h-6 w-6 shrink-0" />
<div className="system-xl-semibold grow text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
<div className="grow system-xl-semibold text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
</div>
<div className="p-6">
<InputsFormContent />

2
web/app/components/base/chat/chat-with-history/sidebar/list.tsx
View File

@@ -21,7 +21,7 @@ const List: FC<ListProps> = ({
return (
<div className="space-y-0.5">
{title && (
<div className="system-xs-medium-uppercase px-3 pb-1 pt-2 text-text-tertiary">{title}</div>
<div className="px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary">{title}</div>
)}
{list.map(item => (
<Item

6
web/app/components/base/chat/chat/answer/human-input-content/executed-action.tsx
View File

@@ -12,13 +12,13 @@ const ExecutedAction = ({
}: ExecutedActionProps) => {
return (
<div className="flex flex-col gap-y-1 py-1" data-testid="executed-action">
<Divider className="mb-2 mt-1 w-[30px]" />
<div className="flex items-center gap-x-1 text-text-tertiary system-xs-regular">
<Divider className="mt-1 mb-2 w-[30px]" />
<div className="flex items-center gap-x-1 system-xs-regular text-text-tertiary">
<div className="i-custom-vender-workflow-trigger-all size-3.5 shrink-0" />
<Trans
i18nKey="nodes.humanInput.userActions.triggered"
ns="workflow"
components={{ strong: <span className="text-text-secondary system-xs-medium"></span> }}
components={{ strong: <span className="system-xs-medium text-text-secondary"></span> }}
values={{ actionName: executedAction.id }}
/>
</div>

6
web/app/components/base/chat/chat/answer/human-input-content/tips.tsx
View File

@@ -22,10 +22,10 @@ const Tips = ({
<Divider className="my-2! w-[30px]" />
<div className="space-y-1 pt-1" data-testid="tips">
{showEmailTip && !isEmailDebugMode && (
<div className="text-text-secondary system-xs-regular">{t('common.humanInputEmailTip', { ns: 'workflow' })}</div>
<div className="system-xs-regular text-text-secondary">{t('common.humanInputEmailTip', { ns: 'workflow' })}</div>
)}
{showEmailTip && isEmailDebugMode && (
<div className="text-text-secondary system-xs-regular">
<div className="system-xs-regular text-text-secondary">
<Trans
i18nKey="common.humanInputEmailTipInDebugMode"
ns="workflow"
@@ -34,7 +34,7 @@ const Tips = ({
/>
</div>
)}
{showDebugModeTip && <div className="text-text-warning system-xs-medium">{t('common.humanInputWebappTip', { ns: 'workflow' })}</div>}
{showDebugModeTip && <div className="system-xs-medium text-text-warning">{t('common.humanInputWebappTip', { ns: 'workflow' })}</div>}
</div>
</>
)

2
web/app/components/base/chat/chat/answer/more.tsx
View File

@@ -14,7 +14,7 @@ const More: FC<MoreProps> = ({
return (
<div
className="mt-1 flex items-center text-text-quaternary opacity-0 system-xs-regular group-hover:opacity-100"
className="mt-1 flex items-center system-xs-regular text-text-quaternary opacity-0 group-hover:opacity-100"
data-testid="more-container"
>
{

10
web/app/components/base/chat/chat/citation/index.tsx
View File

@@ -74,8 +74,8 @@ const Citation: FC<CitationProps> = ({
const resourcesLength = resources.length
return (
<div className="-mb-1 mt-3">
<div data-testid="citation-title" className="mb-2 flex items-center text-text-tertiary system-xs-medium">
<div className="mt-3 -mb-1">
<div data-testid="citation-title" className="mb-2 flex items-center system-xs-medium text-text-tertiary">
{t('chat.citation.title', { ns: 'common' })}
<div className="ml-2 h-px grow bg-divider-regular" />
</div>
@@ -85,7 +85,7 @@ const Citation: FC<CitationProps> = ({
<div
key={res.documentId}
data-testid="citation-measurement-item"
className="absolute left-0 top-0 -z-10 mb-1 mr-1 h-7 w-auto max-w-[240px] whitespace-nowrap pl-7 pr-2 text-xs opacity-0"
className="absolute top-0 left-0 -z-10 mr-1 mb-1 h-7 w-auto max-w-[240px] pr-2 pl-7 text-xs whitespace-nowrap opacity-0"
ref={(ele: HTMLDivElement | null) => { elesRef.current[index] = ele! }}
>
{res.documentName}
@@ -94,7 +94,7 @@ const Citation: FC<CitationProps> = ({
}
{
resources.slice(0, showMore ? resourcesLength : limitNumberInOneLine).map(res => (
<div key={res.documentId} className="mb-1 mr-1 cursor-pointer">
<div key={res.documentId} className="mr-1 mb-1 cursor-pointer">
<Popup
data={res}
showHitInfo={showHitInfo}
@@ -106,7 +106,7 @@ const Citation: FC<CitationProps> = ({
limitNumberInOneLine < resourcesLength && (
<div
data-testid="citation-more-toggle"
className="flex h-7 cursor-pointer items-center rounded-lg bg-components-panel-bg px-2 text-text-tertiary system-xs-medium"
className="flex h-7 cursor-pointer items-center rounded-lg bg-components-panel-bg px-2 system-xs-medium text-text-tertiary"
onClick={() => setShowMore(v => !v)}
>
{

18
web/app/components/base/chat/chat/citation/popup.tsx
View File

@@ -64,10 +64,10 @@ const Popup: FC<PopupProps> = ({
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 1000 }}>
<div data-testid="popup-content" className="max-w-[360px] rounded-xl bg-background-section-burn shadow-lg backdrop-blur-[5px]">
<div className="px-4 pb-2 pt-3">
<div className="px-4 pt-3 pb-2">
<div className="flex h-[18px] items-center">
<FileIcon type={fileType} className="mr-1 h-4 w-4 shrink-0" />
<div className="truncate text-text-tertiary system-xs-medium">
<div className="truncate system-xs-medium text-text-tertiary">
{(data.dataSourceType === 'upload_file' || data.dataSourceType === 'file') && !!data.sources?.[0]?.dataset_id
? (
<button
@@ -98,7 +98,7 @@ const Popup: FC<PopupProps> = ({
<div className="mb-2 flex items-center justify-between">
<div className="flex h-5 items-center rounded-md border border-divider-subtle px-1.5">
{/* replaced svg component with tailwind icon class per lint rule */}
<i className="i-custom-vender-line-general-hash-02 mr-0.5 h-3 w-3 text-text-quaternary" aria-hidden />
<i className="mr-0.5 i-custom-vender-line-general-hash-02 h-3 w-3 text-text-quaternary" aria-hidden />
<div data-testid="popup-segment-position" className="text-[11px] font-medium text-text-tertiary">
{source.segment_position || index + 1}
</div>
@@ -111,29 +111,29 @@ const Popup: FC<PopupProps> = ({
className="hidden h-[18px] items-center text-xs text-text-accent group-hover:flex"
>
{t('chat.citation.linkToDataset', { ns: 'common' })}
<i className="i-custom-vender-line-arrows-arrow-up-right ml-1 h-3 w-3" aria-hidden />
<i className="ml-1 i-custom-vender-line-arrows-arrow-up-right h-3 w-3" aria-hidden />
</Link>
)
}
</div>
<div data-testid="popup-source-content" className="wrap-break-word text-[13px] text-text-secondary">{source.content}</div>
<div data-testid="popup-source-content" className="text-[13px] wrap-break-word text-text-secondary">{source.content}</div>
{
showHitInfo && (
<div data-testid="popup-hit-info" className="mt-2 flex flex-wrap items-center text-text-quaternary system-xs-medium">
<div data-testid="popup-hit-info" className="mt-2 flex flex-wrap items-center system-xs-medium text-text-quaternary">
<Tooltip
text={t('chat.citation.characters', { ns: 'common' })}
data={source.word_count}
icon={<i className="i-custom-vender-line-editor-type-square mr-1 h-3 w-3" aria-hidden />}
icon={<i className="mr-1 i-custom-vender-line-editor-type-square h-3 w-3" aria-hidden />}
/>
<Tooltip
text={t('chat.citation.hitCount', { ns: 'common' })}
data={source.hit_count}
icon={<i className="i-custom-vender-line-general-target-04 mr-1 h-3 w-3" aria-hidden />}
icon={<i className="mr-1 i-custom-vender-line-general-target-04 h-3 w-3" aria-hidden />}
/>
<Tooltip
text={t('chat.citation.vectorHash', { ns: 'common' })}
data={source.index_node_hash?.substring(0, 7)}
icon={<i className="i-custom-vender-line-editor-bezier-curve-03 mr-1 h-3 w-3" aria-hidden />}
icon={<i className="mr-1 i-custom-vender-line-editor-bezier-curve-03 h-3 w-3" aria-hidden />}
/>
{
!!source.score && (

2
web/app/components/base/chat/chat/citation/progress-tooltip.tsx
View File

@@ -40,7 +40,7 @@ const ProgressTooltip: FC<ProgressTooltipProps> = ({
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 1001 }}>
<div data-testid="progress-tooltip-popup" className="rounded-lg bg-components-tooltip-bg p-3 text-text-quaternary shadow-lg system-xs-medium">
<div data-testid="progress-tooltip-popup" className="rounded-lg bg-components-tooltip-bg p-3 system-xs-medium text-text-quaternary shadow-lg">
{t('chat.citation.hitScore', { ns: 'common' })}
{' '}
{data}

2
web/app/components/base/chat/chat/citation/tooltip.tsx
View File

@@ -36,7 +36,7 @@ const Tooltip: FC<TooltipProps> = ({
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 1001 }}>
<div data-testid="tooltip-popup" className="rounded-lg bg-components-tooltip-bg p-3 text-text-quaternary shadow-lg system-xs-medium">
<div data-testid="tooltip-popup" className="rounded-lg bg-components-tooltip-bg p-3 system-xs-medium text-text-quaternary shadow-lg">
{text}
{' '}
{data}

2
web/app/components/base/content-dialog/index.tsx
View File

@@ -19,7 +19,7 @@ const ContentDialog = ({
<Transition
show={show}
as="div"
className="absolute left-0 top-0 z-[70] box-border h-full w-full p-2"
className="absolute top-0 left-0 z-[70] box-border h-full w-full p-2"
>
<TransitionChild>
<div

4
web/app/components/base/copy-icon/index.tsx
View File

@@ -30,8 +30,8 @@ const CopyIcon = ({ content }: Props) => {
>
<div onMouseLeave={reset}>
{!copied
? (<span className="i-custom-vender-line-files-copy mx-1 h-3.5 w-3.5 cursor-pointer text-text-tertiary" onClick={handleCopy} data-testid="copy-icon" />)
: (<span className="i-custom-vender-line-files-copy-check mx-1 h-3.5 w-3.5 text-text-tertiary" data-testid="copied-icon" />)}
? (<span className="mx-1 i-custom-vender-line-files-copy h-3.5 w-3.5 cursor-pointer text-text-tertiary" onClick={handleCopy} data-testid="copy-icon" />)
: (<span className="mx-1 i-custom-vender-line-files-copy-check h-3.5 w-3.5 text-text-tertiary" data-testid="copied-icon" />)}
</div>
</Tooltip>
)

2
web/app/components/base/corner-label/index.stories.tsx
View File

@@ -31,7 +31,7 @@ export const Default: Story = {}
export const OnCard: Story = {
render: args => (
<div className="relative w-80 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<CornerLabel {...args} className="absolute -right-px -top-px" />
<CornerLabel {...args} className="absolute -top-px -right-px" />
<div className="text-sm text-text-secondary">
Showcase how the label sits on a card header. Pair with contextual text or status information.
</div>

2
web/app/components/base/date-and-time-picker/calendar/days-of-week.tsx
View File

@@ -9,7 +9,7 @@ export const DaysOfWeek = () => {
{daysOfWeek.map(day => (
<div
key={day}
className="system-2xs-medium flex items-center justify-center text-text-tertiary"
className="flex items-center justify-center system-2xs-medium text-text-tertiary"
>
{day}
</div>

2
web/app/components/base/date-and-time-picker/date-picker/header.tsx
View File

@@ -18,7 +18,7 @@ const Header: FC<DatePickerHeaderProps> = ({
<button
type="button"
onClick={handleOpenYearMonthPicker}
className="system-md-semibold flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 text-text-primary hover:bg-state-base-hover"
className="flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 system-md-semibold text-text-primary hover:bg-state-base-hover"
>
<span>{`${months[currentDate.month()]} ${currentDate.year()}`}</span>
<RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />

2
web/app/components/base/date-and-time-picker/time-picker/header.tsx
View File

@@ -11,7 +11,7 @@ const Header = ({
return (
<div className="flex flex-col border-b-[0.5px] border-divider-regular">
<div className="system-md-semibold flex items-center px-2 py-1.5 text-text-primary">
<div className="flex items-center px-2 py-1.5 system-md-semibold text-text-primary">
{title || t('title.pickTime', { ns: 'time' })}
</div>
</div>

2
web/app/components/base/date-and-time-picker/year-and-month-picker/header.tsx
View File

@@ -17,7 +17,7 @@ const Header: FC<YearAndMonthPickerHeaderProps> = ({
<button
type="button"
onClick={onClick}
className="system-md-semibold flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 text-text-primary hover:bg-state-base-hover"
className="flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 system-md-semibold text-text-primary hover:bg-state-base-hover"
>
<span>{`${months[selectedMonth]} ${selectedYear}`}</span>
<RiArrowUpSLine className="h-4 w-4 text-text-tertiary" />

4
web/app/components/base/effect/index.stories.tsx
View File

@@ -28,8 +28,8 @@ type Story = StoryObj<typeof meta>
export const Playground: Story = {
render: () => (
<div className="relative h-40 w-72 overflow-hidden rounded-2xl border border-divider-subtle bg-background-default-subtle">
<Effect className="left-8 top-6" />
<Effect className="bg-util-colors-purple-brand-purple-brand-500 right-10 top-14" />
<Effect className="top-6 left-8" />
<Effect className="bg-util-colors-purple-brand-purple-brand-500 top-14 right-10" />
<div className="absolute inset-x-0 bottom-4 flex justify-center text-xs text-text-secondary">
Accent glow
</div>

4
web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx
View File

@@ -11,10 +11,10 @@ export const Item: FC<{ title: string, tooltip: string, children: React.JSX.Elem
return (
<div>
<div className="mb-1 flex items-center space-x-1">
<div className="py-1 text-text-secondary system-sm-semibold">{title}</div>
<div className="py-1 system-sm-semibold text-text-secondary">{title}</div>
<Tooltip
popupContent={
<div className="max-w-[200px] text-text-secondary system-sm-regular">{tooltip}</div>
<div className="max-w-[200px] system-sm-regular text-text-secondary">{tooltip}</div>
}
/>
</div>

2
web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
View File

@@ -38,7 +38,7 @@ const ScoreSlider: FC<Props> = ({
aria-label={t('feature.annotation.scoreThreshold.title', { ns: 'appDebug' })}
/>
<div
className="pointer-events-none absolute top-[-16px] text-text-primary system-sm-semibold"
className="pointer-events-none absolute top-[-16px] system-sm-semibold text-text-primary"
style={{
left: `calc(4px + ${(safeValue - 80) / 20} * (100% - 8px))`,
transform: 'translateX(-50%)',

4
web/app/components/base/features/new-feature-panel/index.tsx
View File

@@ -66,12 +66,12 @@ const NewFeaturePanel = ({
<div className="grow basis-0 overflow-y-auto px-4 pb-4">
{showFileUpload && (
<div className="relative mb-1 rounded-xl border border-components-panel-border p-2 shadow-xs">
<div className="absolute left-0 top-0 h-full w-full rounded-xl opacity-40" style={{ background: 'linear-gradient(92deg, rgba(11, 165, 236, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
<div className="absolute top-0 left-0 h-full w-full rounded-xl opacity-40" style={{ background: 'linear-gradient(92deg, rgba(11, 165, 236, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
<div className="relative flex h-full w-full items-start">
<div className="mr-0.5 shrink-0 p-0.5">
<RiInformation2Fill className="h-5 w-5 text-text-accent" />
</div>
<div className="system-xs-medium p-1 text-text-primary">
<div className="p-1 system-xs-medium text-text-primary">
<span>{isChatMode ? t('common.fileUploadTip', { ns: 'workflow' }) : t('common.ImageUploadLegacyTip', { ns: 'workflow' })}</span>
</div>
</div>

2
web/app/components/base/file-icon/index.stories.tsx
View File

@@ -61,7 +61,7 @@ export const Gallery: Story = {
{examples.map(type => (
<div key={type} className="flex flex-col items-center gap-1">
<FileIcon type={type} className="h-9 w-9" />
<span className="text-xs uppercase text-text-tertiary">{type}</span>
<span className="text-xs text-text-tertiary uppercase">{type}</span>
</div>
))}
</div>

2
web/app/components/base/file-uploader/audio-preview.tsx
View File

@@ -32,7 +32,7 @@ const AudioPreview: FC<AudioPreviewProps> = ({
</audio>
</div>
<div
className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
onClick={onCancel}
>
<span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="close-btn" />

6
web/app/components/base/file-uploader/pdf-preview.tsx
View File

@@ -78,7 +78,7 @@ const PdfPreview: FC<PdfPreviewProps> = ({
</div>
<Tooltip popupContent={t('operation.zoomOut', { ns: 'common' })}>
<div
className="absolute right-24 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
className="absolute top-6 right-24 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
onClick={zoomOut}
>
<RiZoomOutLine className="h-4 w-4 text-gray-500" />
@@ -86,7 +86,7 @@ const PdfPreview: FC<PdfPreviewProps> = ({
</Tooltip>
<Tooltip popupContent={t('operation.zoomIn', { ns: 'common' })}>
<div
className="absolute right-16 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
className="absolute top-6 right-16 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
onClick={zoomIn}
>
<RiZoomInLine className="h-4 w-4 text-gray-500" />
@@ -94,7 +94,7 @@ const PdfPreview: FC<PdfPreviewProps> = ({
</Tooltip>
<Tooltip popupContent={t('operation.cancel', { ns: 'common' })}>
<div
className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]"
className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]"
onClick={onCancel}
>
<RiCloseLine className="h-4 w-4 text-gray-500" />

2
web/app/components/base/file-uploader/video-preview.tsx
View File

@@ -31,7 +31,7 @@ const VideoPreview: FC<VideoPreviewProps> = ({
</video>
</div>
<div
className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
onClick={onCancel}
>
<span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="video-preview-close-btn" />

4
web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx
View File

@@ -25,9 +25,9 @@ const Placeholder = () => {
>
<div className="flex grow items-center">
Type or press
<div className="system-kbd mx-0.5 flex h-4 w-4 items-center justify-center rounded-sm bg-components-kbd-bg-gray text-text-placeholder">/</div>
<div className="mx-0.5 flex h-4 w-4 items-center justify-center rounded-sm bg-components-kbd-bg-gray system-kbd text-text-placeholder">/</div>
<div
className="system-sm-regular cursor-pointer text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
className="cursor-pointer system-sm-regular text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
onClick={((e) => {
e.stopPropagation()
handleInsert('/')

6
web/app/components/base/grid-mask/index.stories.tsx
View File

@@ -18,8 +18,8 @@ const meta = {
gradientClassName: '',
children: (
<div className="relative z-10 flex flex-col gap-3 text-left text-white">
<span className="text-xs uppercase tracking-[0.16em] text-white/70">Grid Mask Demo</span>
<span className="text-2xl font-semibold leading-tight">Beautiful backgrounds for feature highlights</span>
<span className="text-xs tracking-[0.16em] text-white/70 uppercase">Grid Mask Demo</span>
<span className="text-2xl leading-tight font-semibold">Beautiful backgrounds for feature highlights</span>
<p className="max-w-md text-sm text-white/80">
Place any content inside the mask. On dark backgrounds the grid and soft gradient add depth without distracting from the main message.
</p>
@@ -41,7 +41,7 @@ export const CustomBackground: Story = {
children: (
<div className="flex flex-col gap-2 text-white">
<span className="text-sm font-medium text-white/80">Custom gradient</span>
<span className="text-3xl font-semibold leading-tight">Use your own colors</span>
<span className="text-3xl leading-tight font-semibold">Use your own colors</span>
<p className="max-w-md text-sm text-white/70">
Override gradient and canvas classes to match brand palettes while keeping the grid texture.
</p>

2
web/app/components/base/image-uploader/audio-preview.tsx
View File

@@ -23,7 +23,7 @@ const AudioPreview: FC<AudioPreviewProps> = ({
</audio>
</div>
<div
className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
onClick={onCancel}
data-testid="close-preview"
>

4
web/app/components/base/image-uploader/image-list.stories.tsx
View File

@@ -132,7 +132,7 @@ const ImageUploaderPlayground = ({ readonly }: Story['args']) => {
return (
<div className="flex w-[360px] flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-4">
<div className="flex flex-col gap-2">
<span className="text-xs font-medium uppercase tracking-[0.18em] text-text-tertiary">Add images</span>
<span className="text-xs font-medium tracking-[0.18em] text-text-tertiary uppercase">Add images</span>
<div className="flex items-center gap-2">
<ImageLinkInput onUpload={handleUploadFromLink} disabled={readonly} />
<button
@@ -156,7 +156,7 @@ const ImageUploaderPlayground = ({ readonly }: Story['args']) => {
/>
<div className="rounded-lg border border-divider-subtle bg-background-default p-2">
<span className="mb-1 block text-[11px] font-semibold uppercase tracking-widest text-text-tertiary">
<span className="mb-1 block text-[11px] font-semibold tracking-widest text-text-tertiary uppercase">
Files state
</span>
<pre className="max-h-40 overflow-auto text-[11px] leading-relaxed text-text-tertiary">

12
web/app/components/base/image-uploader/image-preview.tsx
View File

@@ -200,7 +200,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
/>
<Tooltip popupContent={t('operation.copyImage', { ns: 'common' })}>
<div
className="absolute right-48 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
className="absolute top-6 right-48 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
onClick={imageCopy}
>
{isCopied
@@ -210,7 +210,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
</Tooltip>
<Tooltip popupContent={t('operation.zoomOut', { ns: 'common' })}>
<div
className="absolute right-40 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
className="absolute top-6 right-40 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
onClick={zoomOut}
>
<span className="i-ri-zoom-out-line h-4 w-4 text-gray-500" data-testid="image-preview-zoom-out-button" />
@@ -218,7 +218,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
</Tooltip>
<Tooltip popupContent={t('operation.zoomIn', { ns: 'common' })}>
<div
className="absolute right-32 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
className="absolute top-6 right-32 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
onClick={zoomIn}
>
<span className="i-ri-zoom-in-line h-4 w-4 text-gray-500" data-testid="image-preview-zoom-in-button" />
@@ -226,7 +226,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
</Tooltip>
<Tooltip popupContent={t('operation.download', { ns: 'common' })}>
<div
className="absolute right-24 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
className="absolute top-6 right-24 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
onClick={downloadImage}
>
<span className="i-ri-download-cloud-2-line h-4 w-4 text-gray-500" data-testid="image-preview-download-button" />
@@ -234,7 +234,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
</Tooltip>
<Tooltip popupContent={t('operation.openInNewTab', { ns: 'common' })}>
<div
className="absolute right-16 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
className="absolute top-6 right-16 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
onClick={openInNewTab}
>
<span className="i-ri-add-box-line h-4 w-4 text-gray-500" data-testid="image-preview-open-in-tab-button" />
@@ -242,7 +242,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
</Tooltip>
<Tooltip popupContent={t('operation.cancel', { ns: 'common' })}>
<div
className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]"
className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]"
onClick={onCancel}
>
<span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="image-preview-close-button" />

2
web/app/components/base/image-uploader/video-preview.tsx
View File

@@ -23,7 +23,7 @@ const VideoPreview: FC<VideoPreviewProps> = ({
</video>
</div>
<div
className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
onClick={onCancel}
>
<span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="close-button" />

2
web/app/components/base/loading/index.stories.tsx
View File

@@ -33,7 +33,7 @@ const LoadingPreview = ({ type }: { type: 'area' | 'app' }) => {
return (
<div className="flex flex-col items-center gap-4">
<span className="text-xs uppercase tracking-[0.18em] text-text-tertiary">{title}</span>
<span className="text-xs tracking-[0.18em] text-text-tertiary uppercase">{title}</span>
<div
className={`flex w-64 items-center justify-center rounded-xl border border-divider-subtle bg-background-default-subtle ${containerHeight}`}
>

8
web/app/components/base/logo/index.stories.tsx
View File

@@ -55,7 +55,7 @@ export const Playground: Story = {
<ThemePreview theme="dark">
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-2">
<span className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Primary logo</span>
<span className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Primary logo</span>
<div className="flex items-center justify-between rounded-xl border border-divider-subtle bg-background-default p-4">
<DifyLogo size={size} style={style} />
<code className="text-[11px] text-text-tertiary">{`size="${size}" | style="${style}"`}</code>
@@ -63,15 +63,15 @@ export const Playground: Story = {
</div>
<div className="grid gap-4 sm:grid-cols-2">
<div className="flex flex-col gap-2 rounded-xl border border-divider-subtle bg-background-default p-4">
<span className="text-[11px] font-medium uppercase tracking-widest text-text-tertiary">Site favicon</span>
<span className="text-[11px] font-medium tracking-widest text-text-tertiary uppercase">Site favicon</span>
<LogoSite />
</div>
<div className="flex flex-col gap-2 rounded-xl border border-divider-subtle bg-background-default p-4">
<span className="text-[11px] font-medium uppercase tracking-widest text-text-tertiary">Embedded header</span>
<span className="text-[11px] font-medium tracking-widest text-text-tertiary uppercase">Embedded header</span>
<LogoEmbeddedChatHeader />
</div>
<div className="flex flex-col gap-2 rounded-xl border border-divider-subtle bg-background-default p-4 sm:col-span-2">
<span className="text-[11px] font-medium uppercase tracking-widest text-text-tertiary">Embedded avatar</span>
<span className="text-[11px] font-medium tracking-widest text-text-tertiary uppercase">Embedded avatar</span>
<LogoEmbeddedChatAvatar className="border-divider-strong rounded-2xl border" />
</div>
</div>

2
web/app/components/base/markdown-blocks/code-block.stories.tsx
View File

@@ -14,7 +14,7 @@ const CodeBlockDemo = ({
}) => {
return (
<div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Code block</div>
<div className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Code block</div>
<CodeBlock
className={`language-${language}`}
>

4
web/app/components/base/markdown-blocks/think-block.stories.tsx
View File

@@ -32,7 +32,7 @@ const ThinkBlockDemo = ({
onFeedback={undefined}
>
<div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
<div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
<span>Think block</span>
<button
type="button"
@@ -43,7 +43,7 @@ const ThinkBlockDemo = ({
</button>
</div>
<ThinkBlock data-think>
<pre className="whitespace-pre-wrap text-sm text-text-secondary">
<pre className="text-sm whitespace-pre-wrap text-text-secondary">
{THOUGHT_TEXT}
</pre>
</ThinkBlock>

2
web/app/components/base/markdown/index.stories.tsx
View File

@@ -47,7 +47,7 @@ const MarkdownDemo = ({
return (
<div className="flex w-full max-w-3xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Markdown renderer</div>
<div className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Markdown renderer</div>
<Markdown
content={content}
className={compact ? 'text-sm! leading-relaxed' : ''}

2
web/app/components/base/mermaid/index.stories.tsx
View File

@@ -20,7 +20,7 @@ const MermaidDemo = ({
return (
<div className="flex w-full max-w-3xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
<div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
<span>Mermaid diagram</span>
<button
type="button"

4
web/app/components/base/modal-like-wrap/index.stories.tsx
View File

@@ -81,10 +81,10 @@ export const WithBackLink: Story = {
hideCloseBtn
beforeHeader={(
<button
className="mb-1 flex items-center gap-1 text-xs font-medium uppercase text-text-accent"
className="mb-1 flex items-center gap-1 text-xs font-medium text-text-accent uppercase"
onClick={() => console.log('back')}
>
<span className="bg-text-accent/10 inline-block h-4 w-4 rounded-sm text-center text-[10px] leading-4 text-text-accent">{'<'}</span>
<span className="inline-block h-4 w-4 rounded-sm bg-text-accent/10 text-center text-[10px] leading-4 text-text-accent">{'<'}</span>
Back
</button>
)}

4
web/app/components/base/notion-page-selector/credential-selector/index.tsx
View File

@@ -66,7 +66,7 @@ const CredentialSelector = ({
leaveTo="transform opacity-0 scale-95"
>
<MenuItems
className="absolute left-0 top-8 z-10 w-80
className="absolute top-8 left-0 z-10 w-80
origin-top-right rounded-lg border-[0.5px]
border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5"
>
@@ -88,7 +88,7 @@ const CredentialSelector = ({
size={20}
/>
<div
className="mr-2 grow truncate text-text-secondary system-sm-medium"
className="mr-2 grow truncate system-sm-medium text-text-secondary"
title={displayName}
>
{displayName}

2
web/app/components/base/notion-page-selector/index.stories.tsx
View File

@@ -168,7 +168,7 @@ const NotionSelectorPreview = () => {
canPreview
/>
<div className="rounded-xl border border-divider-subtle bg-background-default-subtle p-4 text-xs text-text-secondary">
<div className="mb-2 font-semibold uppercase tracking-[0.18em] text-text-tertiary">
<div className="mb-2 font-semibold tracking-[0.18em] text-text-tertiary uppercase">
Debug state
</div>
<p className="mb-1">

2
web/app/components/base/pagination/index.stories.tsx
View File

@@ -22,7 +22,7 @@ const PaginationDemo = ({
return (
<div className="flex w-full max-w-3xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
<div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
<span>Log pagination</span>
<span className="rounded-md border border-divider-subtle bg-background-default px-2 py-1 font-medium text-text-secondary">
{pageSummary}

2
web/app/components/base/param-item/index.stories.tsx
View File

@@ -74,7 +74,7 @@ const ParamItemPlayground = () => {
return (
<div className="flex w-full max-w-2xl flex-col gap-5 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
<div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
<span>Generation parameters</span>
<code className="rounded-md border border-divider-subtle bg-background-default px-2 py-1 text-[11px] text-text-tertiary">
{JSON.stringify(state, null, 0)}

2
web/app/components/base/portal-to-follow-elem/index.stories.tsx
View File

@@ -8,7 +8,7 @@ import {
const TooltipCard = ({ title, description }: { title: string, description: string }) => (
<div className="w-[220px] rounded-lg border border-divider-subtle bg-components-panel-bg px-3 py-2 text-sm text-text-secondary shadow-lg">
<div className="mb-1 text-xs font-semibold uppercase tracking-[0.14em] text-text-tertiary">
<div className="mb-1 text-xs font-semibold tracking-[0.14em] text-text-tertiary uppercase">
{title}
</div>
<p className="leading-5">{description}</p>

6
web/app/components/base/premium-badge/index.stories.tsx
View File

@@ -12,14 +12,14 @@ const PremiumBadgeGallery = ({
}) => {
return (
<div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<p className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Brand badge variants</p>
<p className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Brand badge variants</p>
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
{colors.map(color => (
<div key={color} className="flex flex-col items-center gap-2 rounded-xl border border-transparent px-2 py-4 hover:border-divider-subtle hover:bg-background-default-subtle">
<PremiumBadge color={color} size={size} allowHover={allowHover}>
<span className="px-2 text-xs font-semibold uppercase tracking-[0.14em]">Premium</span>
<span className="px-2 text-xs font-semibold tracking-[0.14em] uppercase">Premium</span>
</PremiumBadge>
<span className="text-[11px] uppercase tracking-[0.16em] text-text-tertiary">{color}</span>
<span className="text-[11px] tracking-[0.16em] text-text-tertiary uppercase">{color}</span>
</div>
))}
</div>

2
web/app/components/base/progress-bar/progress-circle.stories.tsx
View File

@@ -13,7 +13,7 @@ const ProgressCircleDemo = ({
return (
<div className="flex w-full max-w-md flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
<div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
<span>Upload progress</span>
<span className="rounded-md border border-divider-subtle bg-background-default px-2 py-1 text-[11px] text-text-secondary">
{percentage}

4
web/app/components/base/prompt-editor/index.stories.tsx
View File

@@ -86,7 +86,7 @@ const PromptEditorDemo = (args: any) => {
{value && (
<div className="mt-4 rounded-lg bg-gray-50 p-3">
<div className="mb-2 text-xs font-medium text-gray-600">Current Value:</div>
<div className="whitespace-pre-wrap font-mono text-sm text-gray-800">
<div className="font-mono text-sm whitespace-pre-wrap text-gray-800">
{value}
</div>
</div>
@@ -204,7 +204,7 @@ const MultipleEditorsDemo = () => {
{(systemPrompt || userPrompt) && (
<div className="rounded-lg bg-gray-50 p-4">
<div className="mb-2 text-xs font-medium text-gray-600">Combined Output:</div>
<div className="whitespace-pre-wrap text-sm text-gray-800">
<div className="text-sm whitespace-pre-wrap text-gray-800">
{systemPrompt && (
<>
<strong>System:</strong>

2
web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx
View File

@@ -23,7 +23,7 @@ export const PromptMenuItem = memo(({
className={`
flex h-6 cursor-pointer items-center rounded-md px-3 hover:bg-state-base-hover
${isSelected && !disabled && 'bg-state-base-hover!'}
${disabled ? 'cursor-not-allowed opacity-30' : 'cursor-pointer hover:bg-state-base-hover'}
${disabled ? 'cursor-not-allowed opacity-30' : ''}
`}
tabIndex={-1}
ref={setRefElement}

4
web/app/components/base/prompt-editor/plugins/context-block/component.tsx
View File

@@ -40,13 +40,13 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
return (
<div
className={`
group inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#F4F3FF] pl-1 pr-0.5 text-[#6938EF] hover:bg-[#EBE9FE]
group inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#F4F3FF] pr-0.5 pl-1 text-[#6938EF] hover:bg-[#EBE9FE]
${open ? 'bg-[#EBE9FE]' : ''}
${isSelected && 'border-[#9B8AFB]!'}
`}
ref={ref}
>
<span className="i-custom-vender-solid-files-file-05 mr-1 h-[14px] w-[14px]" data-testid="file-icon" />
<span className="mr-1 i-custom-vender-solid-files-file-05 h-[14px] w-[14px]" data-testid="file-icon" />
<div className="mr-1 text-xs font-medium">{t('promptEditor.context.item.title', { ns: 'common' })}</div>
{!canNotAddContext && (
<PortalToFollowElem

2
web/app/components/base/prompt-editor/plugins/history-block/component.tsx
View File

@@ -41,7 +41,7 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
return (
<div
className={`
group inline-flex h-6 items-center rounded-[5px] border border-transparent pl-1 pr-0.5 text-[#DD2590] hover:bg-[#FCE7F6]
group inline-flex h-6 items-center rounded-[5px] border border-transparent pr-0.5 pl-1 text-[#DD2590] hover:bg-[#FCE7F6]
${open ? 'bg-[#FCE7F6]' : 'bg-[#FDF2FA]'}
${isSelected && 'border-[#F670C7]!'}
`}

2
web/app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx
View File

@@ -63,7 +63,7 @@ const HITLInputComponent: FC<HITLInputComponentProps> = ({
return (
<div
ref={ref}
className="w-full pb-1 pt-3"
className="w-full pt-3 pb-1"
>
<ComponentUi
nodeId={nodeId}

2
web/app/components/base/prompt-editor/plugins/query-block/component.tsx
View File

@@ -17,7 +17,7 @@ const QueryBlockComponent: FC<QueryBlockComponentProps> = ({
return (
<div
className={`
inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#FFF6ED] pl-1 pr-0.5 hover:bg-[#FFEAD5]
inline-flex h-6 items-center rounded-[5px] border border-transparent bg-[#FFF6ED] pr-0.5 pl-1 hover:bg-[#FFEAD5]
${isSelected && 'border-[#FD853A]!'}
`}
ref={ref}

2
web/app/components/base/prompt-log-modal/card.tsx
View File

@@ -23,7 +23,7 @@ const Card: FC<CardProps> = ({
<div>
{
log.map((item, index) => (
<div key={index} className="group/card mb-2 rounded-xl px-4 pb-4 pt-2 last-of-type:mb-0 hover:bg-state-base-hover">
<div key={index} className="group/card mb-2 rounded-xl px-4 pt-2 pb-4 last-of-type:mb-0 hover:bg-state-base-hover">
<div className="flex h-8 items-center justify-between">
<div className="font-semibold text-[#2D31A6]">{item.role.toUpperCase()}</div>
<CopyFeedbackNew className="hidden h-6 w-6 group-hover/card:block" content={item.text} />

2
web/app/components/base/prompt-log-modal/index.tsx
View File

@@ -42,7 +42,7 @@ const PromptLogModal: FC<PromptLogModalProps> = ({
}}
ref={ref}
>
<div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pl-6 pr-5">
<div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pr-5 pl-6">
<div className="text-base font-semibold text-text-primary">PROMPT LOG</div>
<div className="flex items-center">
{

2
web/app/components/base/qrcode/index.stories.tsx
View File

@@ -8,7 +8,7 @@ const QRDemo = ({
}) => {
return (
<div className="flex w-full max-w-sm flex-col gap-3 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<p className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Share QR</p>
<p className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Share QR</p>
<div className="flex items-center gap-2 text-sm text-text-secondary">
<span>Generated URL:</span>
<code className="rounded-md bg-background-default px-2 py-1 text-[11px]">{content}</code>

2
web/app/components/base/qrcode/index.tsx
View File

@@ -64,7 +64,7 @@ const ShareQRCode = ({ content }: Props) => {
{isShow && (
<div
ref={qrCodeRef}
className="absolute -right-8 top-8 z-10 flex w-[232px] flex-col items-center rounded-lg bg-components-panel-bg p-4 shadow-xs"
className="absolute top-8 -right-8 z-10 flex w-[232px] flex-col items-center rounded-lg bg-components-panel-bg p-4 shadow-xs"
onClick={handlePanelClick}
>
<QRCode size={160} value={content} className="mb-2" />

2
web/app/components/base/segmented-control/index.stories.tsx
View File

@@ -24,7 +24,7 @@ const SegmentedControlDemo = ({
return (
<div className="flex w-full max-w-lg flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
<div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
<span>Segmented control</span>
<code className="rounded-md bg-background-default px-2 py-1 text-[11px] text-text-tertiary">
value="

2
web/app/components/base/select/locale-signin.tsx
View File

@@ -36,7 +36,7 @@ export default function LocaleSigninSelect({
leaveTo="transform opacity-0 scale-95"
>
<MenuItems className="absolute right-0 z-10 mt-2 w-[200px] origin-top-right divide-y divide-divider-regular rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg focus:outline-hidden">
<div className="max-h-96 overflow-y-auto px-1 py-1 mask-[linear-gradient(to_bottom,transparent_0px,black_8px,black_calc(100%-8px),transparent_100%)]">
<div className="max-h-96 overflow-y-auto mask-[linear-gradient(to_bottom,transparent_0px,black_8px,black_calc(100%-8px),transparent_100%)] px-1 py-1">
{items.map((item) => {
return (
<MenuItem key={item.value}>

2
web/app/components/base/simple-pie-chart/index.stories.tsx
View File

@@ -17,7 +17,7 @@ const PieChartPlayground = ({
return (
<div className="flex w-full max-w-md flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
<div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
<span>Conversion snapshot</span>
<span className="rounded-md border border-divider-subtle bg-background-default px-2 py-1 text-[11px] text-text-secondary">
{label}

2
web/app/components/base/skeleton/index.stories.tsx
View File

@@ -9,7 +9,7 @@ import {
const SkeletonDemo = () => {
return (
<div className="flex w-full max-w-xl flex-col gap-6 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Loading skeletons</div>
<div className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Loading skeletons</div>
<div className="space-y-4 rounded-xl border border-divider-subtle bg-background-default-subtle p-4">
<SkeletonContainer>
<SkeletonRow>

2
web/app/components/base/sort/index.stories.tsx
View File

@@ -21,7 +21,7 @@ const SortPlayground = () => {
return (
<div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
<div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
<span>Sort control</span>
<code className="rounded-md bg-background-default px-2 py-1 text-[11px] text-text-tertiary">
sort_by="

2
web/app/components/base/spinner/index.stories.tsx
View File

@@ -11,7 +11,7 @@ const SpinnerPlayground = ({
return (
<div className="flex w-full max-w-xs flex-col items-center gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<p className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Spinner</p>
<p className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Spinner</p>
<Spinner loading={isLoading} className="text-primary-500" />
<button
type="button"

2
web/app/components/base/spinner/index.tsx
View File

@@ -14,7 +14,7 @@ const Spinner: FC<Props> = ({ loading = false, children, className }) => {
role="status"
>
<span
className="absolute! -m-px! h-px! w-px! overflow-hidden! whitespace-nowrap! border-0! p-0! [clip:rect(0,0,0,0)]!"
className="absolute! -m-px! h-px! w-px! overflow-hidden! border-0! p-0! whitespace-nowrap! [clip:rect(0,0,0,0)]!"
>
Loading...
</span>

2
web/app/components/base/svg/index.stories.tsx
View File

@@ -7,7 +7,7 @@ const SvgToggleDemo = () => {
return (
<div className="flex w-full max-w-xs flex-col items-center gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<p className="text-xs uppercase tracking-[0.18em] text-text-tertiary">SVG toggle</p>
<p className="text-xs tracking-[0.18em] text-text-tertiary uppercase">SVG toggle</p>
<SVGBtn isSVG={isSVG} setIsSVG={setIsSVG} />
<span className="text-xs text-text-secondary">
Mode:

2
web/app/components/base/tab-header/index.stories.tsx
View File

@@ -20,7 +20,7 @@ const TabHeaderDemo = ({
return (
<div className="flex w-full max-w-3xl flex-col gap-6 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
<div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
<span>Tabs</span>
<code className="rounded-md bg-background-default px-2 py-1 text-[11px] text-text-tertiary">
active="

2
web/app/components/base/tab-slider-new/index.stories.tsx
View File

@@ -17,7 +17,7 @@ const TabSliderNewDemo = ({
return (
<div className="flex w-full max-w-sm flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Pill tabs</div>
<div className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Pill tabs</div>
<TabSliderNew value={value} options={OPTIONS} onChange={setValue} />
</div>
)

2
web/app/components/base/tab-slider-plain/index.stories.tsx
View File

@@ -17,7 +17,7 @@ const TabSliderPlainDemo = ({
return (
<div className="flex w-full max-w-2xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Underline tabs</div>
<div className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Underline tabs</div>
<TabSliderPlain
value={value}
onChange={setValue}

2
web/app/components/base/tab-slider/index.stories.tsx
View File

@@ -54,7 +54,7 @@ const TabSliderDemo = ({
return (
<div className="flex w-full max-w-lg flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
<div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Segmented tabs</div>
<div className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Segmented tabs</div>
<TabSlider
value={value}
options={OPTIONS}

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

@@ -48,8 +48,8 @@ const TagManagementModal = ({ show, type }: TagManagementModalProps) => {
}, [type])
return (
<Modal className="!w-[600px] !max-w-[600px] rounded-xl px-8 py-6" isShow={show} onClose={() => setShowTagManagementModal(false)}>
<div className="relative pb-2 text-xl font-semibold leading-[30px] text-text-primary">{t('tag.manageTags', { ns: 'common' })}</div>
<div className="absolute right-4 top-4 cursor-pointer p-2" onClick={() => setShowTagManagementModal(false)}>
<div className="relative pb-2 text-xl leading-[30px] font-semibold text-text-primary">{t('tag.manageTags', { ns: 'common' })}</div>
<div className="absolute top-4 right-4 cursor-pointer p-2" onClick={() => setShowTagManagementModal(false)}>
<span className="i-ri-close-line h-4 w-4 text-text-tertiary" data-testid="tag-management-modal-close-button" />
</div>
<div className="mt-3 flex flex-wrap gap-2">

10
web/app/components/base/tag-management/panel.tsx
View File

@@ -114,7 +114,7 @@ const Panel = (props: PanelProps) => {
<div className="p-1">
<div className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" data-testid="create-tag-option" onClick={createNewTag}>
<span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
<div className="grow truncate px-1 text-text-secondary system-md-regular">
<div className="grow truncate px-1 system-md-regular text-text-secondary">
{`${t('tag.create', { ns: 'common' })} `}
<span className="system-md-medium">{`'${keywords}'`}</span>
</div>
@@ -127,7 +127,7 @@ const Panel = (props: PanelProps) => {
{filteredSelectedTagList.map(tag => (
<div key={tag.id} className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" onClick={() => selectTag(tag)} data-testid="tag-row">
<Checkbox className="shrink-0" checked={selectedTagIDs.includes(tag.id)} onCheck={noop} id={tag.id} />
<div title={tag.name} className="grow truncate px-1 text-text-secondary system-md-regular">
<div title={tag.name} className="grow truncate px-1 system-md-regular text-text-secondary">
{tag.name}
</div>
</div>
@@ -135,7 +135,7 @@ const Panel = (props: PanelProps) => {
{filteredTagList.map(tag => (
<div key={tag.id} className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" onClick={() => selectTag(tag)} data-testid="tag-row">
<Checkbox className="shrink-0" checked={selectedTagIDs.includes(tag.id)} onCheck={noop} id={tag.id} />
<div title={tag.name} className="grow truncate px-1 text-text-secondary system-md-regular">
<div title={tag.name} className="grow truncate px-1 system-md-regular text-text-secondary">
{tag.name}
</div>
</div>
@@ -146,7 +146,7 @@ const Panel = (props: PanelProps) => {
<div className="p-1">
<div className="flex flex-col items-center gap-y-1 p-3">
<span className="i-ri-price-tag-3-line h-6 w-6 text-text-quaternary" />
<div className="text-text-tertiary system-xs-regular">{t('tag.noTag', { ns: 'common' })}</div>
<div className="system-xs-regular text-text-tertiary">{t('tag.noTag', { ns: 'common' })}</div>
</div>
</div>
)}
@@ -154,7 +154,7 @@ const Panel = (props: PanelProps) => {
<div className="p-1">
<div className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" onClick={() => setShowTagManagementModal(true)}>
<span className="i-ri-price-tag-3-line h-4 w-4 text-text-tertiary" />
<div className="grow truncate px-1 text-text-secondary system-md-regular">
<div className="grow truncate px-1 system-md-regular text-text-secondary">
{t('tag.manageTags', { ns: 'common' })}
</div>
</div>

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

@@ -16,7 +16,7 @@ const Trigger = ({
? (
<div className="flex items-center gap-x-0.5 rounded-[5px] border border-dashed border-divider-deep bg-components-badge-bg-dimm px-[5px] py-[3px]">
<span className="i-ri-price-tag-3-line h-3 w-3 shrink-0 text-text-quaternary" />
<div className="text-nowrap text-text-tertiary system-2xs-medium-uppercase">
<div className="system-2xs-medium-uppercase text-nowrap text-text-tertiary">
{t('tag.addTag', { ns: 'common' })}
</div>
</div>
@@ -32,7 +32,7 @@ const Trigger = ({
data-testid={`tag-badge-${index}`}
>
<span className="i-ri-price-tag-3-line h-3 w-3 shrink-0 text-text-quaternary" />
<div className="text-nowrap text-text-tertiary system-2xs-medium-uppercase">
<div className="system-2xs-medium-uppercase text-nowrap text-text-tertiary">
{content}
</div>
</div>

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