youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 02:18:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into feat/support-agent-sandbox

Browse Source
This commit is contained in:
yyh
2026-02-09 18:43:04 +08:00
parent ef2fabc158 e0fcf33979
commit db0c527ce8
920 changed files with 4057 additions and 3430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/workflow/block-selector/all-start-blocks.tsx
View File

@ -153,7 +153,7 @@ const AllStartBlocks = ({
)}
{shouldShowTriggerListTitle && (
<div className="px-3 pb-1 pt-2">
<span className="system-xs-medium text-text-primary">{t('tabs.allTriggers', { ns: 'workflow' })}</span>
<span className="text-text-primary system-xs-medium">{t('tabs.allTriggers', { ns: 'workflow' })}</span>
</div>
)}
<StartBlocks

2
web/app/components/workflow/block-selector/all-tools.tsx
View File

@ -341,7 +341,7 @@ const AllTools = ({
<>
{!hideFeaturedTool && (
<div className="px-3 pb-1 pt-2">
<span className="system-xs-medium text-text-primary">{t('allTools', { ns: 'tools' })}</span>
<span className="text-text-primary system-xs-medium">{t('allTools', { ns: 'tools' })}</span>
</div>
)}
<Tools

4
web/app/components/workflow/block-selector/blocks.tsx
View File

@ -105,8 +105,8 @@ const Blocks = ({
className="mb-2"
type={block.metaData.iconType || block.metaData.type}
/>
<div className="system-md-medium mb-1 text-text-primary">{block.metaData.title}</div>
<div className="system-xs-regular text-text-tertiary">{block.metaData.description}</div>
<div className="mb-1 text-text-primary system-md-medium">{block.metaData.title}</div>
<div className="text-text-tertiary system-xs-regular">{block.metaData.description}</div>
</div>
)}
>

10
web/app/components/workflow/block-selector/featured-tools.tsx
View File

@ -132,7 +132,7 @@ const FeaturedTools = ({
className="flex w-full items-center rounded-md px-0 py-1 text-left text-text-primary"
onClick={() => setIsCollapsed(prev => !prev)}
>
<span className="system-xs-medium text-text-primary">{t('tabs.featuredTools', { ns: 'workflow' })}</span>
<span className="text-text-primary system-xs-medium">{t('tabs.featuredTools', { ns: 'workflow' })}</span>
<ArrowDownRoundFill className={`ml-0.5 h-4 w-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
</button>
@ -145,7 +145,7 @@ const FeaturedTools = ({
)}
{showEmptyState && (
<p className="system-xs-regular py-2 text-text-tertiary">
<p className="py-2 text-text-tertiary system-xs-regular">
<Link className="text-text-accent" href={getMarketplaceUrl('', { category: 'tool' })} target="_blank" rel="noopener noreferrer">
{t('tabs.noFeaturedPlugins', { ns: 'workflow' })}
</Link>
@ -275,13 +275,13 @@ function FeaturedToolUninstalledItem({
<div className="flex h-full min-w-0 items-center">
<BlockIcon type={BlockEnum.Tool} toolIcon={plugin.icon} />
<div className="ml-2 min-w-0">
<div className="system-sm-medium truncate text-text-secondary">{label}</div>
<div className="truncate text-text-secondary system-sm-medium">{label}</div>
</div>
</div>
<div className="ml-auto flex h-full items-center gap-1 pl-1">
<span className={`system-xs-regular text-text-tertiary ${actionOpen ? 'hidden' : 'group-hover:hidden'}`}>{installCountLabel}</span>
<span className={`text-text-tertiary system-xs-regular ${actionOpen ? 'hidden' : 'group-hover:hidden'}`}>{installCountLabel}</span>
<div
className={`system-xs-medium flex h-full items-center gap-1 text-components-button-secondary-accent-text [&_.action-btn]:h-6 [&_.action-btn]:min-h-0 [&_.action-btn]:w-6 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? '' : 'hidden group-hover:flex'}`}
className={`flex h-full items-center gap-1 text-components-button-secondary-accent-text system-xs-medium [&_.action-btn]:h-6 [&_.action-btn]:min-h-0 [&_.action-btn]:w-6 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? '' : 'hidden group-hover:flex'}`}
onMouseEnter={() => setIsActionHovered(true)}
onMouseLeave={() => {
if (!actionOpen)

10
web/app/components/workflow/block-selector/featured-triggers.tsx
View File

@ -127,7 +127,7 @@ const FeaturedTriggers = ({
className="flex w-full items-center rounded-md px-0 py-1 text-left text-text-primary"
onClick={() => setIsCollapsed(prev => !prev)}
>
<span className="system-xs-medium text-text-primary">{t('tabs.featuredTools', { ns: 'workflow' })}</span>
<span className="text-text-primary system-xs-medium">{t('tabs.featuredTools', { ns: 'workflow' })}</span>
<ArrowDownRoundFill className={`ml-0.5 h-4 w-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
</button>
@ -140,7 +140,7 @@ const FeaturedTriggers = ({
)}
{showEmptyState && (
<p className="system-xs-regular py-2 text-text-tertiary">
<p className="py-2 text-text-tertiary system-xs-regular">
<Link className="text-text-accent" href={getMarketplaceUrl('', { category: 'trigger' })} target="_blank" rel="noopener noreferrer">
{t('tabs.noFeaturedTriggers', { ns: 'workflow' })}
</Link>
@ -270,13 +270,13 @@ function FeaturedTriggerUninstalledItem({
<div className="flex h-full min-w-0 items-center">
<BlockIcon type={BlockEnum.TriggerPlugin} toolIcon={plugin.icon} />
<div className="ml-2 min-w-0">
<div className="system-sm-medium truncate text-text-secondary">{label}</div>
<div className="truncate text-text-secondary system-sm-medium">{label}</div>
</div>
</div>
<div className="ml-auto flex h-full items-center gap-1 pl-1">
<span className={`system-xs-regular text-text-tertiary ${actionOpen ? 'hidden' : 'group-hover:hidden'}`}>{installCountLabel}</span>
<span className={`text-text-tertiary system-xs-regular ${actionOpen ? 'hidden' : 'group-hover:hidden'}`}>{installCountLabel}</span>
<div
className={`system-xs-medium flex h-full items-center gap-1 text-components-button-secondary-accent-text [&_.action-btn]:h-6 [&_.action-btn]:min-h-0 [&_.action-btn]:w-6 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? '' : 'hidden group-hover:flex'}`}
className={`flex h-full items-center gap-1 text-components-button-secondary-accent-text system-xs-medium [&_.action-btn]:h-6 [&_.action-btn]:min-h-0 [&_.action-btn]:w-6 [&_.action-btn]:rounded-lg [&_.action-btn]:p-0 ${actionOpen ? '' : 'hidden group-hover:flex'}`}
onMouseEnter={() => setIsActionHovered(true)}
onMouseLeave={() => {
if (!actionOpen)

4
web/app/components/workflow/block-selector/market-place-plugin/action.tsx
View File

@ -91,8 +91,8 @@ const OperationDropdown: FC<Props> = ({
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-[9999]">
<div className="min-w-[176px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
<div onClick={handleDownload} className="system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover">{t('operation.download', { ns: 'common' })}</div>
<a href={getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })} target="_blank" className="system-md-regular block cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover">{t('operation.viewDetails', { ns: 'common' })}</a>
<div onClick={handleDownload} className="cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover">{t('operation.download', { ns: 'common' })}</div>
<a href={getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })} target="_blank" className="block cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover">{t('operation.viewDetails', { ns: 'common' })}</a>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>

8
web/app/components/workflow/block-selector/market-place-plugin/item.tsx
View File

@ -42,16 +42,16 @@ const Item: FC<Props> = ({
/>
<div className="ml-2 flex w-0 grow">
<div className="w-0 grow">
<div className="system-sm-medium h-4 truncate leading-4 text-text-primary">{getLocalizedText(payload.label)}</div>
<div className="system-xs-regular h-5 truncate leading-5 text-text-tertiary">{getLocalizedText(payload.brief)}</div>
<div className="system-xs-regular flex space-x-1 text-text-tertiary">
<div className="h-4 truncate leading-4 text-text-primary system-sm-medium">{getLocalizedText(payload.label)}</div>
<div className="h-5 truncate leading-5 text-text-tertiary system-xs-regular">{getLocalizedText(payload.brief)}</div>
<div className="flex space-x-1 text-text-tertiary system-xs-regular">
<div>{payload.org}</div>
<div>·</div>
<div>{t('install', { ns: 'plugin', num: formatNumber(payload.install_count || 0) })}</div>
</div>
</div>
{/* Action */}
<div className={cn(!open ? 'hidden' : 'flex', 'system-xs-medium h-4 items-center space-x-1 text-components-button-secondary-accent-text group-hover/plugin:flex')}>
<div className={cn(!open ? 'hidden' : 'flex', 'h-4 items-center space-x-1 text-components-button-secondary-accent-text system-xs-medium group-hover/plugin:flex')}>
<div
className="cursor-pointer rounded-md px-1.5 py-0.5 hover:bg-state-base-hover"
onClick={showInstallModal}

6
web/app/components/workflow/block-selector/market-place-plugin/list.tsx
View File

@ -79,7 +79,7 @@ const List = ({
return (
<Link
className="system-sm-medium sticky bottom-0 z-10 flex h-8 cursor-pointer items-center rounded-b-lg border-[0.5px] border-t border-components-panel-border bg-components-panel-bg-blur px-4 py-1 text-text-accent-light-mode-only shadow-lg"
className="sticky bottom-0 z-10 flex h-8 cursor-pointer items-center rounded-b-lg border-[0.5px] border-t border-components-panel-border bg-components-panel-bg-blur px-4 py-1 text-text-accent-light-mode-only shadow-lg system-sm-medium"
href={getMarketplaceUrl('', { category })}
target="_blank"
>
@ -95,7 +95,7 @@ const List = ({
<>
{hasRes && (
<div
className={cn('system-sm-medium sticky z-10 flex h-8 cursor-pointer justify-between px-4 py-1 text-text-primary', stickyClassName, !disableMaxWidth && maxWidthClassName)}
className={cn('sticky z-10 flex h-8 cursor-pointer justify-between px-4 py-1 text-text-primary system-sm-medium', stickyClassName, !disableMaxWidth && maxWidthClassName)}
onClick={handleHeadClick}
>
<span>{t('fromMarketplace', { ns: 'plugin' })}</span>
@ -124,7 +124,7 @@ const List = ({
<Link
href={urlWithSearchText}
target="_blank"
className="system-sm-medium flex h-4 shrink-0 items-center text-text-accent-light-mode-only"
className="flex h-4 shrink-0 items-center text-text-accent-light-mode-only system-sm-medium"
>
<RiSearchLine className="mr-0.5 h-3 w-3" />
<span>{t('searchInMarketplace', { ns: 'plugin' })}</span>

6
web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx
View File

@ -83,7 +83,7 @@ const RAGToolRecommendations = ({
className="flex w-full items-center rounded-md px-3 pb-0.5 pt-1 text-left text-text-tertiary"
onClick={() => setIsCollapsed(prev => !prev)}
>
<span className="system-xs-medium text-text-tertiary">{t('ragToolSuggestions.title', { ns: 'pipeline' })}</span>
<span className="text-text-tertiary system-xs-medium">{t('ragToolSuggestions.title', { ns: 'pipeline' })}</span>
<ArrowDownRoundFill className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`} />
</button>
{!isCollapsed && (
@ -95,7 +95,7 @@ const RAGToolRecommendations = ({
</div>
)}
{!isFetchingRAGRecommendedPlugins && recommendedPlugins.length === 0 && unInstalledPlugins.length === 0 && (
<p className="system-xs-regular px-3 py-1 text-text-tertiary">
<p className="px-3 py-1 text-text-tertiary system-xs-regular">
<Trans
i18nKey="ragToolSuggestions.noRecommendationPlugins"
ns="pipeline"
@ -127,7 +127,7 @@ const RAGToolRecommendations = ({
<div className="px-1">
<RiMoreLine className="size-4 text-text-tertiary" />
</div>
<div className="system-xs-regular text-text-tertiary">
<div className="text-text-tertiary system-xs-regular">
{t('operation.more', { ns: 'common' })}
</div>
</div>

6
web/app/components/workflow/block-selector/rag-tool-recommendations/uninstalled-item.tsx
View File

@ -34,15 +34,15 @@ const UninstalledItem = ({
/>
<div className="ml-2 flex w-0 grow items-center">
<div className="flex w-0 grow items-center gap-x-2">
<span className="system-sm-regular truncate text-text-primary">
<span className="truncate text-text-primary system-sm-regular">
{getLocalizedText(payload.label)}
</span>
<span className="system-xs-regular text-text-quaternary">
<span className="text-text-quaternary system-xs-regular">
{payload.org}
</span>
</div>
<div
className="system-xs-medium cursor-pointer pl-1.5 text-components-button-secondary-accent-text"
className="cursor-pointer pl-1.5 text-components-button-secondary-accent-text system-xs-medium"
onClick={showInstallModal}
>
{t('installAction', { ns: 'plugin' })}

8
web/app/components/workflow/block-selector/start-blocks.tsx
View File

@ -80,16 +80,16 @@ const StartBlocks = ({
className="mb-2"
type={block.type}
/>
<div className="system-md-medium mb-1 text-text-primary">
<div className="mb-1 text-text-primary system-md-medium">
{block.type === BlockEnumValues.TriggerWebhook
? t('customWebhook', { ns: 'workflow' })
: t(`blocks.${block.type}`, { ns: 'workflow' })}
</div>
<div className="system-xs-regular text-text-secondary">
<div className="text-text-secondary system-xs-regular">
{t(`blocksAbout.${block.type}`, { ns: 'workflow' })}
</div>
{(block.type === BlockEnumValues.TriggerWebhook || block.type === BlockEnumValues.TriggerSchedule) && (
<div className="system-xs-regular mb-1 mt-1 text-text-tertiary">
<div className="mb-1 mt-1 text-text-tertiary system-xs-regular">
{t('author', { ns: 'tools' })}
{' '}
{t('difyTeam', { ns: 'workflow' })}
@ -109,7 +109,7 @@ const StartBlocks = ({
<div className="flex w-0 grow items-center justify-between text-sm text-text-secondary">
<span className="truncate">{t(`blocks.${block.type}`, { ns: 'workflow' })}</span>
{block.type === BlockEnumValues.Start && (
<span className="system-xs-regular ml-2 shrink-0 text-text-quaternary">{t('blocks.originalStartNode', { ns: 'workflow' })}</span>
<span className="ml-2 shrink-0 text-text-quaternary system-xs-regular">{t('blocks.originalStartNode', { ns: 'workflow' })}</span>
)}
</div>
</div>

2
web/app/components/workflow/block-selector/tabs.tsx
View File

@ -134,7 +134,7 @@ const Tabs: FC<TabsProps> = ({
tabs.map((tab) => {
const commonProps = {
'className': cn(
'system-sm-medium relative mr-0.5 flex h-8 items-center rounded-t-lg px-3',
'relative mr-0.5 flex h-8 items-center rounded-t-lg px-3 system-sm-medium',
tab.disabled
? 'cursor-not-allowed text-text-disabled opacity-60'
: activeTab === tab.key

4
web/app/components/workflow/block-selector/tool/action-item.tsx
View File

@ -112,11 +112,11 @@ const ToolItem: FC<Props> = ({
})
}}
>
<div className={cn('system-sm-medium h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary')}>
<div className={cn('h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary system-sm-medium')}>
<span className={cn(disabled && 'opacity-30')}>{payload.label[language]}</span>
</div>
{isAdded && (
<div className="system-xs-regular mr-4 text-text-tertiary">{t('addToolModal.added', { ns: 'tools' })}</div>
<div className="mr-4 text-text-tertiary system-xs-regular">{t('addToolModal.added', { ns: 'tools' })}</div>
)}
</div>
</Tooltip>

8
web/app/components/workflow/block-selector/tool/tool.tsx
View File

@ -93,7 +93,7 @@ const Tool: FC<Props> = ({
const notShowProviderSelectInfo = useMemo(() => {
if (isAllSelected) {
return (
<span className="system-xs-regular text-text-tertiary">
<span className="text-text-tertiary system-xs-regular">
{t('addToolModal.added', { ns: 'tools' })}
</span>
)
@ -103,7 +103,7 @@ const Tool: FC<Props> = ({
if (isHovering && !isAllSelected) {
return (
<span
className="system-xs-regular text-components-button-secondary-accent-text"
className="text-components-button-secondary-accent-text system-xs-regular"
onClick={() => {
onSelectMultiple?.(BlockEnum.Tool, actions.filter(action => !getIsDisabled(action)).map((tool) => {
const params: Record<string, string> = {}
@ -140,7 +140,7 @@ const Tool: FC<Props> = ({
return <></>
return (
<span className="system-xs-regular text-text-tertiary">
<span className="text-text-tertiary system-xs-regular">
{isAllSelected
? t('tabs.allAdded', { ns: 'workflow' })
: `${selectedToolsNum} / ${totalToolsNum}`}
@ -222,7 +222,7 @@ const Tool: FC<Props> = ({
<div className="ml-2 flex w-0 grow items-center text-sm text-text-primary">
<span className="max-w-[250px] truncate">{notShowProvider ? actions[0]?.label[language] : payload.label[language]}</span>
{isFlatView && groupName && (
<span className="system-xs-regular ml-2 shrink-0 text-text-quaternary">{groupName}</span>
<span className="ml-2 shrink-0 text-text-quaternary system-xs-regular">{groupName}</span>
)}
{isMCPTool && <Mcp className="ml-2 size-3.5 shrink-0 text-text-quaternary" />}
</div>

4
web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
View File

@ -77,11 +77,11 @@ const TriggerPluginActionItem: FC<Props> = ({
})
}}
>
<div className={cn('system-sm-medium h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary')}>
<div className={cn('h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary system-sm-medium')}>
<span className={cn(disabled && 'opacity-30')}>{payload.label[language]}</span>
</div>
{isAdded && (
<div className="system-xs-regular mr-4 text-text-tertiary">{t('addToolModal.added', { ns: 'tools' })}</div>
<div className="mr-4 text-text-tertiary system-xs-regular">{t('addToolModal.added', { ns: 'tools' })}</div>
)}
</div>
</Tooltip>

2
web/app/components/workflow/block-selector/trigger-plugin/item.tsx
View File

@ -133,7 +133,7 @@ const TriggerPluginItem: FC<Props> = ({
/>
<div className="ml-2 flex min-w-0 flex-1 items-center text-sm text-text-primary">
<span className="max-w-[200px] truncate">{notShowProvider ? actions[0]?.label[language] : payload.label[language]}</span>
<span className="system-xs-regular ml-2 truncate text-text-quaternary">{groupName}</span>
<span className="ml-2 truncate text-text-quaternary system-xs-regular">{groupName}</span>
</div>
</div>

6
web/app/components/workflow/comment/comment-preview.tsx
View File

@ -44,14 +44,14 @@ const CommentPreview: FC<CommentPreviewProps> = ({ comment, onClick }) => {
<div className="mb-2 flex items-start">
<div className="flex min-w-0 items-center gap-2">
<div className="system-sm-medium truncate text-text-primary">{comment.created_by_account.name}</div>
<div className="system-2xs-regular shrink-0 text-text-tertiary">
<div className="truncate text-text-primary system-sm-medium">{comment.created_by_account.name}</div>
<div className="shrink-0 text-text-tertiary system-2xs-regular">
{formatTimeFromNow(comment.updated_at * 1000)}
</div>
</div>
</div>
<div className="system-sm-regular break-words text-text-secondary">{comment.content}</div>
<div className="break-words text-text-secondary system-sm-regular">{comment.content}</div>
</div>
)
}

4
web/app/components/workflow/comment/mention-input.tsx
View File

@ -536,7 +536,7 @@ const MentionInputInner = forwardRef<HTMLTextAreaElement, MentionInputProps>(({
aria-hidden
className={cn(
'pointer-events-none absolute inset-0 z-0 overflow-hidden whitespace-pre-wrap break-words p-1 leading-6',
'body-lg-regular text-text-primary',
'text-text-primary body-lg-regular',
)}
style={{ paddingRight, paddingBottom }}
>
@ -552,7 +552,7 @@ const MentionInputInner = forwardRef<HTMLTextAreaElement, MentionInputProps>(({
<Textarea
ref={textareaRef}
className={cn(
'body-lg-regular relative z-10 w-full resize-none bg-transparent p-1 leading-6 text-transparent caret-primary-500 outline-none',
'relative z-10 w-full resize-none bg-transparent p-1 leading-6 text-transparent caret-primary-500 outline-none body-lg-regular',
'placeholder:text-text-tertiary',
)}
style={{ paddingRight, paddingBottom }}

6
web/app/components/workflow/comment/thread.tsx
View File

@ -130,10 +130,10 @@ const ThreadMessage: FC<{
</div>
<div className="min-w-0 flex-1 pb-4 text-text-primary last:pb-0">
<div className="flex flex-wrap items-center gap-x-2 gap-y-1">
<span className="system-sm-medium text-text-primary">{authorName}</span>
<span className="system-2xs-regular text-text-tertiary">{formatTimeFromNow(createdAt * 1000)}</span>
<span className="text-text-primary system-sm-medium">{authorName}</span>
<span className="text-text-tertiary system-2xs-regular">{formatTimeFromNow(createdAt * 1000)}</span>
</div>
<div className="system-sm-regular mt-1 whitespace-pre-wrap break-words text-text-secondary">
<div className="mt-1 whitespace-pre-wrap break-words text-text-secondary system-sm-regular">
{highlightedContent}
</div>
</div>

12
web/app/components/workflow/dsl-export-confirm-modal.tsx
View File

@ -40,13 +40,13 @@ const DSLExportConfirmModal = ({
onClose={noop}
className={cn('w-[480px] max-w-[480px]')}
>
<div className="title-2xl-semi-bold relative pb-6 text-text-primary">{t('env.export.title', { ns: 'workflow' })}</div>
<div className="relative pb-6 text-text-primary title-2xl-semi-bold">{t('env.export.title', { ns: 'workflow' })}</div>
<div className={cn('absolute right-4 top-4 p-2', exporting ? 'pointer-events-none opacity-50' : 'cursor-pointer')} onClick={onClose}>
<RiCloseLine className="h-4 w-4 text-text-tertiary" />
</div>
<div className="relative">
<table className="radius-md w-full border-separate border-spacing-0 border border-divider-regular shadow-xs">
<thead className="system-xs-medium-uppercase text-text-tertiary">
<table className="w-full border-separate border-spacing-0 border border-divider-regular shadow-xs radius-md">
<thead className="text-text-tertiary system-xs-medium-uppercase">
<tr>
<td width={220} className="h-7 border-b border-r border-divider-regular pl-3">NAME</td>
<td className="h-7 border-b border-divider-regular pl-3">VALUE</td>
@ -55,7 +55,7 @@ const DSLExportConfirmModal = ({
<tbody>
{envList.map((env, index) => (
<tr key={env.name}>
<td className={cn('system-xs-medium h-7 border-r pl-3', index + 1 !== envList.length && 'border-b')}>
<td className={cn('h-7 border-r pl-3 system-xs-medium', index + 1 !== envList.length && 'border-b')}>
<div className="flex w-[200px] items-center gap-1">
<Env className="h-4 w-4 shrink-0 text-util-colors-violet-violet-600" />
<div className="truncate text-text-primary">{env.name}</div>
@ -64,7 +64,7 @@ const DSLExportConfirmModal = ({
</div>
</td>
<td className={cn('h-7 pl-3', index + 1 !== envList.length && 'border-b')}>
<div className="system-xs-regular truncate text-text-secondary">{env.value}</div>
<div className="truncate text-text-secondary system-xs-regular">{env.value}</div>
</td>
</tr>
))}
@ -77,7 +77,7 @@ const DSLExportConfirmModal = ({
checked={exportSecrets}
onCheck={() => setExportSecrets(!exportSecrets)}
/>
<div className="system-sm-medium cursor-pointer text-text-primary" onClick={() => setExportSecrets(!exportSecrets)}>{t('env.export.checkbox', { ns: 'workflow' })}</div>
<div className="cursor-pointer text-text-primary system-sm-medium" onClick={() => setExportSecrets(!exportSecrets)}>{t('env.export.checkbox', { ns: 'workflow' })}</div>
</div>
<div className="flex flex-row-reverse pt-6">
<Button className="ml-2" variant="primary" loading={exporting} disabled={exporting} onClick={submit}>{exportSecrets ? t('env.export.export', { ns: 'workflow' }) : t('env.export.ignore', { ns: 'workflow' })}</Button>

2
web/app/components/workflow/header/editing-title.tsx
View File

@ -14,7 +14,7 @@ const EditingTitle = () => {
const maximizeCanvas = useStore(s => s.maximizeCanvas)
return (
<div className={`system-xs-regular flex h-[18px] min-w-[300px] items-center whitespace-nowrap text-text-tertiary ${maximizeCanvas ? 'ml-2' : ''}`}>
<div className={`flex h-[18px] min-w-[300px] items-center whitespace-nowrap text-text-tertiary system-xs-regular ${maximizeCanvas ? 'ml-2' : ''}`}>
{
!!draftUpdatedAt && (
<>

6
web/app/components/workflow/header/restoring-title.tsx
View File

@ -22,14 +22,14 @@ const RestoringTitle = () => {
return (
<div className="flex flex-col gap-y-0.5">
<div className="flex items-center gap-x-1">
<span className="system-sm-semibold text-text-primary">
<span className="text-text-primary system-sm-semibold">
{versionName}
</span>
<span className="system-2xs-medium-uppercase rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1 py-0.5 text-text-accent-secondary">
<span className="rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1 py-0.5 text-text-accent-secondary system-2xs-medium-uppercase">
{t('common.viewOnly', { ns: 'workflow' })}
</span>
</div>
<div className="system-xs-regular flex h-4 items-center gap-x-1 text-text-tertiary">
<div className="flex h-4 items-center gap-x-1 text-text-tertiary system-xs-regular">
{
currentVersion && (
<>

4
web/app/components/workflow/header/run-mode.tsx
View File

@ -114,7 +114,7 @@ const RunMode = ({
<button
type="button"
className={cn(
'system-xs-medium flex h-7 cursor-not-allowed items-center gap-x-1 rounded-l-md bg-state-accent-hover px-1.5 text-text-accent',
'flex h-7 cursor-not-allowed items-center gap-x-1 rounded-l-md bg-state-accent-hover px-1.5 text-text-accent system-xs-medium',
)}
disabled={true}
>
@ -130,7 +130,7 @@ const RunMode = ({
>
<div
className={cn(
'system-xs-medium flex h-7 cursor-pointer items-center gap-x-1 rounded-md px-1.5 text-text-accent hover:bg-state-accent-hover',
'flex h-7 cursor-pointer items-center gap-x-1 rounded-md px-1.5 text-text-accent system-xs-medium hover:bg-state-accent-hover',
)}
style={{ userSelect: 'none' }}
>

2
web/app/components/workflow/header/scroll-to-selected-node-button.tsx
View File

@ -23,7 +23,7 @@ const ScrollToSelectedNodeButton: FC = () => {
return (
<div
className={cn(
'system-xs-medium flex h-6 cursor-pointer items-center justify-center whitespace-nowrap rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-3 text-text-tertiary shadow-lg backdrop-blur-sm transition-colors duration-200 hover:text-text-accent',
'flex h-6 cursor-pointer items-center justify-center whitespace-nowrap rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-3 text-text-tertiary shadow-lg backdrop-blur-sm transition-colors duration-200 system-xs-medium hover:text-text-accent',
)}
onClick={handleScrollToSelectedNode}
>

2
web/app/components/workflow/header/test-run-menu.tsx
View File

@ -157,7 +157,7 @@ const TestRunMenu = forwardRef<TestRunMenuRef, TestRunMenuProps>(({
return (
<div
key={option.id}
className="system-md-regular flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover"
className="flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover"
onClick={() => handleSelect(option)}
>
<div className="flex min-w-0 flex-1 items-center">

4
web/app/components/workflow/header/undo-redo.tsx
View File

@ -36,7 +36,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
<div
data-tooltip-id="workflow.undo"
className={
cn('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.undo)
cn('flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary system-sm-medium hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.undo)
&& 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')
}
onClick={() => !nodesReadOnly && !buttonsDisabled.undo && handleUndo()}
@ -48,7 +48,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
<div
data-tooltip-id="workflow.redo"
className={
cn('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.redo)
cn('flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary system-sm-medium hover:bg-state-base-hover hover:text-text-secondary', (nodesReadOnly || buttonsDisabled.redo)
&& 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')
}
onClick={() => !nodesReadOnly && !buttonsDisabled.redo && handleRedo()}

2
web/app/components/workflow/header/version-history-button.tsx
View File

@ -21,7 +21,7 @@ const PopupContent = React.memo(() => {
const { t } = useTranslation()
return (
<div className="flex items-center gap-x-1">
<div className="system-xs-medium px-0.5 text-text-secondary">
<div className="px-0.5 text-text-secondary system-xs-medium">
{t('common.versionHistory', { ns: 'workflow' })}
</div>
<ShortcutsName keys={VERSION_HISTORY_SHORTCUT} bgColor="gray" textColor="secondary" />

2
web/app/components/workflow/nodes/_base/components/agent-node-list/index.tsx
View File

@ -48,7 +48,7 @@ const Item: FC<ItemProps> = ({ node, onSelect, isHighlighted, onSetHighlight, re
size="xs"
/>
<span
className="system-sm-medium truncate text-text-secondary"
className="truncate text-text-secondary system-sm-medium"
title={node.title}
>
{node.title}

4
web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx
View File

@ -32,9 +32,9 @@ const BoolInput: FC<Props> = ({
onCheck={handleChange}
disabled={readonly}
/>
<div className="system-sm-medium flex items-center gap-1 text-text-secondary">
<div className="flex items-center gap-1 text-text-secondary system-sm-medium">
{name}
{!required && <span className="system-xs-regular text-text-tertiary">{t('panel.optional', { ns: 'workflow' })}</span>}
{!required && <span className="text-text-tertiary system-xs-regular">{t('panel.optional', { ns: 'workflow' })}</span>}
</div>
</div>
)

6
web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
View File

@ -124,19 +124,19 @@ const FormItem: FC<Props> = ({
return (
<div className={cn(className)}>
{!isArrayLikeType && !isBooleanType && (
<div className="system-sm-semibold mb-1 flex h-6 items-center gap-1 text-text-secondary">
<div className="mb-1 flex h-6 items-center gap-1 text-text-secondary system-sm-semibold">
<div className="truncate">
{typeof payload.label === 'object' ? nodeKey : payload.label}
</div>
{payload.hide === true
? (
<span className="system-xs-regular text-text-tertiary">
<span className="text-text-tertiary system-xs-regular">
{t('panel.optional_and_hidden', { ns: 'workflow' })}
</span>
)
: (
!payload.required && (
<span className="system-xs-regular text-text-tertiary">
<span className="text-text-tertiary system-xs-regular">
{t('panel.optional', { ns: 'workflow' })}
</span>
)

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

@ -79,7 +79,7 @@ const Form: FC<Props> = ({
<div className={cn(className, 'space-y-2')}>
{label && (
<div className="mb-1 flex items-center justify-between">
<div className="system-xs-medium-uppercase flex h-6 items-center text-text-tertiary">{label}</div>
<div className="flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">{label}</div>
{isArrayLikeType && !isIteratorItemFile && (
<AddButton onClick={handleAddContext} />
)}

2
web/app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx
View File

@ -22,7 +22,7 @@ const FieldCollapse = ({
<div className="py-4">
<Collapse
trigger={
<div className="system-sm-semibold-uppercase flex h-6 cursor-pointer items-center text-text-secondary">{title}</div>
<div className="flex h-6 cursor-pointer items-center text-text-secondary system-sm-semibold-uppercase">{title}</div>
}
operations={operations}
collapsed={collapsed}

2
web/app/components/workflow/nodes/_base/components/editor/base.tsx
View File

@ -86,7 +86,7 @@ const Base: FC<Props> = ({
<Wrap className={cn(wrapClassName)} style={wrapStyle} isInNode={isInNode} isExpand={isExpand}>
<div ref={ref} className={cn(className, isExpand && 'h-full', 'rounded-lg border', !isFocus ? 'border-transparent bg-components-input-bg-normal' : 'overflow-hidden border-components-input-border-hover bg-components-input-bg-hover')}>
<div className="flex h-7 items-center justify-between pl-3 pr-2 pt-1">
<div className="system-xs-semibold-uppercase text-text-secondary">{title}</div>
<div className="text-text-secondary system-xs-semibold-uppercase">{title}</div>
<div
className="flex items-center"
onClick={(e) => {

6
web/app/components/workflow/nodes/_base/components/error-handle/default-value.tsx
View File

@ -30,7 +30,7 @@ const DefaultValue = ({
return (
<div className="px-4 pt-2">
<div className="body-xs-regular mb-2 text-text-tertiary">
<div className="mb-2 text-text-tertiary body-xs-regular">
{t('nodes.common.errorHandle.defaultValue.desc', { ns: 'workflow' })}
&nbsp;
</div>
@ -43,8 +43,8 @@ const DefaultValue = ({
className="py-1"
>
<div className="mb-1 flex items-center">
<div className="system-sm-medium mr-1 text-text-primary">{form.key}</div>
<div className="system-xs-regular text-text-tertiary">{form.type}</div>
<div className="mr-1 text-text-primary system-sm-medium">{form.key}</div>
<div className="text-text-tertiary system-xs-regular">{form.type}</div>
</div>
{
(form.type === VarType.string || form.type === VarType.number) && (

4
web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
View File

@ -31,11 +31,11 @@ const ErrorHandleOnNode = ({
data._runningStatus === NodeRunningStatus.Exception && 'border-[0.5px] border-components-badge-status-light-warning-halo bg-state-warning-hover',
)}
>
<div className="system-xs-medium-uppercase text-text-tertiary">
<div className="text-text-tertiary system-xs-medium-uppercase">
{t('common.onFailure', { ns: 'workflow' })}
</div>
<div className={cn(
'system-xs-medium text-text-secondary',
'text-text-secondary system-xs-medium',
data._runningStatus === NodeRunningStatus.Exception && 'text-text-warning',
)}
>

2
web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-panel.tsx
View File

@ -54,7 +54,7 @@ const ErrorHandle = ({
collapseIcon => (
<div className="flex grow items-center justify-between pr-4">
<div className="flex items-center">
<div className="system-sm-semibold-uppercase mr-0.5 text-text-secondary">
<div className="mr-0.5 text-text-secondary system-sm-semibold-uppercase">
{t('nodes.common.errorHandle.title', { ns: 'workflow' })}
</div>
<Tooltip popupContent={t('nodes.common.errorHandle.tip', { ns: 'workflow' })} />

2
web/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip.tsx
View File

@ -34,7 +34,7 @@ const ErrorHandleTip = ({
>
</div>
<RiAlertFill className="mr-1 h-4 w-4 shrink-0 text-text-warning-secondary" />
<div className="system-xs-medium grow text-text-primary">
<div className="grow text-text-primary system-xs-medium">
{text}
</div>
</div>

4
web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
View File

@ -83,8 +83,8 @@ const ErrorHandleTypeSelector = ({
}
</div>
<div className="grow">
<div className="system-sm-semibold mb-0.5 text-text-secondary">{option.label}</div>
<div className="system-xs-regular text-text-tertiary">{option.description}</div>
<div className="mb-0.5 text-text-secondary system-sm-semibold">{option.label}</div>
<div className="text-text-tertiary system-xs-regular">{option.description}</div>
</div>
</div>
))

4
web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx
View File

@ -12,10 +12,10 @@ const FailBranchCard = () => {
<div className="mb-2 flex h-8 w-8 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg">
<RiMindMap className="h-5 w-5 text-text-tertiary" />
</div>
<div className="system-sm-medium mb-1 text-text-secondary">
<div className="mb-1 text-text-secondary system-sm-medium">
{t('nodes.common.errorHandle.failBranch.customize', { ns: 'workflow' })}
</div>
<div className="system-xs-regular text-text-tertiary">
<div className="text-text-tertiary system-xs-regular">
{t('nodes.common.errorHandle.failBranch.customizeTip', { ns: 'workflow' })}
&nbsp;
<a

2
web/app/components/workflow/nodes/_base/components/field.tsx
View File

@ -41,7 +41,7 @@ const Field: FC<Props> = ({
className={cn('flex items-center justify-between', supportFold && 'cursor-pointer')}
>
<div className="flex h-6 items-center">
<div className={cn(isSubTitle ? 'system-xs-medium-uppercase text-text-tertiary' : 'system-sm-semibold-uppercase text-text-secondary')}>
<div className={cn(isSubTitle ? 'text-text-tertiary system-xs-medium-uppercase' : 'text-text-secondary system-sm-semibold-uppercase')}>
{title}
{' '}
{required && <span className="text-text-destructive">*</span>}

6
web/app/components/workflow/nodes/_base/components/file-type-item.tsx
View File

@ -49,7 +49,7 @@ const FileTypeItem: FC<Props> = ({
<div>
<div className="flex items-center border-b border-divider-subtle p-3 pb-2">
<FileTypeIcon className="shrink-0" type={type} size="lg" />
<div className="system-sm-medium mx-2 grow text-text-primary">{t(`variableConfig.file.${type}.name`, { ns: 'appDebug' })}</div>
<div className="mx-2 grow text-text-primary system-sm-medium">{t(`variableConfig.file.${type}.name`, { ns: 'appDebug' })}</div>
<Checkbox className="shrink-0" checked={selected} />
</div>
<div className="p-3" onClick={e => e.stopPropagation()}>
@ -65,8 +65,8 @@ const FileTypeItem: FC<Props> = ({
<div className="flex items-center">
<FileTypeIcon className="shrink-0" type={type} size="lg" />
<div className="mx-2 grow">
<div className="system-sm-medium text-text-primary">{t(`variableConfig.file.${type}.name`, { ns: 'appDebug' })}</div>
<div className="system-2xs-regular-uppercase mt-1 text-text-tertiary">{type !== SupportUploadFileTypes.custom ? FILE_EXTS[type].join(', ') : t('variableConfig.file.custom.description', { ns: 'appDebug' })}</div>
<div className="text-text-primary system-sm-medium">{t(`variableConfig.file.${type}.name`, { ns: 'appDebug' })}</div>
<div className="mt-1 text-text-tertiary system-2xs-regular-uppercase">{type !== SupportUploadFileTypes.custom ? FILE_EXTS[type].join(', ') : t('variableConfig.file.custom.description', { ns: 'appDebug' })}</div>
</div>
<Checkbox className="shrink-0" checked={selected} />
</div>

2
web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
View File

@ -150,7 +150,7 @@ const FileUploadSetting: FC<Props> = ({
title={t('variableConfig.maxNumberOfUploads', { ns: 'appDebug' })!}
>
<div>
<div className="body-xs-regular mb-1.5 text-text-tertiary">
<div className="mb-1.5 text-text-tertiary body-xs-regular">
{t('variableConfig.maxNumberTip', {
ns: 'appDebug',
imgLimit: formatFileSize(imgSizeLimit),

8
web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx
View File

@ -15,9 +15,9 @@ const FormInputBoolean: FC<Props> = ({
<div className="flex w-full space-x-1">
<div
className={cn(
'system-sm-regular flex h-8 grow cursor-default items-center justify-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
'flex h-8 grow cursor-default items-center justify-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary system-sm-regular',
!value && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
value && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
value && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs system-sm-medium',
)}
onClick={() => onChange(true)}
>
@ -25,9 +25,9 @@ const FormInputBoolean: FC<Props> = ({
</div>
<div
className={cn(
'system-sm-regular flex h-8 grow cursor-default items-center justify-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
'flex h-8 grow cursor-default items-center justify-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary system-sm-regular',
value && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
!value && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
!value && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs system-sm-medium',
)}
onClick={() => onChange(false)}
>

4
web/app/components/workflow/nodes/_base/components/form-input-item.tsx
View File

@ -529,7 +529,7 @@ const FormInputItem: FC<Props> = ({
>
<div className="group/simple-select relative h-8 grow">
<ListboxButton className="flex h-full w-full cursor-pointer items-center rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 focus-visible:bg-state-base-hover-alt focus-visible:outline-none group-hover/simple-select:bg-state-base-hover-alt sm:text-sm sm:leading-6">
<span className={cn('system-sm-regular block truncate text-left', varInput?.value?.length > 0 ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder')}>
<span className={cn('block truncate text-left system-sm-regular', varInput?.value?.length > 0 ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder')}>
{getSelectedLabels(varInput?.value) || placeholder?.[language] || placeholder?.en_US || 'Select options'}
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2">
@ -610,7 +610,7 @@ const FormInputItem: FC<Props> = ({
>
<div className="group/simple-select relative h-8 grow">
<ListboxButton className="flex h-full w-full cursor-pointer items-center rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 focus-visible:bg-state-base-hover-alt focus-visible:outline-none group-hover/simple-select:bg-state-base-hover-alt sm:text-sm sm:leading-6">
<span className={cn('system-sm-regular block truncate text-left', isLoadingOptions
<span className={cn('block truncate text-left system-sm-regular', isLoadingOptions
? 'text-components-input-text-placeholder'
: varInput?.value?.length > 0 ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder')}
>

2
web/app/components/workflow/nodes/_base/components/group.tsx
View File

@ -6,7 +6,7 @@ export type GroupLabelProps = ComponentProps<'div'>
export const GroupLabel: FC<GroupLabelProps> = (props) => {
const { children, className, ...rest } = props
return (
<div {...rest} className={cn('system-2xs-medium-uppercase mb-1 text-text-tertiary', className)}>
<div {...rest} className={cn('mb-1 text-text-tertiary system-2xs-medium-uppercase', className)}>
{children}
</div>
)

4
web/app/components/workflow/nodes/_base/components/info-panel.tsx
View File

@ -14,10 +14,10 @@ const InfoPanel: FC<Props> = ({
return (
<div>
<div className="flex flex-col gap-y-0.5 rounded-md bg-workflow-block-parma-bg px-[5px] py-[3px]">
<div className="system-2xs-semibold-uppercase uppercase text-text-secondary">
<div className="uppercase text-text-secondary system-2xs-semibold-uppercase">
{title}
</div>
<div className="system-xs-regular break-words text-text-tertiary">
<div className="break-words text-text-tertiary system-xs-regular">
{content}
</div>
</div>

2
web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
View File

@ -43,7 +43,7 @@ export const FieldTitle = memo(({
}
}}
>
<div className="system-sm-semibold-uppercase flex items-center text-text-secondary">
<div className="flex items-center text-text-secondary system-sm-semibold-uppercase">
{title}
{
showArrow && (

2
web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx
View File

@ -10,7 +10,7 @@ const ListNoDataPlaceholder: FC<Props> = ({
children,
}) => {
return (
<div className="system-xs-regular flex min-h-[42px] w-full items-center justify-center rounded-[10px] bg-background-section text-text-tertiary">
<div className="flex min-h-[42px] w-full items-center justify-center rounded-[10px] bg-background-section text-text-tertiary system-xs-regular">
{children}
</div>
)

2
web/app/components/workflow/nodes/_base/components/memory-config.tsx
View File

@ -154,7 +154,7 @@ const MemoryConfig: FC<Props> = ({
size="md"
disabled={readonly}
/>
<div className="system-xs-medium-uppercase text-text-tertiary">{t(`${i18nPrefix}.windowSize`, { ns: 'workflow' })}</div>
<div className="text-text-tertiary system-xs-medium-uppercase">{t(`${i18nPrefix}.windowSize`, { ns: 'workflow' })}</div>
</div>
<div className="flex h-8 items-center space-x-2">
<Slider

4
web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/placeholder.tsx
View File

@ -27,9 +27,9 @@ const Placeholder = () => {
>
<div className="flex grow items-center">
{t('nodes.tool.insertPlaceholder1', { ns: 'workflow' })}
<div className="system-kbd mx-0.5 flex h-4 w-4 items-center justify-center rounded bg-components-kbd-bg-gray text-text-placeholder">/</div>
<div className="mx-0.5 flex h-4 w-4 items-center justify-center rounded bg-components-kbd-bg-gray text-text-placeholder system-kbd">/</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 text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto system-sm-regular hover:text-text-tertiary"
onMouseDown={((e) => {
e.preventDefault()
e.stopPropagation()

2
web/app/components/workflow/nodes/_base/components/next-step/container.tsx
View File

@ -33,7 +33,7 @@ const Container = ({
branchName && (
<div
className={cn(
'system-2xs-semibold-uppercase flex items-center truncate px-2 text-text-tertiary',
'flex items-center truncate px-2 text-text-tertiary system-2xs-semibold-uppercase',
isFailBranch && 'text-text-warning',
)}
title={branchName}

2
web/app/components/workflow/nodes/_base/components/next-step/item.tsx
View File

@ -47,7 +47,7 @@ const Item = ({
className="mr-1.5 shrink-0"
/>
<div
className="system-xs-medium grow truncate text-text-secondary"
className="grow truncate text-text-secondary system-xs-medium"
title={data.title}
>
{data.title}

2
web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
View File

@ -98,7 +98,7 @@ const Operator = ({
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-10">
<div className="system-md-regular min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur text-text-secondary shadow-lg">
<div className="min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur text-text-secondary shadow-lg system-md-regular">
<div className="p-1">
<ChangeItem
data={data}

6
web/app/components/workflow/nodes/_base/components/node-handle.tsx
View File

@ -208,13 +208,13 @@ export const NodeSourceHandle = memo(({
onClick={allowGraphActions ? handleHandleClick : undefined}
>
<div className="absolute -top-1 left-1/2 hidden -translate-x-1/2 -translate-y-full rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 shadow-lg group-hover/handle:block">
<div className="system-xs-regular text-text-tertiary">
<div className="text-text-tertiary system-xs-regular">
<div className="whitespace-nowrap">
<span className="system-xs-medium text-text-secondary">{t('common.parallelTip.click.title', { ns: 'workflow' })}</span>
<span className="text-text-secondary system-xs-medium">{t('common.parallelTip.click.title', { ns: 'workflow' })}</span>
{t('common.parallelTip.click.desc', { ns: 'workflow' })}
</div>
<div>
<span className="system-xs-medium text-text-secondary">{t('common.parallelTip.drag.title', { ns: 'workflow' })}</span>
<span className="text-text-secondary system-xs-medium">{t('common.parallelTip.drag.title', { ns: 'workflow' })}</span>
{t('common.parallelTip.drag.desc', { ns: 'workflow' })}
</div>
</div>

4
web/app/components/workflow/nodes/_base/components/option-card.tsx
View File

@ -48,9 +48,9 @@ const OptionCard: FC<Props> = ({
return (
<div
className={cn(
'system-sm-regular flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
'flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary system-sm-regular',
(!selected && !disabled) && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
selected && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
selected && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs system-sm-medium',
disabled && 'text-text-disabled',
variants({ align }),
className,

6
web/app/components/workflow/nodes/_base/components/output-vars.tsx
View File

@ -59,11 +59,11 @@ export const VarItem: FC<VarItemProps> = ({
<div className="py-1">
<div className="flex">
<div className="flex items-center leading-[18px]">
<div className="code-sm-semibold text-text-secondary">{name}</div>
<div className="system-xs-regular ml-2 text-text-tertiary">{type}</div>
<div className="text-text-secondary code-sm-semibold">{name}</div>
<div className="ml-2 text-text-tertiary system-xs-regular">{type}</div>
</div>
</div>
<div className="system-xs-regular mt-0.5 text-text-tertiary">
<div className="mt-0.5 text-text-tertiary system-xs-regular">
{description}
{subItems && (
<div className="ml-2 border-l border-gray-200 pl-2">

2
web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
View File

@ -40,7 +40,7 @@ const RetryOnNode = ({
return (
<div className="mb-1 px-3">
<div className={cn(
'system-xs-medium-uppercase flex items-center justify-between rounded-md border-[0.5px] border-transparent bg-workflow-block-parma-bg px-[5px] py-1 text-text-tertiary',
'flex items-center justify-between rounded-md border-[0.5px] border-transparent bg-workflow-block-parma-bg px-[5px] py-1 text-text-tertiary system-xs-medium-uppercase',
isRunning && 'border-state-accent-active bg-state-accent-hover text-text-accent',
isSuccessful && 'border-state-success-active bg-state-success-hover text-text-success',
(isException || isFailed) && 'border-state-warning-active bg-state-warning-hover text-text-warning',

6
web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx
View File

@ -55,7 +55,7 @@ const RetryOnPanel = ({
<div className="pt-2">
<div className="flex h-10 items-center justify-between px-4 py-2">
<div className="flex items-center">
<div className="system-sm-semibold-uppercase mr-0.5 text-text-secondary">{t('nodes.common.retry.retryOnFailure', { ns: 'workflow' })}</div>
<div className="mr-0.5 text-text-secondary system-sm-semibold-uppercase">{t('nodes.common.retry.retryOnFailure', { ns: 'workflow' })}</div>
</div>
<Switch
defaultValue={retry_config?.retry_enabled}
@ -66,7 +66,7 @@ const RetryOnPanel = ({
retry_config?.retry_enabled && (
<div className="px-4 pb-2">
<div className="mb-1 flex w-full items-center">
<div className="system-xs-medium-uppercase mr-2 grow text-text-secondary">{t('nodes.common.retry.maxRetries', { ns: 'workflow' })}</div>
<div className="mr-2 grow text-text-secondary system-xs-medium-uppercase">{t('nodes.common.retry.maxRetries', { ns: 'workflow' })}</div>
<Slider
className="mr-3 w-[108px]"
value={retry_config?.max_retries || 3}
@ -87,7 +87,7 @@ const RetryOnPanel = ({
/>
</div>
<div className="flex items-center">
<div className="system-xs-medium-uppercase mr-2 grow text-text-secondary">{t('nodes.common.retry.retryInterval', { ns: 'workflow' })}</div>
<div className="mr-2 grow text-text-secondary system-xs-medium-uppercase">{t('nodes.common.retry.retryInterval', { ns: 'workflow' })}</div>
<Slider
className="mr-3 w-[108px]"
value={retry_config?.retry_interval || 1000}

4
web/app/components/workflow/nodes/_base/components/setting-item.tsx
View File

@ -15,11 +15,11 @@ export const SettingItem = memo(({ label, children, status, tooltip }: SettingIt
const needTooltip = ['error', 'warning'].includes(status as any)
return (
<div className="relative flex items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1.5 py-1 text-xs font-normal">
<div className={cn('system-xs-medium-uppercase max-w-full shrink-0 truncate text-text-tertiary', !!children && 'max-w-[100px]')}>
<div className={cn('max-w-full shrink-0 truncate text-text-tertiary system-xs-medium-uppercase', !!children && 'max-w-[100px]')}>
{label}
</div>
<Tooltip popupContent={tooltip} disabled={!needTooltip}>
<div className="system-xs-medium truncate text-right text-text-secondary">
<div className="truncate text-right text-text-secondary system-xs-medium">
{children}
</div>
</Tooltip>

2
web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
View File

@ -96,7 +96,7 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
href={getMarketplaceUrl(`/plugins/${pluginDetail.declaration.author}/${pluginDetail.declaration.name}`)}
target="_blank"
>
<span className="system-xs-regular text-xs text-text-accent">
<span className="text-xs text-text-accent system-xs-regular">
{t('nodes.agent.installPlugin.changelog', { ns: 'workflow' })}
</span>
<RiExternalLinkLine className="size-3 text-text-accent" />

4
web/app/components/workflow/nodes/_base/components/title-description-input.tsx
View File

@ -53,8 +53,8 @@ export const TitleInput = memo(({
onChange={handleChange}
onKeyDown={handleKeyDown}
className={`
system-xl-semibold mr-2 h-7 min-w-0 grow appearance-none rounded-md border border-transparent bg-transparent px-1 text-text-primary
outline-none focus:shadow-xs
mr-2 h-7 min-w-0 grow appearance-none rounded-md border border-transparent bg-transparent px-1 text-text-primary outline-none
system-xl-semibold focus:shadow-xs
`}
placeholder={t('common.addTitle', { ns: 'workflow' }) || ''}
onBlur={handleBlur}

4
web/app/components/workflow/nodes/_base/components/variable/manage-input-field.tsx
View File

@ -18,7 +18,7 @@ const ManageInputField = ({
>
<RiAddLine className="mr-1 h-4 w-4 text-text-tertiary" />
<div
className="system-xs-medium truncate text-text-tertiary"
className="truncate text-text-tertiary system-xs-medium"
title="Create user input field"
>
{t('inputField.create', { ns: 'pipeline' })}
@ -26,7 +26,7 @@ const ManageInputField = ({
</div>
<div className="mx-1 h-3 w-[1px] shrink-0 bg-divider-regular"></div>
<div
className="system-xs-medium flex h-8 shrink-0 cursor-pointer items-center justify-center px-3 text-text-tertiary"
className="flex h-8 shrink-0 cursor-pointer items-center justify-center px-3 text-text-tertiary system-xs-medium"
onClick={onManage}
>
{t('inputField.manage', { ns: 'pipeline' })}

4
web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
View File

@ -49,11 +49,11 @@ const Field: FC<Props> = ({
? (
<RiMoreFill className="h-3 w-3 text-text-tertiary" />
)
: (<div className={cn('system-sm-medium h-6 w-0 grow truncate leading-6 text-text-secondary', isHighlight && 'text-text-accent')}>{name}</div>)}
: (<div className={cn('h-6 w-0 grow truncate leading-6 text-text-secondary system-sm-medium', isHighlight && 'text-text-accent')}>{name}</div>)}
</div>
{depth < MAX_DEPTH + 1 && (
<div className="system-xs-regular ml-2 shrink-0 text-text-tertiary">{getFieldType(payload)}</div>
<div className="ml-2 shrink-0 text-text-tertiary system-xs-regular">{getFieldType(payload)}</div>
)}
</div>
</Tooltip>

8
web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
View File

@ -47,13 +47,13 @@ export const PickerPanelMain: FC<Props> = ({
<div className="flex">
{root.nodeName && (
<>
<div className="system-sm-medium max-w-[100px] truncate text-text-tertiary">{root.nodeName}</div>
<div className="system-sm-medium text-text-tertiary">.</div>
<div className="max-w-[100px] truncate text-text-tertiary system-sm-medium">{root.nodeName}</div>
<div className="text-text-tertiary system-sm-medium">.</div>
</>
)}
<div className="system-sm-medium text-text-secondary">{root.attrName}</div>
<div className="text-text-secondary system-sm-medium">{root.attrName}</div>
</div>
<div className="system-xs-regular ml-2 truncate text-text-tertiary" title={root.attrAlias || 'object'}>{root.attrAlias || 'object'}</div>
<div className="ml-2 truncate text-text-tertiary system-xs-regular" title={root.attrAlias || 'object'}>{root.attrAlias || 'object'}</div>
</div>
{fieldNames.map(name => (
<Field

10
web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
View File

@ -44,21 +44,21 @@ const Field: FC<Props> = ({
onClick={toggleFold}
/>
)}
<div className={cn('system-sm-medium ml-[7px] h-6 truncate leading-6 text-text-secondary', isRoot && rootClassName)}>{name}</div>
<div className="system-xs-regular ml-3 shrink-0 leading-6 text-text-tertiary">
<div className={cn('ml-[7px] h-6 truncate leading-6 text-text-secondary system-sm-medium', isRoot && rootClassName)}>{name}</div>
<div className="ml-3 shrink-0 leading-6 text-text-tertiary system-xs-regular">
{getFieldType(payload)}
{(payload.schemaType && payload.schemaType !== 'file' && ` (${payload.schemaType})`)}
</div>
{required && <div className="system-2xs-medium-uppercase ml-3 leading-6 text-text-warning">{t('structOutput.required', { ns: 'app' })}</div>}
{required && <div className="ml-3 leading-6 text-text-warning system-2xs-medium-uppercase">{t('structOutput.required', { ns: 'app' })}</div>}
</div>
{payload.description && (
<div className="ml-[7px] flex">
<div className="system-xs-regular w-0 grow truncate text-text-tertiary">{payload.description}</div>
<div className="w-0 grow truncate text-text-tertiary system-xs-regular">{payload.description}</div>
</div>
)}
{hasEnum && (
<div className="ml-[7px] flex">
<div className="system-xs-regular w-0 grow text-text-quaternary">
<div className="w-0 grow text-text-quaternary system-xs-regular">
{payload.enum!.map((value, index) => (
<span key={index}>
{typeof value === 'string' ? `"${value}"` : value}

2
web/app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx
View File

@ -45,7 +45,7 @@ const VarFullPathPanel: FC<Props> = ({
<div className="w-[280px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-0 shadow-lg backdrop-blur-[5px]">
<div className="flex space-x-1 border-b-[0.5px] border-divider-subtle p-3 pb-2">
<BlockIcon size="xs" type={nodeType} />
<div className="system-xs-medium w-0 grow truncate text-text-secondary">{nodeName}</div>
<div className="w-0 grow truncate text-text-secondary system-xs-medium">{nodeName}</div>
</div>
<Panel
className="px-1 pb-3 pt-2"

8
web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
View File

@ -467,8 +467,8 @@ const VarReferencePicker: FC<Props> = ({
<TypeSelector
noLeft
trigger={(
<div className="radius-md flex h-8 items-center bg-components-input-bg-normal px-2">
<div className="system-sm-regular mr-1 text-components-input-text-filled">{varKindTypes.find(item => item.value === varKindType)?.label}</div>
<div className="flex h-8 items-center bg-components-input-bg-normal px-2 radius-md">
<div className="mr-1 text-components-input-text-filled system-sm-regular">{varKindTypes.find(item => item.value === varKindType)?.label}</div>
<RiArrowDownSLine className="h-4 w-4 text-text-quaternary" />
</div>
)}
@ -568,7 +568,7 @@ const VarReferencePicker: FC<Props> = ({
</div>
</div>
<div
className="system-xs-regular ml-0.5 truncate text-center capitalize text-text-tertiary"
className="ml-0.5 truncate text-center capitalize text-text-tertiary system-xs-regular"
title={type}
style={{
maxWidth: maxTypeWidth,
@ -580,7 +580,7 @@ const VarReferencePicker: FC<Props> = ({
</>
)
: (
<div className={`overflow-hidden ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'} system-sm-regular text-ellipsis`}>
<div className={`overflow-hidden ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'} text-ellipsis system-sm-regular`}>
{isLoading
? (
<div className="flex items-center">

4
web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
View File

@ -47,7 +47,7 @@ const VarReferencePopup: FC<Props> = ({
<ListEmpty
title={t('variableReference.noAvailableVars', { ns: 'workflow' }) || ''}
description={(
<div className="system-xs-regular text-text-tertiary">
<div className="text-text-tertiary system-xs-regular">
{t('variableReference.noVarsForOperation', { ns: 'workflow' })}
</div>
)}
@ -57,7 +57,7 @@ const VarReferencePopup: FC<Props> = ({
<ListEmpty
title={t('variableReference.noAssignedVars', { ns: 'workflow' }) || ''}
description={(
<div className="system-xs-regular text-text-tertiary">
<div className="text-text-tertiary system-xs-regular">
{t('variableReference.assignedVarsDescription', { ns: 'workflow' })}
</div>
)}

14
web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
View File

@ -237,16 +237,16 @@ const Item: FC<ItemProps> = ({
{isFlat && flatVarIcon}
{!isEnv && !isChatVar && !isRagVariable && (
<div title={itemData.variable} className="system-sm-medium ml-1 w-0 grow truncate text-text-secondary">{varName}</div>
<div title={itemData.variable} className="ml-1 w-0 grow truncate text-text-secondary system-sm-medium">{varName}</div>
)}
{isEnv && (
<div title={itemData.variable} className="system-sm-medium ml-1 w-0 grow truncate text-text-secondary">{itemData.variable.replace('env.', '')}</div>
<div title={itemData.variable} className="ml-1 w-0 grow truncate text-text-secondary system-sm-medium">{itemData.variable.replace('env.', '')}</div>
)}
{isChatVar && (
<div title={itemData.des} className="system-sm-medium ml-1 w-0 grow truncate text-text-secondary">{itemData.variable.replace('conversation.', '')}</div>
<div title={itemData.des} className="ml-1 w-0 grow truncate text-text-secondary system-sm-medium">{itemData.variable.replace('conversation.', '')}</div>
)}
{isRagVariable && (
<div title={itemData.des} className="system-sm-medium ml-1 w-0 grow truncate text-text-secondary">{itemData.variable.split('.').slice(-1)[0]}</div>
<div title={itemData.des} className="ml-1 w-0 grow truncate text-text-secondary system-sm-medium">{itemData.variable.split('.').slice(-1)[0]}</div>
)}
</div>
<div className="ml-1 shrink-0 text-xs font-normal capitalize text-text-tertiary">{(preferSchemaType && itemData.schemaType) ? itemData.schemaType : itemData.type}</div>
@ -518,7 +518,7 @@ const VarReferenceVars: FC<Props> = ({
<span className="mr-1 flex h-4 w-4 items-center justify-center rounded bg-util-colors-blue-blue-500">
<AssembleVariables className="h-3 w-3 text-text-primary-on-surface" />
</span>
<span className="system-xs-medium truncate" title={t('nodes.tool.assembleVariables', { ns: 'workflow' })}>
<span className="truncate system-xs-medium" title={t('nodes.tool.assembleVariables', { ns: 'workflow' })}>
{t('nodes.tool.assembleVariables', { ns: 'workflow' })}
</span>
</button>
@ -534,7 +534,7 @@ const VarReferenceVars: FC<Props> = ({
<div key={i} className={cn(!item.isFlat && 'mt-3', i === 0 && item.isFlat && 'mt-2')}>
{!item.isFlat && (
<div
className="system-xs-medium-uppercase truncate px-3 leading-[22px] text-text-tertiary"
className="truncate px-3 leading-[22px] text-text-tertiary system-xs-medium-uppercase"
title={item.title}
>
{item.title}
@ -572,7 +572,7 @@ const VarReferenceVars: FC<Props> = ({
{item.isFlat && !filteredVars[i + 1]?.isFlat && !!filteredVars.find(item => !item.isFlat) && (
<div className="relative mt-[14px] flex items-center space-x-1">
<div className="h-0 w-3 shrink-0 border border-divider-subtle"></div>
<div className="system-2xs-semibold-uppercase text-text-tertiary">{t('debug.lastOutput', { ns: 'workflow' })}</div>
<div className="text-text-tertiary system-2xs-semibold-uppercase">{t('debug.lastOutput', { ns: 'workflow' })}</div>
<div className="h-0 shrink-0 grow border border-divider-subtle"></div>
</div>
)}

4
web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
View File

@ -47,7 +47,7 @@ const VariableLabel = ({
notShowFullPath && (
<>
<RiMoreLine className="h-3 w-3 shrink-0 text-text-secondary" />
<div className="system-xs-regular shrink-0 text-divider-deep">/</div>
<div className="shrink-0 text-divider-deep system-xs-regular">/</div>
</>
)
}
@ -62,7 +62,7 @@ const VariableLabel = ({
/>
{
!!variableType && (
<div className="system-xs-regular shrink-0 text-text-tertiary">
<div className="shrink-0 text-text-tertiary system-xs-regular">
{capitalize(variableType)}
</div>
)

2
web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx
View File

@ -17,7 +17,7 @@ const VariableName = ({
return (
<div
className={cn(
'system-xs-medium truncate',
'truncate system-xs-medium',
className,
)}
title={varName}

4
web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-node-label.tsx
View File

@ -22,14 +22,14 @@ const VariableNodeLabel = ({
{
nodeTitle && (
<div
className="system-xs-medium max-w-[60px] truncate text-text-secondary"
className="max-w-[60px] truncate text-text-secondary system-xs-medium"
title={nodeTitle}
>
{nodeTitle}
</div>
)
}
<div className="system-xs-regular shrink-0 text-divider-deep">/</div>
<div className="shrink-0 text-divider-deep system-xs-regular">/</div>
</>
)
}

4
web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
View File

@ -698,10 +698,10 @@ const BasePanel: FC<BasePanelProps> = ({
{
allowGraphActions && !!availableNextBlocks.length && (
<div className="border-t-[0.5px] border-divider-regular p-4">
<div className="system-sm-semibold-uppercase mb-1 flex items-center text-text-secondary">
<div className="mb-1 flex items-center text-text-secondary system-sm-semibold-uppercase">
{t('panel.nextStep', { ns: 'workflow' }).toLocaleUpperCase()}
</div>
<div className="system-xs-regular mb-2 text-text-tertiary">
<div className="mb-2 text-text-tertiary system-xs-regular">
{t('panel.addNextStep', { ns: 'workflow' })}
</div>
<NextStep selectedNode={selectedNode} />

2
web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
View File

@ -19,7 +19,7 @@ const NoData: FC<Props> = ({
return (
<div className="flex h-0 grow flex-col items-center justify-center">
<ClockPlay className="h-8 w-8 text-text-quaternary" />
<div className="system-xs-regular my-2 text-text-tertiary">{t('debug.noData.description', { ns: 'workflow' })}</div>
<div className="my-2 text-text-tertiary system-xs-regular">{t('debug.noData.description', { ns: 'workflow' })}</div>
{canSingleRun && (
<Button
className="flex"

12
web/app/components/workflow/nodes/_base/node.tsx
View File

@ -168,7 +168,7 @@ const BaseNode: FC<BaseNodeProps> = ({
return (
<div
className={cn(
'system-xs-medium mr-2 text-text-tertiary',
'mr-2 text-text-tertiary system-xs-medium',
data._runningStatus === NodeRunningStatus.Running && 'text-text-accent',
)}
>
@ -212,7 +212,7 @@ const BaseNode: FC<BaseNodeProps> = ({
/>
<div
title={data.title}
className="system-sm-semibold-uppercase text-text-primary"
className="text-text-primary system-sm-semibold-uppercase"
>
{data.title}
</div>
@ -251,7 +251,7 @@ const BaseNode: FC<BaseNodeProps> = ({
{
data.type === BlockEnum.DataSource && (
<div className="absolute inset-[-2px] top-[-22px] z-[-1] rounded-[18px] bg-node-data-source-bg p-0.5 backdrop-blur-[6px]">
<div className="system-2xs-semibold-uppercase flex h-5 items-center px-2.5 text-text-tertiary">
<div className="flex h-5 items-center px-2.5 text-text-tertiary system-2xs-semibold-uppercase">
{t('blocks.datasource', { ns: 'workflow' })}
</div>
</div>
@ -338,7 +338,7 @@ const BaseNode: FC<BaseNodeProps> = ({
/>
<div
title={data.title}
className="system-sm-semibold-uppercase mr-1 flex grow items-center truncate text-text-primary"
className="mr-1 flex grow items-center truncate text-text-primary system-sm-semibold-uppercase"
>
<div>
{data.title}
@ -354,7 +354,7 @@ const BaseNode: FC<BaseNodeProps> = ({
</div>
)}
>
<div className="system-2xs-medium-uppercase ml-1 flex items-center justify-center rounded-[5px] border-[1px] border-text-warning px-[5px] py-[3px] text-text-warning">
<div className="ml-1 flex items-center justify-center rounded-[5px] border-[1px] border-text-warning px-[5px] py-[3px] text-text-warning system-2xs-medium-uppercase">
{t('nodes.iteration.parallelModeUpper', { ns: 'workflow' })}
</div>
</Tooltip>
@ -436,7 +436,7 @@ const BaseNode: FC<BaseNodeProps> = ({
}
{
!!(data.desc && data.type !== BlockEnum.Iteration && data.type !== BlockEnum.Loop) && (
<div className="system-xs-regular whitespace-pre-line break-words px-3 pb-2 pt-1 text-text-tertiary">
<div className="whitespace-pre-line break-words px-3 pb-2 pt-1 text-text-tertiary system-xs-regular">
{data.desc}
</div>
)

6
web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
View File

@ -63,7 +63,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
>
<div className="flex items-center p-1">
<span
className={`system-sm-regular overflow-hidden truncate text-ellipsis
className={`overflow-hidden truncate text-ellipsis system-sm-regular
${selectedItem ? 'text-components-input-text-filled' : 'text-components-input-text-disabled'}`}
>
{selectedItem && isOperationItem(selectedItem) ? t(`nodes.assigner.operations.${selectedItem.name}`, { ns: 'workflow' }) : t('nodes.assigner.operations.title', { ns: 'workflow' })}
@ -77,7 +77,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
<div className="flex w-[140px] flex-col items-start rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
<div className="flex flex-col items-start self-stretch p-1">
<div className="flex items-start self-stretch px-3 pb-0.5 pt-1">
<div className="system-xs-medium-uppercase flex grow text-text-tertiary">{t('nodes.assigner.operations.title', { ns: 'workflow' })}</div>
<div className="flex grow text-text-tertiary system-xs-medium-uppercase">{t('nodes.assigner.operations.title', { ns: 'workflow' })}</div>
</div>
{items.map(item => (
!isOperationItem(item)
@ -94,7 +94,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
}}
>
<div className="flex min-h-5 grow items-center gap-1 px-1">
<span className="system-sm-medium flex grow text-text-secondary">{t(`nodes.assigner.operations.${item.name}`, { ns: 'workflow' })}</span>
<span className="flex grow text-text-secondary system-sm-medium">{t(`nodes.assigner.operations.${item.name}`, { ns: 'workflow' })}</span>
</div>
{item.value === value && (
<div className="flex items-center justify-center">

2
web/app/components/workflow/nodes/assigner/node.tsx
View File

@ -30,7 +30,7 @@ const NodeComponent: FC<NodeProps<AssignerNodeType>> = ({
<div className="relative flex flex-col items-start gap-0.5 self-stretch px-3 py-1">
<div className="flex flex-col items-start gap-1 self-stretch">
<div className="flex items-center gap-1 self-stretch rounded-md bg-workflow-block-parma-bg px-[5px] py-1">
<div className="system-xs-medium flex-1 text-text-tertiary">{t(`${i18nPrefix}.varNotSet`, { ns: 'workflow' })}</div>
<div className="flex-1 text-text-tertiary system-xs-medium">{t(`${i18nPrefix}.varNotSet`, { ns: 'workflow' })}</div>
</div>
</div>
</div>

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

@ -40,7 +40,7 @@ const Panel: FC<NodePanelProps<AssignerNodeType>> = ({
<div className="flex flex-col items-start self-stretch py-2">
<div className="flex w-full flex-col items-start justify-center gap-1 self-stretch px-4 py-2">
<div className="flex items-start gap-2 self-stretch">
<div className="system-sm-semibold-uppercase flex grow flex-col items-start justify-center text-text-secondary">{t(`${i18nPrefix}.variables`, { ns: 'workflow' })}</div>
<div className="flex grow flex-col items-start justify-center text-text-secondary system-sm-semibold-uppercase">{t(`${i18nPrefix}.variables`, { ns: 'workflow' })}</div>
<ActionButton onClick={handleAddOperation}>
<RiAddLine className="h-4 w-4 shrink-0 text-text-tertiary" />
</ActionButton>

2
web/app/components/workflow/nodes/data-source-empty/index.tsx
View File

@ -38,7 +38,7 @@ const DataSourceEmptyNode = ({ id, data }: NodeProps) => {
}}
>
<div className="absolute inset-[-2px] top-[-22px] z-[-1] rounded-[18px] bg-node-data-source-bg p-0.5 backdrop-blur-[6px]">
<div className="system-2xs-semibold-uppercase flex h-5 items-center px-2.5 text-text-tertiary">
<div className="flex h-5 items-center px-2.5 text-text-tertiary system-2xs-semibold-uppercase">
{t('blocks.datasource', { ns: 'workflow' })}
</div>
</div>

2
web/app/components/workflow/nodes/document-extractor/node.tsx
View File

@ -27,7 +27,7 @@ const NodeComponent: FC<NodeProps<DocExtractorNodeType>> = ({
const node = isSystem ? nodes.find(node => node.data.type === BlockEnum.Start) : nodes.find(node => node.id === variable[0])
return (
<div className="relative mb-1 px-3 py-1">
<div className="system-2xs-medium-uppercase mb-1 text-text-tertiary">{t(`${i18nPrefix}.inputVar`, { ns: 'workflow' })}</div>
<div className="mb-1 text-text-tertiary system-2xs-medium-uppercase">{t(`${i18nPrefix}.inputVar`, { ns: 'workflow' })}</div>
<VariableLabelInNode
variables={variable}
nodeType={node?.data.type}

2
web/app/components/workflow/nodes/document-extractor/panel.tsx
View File

@ -64,7 +64,7 @@ const Panel: FC<NodePanelProps<DocExtractorNodeType>> = ({
filterVar={filterVar}
typePlaceHolder="File | Array[File]"
/>
<div className="body-xs-regular mt-1 py-0.5 text-text-tertiary">
<div className="mt-1 py-0.5 text-text-tertiary body-xs-regular">
{t(`${i18nPrefix}.supportFileTypes`, { ns: 'workflow', types: supportTypesShowNames })}
<a className="text-text-accent" href={link} target="_blank">{t(`${i18nPrefix}.learnMore`, { ns: 'workflow' })}</a>
</div>

4
web/app/components/workflow/nodes/group/node.tsx
View File

@ -55,7 +55,7 @@ const GroupNode = (props: NodeProps<GroupNodeData>) => {
</div>
))}
{members.length > MAX_MEMBER_ICONS && (
<div className="system-xs-medium rounded-full bg-components-input-bg-normal px-2 py-1 text-text-tertiary">
<div className="rounded-full bg-components-input-bg-normal px-2 py-1 text-text-tertiary system-xs-medium">
+
{members.length - MAX_MEMBER_ICONS}
</div>
@ -71,7 +71,7 @@ const GroupNode = (props: NodeProps<GroupNodeData>) => {
key={handler.id}
className={cn(
'relative',
'system-sm-semibold uppercase',
'uppercase system-sm-semibold',
'flex h-9 items-center rounded-md bg-components-panel-on-panel-item-bg px-3 text-text-primary shadow-xs',
)}
>

4
web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
View File

@ -22,9 +22,9 @@ const Item: FC<ItemProps> = ({
return (
<div
className={cn(
'system-sm-regular flex h-8 grow cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
'flex h-8 grow cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary system-sm-regular',
!isSelected && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
isSelected && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
isSelected && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs system-sm-medium',
)}
onClick={onClick}
>

2
web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
View File

@ -58,7 +58,7 @@ const KeyValueList: FC<Props> = ({
return (
<div className="overflow-hidden rounded-lg border border-divider-regular">
<div className={cn('system-xs-medium-uppercase flex h-7 items-center leading-7 text-text-tertiary')}>
<div className={cn('flex h-7 items-center leading-7 text-text-tertiary system-xs-medium-uppercase')}>
<div className={cn('h-full border-r border-divider-regular pl-3', isSupportFile ? 'w-[140px]' : 'w-1/2')}>{t(`${i18nPrefix}.key`, { ns: 'workflow' })}</div>
{isSupportFile && <div className="h-full w-[70px] shrink-0 border-r border-divider-regular pl-3">{t(`${i18nPrefix}.type`, { ns: 'workflow' })}</div>}
<div className={cn('h-full items-center justify-between pl-3 pr-1', isSupportFile ? 'grow' : 'w-1/2')}>{t(`${i18nPrefix}.value`, { ns: 'workflow' })}</div>

2
web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
View File

@ -80,7 +80,7 @@ const KeyValueItem: FC<Props> = ({
)
: (
<input
className="system-sm-regular focus:bg-gray-100! appearance-none rounded-none border-none bg-transparent outline-none hover:bg-components-input-bg-hover focus:ring-0"
className="focus:bg-gray-100! appearance-none rounded-none border-none bg-transparent outline-none system-sm-regular hover:bg-components-input-bg-hover focus:ring-0"
value={payload.key}
onChange={e => handleChange('key')(e.target.value)}
/>

2
web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
View File

@ -63,7 +63,7 @@ const ButtonStyleDropdown: FC<Props> = ({
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 1000 }}>
<div className="rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4 shadow-lg backdrop-blur-sm">
<div className="system-md-medium text-text-primary">{t(`${i18nPrefix}.userActions.chooseStyle`, { ns: 'workflow' })}</div>
<div className="text-text-primary system-md-medium">{t(`${i18nPrefix}.userActions.chooseStyle`, { ns: 'workflow' })}</div>
<div className="mt-2 flex w-[324px] flex-wrap gap-1">
<div
className={cn(

16
web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
View File

@ -96,12 +96,12 @@ const EmailConfigureModal = ({
<RiCloseLine className="h-5 w-5 text-text-tertiary" />
</div>
<div className="space-y-1 p-6 pb-3">
<div className="title-2xl-semi-bold text-text-primary">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.title`, { ns: 'workflow' })}</div>
<div className="system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.description`, { ns: 'workflow' })}</div>
<div className="text-text-primary title-2xl-semi-bold">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.title`, { ns: 'workflow' })}</div>
<div className="text-text-tertiary system-xs-regular">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.description`, { ns: 'workflow' })}</div>
</div>
<div className="space-y-5 px-6 py-3">
<div>
<div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">
<div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">
{t(`${i18nPrefix}.deliveryMethod.emailConfigure.subject`, { ns: 'workflow' })}
</div>
<Input
@ -112,7 +112,7 @@ const EmailConfigureModal = ({
/>
</div>
<div>
<div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">
<div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">
{t(`${i18nPrefix}.deliveryMethod.emailConfigure.body`, { ns: 'workflow' })}
</div>
<MailBodyInput
@ -123,7 +123,7 @@ const EmailConfigureModal = ({
/>
</div>
<div>
<div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">
<div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">
{t(`${i18nPrefix}.deliveryMethod.emailConfigure.recipient`, { ns: 'workflow' })}
</div>
<Recipient
@ -137,12 +137,12 @@ const EmailConfigureModal = ({
<RiBugLine className="h-3.5 w-3.5 text-text-primary-on-surface" />
</div>
<div className="grow space-y-1">
<div className="system-sm-medium text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.debugMode`, { ns: 'workflow' })}</div>
<div className="body-xs-regular text-text-tertiary">
<div className="text-text-secondary system-sm-medium">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.debugMode`, { ns: 'workflow' })}</div>
<div className="text-text-tertiary body-xs-regular">
<Trans
i18nKey={`${i18nPrefix}.deliveryMethod.emailConfigure.debugModeTip1`}
ns="workflow"
components={{ email: <span className="body-md-medium text-text-primary">{email}</span> }}
components={{ email: <span className="text-text-primary body-md-medium">{email}</span> }}
values={{ email }}
/>
<div>{t(`${i18nPrefix}.deliveryMethod.emailConfigure.debugModeTip2`, { ns: 'workflow' })}</div>

4
web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx
View File

@ -70,7 +70,7 @@ const DeliveryMethodForm: React.FC<Props> = ({
<div className="px-4 py-2">
<div className="mb-1 flex items-center justify-between">
<div className="flex items-center gap-0.5">
<div className="system-sm-semibold-uppercase text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.title`, { ns: 'workflow' })}</div>
<div className="text-text-secondary system-sm-semibold-uppercase">{t(`${i18nPrefix}.deliveryMethod.title`, { ns: 'workflow' })}</div>
<Tooltip
popupContent={t(`${i18nPrefix}.deliveryMethod.tooltip`, { ns: 'workflow' })}
/>
@ -86,7 +86,7 @@ const DeliveryMethodForm: React.FC<Props> = ({
)}
</div>
{!value.length && (
<div className="system-xs-regular flex items-center justify-center rounded-[10px] bg-background-section p-3 text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.emptyTip`, { ns: 'workflow' })}</div>
<div className="flex items-center justify-center rounded-[10px] bg-background-section p-3 text-text-tertiary system-xs-regular">{t(`${i18nPrefix}.deliveryMethod.emptyTip`, { ns: 'workflow' })}</div>
)}
{value.length > 0 && (
<div className="space-y-1">

2
web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
View File

@ -104,7 +104,7 @@ const DeliveryMethodItem: FC<DeliveryMethodItemProps> = ({
<RiMailSendFill className="h-3.5 w-3.5 text-text-primary-on-surface" />
</div>
)}
<div className="system-xs-medium capitalize text-text-secondary">{method.type}</div>
<div className="capitalize text-text-secondary system-xs-medium">{method.type}</div>
{method.type === DeliveryMethodType.Email
&& (method.config as EmailConfig)?.debug_mode
&& <Badge size="s" className="!px-1 !py-0.5">DEBUG</Badge>}

28
web/app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx
View File

@ -106,14 +106,14 @@ const MethodSelector: FC<MethodSelectorProps> = ({
<RiRobot2Fill className="h-4 w-4 text-text-primary-on-surface" />
</div>
<div className={cn('p-1', webAppDeliveryInfo.disabled && 'opacity-50')}>
<div className="system-sm-medium mb-0.5 truncate text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.webapp.title`, { ns: 'workflow' })}</div>
<div className="system-xs-regular truncate text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.types.webapp.description`, { ns: 'workflow' })}</div>
<div className="mb-0.5 truncate text-text-primary system-sm-medium">{t(`${i18nPrefix}.deliveryMethod.types.webapp.title`, { ns: 'workflow' })}</div>
<div className="truncate text-text-tertiary system-xs-regular">{t(`${i18nPrefix}.deliveryMethod.types.webapp.description`, { ns: 'workflow' })}</div>
</div>
{webAppDeliveryInfo.added && (
<div className="system-xs-regular absolute right-[12px] top-[13px] text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.added`, { ns: 'workflow' })}</div>
<div className="absolute right-[12px] top-[13px] text-text-tertiary system-xs-regular">{t(`${i18nPrefix}.deliveryMethod.added`, { ns: 'workflow' })}</div>
)}
{webAppDeliveryInfo.isTriggerMode && !webAppDeliveryInfo.added && (
<div className="system-xs-regular absolute right-[12px] top-[13px] text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.notAvailableInTriggerMode`, { ns: 'workflow' })}</div>
<div className="absolute right-[12px] top-[13px] text-text-tertiary system-xs-regular">{t(`${i18nPrefix}.deliveryMethod.notAvailableInTriggerMode`, { ns: 'workflow' })}</div>
)}
</div>
<div
@ -144,11 +144,11 @@ const MethodSelector: FC<MethodSelectorProps> = ({
<RiMailSendFill className="h-4 w-4 text-text-primary-on-surface" />
</div>
<div className={cn('p-1', emailDeliveryInfo.added && 'opacity-50')}>
<div className="system-sm-medium mb-0.5 truncate text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.email.title`, { ns: 'workflow' })}</div>
<div className="system-xs-regular truncate text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.types.email.description`, { ns: 'workflow' })}</div>
<div className="mb-0.5 truncate text-text-primary system-sm-medium">{t(`${i18nPrefix}.deliveryMethod.types.email.title`, { ns: 'workflow' })}</div>
<div className="truncate text-text-tertiary system-xs-regular">{t(`${i18nPrefix}.deliveryMethod.types.email.description`, { ns: 'workflow' })}</div>
</div>
{emailDeliveryInfo.added && (
<div className="system-xs-regular absolute right-[12px] top-[13px] text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.added`, { ns: 'workflow' })}</div>
<div className="absolute right-[12px] top-[13px] text-text-tertiary system-xs-regular">{t(`${i18nPrefix}.deliveryMethod.added`, { ns: 'workflow' })}</div>
)}
</div>
{/* Slack */}
@ -159,8 +159,8 @@ const MethodSelector: FC<MethodSelectorProps> = ({
<Slack className="h-4 w-4 text-text-primary-on-surface" />
</div>
<div className={cn('p-1', 'opacity-50')}>
<div className="system-sm-medium mb-0.5 truncate text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.slack.title`, { ns: 'workflow' })}</div>
<div className="system-xs-regular truncate text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.types.slack.description`, { ns: 'workflow' })}</div>
<div className="mb-0.5 truncate text-text-primary system-sm-medium">{t(`${i18nPrefix}.deliveryMethod.types.slack.title`, { ns: 'workflow' })}</div>
<div className="truncate text-text-tertiary system-xs-regular">{t(`${i18nPrefix}.deliveryMethod.types.slack.description`, { ns: 'workflow' })}</div>
</div>
<div className="absolute right-[8px] top-[8px]">
<Badge className="h-4">COMING SOON</Badge>
@ -174,8 +174,8 @@ const MethodSelector: FC<MethodSelectorProps> = ({
<Teams className="h-4 w-4 text-text-primary-on-surface" />
</div>
<div className={cn('p-1', 'opacity-50')}>
<div className="system-sm-medium mb-0.5 truncate text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.teams.title`, { ns: 'workflow' })}</div>
<div className="system-xs-regular truncate text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.types.teams.description`, { ns: 'workflow' })}</div>
<div className="mb-0.5 truncate text-text-primary system-sm-medium">{t(`${i18nPrefix}.deliveryMethod.types.teams.title`, { ns: 'workflow' })}</div>
<div className="truncate text-text-tertiary system-xs-regular">{t(`${i18nPrefix}.deliveryMethod.types.teams.description`, { ns: 'workflow' })}</div>
</div>
<div className="absolute right-[8px] top-[8px]">
<Badge className="h-4">COMING SOON</Badge>
@ -189,8 +189,8 @@ const MethodSelector: FC<MethodSelectorProps> = ({
<RiDiscordFill className="h-5 w-5 text-text-primary-on-surface" />
</div>
<div className={cn('p-1', 'opacity-50')}>
<div className="system-sm-medium mb-0.5 truncate text-text-primary">{t(`${i18nPrefix}.deliveryMethod.types.discord.title`, { ns: 'workflow' })}</div>
<div className="system-xs-regular truncate text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.types.discord.description`, { ns: 'workflow' })}</div>
<div className="mb-0.5 truncate text-text-primary system-sm-medium">{t(`${i18nPrefix}.deliveryMethod.types.discord.title`, { ns: 'workflow' })}</div>
<div className="truncate text-text-tertiary system-xs-regular">{t(`${i18nPrefix}.deliveryMethod.types.discord.description`, { ns: 'workflow' })}</div>
</div>
<div className="absolute right-[8px] top-[8px]">
<Badge className="h-4">COMING SOON</Badge>
@ -204,7 +204,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({
<div className={cn('rounded-[4px] border border-divider-regular bg-components-icon-bg-midnight-solid p-1')}>
<RiLightbulbFlashFill className="h-4 w-4 text-text-primary-on-surface" />
</div>
<div className="system-sm-regular text-text-secondary">
<div className="text-text-secondary system-sm-regular">
<div>{t(`${i18nPrefix}.deliveryMethod.contactTip1`, { ns: 'workflow' })}</div>
<Trans
i18nKey={`${i18nPrefix}.deliveryMethod.contactTip2`}

2
web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx
View File

@ -153,7 +153,7 @@ const EmailInput = ({
<PortalToFollowElemTrigger className="block h-6 min-w-[166px]">
<input
ref={inputRef}
className="system-sm-regular h-6 min-w-[166px] appearance-none bg-transparent p-1 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder"
className="h-6 min-w-[166px] appearance-none bg-transparent p-1 text-components-input-text-filled caret-primary-600 outline-none system-sm-regular placeholder:text-components-input-text-placeholder"
placeholder={placeholder}
onFocus={() => setIsFocus(true)}
onBlur={handleInputBlur}

4
web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx
View File

@ -35,9 +35,9 @@ const EmailItem = ({
<RiErrorWarningFill className="h-4 w-4 text-text-destructive" />
)}
{!isError && <Avatar avatar={data.avatar_url} size={16} name={data.name || data.email} />}
<div title={data.email} className="system-xs-regular max-w-[500px] truncate text-text-primary">
<div title={data.email} className="max-w-[500px] truncate text-text-primary system-xs-regular">
{email === data.email ? data.name : data.email}
{email === data.email && <span className="system-xs-regular text-text-tertiary">{t('members.you', { ns: 'common' })}</span>}
{email === data.email && <span className="text-text-tertiary system-xs-regular">{t('members.you', { ns: 'common' })}</span>}
</div>
{!disabled && (
<RiCloseCircleFill

4
web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
View File

@ -65,7 +65,7 @@ const Recipient = ({
<div className="flex h-10 items-center justify-between pl-3 pr-1">
<div className="flex grow items-center gap-2">
<RiGroupLine className="h-4 w-4 text-text-secondary" />
<div className="system-sm-medium text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.memberSelector.title`, { ns: 'workflow' })}</div>
<div className="text-text-secondary system-sm-medium">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.memberSelector.title`, { ns: 'workflow' })}</div>
</div>
<div className="w-[86px]">
<MemberSelector
@ -89,7 +89,7 @@ const Recipient = ({
<div className="flex h-5 w-5 items-center justify-center rounded-xl bg-components-icon-bg-blue-solid text-[14px]">
<span className="bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text font-semibold uppercase text-shadow-shadow-1 opacity-90">{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
</div>
<div className={cn('system-sm-medium grow text-text-secondary')}>{t(`${i18nPrefix}.deliveryMethod.emailConfigure.allMembers`, { workspaceName: currentWorkspace.name.replace(/'/g, '’'), ns: 'workflow' })}</div>
<div className={cn('grow text-text-secondary system-sm-medium')}>{t(`${i18nPrefix}.deliveryMethod.emailConfigure.allMembers`, { workspaceName: currentWorkspace.name.replace(/'/g, '’'), ns: 'workflow' })}</div>
<Switch
defaultValue={data.whole_workspace}
onChange={checked => onChange({ ...data, whole_workspace: checked })}

12
web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx
View File

@ -67,18 +67,18 @@ const MemberList: FC<Props> = ({ searchValue, list, value, onSearchChange, onSel
>
<Avatar className={cn(value.some(item => item.user_id === account.id) && 'opacity-50')} avatar={account.avatar_url} size={24} name={account.name} />
<div className={cn('grow', value.some(item => item.user_id === account.id) && 'opacity-50')}>
<div className="system-sm-medium text-text-secondary">
<div className="text-text-secondary system-sm-medium">
{account.name}
{account.status === 'pending' && <span className="system-xs-medium ml-1 text-text-warning">{t('members.pending', { ns: 'common' })}</span>}
{email === account.email && <span className="system-xs-regular text-text-tertiary">{t('members.you', { ns: 'common' })}</span>}
{account.status === 'pending' && <span className="ml-1 text-text-warning system-xs-medium">{t('members.pending', { ns: 'common' })}</span>}
{email === account.email && <span className="text-text-tertiary system-xs-regular">{t('members.you', { ns: 'common' })}</span>}
</div>
<div className="system-xs-regular text-text-tertiary">{account.email}</div>
<div className="text-text-tertiary system-xs-regular">{account.email}</div>
</div>
{!value.some(item => item.user_id === account.id) && (
<div className="system-xs-medium hidden text-text-accent group-hover:block">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.memberSelector.add`, { ns: 'workflow' })}</div>
<div className="hidden text-text-accent system-xs-medium group-hover:block">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.memberSelector.add`, { ns: 'workflow' })}</div>
)}
{value.some(item => item.user_id === account.id) && (
<div className="system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.memberSelector.added`, { ns: 'workflow' })}</div>
<div className="text-text-tertiary system-xs-regular">{t(`${i18nPrefix}.deliveryMethod.emailConfigure.memberSelector.added`, { ns: 'workflow' })}</div>
)}
</div>
))}

42
web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
View File

@ -184,36 +184,36 @@ const EmailSenderModal = ({
className="relative !max-w-[480px] !p-0"
>
<div className="space-y-2 p-6 pb-3">
<div className="title-2xl-semi-bold text-text-primary">{t(`${i18nPrefix}.deliveryMethod.emailSender.done`, { ns: 'workflow' })}</div>
<div className="text-text-primary title-2xl-semi-bold">{t(`${i18nPrefix}.deliveryMethod.emailSender.done`, { ns: 'workflow' })}</div>
{debugEnabled && (
<div className="system-md-regular text-text-secondary">
<div className="text-text-secondary system-md-regular">
<Trans
i18nKey={`${i18nPrefix}.deliveryMethod.emailSender.debugDone`}
ns="workflow"
components={{ email: <span className="system-md-semibold text-text-secondary"></span> }}
components={{ email: <span className="text-text-secondary system-md-semibold"></span> }}
values={{ email: userProfile.email }}
/>
</div>
)}
{!debugEnabled && onlyWholeTeam && (
<div className="system-md-regular text-text-secondary">
<div className="text-text-secondary system-md-regular">
<Trans
i18nKey={`${i18nPrefix}.deliveryMethod.emailSender.wholeTeamDone2`}
ns="workflow"
components={{ team: <span className="system-md-medium text-text-secondary"></span> }}
components={{ team: <span className="text-text-secondary system-md-medium"></span> }}
values={{ team: currentWorkspace.name.replace(/'/g, '’') }}
/>
</div>
)}
{!debugEnabled && onlySpecificUsers && (
<div className="system-md-regular text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.emailSender.wholeTeamDone3`, { ns: 'workflow' })}</div>
<div className="text-text-secondary system-md-regular">{t(`${i18nPrefix}.deliveryMethod.emailSender.wholeTeamDone3`, { ns: 'workflow' })}</div>
)}
{!debugEnabled && combinedRecipients && (
<div className="system-md-regular text-text-secondary">
<div className="text-text-secondary system-md-regular">
<Trans
i18nKey={`${i18nPrefix}.deliveryMethod.emailSender.wholeTeamDone1`}
ns="workflow"
components={{ team: <span className="system-md-medium text-text-secondary"></span> }}
components={{ team: <span className="text-text-secondary system-md-medium"></span> }}
values={{ team: currentWorkspace.name.replace(/'/g, '’') }}
/>
</div>
@ -255,39 +255,39 @@ const EmailSenderModal = ({
<RiCloseLine className="h-5 w-5 text-text-tertiary" />
</div>
<div className="space-y-1 p-6 pb-3">
<div className="title-2xl-semi-bold text-text-primary">{t(`${i18nPrefix}.deliveryMethod.emailSender.title`, { ns: 'workflow' })}</div>
<div className="text-text-primary title-2xl-semi-bold">{t(`${i18nPrefix}.deliveryMethod.emailSender.title`, { ns: 'workflow' })}</div>
{debugEnabled && (
<>
<div className="system-sm-regular text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.emailSender.debugModeTip`, { ns: 'workflow' })}</div>
<div className="system-sm-regular text-text-secondary">
<div className="text-text-secondary system-sm-regular">{t(`${i18nPrefix}.deliveryMethod.emailSender.debugModeTip`, { ns: 'workflow' })}</div>
<div className="text-text-secondary system-sm-regular">
<Trans
i18nKey={`${i18nPrefix}.deliveryMethod.emailSender.debugModeTip2`}
ns="workflow"
components={{ email: <span className="system-sm-semibold text-text-primary"></span> }}
components={{ email: <span className="text-text-primary system-sm-semibold"></span> }}
values={{ email: userProfile.email }}
/>
</div>
</>
)}
{!debugEnabled && onlyWholeTeam && (
<div className="system-sm-regular text-text-secondary">
<div className="text-text-secondary system-sm-regular">
<Trans
i18nKey={`${i18nPrefix}.deliveryMethod.emailSender.wholeTeamTip2`}
ns="workflow"
components={{ team: <span className="system-sm-semibold text-text-primary"></span> }}
components={{ team: <span className="text-text-primary system-sm-semibold"></span> }}
values={{ team: currentWorkspace.name.replace(/'/g, '’') }}
/>
</div>
)}
{!debugEnabled && onlySpecificUsers && (
<div className="system-sm-regular text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.emailSender.wholeTeamTip3`, { ns: 'workflow' })}</div>
<div className="text-text-secondary system-sm-regular">{t(`${i18nPrefix}.deliveryMethod.emailSender.wholeTeamTip3`, { ns: 'workflow' })}</div>
)}
{!debugEnabled && combinedRecipients && (
<div className="system-sm-regular text-text-secondary">
<div className="text-text-secondary system-sm-regular">
<Trans
i18nKey={`${i18nPrefix}.deliveryMethod.emailSender.wholeTeamTip1`}
ns="workflow"
components={{ team: <span className="system-sm-semibold text-text-primary"></span> }}
components={{ team: <span className="text-text-primary system-sm-semibold"></span> }}
values={{ team: currentWorkspace.name.replace(/'/g, '’') }}
/>
</div>
@ -306,12 +306,12 @@ const EmailSenderModal = ({
onAdd={noop}
/>
</div>
<div className="system-xs-regular px-6 pt-1 text-text-tertiary">
<div className="px-6 pt-1 text-text-tertiary system-xs-regular">
<Trans
i18nKey={`${i18nPrefix}.deliveryMethod.emailSender.tip`}
ns="workflow"
components={{
strong: <span onClick={jumpToEmailConfigModal} className="system-xs-regular cursor-pointer text-text-accent"></span>,
strong: <span onClick={jumpToEmailConfigModal} className="cursor-pointer text-text-accent system-xs-regular"></span>,
}}
/>
</div>
@ -325,10 +325,10 @@ const EmailSenderModal = ({
</div>
<div className="px-6 py-2">
<div className="group flex h-6 cursor-pointer items-center" onClick={() => setCollapsed(!collapsed)}>
<div className="system-sm-semibold-uppercase mr-1 text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.emailSender.vars`, { ns: 'workflow' })}</div>
<div className="mr-1 text-text-secondary system-sm-semibold-uppercase">{t(`${i18nPrefix}.deliveryMethod.emailSender.vars`, { ns: 'workflow' })}</div>
<RiArrowRightSFill className={cn('h-4 w-4 text-text-quaternary group-hover:text-text-primary', !collapsed && 'rotate-90')} />
</div>
<div className="system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.emailSender.varsTip`, { ns: 'workflow' })}</div>
<div className="text-text-tertiary system-xs-regular">{t(`${i18nPrefix}.deliveryMethod.emailSender.varsTip`, { ns: 'workflow' })}</div>
{!collapsed && (
<div className="mt-3 space-y-4">
{generatedInputs.map((variable, index) => (

4
web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
View File

@ -37,11 +37,11 @@ const UpgradeModal: React.FC<UpgradeModalProps> = ({
<RiMailSendFill className="h-6 w-6 text-text-primary-on-surface" />
</div>
<p
className="title-3xl-semi-bold bg-[linear-gradient(271deg,_var(--components-input-border-active-prompt-1,_#155AEF)_-12.85%,_var(--components-input-border-active-prompt-2,_#0BA5EC)_95.4%)] bg-clip-text text-transparent"
className="bg-[linear-gradient(271deg,_var(--components-input-border-active-prompt-1,_#155AEF)_-12.85%,_var(--components-input-border-active-prompt-2,_#0BA5EC)_95.4%)] bg-clip-text text-transparent title-3xl-semi-bold"
>
{t('nodes.humanInput.deliveryMethod.upgradeTip', { ns: 'workflow' })}
</p>
<p className="system-md-regular mt-2 text-text-tertiary">
<p className="mt-2 text-text-tertiary system-md-regular">
{t('nodes.humanInput.deliveryMethod.upgradeTipContent', { ns: 'workflow' })}
</p>
</div>

2
web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
View File

@ -92,7 +92,7 @@ const FormContentPreview: FC<FormContentPreviewProps> = ({
</Button>
))}
</div>
<div className="system-xs-regular mt-1 text-text-tertiary">{t('nodes.humanInput.editor.previewTip', { ns: 'workflow' })}</div>
<div className="mt-1 text-text-tertiary system-xs-regular">{t('nodes.humanInput.editor.previewTip', { ns: 'workflow' })}</div>
</div>
</div>
)

4
web/app/components/workflow/nodes/human-input/components/form-content.tsx
View File

@ -31,7 +31,7 @@ type FormContentProps = {
}
const Key: FC<{ children: React.ReactNode, className?: string }> = ({ children, className }) => {
return <span className={cn('system-kbd mx-0.5 inline-flex size-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray text-text-placeholder', className)}>{children}</span>
return <span className={cn('mx-0.5 inline-flex size-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray text-text-placeholder system-kbd', className)}>{children}</span>
}
const CtrlKey: FC = () => {
@ -156,7 +156,7 @@ const FormContent: FC<FormContentProps> = ({
/>
</div>
{isFocus && (
<div className="system-xs-regular flex h-8 shrink-0 items-center px-3 text-components-input-text-placeholder">
<div className="flex h-8 shrink-0 items-center px-3 text-components-input-text-placeholder system-xs-regular">
<Trans
i18nKey="nodes.humanInput.formContent.hotkeyTip"
ns="workflow"

6
web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
View File

@ -49,12 +49,12 @@ const FormContent = ({
<>
{showBackButton && (
<div className="flex items-center p-4 pb-1">
<div className="system-sm-semibold-uppercase flex cursor-pointer items-center text-text-accent" onClick={handleBack}>
<div className="flex cursor-pointer items-center text-text-accent system-sm-semibold-uppercase" onClick={handleBack}>
<RiArrowLeftLine className="mr-1 h-4 w-4" />
{t('nodes.humanInput.singleRun.back', { ns: 'workflow' })}
</div>
<div className="system-xs-regular mx-1 text-divider-deep">/</div>
<div className="system-sm-semibold-uppercase text-text-secondary">{nodeName}</div>
<div className="mx-1 text-divider-deep system-xs-regular">/</div>
<div className="text-text-secondary system-sm-semibold-uppercase">{nodeName}</div>
</div>
)}
<div className="px-4 py-3">

4
web/app/components/workflow/nodes/human-input/components/timeout.tsx
View File

@ -48,7 +48,7 @@ const TimeoutInput: FC<Props> = ({
)}
onClick={() => !readonly && onChange({ timeout, unit: 'day' })}
>
<div className="system-sm-medium p-0.5">{t(`${i18nPrefix}.timeout.days`, { ns: 'workflow' })}</div>
<div className="p-0.5 system-sm-medium">{t(`${i18nPrefix}.timeout.days`, { ns: 'workflow' })}</div>
</div>
<div
className={cn(
@ -59,7 +59,7 @@ const TimeoutInput: FC<Props> = ({
)}
onClick={() => !readonly && onChange({ timeout, unit: 'hour' })}
>
<div className="system-sm-medium p-0.5">{t(`${i18nPrefix}.timeout.hours`, { ns: 'workflow' })}</div>
<div className="p-0.5 system-sm-medium">{t(`${i18nPrefix}.timeout.hours`, { ns: 'workflow' })}</div>
</div>
</div>
</div>

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