estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Feat: workflow dark mode (#17785)

Browse Source
This commit is contained in:
KVOJJJin
2025-04-10 17:15:48 +08:00
committed by GitHub
parent 636a0ba37f
commit 17a26da1e6
75 changed files with 324 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,8 +18,8 @@ export const AddVariablePopup = ({
const { t } = useTranslation()
return (
<div className='w-[240px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg'>
<div className='flex h-[34px] items-center border-b-[0.5px] border-b-gray-200 px-4 text-[13px] font-semibold text-gray-700'>
<div className='w-[240px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'>
<div className='flex h-[34px] items-center border-b-[0.5px] border-b-divider-regular px-4 text-[13px] font-semibold text-text-secondary'>
{t('workflow.nodes.variableAssigner.setAssignVariable')}
</div>
<div className='p-1'>

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

@@ -139,18 +139,16 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
onRun(submitData)
}, [forms, onRun, t])
return (
<div className='absolute inset-0 z-10 rounded-2xl pt-10' style={{
backgroundColor: 'rgba(16, 24, 40, 0.20)',
}}>
<div className='flex h-full flex-col rounded-2xl bg-white'>
<div className='absolute inset-0 z-10 rounded-2xl bg-background-overlay-alt pt-10'>
<div className='flex h-full flex-col rounded-2xl bg-components-panel-bg'>
<div className='flex h-8 shrink-0 items-center justify-between pl-4 pr-3 pt-3'>
<div className='truncate text-base font-semibold text-gray-900'>
<div className='truncate text-base font-semibold text-text-primary'>
{t(`${i18nPrefix}.testRun`)} {nodeName}
</div>
<div className='ml-2 shrink-0 cursor-pointer p-1' onClick={() => {
onHide()
}}>
<RiCloseLine className='h-4 w-4 text-gray-500 ' />
<RiCloseLine className='h-4 w-4 text-text-tertiary ' />
</div>
</div>
{
@@ -178,14 +176,14 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
<div className='mt-4 flex justify-between space-x-2 px-4' >
{isRunning && (
<div
className='cursor-pointer rounded-lg border border-gray-200 bg-white p-2 shadow-xs'
className='cursor-pointer rounded-lg border border-divider-regular bg-components-button-secondary-bg p-2 shadow-xs'
onClick={onStop}
>
<StopCircle className='h-4 w-4 text-gray-500' />
<StopCircle className='h-4 w-4 text-text-tertiary' />
</div>
)}
<Button disabled={!isFileLoaded || isRunning} variant='primary' className='w-0 grow space-x-2' onClick={handleRun}>
{isRunning && <RiLoader2Line className='h-4 w-4 animate-spin text-white' />}
{isRunning && <RiLoader2Line className='h-4 w-4 animate-spin' />}
<div>{t(`${i18nPrefix}.${isRunning ? 'running' : 'startRun'}`)}</div>
</Button>
</div>

46
web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
View File

@@ -8,6 +8,8 @@ import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import {
getFilesInLogs,
} from '@/app/components/base/file-uploader/utils'
import { Theme } from '@/types/app'
import useTheme from '@/hooks/use-theme'
import './style.css'
import { noop } from 'lodash-es'
@@ -43,15 +45,6 @@ export const languageMap = {
[CodeLanguage.json]: 'json',
}
const DEFAULT_THEME = {
base: 'vs',
inherit: true,
rules: [],
colors: {
'editor.background': '#F2F4F7', // #00000000 transparent. But it will has a blue border
},
}
const CodeEditor: FC<Props> = ({
value = '',
placeholder = '',
@@ -76,7 +69,7 @@ const CodeEditor: FC<Props> = ({
const [isMounted, setIsMounted] = React.useState(false)
const minHeight = height || 200
const [editorContentHeight, setEditorContentHeight] = useState(56)
const { theme: appTheme } = useTheme()
const valueRef = useRef(value)
useEffect(() => {
valueRef.current = value
@@ -114,27 +107,7 @@ const CodeEditor: FC<Props> = ({
setIsFocus(false)
})
monaco.editor.defineTheme('default-theme', DEFAULT_THEME)
monaco.editor.defineTheme('blur-theme', {
base: 'vs',
inherit: true,
rules: [],
colors: {
'editor.background': '#F2F4F7',
},
})
monaco.editor.defineTheme('focus-theme', {
base: 'vs',
inherit: true,
rules: [],
colors: {
'editor.background': '#ffffff',
},
})
monaco.editor.setTheme('default-theme') // Fix: sometimes not load the default theme
monaco.editor.setTheme(appTheme === Theme.light ? 'light' : 'vs-dark') // Fix: sometimes not load the default theme
onMount?.(editor, monaco)
setIsMounted(true)
@@ -151,12 +124,11 @@ const CodeEditor: FC<Props> = ({
}
})()
const theme = (() => {
if (noWrapper)
return 'default-theme'
return isFocus ? 'focus-theme' : 'blur-theme'
})()
const theme = useMemo(() => {
if (appTheme === Theme.light)
return 'light'
return 'vs-dark'
}, [appTheme])
const main = (
<>

11
web/app/components/workflow/nodes/_base/components/editor/code-editor/style.css
View File

@@ -6,6 +6,17 @@
padding-left: 0;
}
.monaco-editor {
background-color: transparent !important;
outline: none !important;
}
.monaco-editor .monaco-editor-background {
background-color: transparent !important;
}
.monaco-editor .margin {
background-color: transparent !important;
}
/* hide readonly tooltip */
.monaco-editor-overlaymessage {
display: none !important;

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

@@ -7,7 +7,7 @@ const FailBranchCard = () => {
return (
<div className='px-4 pt-2'>
<div className='rounded-[10px] bg-workflow-process-bg p-4'>
<div className='mb-2 flex h-8 w-8 items-center justify-center rounded-[10px] border-[0.5px] bg-components-card-bg shadow-lg'>
<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'>

2
web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
View File

@@ -113,7 +113,7 @@ const Editor: FC<Props> = ({
<Tooltip
popupContent={`${t('workflow.common.insertVarTip')}`}
>
<div className='cursor-pointer rounded-[5px] border-[0.5px] border-black/5 bg-white p-0.5 shadow-lg hover:bg-gray-100'>
<div className='cursor-pointer rounded-[5px] border-[0.5px] border-divider-regular bg-components-badge-white-to-dark p-0.5 shadow-lg'>
<Variable02 className='h-3.5 w-3.5 text-components-button-secondary-accent-text' />
</div>
</Tooltip>

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

@@ -32,12 +32,12 @@ const RoleItem: FC<RoleItemProps> = ({
}, [onChange])
return (
<div className='flex items-center justify-between'>
<div className='text-[13px] font-normal text-gray-700'>{title}</div>
<input
<div className='text-[13px] font-normal text-text-secondary'>{title}</div>
<Input
readOnly={readonly}
value={value}
onChange={handleChange}
className='h-8 w-[200px] rounded-lg border-0 bg-gray-100 px-2.5 text-[13px] leading-8 text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
className='h-8 w-[200px]'
type='text' />
</div>
)
@@ -180,7 +180,7 @@ const MemoryConfig: FC<Props> = ({
</div>
{canSetRoleName && (
<div className='mt-4'>
<div className='text-xs font-medium uppercase leading-6 text-gray-500'>{t(`${i18nPrefix}.conversationRoleName`)}</div>
<div className='text-xs font-medium uppercase leading-6 text-text-tertiary'>{t(`${i18nPrefix}.conversationRoleName`)}</div>
<div className='mt-1 space-y-2'>
<RoleItem
readonly={readonly}

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

@@ -47,7 +47,7 @@ export const VarItem: FC<VarItemProps> = ({
<div className='system-xs-regular mt-0.5 text-text-tertiary'>
{description}
{subItems && (
<div className='ml-2 border-l border-gray-200 pl-2'>
<div className='ml-2 border-l border-divider-regular pl-2'>
{subItems.map((item, index) => (
<VarItem
key={index}

2
web/app/components/workflow/nodes/_base/components/panel-operator/change-block.tsx
View File

@@ -47,7 +47,7 @@ const ChangeBlock = ({
const renderTrigger = useCallback(() => {
return (
<div className='flex h-8 w-[232px] cursor-pointer items-center rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50'>
<div className='flex h-8 w-[232px] cursor-pointer items-center rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover'>
{t('workflow.panel.changeBlock')}
</div>
)

28
web/app/components/workflow/nodes/_base/components/panel-operator/panel-operator-popup.tsx
View File

@@ -84,7 +84,7 @@ const PanelOperatorPopup = ({
const link = useNodeHelpLink(data.type)
return (
<div className='w-[240px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xl'>
<div className='w-[240px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'>
{
(showChangeBlock || canRunBySingle(data.type)) && (
<>
@@ -93,8 +93,8 @@ const PanelOperatorPopup = ({
canRunBySingle(data.type) && (
<div
className={`
flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-gray-700
hover:bg-gray-50
flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-text-secondary
hover:bg-state-base-hover
`}
onClick={() => {
handleNodeSelect(id)
@@ -117,7 +117,7 @@ const PanelOperatorPopup = ({
)
}
</div>
<div className='h-[1px] bg-gray-100'></div>
<div className='h-[1px] bg-divider-regular'></div>
</>
)
}
@@ -126,7 +126,7 @@ const PanelOperatorPopup = ({
<>
<div className='p-1'>
<div
className='flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50'
className='flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover'
onClick={() => {
onClosePopup()
handleNodesCopy(id)
@@ -136,7 +136,7 @@ const PanelOperatorPopup = ({
<ShortcutsName keys={['ctrl', 'c']} />
</div>
<div
className='flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50'
className='flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover'
onClick={() => {
onClosePopup()
handleNodesDuplicate(id)
@@ -146,12 +146,12 @@ const PanelOperatorPopup = ({
<ShortcutsName keys={['ctrl', 'd']} />
</div>
</div>
<div className='h-[1px] bg-gray-100'></div>
<div className='h-[1px] bg-divider-regular'></div>
<div className='p-1'>
<div
className={`
flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-gray-700
hover:bg-rose-50 hover:text-red-500
flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-text-secondary
hover:bg-state-destructive-hover hover:text-red-500
`}
onClick={() => handleNodeDelete(id)}
>
@@ -159,7 +159,7 @@ const PanelOperatorPopup = ({
<ShortcutsName keys={['del']} />
</div>
</div>
<div className='h-[1px] bg-gray-100'></div>
<div className='h-[1px] bg-divider-regular'></div>
</>
)
}
@@ -170,21 +170,21 @@ const PanelOperatorPopup = ({
<a
href={link}
target='_blank'
className='flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50'
className='flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover'
>
{t('workflow.panel.helpLink')}
</a>
</div>
<div className='h-[1px] bg-gray-100'></div>
<div className='h-[1px] bg-divider-regular'></div>
</>
)
}
<div className='p-1'>
<div className='px-3 py-2 text-xs text-gray-500'>
<div className='px-3 py-2 text-xs text-text-tertiary'>
<div className='mb-1 flex h-[22px] items-center font-medium'>
{t('workflow.panel.about').toLocaleUpperCase()}
</div>
<div className='mb-1 leading-[18px] text-gray-700'>{about}</div>
<div className='mb-1 leading-[18px] text-text-secondary'>{about}</div>
<div className='leading-[18px]'>
{t('workflow.panel.createdBy')} {author}
</div>

17
web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
View File

@@ -26,7 +26,6 @@ import {
Clipboard,
ClipboardCheck,
} from '@/app/components/base/icons/src/vender/line/files'
import s from '@/app/components/app/configuration/config-prompt/style.module.css'
import { useEventEmitterContextContext } from '@/context/event-emitter'
import { PROMPT_EDITOR_INSERT_QUICKLY } from '@/app/components/base/prompt-editor/plugins/update-block'
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
@@ -147,20 +146,20 @@ const Editor: FC<Props> = ({
return (
<Wrap className={cn(className, wrapClassName)} style={wrapStyle} isInNode isExpand={isExpand}>
<div ref={ref} className={cn(isFocus ? (gradientBorder && s.gradientBorder) : 'bg-gray-100', isExpand && 'h-full', '!rounded-[9px] p-0.5', containerClassName)}>
<div className={cn(isFocus ? 'bg-gray-50' : 'bg-gray-100', isExpand && 'flex h-full flex-col', 'rounded-lg', containerClassName)}>
<div ref={ref} className={cn(isFocus ? (gradientBorder && 'bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2') : 'bg-transparent', isExpand && 'h-full', '!rounded-[9px] p-0.5', containerClassName)}>
<div className={cn(isFocus ? 'bg-background-default' : 'bg-components-input-bg-normal', isExpand && 'flex h-full flex-col', 'rounded-lg', containerClassName)}>
<div className={cn('flex items-center justify-between pl-3 pr-2 pt-1', headerClassName)}>
<div className='flex gap-2'>
<div className={cn('text-xs font-semibold uppercase leading-4 text-gray-700', titleClassName)}>{title} {required && <span className='text-red-500'>*</span>}</div>
<div className={cn('text-xs font-semibold uppercase leading-4 text-text-secondary', titleClassName)}>{title} {required && <span className='text-text-destructive'>*</span>}</div>
{titleTooltip && <Tooltip popupContent={titleTooltip} />}
</div>
<div className='flex items-center'>
<div className='text-xs font-medium leading-[18px] text-gray-500'>{value?.length || 0}</div>
<div className='text-xs font-medium leading-[18px] text-text-tertiary'>{value?.length || 0}</div>
{isSupportPromptGenerator && (
<PromptGeneratorBtn className='ml-[5px]' onGenerated={onGenerated} modelConfig={modelConfig} />
)}
<div className='ml-2 mr-2 h-3 w-px bg-gray-200'></div>
<div className='ml-2 mr-2 h-3 w-px bg-divider-regular'></div>
{/* Operations */}
<div className='flex items-center space-x-[2px]'>
{isSupportJinja && (
@@ -168,13 +167,13 @@ const Editor: FC<Props> = ({
popupContent={
<div>
<div>{t('workflow.common.enableJinja')}</div>
<a className='text-[#155EEF]' target='_blank' href='https://jinja.palletsprojects.com/en/2.10.x/'>{t('workflow.common.learnMore')}</a>
<a className='text-text-accent' target='_blank' href='https://jinja.palletsprojects.com/en/2.10.x/'>{t('workflow.common.learnMore')}</a>
</div>
}
needsDelay
>
<div className={cn(editionType === EditionType.jinja2 && 'border-black/5 bg-white', 'flex h-[22px] items-center space-x-0.5 rounded-[5px] border border-transparent px-1.5 hover:border-black/5')}>
<Jinja className='h-3 w-6 text-gray-300' />
<div className={cn(editionType === EditionType.jinja2 && 'border-components-button-ghost-bg-hover bg-components-button-ghost-bg-hover', 'flex h-[22px] items-center space-x-0.5 rounded-[5px] border border-transparent px-1.5 hover:border-components-button-ghost-bg-hover')}>
<Jinja className='h-3 w-6 text-text-quaternary' />
<Switch
size='sm'
defaultValue={editionType === EditionType.jinja2}

10
web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
View File

@@ -48,24 +48,24 @@ const ReadonlyInputWithSelectVar: FC<Props> = ({
return (<span key={index}>
<span className='relative top-[-3px] leading-[16px]'>{str}</span>
<div className=' inline-flex h-[16px] items-center rounded-[5px] bg-white px-1.5'>
<div className=' inline-flex h-[16px] items-center rounded-[5px] bg-components-badge-white-to-dark px-1.5'>
{!isEnv && !isChatVar && (
<div className='flex items-center'>
<div className='p-[1px]'>
<VarBlockIcon
className='!text-gray-900'
className='!text-text-primary'
type={node?.type || BlockEnum.Start}
/>
</div>
<div className='mx-0.5 max-w-[60px] truncate text-xs font-medium text-gray-700' title={node?.title}>{node?.title}</div>
<div className='mx-0.5 max-w-[60px] truncate text-xs font-medium text-text-secondary' title={node?.title}>{node?.title}</div>
<Line3 className='mr-0.5'></Line3>
</div>
)}
<div className='flex items-center text-primary-600'>
<div className='flex items-center text-text-accent'>
{!isEnv && !isChatVar && <Variable02 className='h-3.5 w-3.5 shrink-0' />}
{isEnv && <Env className='h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
{isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
<div className={cn('ml-0.5 max-w-[50px] truncate text-xs font-medium', (isEnv || isChatVar) && 'text-gray-900')} title={varName}>{varName}</div>
<div className={cn('ml-0.5 max-w-[50px] truncate text-xs font-medium', (isEnv || isChatVar) && 'text-text-primary')} title={varName}>{varName}</div>
</div>
</div>
</span>)

12
web/app/components/workflow/nodes/_base/components/remove-button.tsx
View File

@@ -2,7 +2,7 @@
import type { FC } from 'react'
import React from 'react'
import { RiDeleteBinLine } from '@remixicon/react'
import cn from '@/utils/classnames'
import ActionButton from '@/app/components/base/action-button'
type Props = {
className?: string
@@ -10,16 +10,12 @@ type Props = {
}
const Remove: FC<Props> = ({
className,
onClick,
}) => {
return (
<div
className={cn(className, 'cursor-pointer rounded-md p-1 text-gray-500 hover:bg-black/5 hover:text-gray-800')}
onClick={onClick}
>
<RiDeleteBinLine className='h-4 w-4' />
</div>
<ActionButton size='l' className='group shrink-0 hover:!bg-state-destructive-hover' onClick={onClick}>
<RiDeleteBinLine className='h-4 w-4 text-text-tertiary group-hover:text-text-destructive' />
</ActionButton>
)
}
export default React.memo(Remove)

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

@@ -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'>{t('workflow.nodes.common.retry.maxRetries')}</div>
<div className='system-xs-medium-uppercase mr-2 grow text-text-secondary'>{t('workflow.nodes.common.retry.maxRetries')}</div>
<Slider
className='mr-3 w-[108px]'
value={retry_config?.max_retries || 3}
@@ -86,7 +86,7 @@ const RetryOnPanel = ({
/>
</div>
<div className='flex items-center'>
<div className='system-xs-medium-uppercase mr-2 grow'>{t('workflow.nodes.common.retry.retryInterval')}</div>
<div className='system-xs-medium-uppercase mr-2 grow text-text-secondary'>{t('workflow.nodes.common.retry.retryInterval')}</div>
<Slider
className='mr-3 w-[108px]'
value={retry_config?.retry_interval || 1000}

10
web/app/components/workflow/nodes/_base/components/selector.tsx
View File

@@ -65,14 +65,14 @@ const TypeSelector: FC<Props> = ({
: (
<div
onClick={toggleShow}
className={cn(showOption && 'bg-black/5', 'flex h-5 cursor-pointer items-center rounded-md pl-1 pr-0.5 text-xs font-semibold text-gray-700 hover:bg-black/5')}>
<div className={cn('text-sm font-semibold', uppercase && 'uppercase', noValue && 'text-gray-400', triggerClassName)}>{!noValue ? item?.label : placeholder}</div>
className={cn(showOption && 'bg-state-base-hover', 'flex h-5 cursor-pointer items-center rounded-md pl-1 pr-0.5 text-xs font-semibold text-text-secondary hover:bg-state-base-hover')}>
<div className={cn('text-sm font-semibold', uppercase && 'uppercase', noValue && 'text-text-tertiary', triggerClassName)}>{!noValue ? item?.label : placeholder}</div>
{!readonly && <DropDownIcon className='h-3 w-3 ' />}
</div>
)}
{(showOption && !readonly) && (
<div className={cn('absolute top-[24px] z-10 w-[120px] select-none rounded-lg border border-gray-200 bg-white p-1 shadow-lg', popupClassName)}>
<div className={cn('absolute top-[24px] z-10 w-[120px] select-none rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg', popupClassName)}>
{list.map(item => (
<div
key={item.value}
@@ -80,10 +80,10 @@ const TypeSelector: FC<Props> = ({
setHide()
onChange(item.value)
}}
className={cn(itemClassName, uppercase && 'uppercase', 'flex h-[30px] min-w-[44px] cursor-pointer items-center justify-between rounded-lg px-3 text-[13px] font-medium text-gray-700 hover:bg-gray-50')}
className={cn(itemClassName, uppercase && 'uppercase', 'flex h-[30px] min-w-[44px] cursor-pointer items-center justify-between rounded-lg px-3 text-[13px] font-medium text-text-secondary hover:bg-state-base-hover')}
>
<div>{item.label}</div>
{showChecked && item.value === value && <Check className='h-4 w-4 text-primary-600' />}
{showChecked && item.value === value && <Check className='h-4 w-4 text-text-primary' />}
</div>
))
}

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

@@ -33,7 +33,7 @@ export const TitleInput = memo(({
value={localValue}
onChange={e => setLocalValue(e.target.value)}
className={`
system-xl-semibold mr-2 h-7 min-w-0 grow appearance-none rounded-md border border-transparent px-1 text-text-primary
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
`}
placeholder={t('workflow.common.addTitle') || ''}
@@ -76,8 +76,8 @@ export const DescriptionInput = memo(({
onBlur={handleBlur}
className={`
w-full resize-none appearance-none bg-transparent text-xs
leading-[18px] text-gray-900 caret-[#295EFF]
outline-none placeholder:text-gray-400
leading-[18px] text-text-primary caret-[#295EFF]
outline-none placeholder:text-text-quaternary
`}
placeholder={t('workflow.common.addDescription') || ''}
/>

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

@@ -51,7 +51,7 @@ const VariableTag = ({
const { t } = useTranslation()
return (
<Tooltip popupContent={!isValid && t('workflow.errorMsg.invalidVariable')}>
<div className={cn('border-[rgba(16, 2440,0.08)] inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] bg-white px-1.5 text-xs shadow-xs',
<div className={cn('border-[rgba(16, 2440,0.08)] inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] border-divider-subtle bg-components-badge-white-to-dark px-1.5 text-xs shadow-xs',
!isValid && 'border-red-400 !bg-[#FEF3F2]',
)}>
{(!isEnv && !isChatVar && <>
@@ -59,7 +59,7 @@ const VariableTag = ({
<>
<VarBlockIcon
type={node.data.type || BlockEnum.Start}
className='mr-0.5'
className='mr-0.5 !text-text-primary'
/>
<div
className='max-w-[60px] truncate font-medium text-text-secondary'

5
web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
View File

@@ -99,10 +99,7 @@ const VarList: FC<Props> = ({
isSupportFileVar={isSupportFileVar}
/>
{!readonly && (
<RemoveButton
className='!bg-gray-100 !p-2 hover:!bg-gray-200'
onClick={handleVarRemove(index)}
/>
<RemoveButton onClick={handleVarRemove(index)}/>
)}
</div>
))}

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

@@ -333,9 +333,9 @@ const VarReferencePicker: FC<Props> = ({
}}
className='h-full grow'
>
<div ref={isSupportConstantValue ? triggerRef : null} className={cn('h-full', isSupportConstantValue && 'flex items-center rounded-lg bg-gray-100 py-1 pl-1')}>
<div ref={isSupportConstantValue ? triggerRef : null} className={cn('h-full', isSupportConstantValue && 'flex items-center rounded-lg bg-components-panel-bg py-1 pl-1')}>
<Tooltip popupContent={!isValidVar && hasValue && t('workflow.errorMsg.invalidVariable')}>
<div className={cn('h-full items-center rounded-[5px] px-1.5', hasValue ? 'inline-flex bg-white' : 'flex')}>
<div className={cn('h-full items-center rounded-[5px] px-1.5', hasValue ? 'inline-flex bg-components-badge-white-to-dark' : 'flex')}>
{hasValue
? (
<>
@@ -343,17 +343,17 @@ const VarReferencePicker: FC<Props> = ({
<div className='flex items-center'>
<div className='h-3 px-[1px]'>
{outputVarNode?.type && <VarBlockIcon
className='!text-gray-900'
className='!text-text-primary'
type={outputVarNode.type}
/>}
</div>
<div className='mx-0.5 truncate text-xs font-medium text-gray-700' title={outputVarNode?.title} style={{
<div className='mx-0.5 truncate text-xs font-medium text-text-secondary' title={outputVarNode?.title} style={{
maxWidth: maxNodeNameWidth,
}}>{outputVarNode?.title}</div>
<Line3 className='mr-0.5'></Line3>
</div>
)}
<div className='flex items-center text-primary-600'>
<div className='flex items-center text-text-accent'>
{!hasValue && <Variable02 className='h-3.5 w-3.5' />}
{isEnv && <Env className='h-3.5 w-3.5 text-util-colors-violet-violet-600' />}
{isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
@@ -364,7 +364,7 @@ const VarReferencePicker: FC<Props> = ({
<div className='system-xs-regular ml-0.5 truncate text-center capitalize text-text-tertiary' title={type} style={{
maxWidth: maxTypeWidth,
}}>{type}</div>
{!isValidVar && <RiErrorWarningFill className='ml-0.5 h-3 w-3 text-[#D92D20]' />}
{!isValidVar && <RiErrorWarningFill className='ml-0.5 h-3 w-3 text-text-destructive' />}
</>
)
: <div className={`overflow-hidden ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'} system-sm-regular text-ellipsis`}>{placeholder ?? t('workflow.common.setVarValuePlaceholder')}</div>}
@@ -375,10 +375,10 @@ const VarReferencePicker: FC<Props> = ({
</VarPickerWrap>
)}
{(hasValue && !readonly && !isInTable) && (<div
className='group invisible absolute right-1 top-[50%] h-5 translate-y-[-50%] cursor-pointer rounded-md p-1 hover:bg-black/5 group-hover/wrap:visible'
className='group invisible absolute right-1 top-[50%] h-5 translate-y-[-50%] cursor-pointer rounded-md p-1 hover:bg-state-base-hover group-hover/wrap:visible'
onClick={handleClearVar}
>
<RiCloseLine className='h-3.5 w-3.5 text-gray-500 group-hover:text-gray-800' />
<RiCloseLine className='h-3.5 w-3.5 text-text-tertiary group-hover:text-text-secondary' />
</div>)}
{!hasValue && valueTypePlaceHolder && (
<Badge

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

@@ -27,7 +27,7 @@ const VarReferencePopup: FC<Props> = ({
const { locale } = useContext(I18n)
// max-h-[300px] overflow-y-auto todo: use portal to handle long list
return (
<div className='space-y-1 rounded-lg border border-gray-200 bg-white p-1 shadow-lg' style={{
<div className='space-y-1 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg' style={{
width: itemWidth || 228,
}}>
{((!vars || vars.length === 0) && popupFor)

10
web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
View File

@@ -43,23 +43,23 @@ const VarReferencePicker: FC<Props> = ({
offset={4}
>
<PortalToFollowElemTrigger onClick={() => setOpen(!open)} className='w-[120px] cursor-pointer'>
<div className='flex h-8 items-center justify-between rounded-lg border-0 bg-gray-100 px-2.5 text-[13px] text-gray-900'>
<div className='flex h-8 items-center justify-between rounded-lg border-0 bg-components-button-secondary-bg px-2.5 text-[13px] text-text-primary'>
<div className='w-0 grow truncate capitalize' title={value}>{value}</div>
<RiArrowDownSLine className='h-3.5 w-3.5 shrink-0 text-gray-700' />
<RiArrowDownSLine className='h-3.5 w-3.5 shrink-0 text-text-secondary' />
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{
zIndex: 100,
}}>
<div className='w-[120px] rounded-lg bg-white p-1 shadow-sm'>
<div className='w-[120px] rounded-lg bg-components-panel-bg p-1 shadow-sm'>
{TYPES.map(type => (
<div
key={type}
className='flex h-[30px] cursor-pointer items-center justify-between rounded-lg pl-3 pr-2 text-[13px] text-gray-900 hover:bg-gray-100'
className='flex h-[30px] cursor-pointer items-center justify-between rounded-lg pl-3 pr-2 text-[13px] text-text-primary hover:bg-state-base-hover'
onClick={handleChange(type)}
>
<div className='w-0 grow truncate capitalize'>{type}</div>
{type === value && <Check className='h-4 w-4 shrink-0 text-primary-600' />}
{type === value && <Check className='h-4 w-4 shrink-0 text-text-accent' />}
</div>
))}
</div>

4
web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts
View File

@@ -20,9 +20,9 @@ const useToggleExpend = ({ ref, hasFooter = true, isInNode }: Params) => {
return ''
if (isInNode)
return 'fixed z-10 right-[9px] top-[166px] bottom-[8px] p-4 bg-white rounded-xl'
return 'fixed z-10 right-[9px] top-[166px] bottom-[8px] p-4 bg-components-panel-bg rounded-xl'
return 'absolute z-10 left-4 right-6 top-[52px] bottom-0 pb-4 bg-white'
return 'absolute z-10 left-4 right-6 top-[52px] bottom-0 pb-4 bg-components-panel-bg'
})()
const wrapStyle = isExpand
? {

10
web/app/components/workflow/nodes/_base/panel.tsx
View File

@@ -119,7 +119,7 @@ const BasePanel: FC<BasePanelProps> = ({
width: `${panelWidth}px`,
}}
>
<div className='sticky top-0 z-10 border-b-[0.5px] border-black/5 bg-components-panel-bg'>
<div className='sticky top-0 z-10 border-b-[0.5px] border-divider-regular bg-components-panel-bg'>
<div className='flex items-center px-4 pb-1 pt-4'>
<BlockIcon
className='mr-1 shrink-0'
@@ -131,7 +131,7 @@ const BasePanel: FC<BasePanelProps> = ({
value={data.title || ''}
onBlur={handleTitleBlur}
/>
<div className='flex shrink-0 items-center text-gray-500'>
<div className='flex shrink-0 items-center text-text-tertiary'>
{
canRunBySingle(data.type) && !nodesReadOnly && (
<Tooltip
@@ -139,7 +139,7 @@ const BasePanel: FC<BasePanelProps> = ({
popupClassName='mr-1'
>
<div
className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5'
className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover'
onClick={() => {
handleNodeDataUpdate({ id, data: { _isSingleRun: true } })
handleSyncWorkflowDraft(true)
@@ -169,7 +169,7 @@ const BasePanel: FC<BasePanelProps> = ({
</div>
</div>
<div>
{cloneElement(children, { id, data })}
{cloneElement(children as any, { id, data })}
</div>
<Split />
{
@@ -190,7 +190,7 @@ const BasePanel: FC<BasePanelProps> = ({
}
{
!!availableNextBlocks.length && (
<div className='border-t-[0.5px] border-t-black/5 p-4'>
<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'>
{t('workflow.panel.nextStep').toLocaleUpperCase()}
</div>