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>

16
web/app/components/workflow/nodes/end/node.tsx
View File

@@ -52,13 +52,13 @@ const Node: FC<NodeProps<EndNodeType>> = ({
isChatMode,
})
return (
<div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-gray-100 px-1 text-xs font-normal text-gray-700'>
<div className='flex items-center text-xs font-medium text-gray-500'>
<div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-components-badge-white-to-dark px-1 text-xs font-normal text-text-secondary'>
<div className='flex items-center text-xs font-medium text-text-tertiary'>
{!isEnv && !isChatVar && (
<>
<div className='p-[1px]'>
<VarBlockIcon
className='!text-gray-900'
className='!text-text-primary'
type={node?.data.type || BlockEnum.Start}
/>
</div>
@@ -66,16 +66,16 @@ const Node: FC<NodeProps<EndNodeType>> = ({
<Line3 className='mr-0.5'></Line3>
</>
)}
<div className='flex items-center text-primary-600'>
{!isEnv && !isChatVar && <Variable02 className='h-3.5 w-3.5 shrink-0 text-primary-500' />}
<div className='flex items-center text-text-accent'>
{!isEnv && !isChatVar && <Variable02 className='h-3.5 w-3.5 shrink-0 text-text-accent' />}
{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) && '!max-w-[70px] text-gray-900')}>{varName}</div>
<div className={cn('ml-0.5 max-w-[50px] truncate text-xs font-medium', (isEnv || isChatVar) && '!max-w-[70px] text-text-primary')}>{varName}</div>
</div>
</div>
<div className='text-xs font-normal text-gray-700'>
<div className='ml-0.5 max-w-[42px] truncate text-xs font-normal capitalize text-gray-500' title={varType}>{varType}</div>
<div className='text-xs font-normal text-text-secondary'>
<div className='ml-0.5 max-w-[42px] truncate text-xs font-normal capitalize text-text-tertiary' title={varType}>{varType}</div>
</div>
</div>
)

8
web/app/components/workflow/nodes/http/components/api-input.tsx
View File

@@ -53,9 +53,9 @@ const ApiInput: FC<Props> = ({
onChange={onMethodChange}
options={MethodOptions}
trigger={
<div className={cn(readonly && 'cursor-pointer', 'flex h-8 shrink-0 items-center rounded-lg border-black/5 bg-gray-100 px-2.5')} >
<div className='w-12 pl-0.5 text-xs font-medium uppercase leading-[18px] text-gray-900'>{method}</div>
{!readonly && <RiArrowDownSLine className='ml-1 h-3.5 w-3.5 text-gray-700' />}
<div className={cn(readonly && 'cursor-pointer', 'flex h-8 shrink-0 items-center rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-2.5')} >
<div className='w-12 pl-0.5 text-xs font-medium uppercase leading-[18px] text-text-primary'>{method}</div>
{!readonly && <RiArrowDownSLine className='ml-1 h-3.5 w-3.5 text-text-secondary' />}
</div>
}
popupClassName='top-[34px] w-[108px]'
@@ -65,7 +65,7 @@ const ApiInput: FC<Props> = ({
<Input
instanceId='http-api-url'
className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
value={url}
onChange={onUrlChange}
readOnly={readonly}

6
web/app/components/workflow/nodes/http/components/authorization/index.tsx
View File

@@ -28,9 +28,9 @@ type Props = {
const Field = ({ title, isRequired, children }: { title: string; isRequired?: boolean; children: React.JSX.Element }) => {
return (
<div>
<div className='text-[13px] font-medium leading-8 text-gray-700'>
<div className='text-[13px] font-medium leading-8 text-text-secondary'>
{title}
{isRequired && <span className='ml-0.5 text-[#D92D20]'>*</span>}
{isRequired && <span className='ml-0.5 text-text-destructive'>*</span>}
</div>
<div>{children}</div>
</div>
@@ -158,7 +158,7 @@ const Authorization: FC<Props> = ({
<div className='flex'>
<Input
instanceId='http-api-key'
className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
value={tempPayload.config?.api_key || ''}
onChange={handleAPIKeyChange}
nodesOutputVars={availableVars}

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

@@ -21,9 +21,10 @@ const Item: FC<ItemProps> = ({
return (
<div
className={cn(
isSelected ? 'border-[2px] border-primary-400 bg-white shadow-xs' : 'border border-gray-100 bg-gray-25',
'flex h-8 w-0 grow cursor-pointer items-center justify-center rounded-lg text-[13px] font-normal text-gray-900')
}
'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',
!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',
)}
onClick={onClick}
>
{title}

5
web/app/components/workflow/nodes/http/components/curl-panel.tsx
View File

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
import { BodyType, type HttpNodeType, Method } from '../types'
import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'
import Textarea from '@/app/components/base/textarea'
import Toast from '@/app/components/base/toast'
import { useNodesInteractions } from '@/app/components/workflow/hooks'
@@ -141,9 +142,9 @@ const CurlPanel: FC<Props> = ({ nodeId, isShow, onHide, handleCurlImport }) => {
className='!w-[400px] !max-w-[400px] !p-4'
>
<div>
<textarea
<Textarea
value={inputString}
className='my-3 h-40 w-full grow rounded-lg border-0 bg-gray-100 p-3 text-sm text-gray-900 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
className='my-3 h-40 w-full grow'
onChange={e => setInputString(e.target.value)}
placeholder={t('workflow.nodes.http.curl.placeholder')!}
/>

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

@@ -144,7 +144,7 @@ const EditBody: FC<Props> = ({
onChange={handleTypeChange}
disabled={readonly}
/>
<div className='text-[13px] font-normal leading-[18px] text-gray-700'>{bodyTextMap[t]}</div>
<div className='text-[13px] font-normal leading-[18px] text-text-secondary'>{bodyTextMap[t]}</div>
</label>
))}
</div>

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

@@ -57,12 +57,12 @@ const InputItem: FC<Props> = ({
}, [onRemove])
return (
<div className={cn(className, 'hover:cursor-text hover:bg-gray-50', 'relative flex h-full')}>
<div className={cn(className, 'hover:cursor-text hover:bg-state-base-hover', 'relative flex h-full')}>
{(!readOnly)
? (
<Input
instanceId={instanceId}
className={cn(isFocus ? 'bg-gray-100' : 'bg-width', 'w-0 grow px-3 py-1')}
className={cn(isFocus ? 'bg-components-input-bg-active' : 'bg-width', 'w-0 grow px-3 py-1')}
value={value}
onChange={onChange}
readOnly={readOnly}
@@ -78,11 +78,11 @@ const InputItem: FC<Props> = ({
: <div
className="h-[18px] w-full pl-0.5 leading-[18px]"
>
{!hasValue && <div className='text-xs font-normal text-gray-300'>{placeholder}</div>}
{!hasValue && <div className='text-xs font-normal text-text-quaternary'>{placeholder}</div>}
{hasValue && (
<Input
instanceId={instanceId}
className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
value={value}
onChange={onChange}
readOnly={readOnly}

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

@@ -62,7 +62,7 @@ const KeyValueItem: FC<Props> = ({
return (
// group class name is for hover row show remove button
<div className={cn(className, 'h-min-7 group flex border-t border-gray-200')}>
<div className={cn(className, 'h-min-7 group flex border-t border-divider-regular')}>
<div className={cn('shrink-0 border-r border-divider-regular', isSupportFile ? 'w-[140px]' : 'w-1/2')}>
{!keyNotSupportVar
? (
@@ -79,7 +79,7 @@ const KeyValueItem: FC<Props> = ({
)
: (
<input
className='system-sm-regular focus:bg-gray-100! appearance-none rounded-none border-none bg-white outline-none hover:bg-gray-50 focus:ring-0'
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'
value={payload.key}
onChange={e => handleChange('key')(e.target.value)}
/>
@@ -95,7 +95,7 @@ const KeyValueItem: FC<Props> = ({
{ name: 'file', value: 'file' },
]}
readonly={readonly}
triggerClassName='rounded-none h-7'
triggerClassName='rounded-none h-7 text-text-primary'
triggerClassNameFn={isOpen => isOpen ? 'bg-state-base-hover' : 'bg-transparent'}
popupClassName='w-[80px] h-7'
/>

4
web/app/components/workflow/nodes/http/components/timeout/index.tsx
View File

@@ -28,8 +28,8 @@ const InputField: FC<{
return (
<div className="space-y-1">
<div className="flex h-[18px] items-center space-x-2">
<span className="text-[13px] font-medium text-gray-900">{title}</span>
<span className="text-xs font-normal text-gray-500">{description}</span>
<span className="text-[13px] font-medium text-text-primary">{title}</span>
<span className="text-xs font-normal text-text-tertiary">{description}</span>
</div>
<Input
type='number'

5
web/app/components/workflow/nodes/http/node.tsx
View File

@@ -13,10 +13,11 @@ const Node: FC<NodeProps<HttpNodeType>> = ({
return (
<div className='mb-1 px-3 py-1'>
<div className='flex items-start rounded-md bg-gray-100 p-1'>
<div className='flex h-4 shrink-0 items-center rounded bg-gray-25 px-1 text-xs font-semibold uppercase text-gray-700'>{method}</div>
<div className='flex items-start rounded-md bg-workflow-block-parma-bg p-1'>
<div className='flex h-4 shrink-0 items-center rounded bg-components-badge-white-to-dark px-1 text-xs font-semibold uppercase text-text-secondary'>{method}</div>
<div className='pl-1 pt-1'>
<ReadonlyInputWithSelectVar
className='text-text-secondary'
value={url}
nodeId={id}
/>

14
web/app/components/workflow/nodes/http/panel.tsx
View File

@@ -73,20 +73,20 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
<div className='flex'>
<div
onClick={showAuthorization}
className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
className={cn(!readOnly && 'cursor-pointer hover:bg-state-base-hover', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
>
{!readOnly && <Settings01 className='h-3 w-3 text-gray-500' />}
<div className='text-xs font-medium text-gray-500'>
{!readOnly && <Settings01 className='h-3 w-3 text-text-tertiary' />}
<div className='text-xs font-medium text-text-tertiary'>
{t(`${i18nPrefix}.authorization.authorization`)}
<span className='ml-1 text-gray-700'>{t(`${i18nPrefix}.authorization.${inputs.authorization.type}`)}</span>
<span className='ml-1 text-text-secondary'>{t(`${i18nPrefix}.authorization.${inputs.authorization.type}`)}</span>
</div>
</div>
<div
onClick={showCurlPanel}
className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
className={cn(!readOnly && 'cursor-pointer hover:bg-state-base-hover', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
>
{!readOnly && <FileArrow01 className='h-3 w-3 text-gray-500' />}
<div className='text-xs font-medium text-gray-500'>
{!readOnly && <FileArrow01 className='h-3 w-3 text-text-tertiary' />}
<div className='text-xs font-medium text-text-tertiary'>
{t(`${i18nPrefix}.curl.title`)}
</div>
</div>

2
web/app/components/workflow/nodes/iteration-start/index.tsx
View File

@@ -29,7 +29,7 @@ export const IterationStartNodeDumb = () => {
const { t } = useTranslation()
return (
<div className='nodrag relative left-[17px] top-[21px] z-[11] flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-white'>
<div className='nodrag relative left-[17px] top-[21px] z-[11] flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg'>
<Tooltip popupContent={t('workflow.blocks.iteration-start')} asChild={false}>
<div className='flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500'>
<RiHome5Fill className='h-3 w-3 text-text-primary-on-surface' />

2
web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
View File

@@ -89,7 +89,7 @@ const DatasetItem: FC<Props> = ({
}
<ActionButton
onClick={handleRemove}
state={ActionButtonState.Destructive}
state={isDeleteHovered ? ActionButtonState.Destructive : ActionButtonState.Default}
onMouseEnter={() => setIsDeleteHovered(true)}
onMouseLeave={() => setIsDeleteHovered(false)}
>

2
web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx
View File

@@ -70,7 +70,7 @@ const DatasetList: FC<Props> = ({
)
})
: (
<div className='cursor-default select-none rounded-lg bg-gray-50 p-3 text-center text-xs text-gray-500'>
<div className='cursor-default select-none rounded-lg bg-background-section p-3 text-center text-xs text-text-tertiary'>
{t('appDebug.datasetConfig.knowledgeTip')}
</div>
)

2
web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
View File

@@ -116,7 +116,7 @@ const RetrievalConfig: FC<Props> = ({
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 1001 }}>
<div className='w-[404px] rounded-2xl border border-gray-200 bg-white px-4 pb-4 pt-3 shadow-xl'>
<div className='w-[404px] rounded-2xl border border-components-panel-border bg-components-panel-bg px-4 pb-4 pt-3 shadow-xl'>
<ConfigRetrievalContent
datasetConfigs={
{

2
web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
View File

@@ -112,7 +112,7 @@ const Panel: FC<NodePanelProps<KnowledgeRetrievalNodeType>> = ({
onOpenFromPropsChange={handleOpenFromPropsChange}
selectedDatasets={selectedDatasets}
/>
{!readOnly && (<div className='h-3 w-px bg-gray-200'></div>)}
{!readOnly && (<div className='h-3 w-px bg-divider-regular'></div>)}
{!readOnly && (
<AddKnowledge
selectedIds={inputs.dataset_ids}

2
web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
View File

@@ -35,7 +35,7 @@ const ExtractInput: FC<Props> = ({
<div className='flex items-start space-x-1'>
<Input
instanceId='http-extract-number'
className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
value={value}
onChange={onChange}
readOnly={readOnly}

6
web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
View File

@@ -103,7 +103,7 @@ const ConfigPromptItem: FC<Props> = ({
title={
<div className='relative left-1 flex items-center'>
{payload.role === PromptRole.system
? (<div className='relative left-[-4px] text-xs font-semibold uppercase text-gray-700'>
? (<div className='relative left-[-4px] text-xs font-semibold uppercase text-text-secondary'>
SYSTEM
</div>)
: (
@@ -112,8 +112,8 @@ const ConfigPromptItem: FC<Props> = ({
allOptions={roleOptions}
options={canNotChooseSystemRole ? roleOptionsWithoutSystemRole : roleOptions}
onChange={handleChatModeMessageRoleChange}
triggerClassName='text-xs font-semibold text-gray-700 uppercase'
itemClassName='text-[13px] font-medium text-gray-700'
triggerClassName='text-xs font-semibold text-text-secondary uppercase'
itemClassName='text-[13px] font-medium text-text-secondary'
/>
)}

2
web/app/components/workflow/nodes/llm/components/config-prompt.tsx
View File

@@ -180,7 +180,7 @@ const ConfigPrompt: FC<Props> = ({
})()
return (
<div key={item.id || index} className='group relative'>
{canDrag && <DragHandle className='absolute left-[-14px] top-2 hidden h-3.5 w-3.5 text-gray-400 group-hover:block' />}
{canDrag && <DragHandle className='absolute left-[-14px] top-2 hidden h-3.5 w-3.5 text-text-quaternary group-hover:block' />}
<ConfigPromptItem
className={cn(canDrag && 'handle')}
headerClassName={cn(canDrag && 'cursor-grab')}

2
web/app/components/workflow/nodes/llm/components/resolution-picker.tsx
View File

@@ -25,7 +25,7 @@ const ResolutionPicker: FC<Props> = ({
}, [onChange])
return (
<div className='flex items-center justify-between'>
<div className='mr-2 text-xs font-medium uppercase text-gray-500'>{t(`${i18nPrefix}.resolution.name`)}</div>
<div className='mr-2 text-xs font-medium uppercase text-text-secondary'>{t(`${i18nPrefix}.resolution.name`)}</div>
<div className='flex items-center space-x-1'>
<OptionCard
title={t(`${i18nPrefix}.resolution.high`)}

8
web/app/components/workflow/nodes/llm/panel.tsx
View File

@@ -216,21 +216,21 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
{/* Memory put place examples. */}
{isChatMode && isChatModel && !!inputs.memory && (
<div className='mt-4'>
<div className='flex h-8 items-center justify-between rounded-lg bg-gray-100 pl-3 pr-2'>
<div className='flex h-8 items-center justify-between rounded-lg bg-components-input-bg-normal pl-3 pr-2'>
<div className='flex items-center space-x-1'>
<div className='text-xs font-semibold uppercase text-gray-700'>{t('workflow.nodes.common.memories.title')}</div>
<div className='text-xs font-semibold uppercase text-text-secondary'>{t('workflow.nodes.common.memories.title')}</div>
<Tooltip
popupContent={t('workflow.nodes.common.memories.tip')}
triggerClassName='w-4 h-4'
/>
</div>
<div className='flex h-[18px] items-center rounded-[5px] border border-black/8 px-1 text-xs font-semibold uppercase text-gray-500'>{t('workflow.nodes.common.memories.builtIn')}</div>
<div className='flex h-[18px] items-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 text-xs font-semibold uppercase text-text-tertiary'>{t('workflow.nodes.common.memories.builtIn')}</div>
</div>
{/* Readonly User Query */}
<div className='mt-4'>
<Editor
title={<div className='flex items-center space-x-1'>
<div className='text-xs font-semibold uppercase text-gray-700'>user</div>
<div className='text-xs font-semibold uppercase text-text-secondary'>user</div>
<Tooltip
popupContent={
<div className='max-w-[180px]'>{t('workflow.nodes.llm.roleDescription.user')}</div>

4
web/app/components/workflow/nodes/loop-start/index.tsx
View File

@@ -9,7 +9,7 @@ const LoopStartNode = ({ id, data }: NodeProps) => {
const { t } = useTranslation()
return (
<div className='nodrag group mt-1 flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-white'>
<div className='nodrag group mt-1 flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg'>
<Tooltip popupContent={t('workflow.blocks.loop-start')} asChild={false}>
<div className='flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500'>
<RiHome5Fill className='h-3 w-3 text-text-primary-on-surface' />
@@ -29,7 +29,7 @@ export const LoopStartNodeDumb = () => {
const { t } = useTranslation()
return (
<div className='nodrag relative left-[17px] top-[21px] z-[11] flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-white'>
<div className='nodrag relative left-[17px] top-[21px] z-[11] flex h-11 w-11 items-center justify-center rounded-2xl border border-workflow-block-border bg-workflow-block-bg'>
<Tooltip popupContent={t('workflow.blocks.loop-start')} asChild={false}>
<div className='flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500'>
<RiHome5Fill className='h-3 w-3 text-text-primary-on-surface' />

6
web/app/components/workflow/nodes/loop/add-block.tsx
View File

@@ -50,9 +50,9 @@ const AddBlock = ({
const renderTriggerElement = useCallback((open: boolean) => {
return (
<div className={cn(
'relative inline-flex h-8 cursor-pointer items-center rounded-lg border-[0.5px] border-gray-50 bg-white px-3 text-[13px] font-medium text-gray-700 shadow-xs hover:bg-gray-200',
`${nodesReadOnly && '!cursor-not-allowed opacity-50'}`,
open && '!bg-gray-50',
'system-sm-medium relative inline-flex h-8 cursor-pointer items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 text-components-button-secondary-text shadow-xs backdrop-blur-[5px] hover:bg-components-button-secondary-bg-hover',
`${nodesReadOnly && '!cursor-not-allowed bg-components-button-secondary-bg-disabled'}`,
open && 'bg-components-button-secondary-bg-hover',
)}>
<RiAddLine className='mr-1 h-4 w-4' />
{t('workflow.common.addBlock')}

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

@@ -31,14 +31,14 @@ const Node: FC<NodeProps<LoopNodeType>> = ({
return (
<div className={cn(
'relative h-full min-h-[90px] w-full min-w-[240px] rounded-2xl bg-[#F0F2F7]/90',
'relative h-full min-h-[90px] w-full min-w-[240px] rounded-2xl bg-workflow-canvas-workflow-bg',
)}>
<Background
id={`loop-background-${id}`}
className='!z-0 rounded-2xl'
gap={[14 / zoom, 14 / zoom]}
size={2 / zoom}
color='#E4E5E7'
color='var(--color-workflow-canvas-workflow-dot-color)'
/>
{
data._isCandidate && (

4
web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
View File

@@ -68,8 +68,8 @@ const ImportFromTool: FC<Props> = ({
return (
<div>
<div className={cn(
'flex h-6 cursor-pointer items-center rounded-md px-2 text-xs font-medium text-gray-500 hover:bg-gray-100',
open && 'bg-gray-100',
'flex h-6 cursor-pointer items-center rounded-md px-2 text-xs font-medium text-text-tertiary hover:bg-state-base-hover',
open && 'bg-state-base-hover',
)}>
{t(`${i18nPrefix}.importFromTool`)}
</div>

25
web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx
View File

@@ -24,36 +24,33 @@ const Item: FC<Props> = ({
const { t } = useTranslation()
return (
<div className='group relative rounded-lg border-[0.5px] border-gray-200 bg-white px-2.5 py-2 hover:shadow-xs'>
<div className='group relative rounded-lg bg-components-input-bg-normal px-2.5 py-2 hover:shadow-xs'>
<div className='flex justify-between'>
<div className='flex items-center'>
<Variable02 className='h-3.5 w-3.5 text-primary-500' />
<div className='ml-1 text-[13px] font-medium text-gray-900'>{payload.name}</div>
<div className='ml-2 text-xs font-normal capitalize text-gray-500'>{payload.type}</div>
<Variable02 className='h-3.5 w-3.5 text-text-accent-secondary' />
<div className='ml-1 text-[13px] font-medium text-text-primary'>{payload.name}</div>
<div className='ml-2 text-xs font-normal capitalize text-text-tertiary'>{payload.type}</div>
</div>
{payload.required && (
<div className='text-xs font-normal uppercase leading-4 text-gray-500'>{t(`${i18nPrefix}.addExtractParameterContent.required`)}</div>
<div className='text-xs font-normal uppercase leading-4 text-text-tertiary'>{t(`${i18nPrefix}.addExtractParameterContent.required`)}</div>
)}
</div>
<div className='mt-0.5 text-xs font-normal leading-[18px] text-gray-500'>{payload.description}</div>
<div className='mt-0.5 text-xs font-normal leading-[18px] text-text-tertiary'>{payload.description}</div>
<div
className='absolute right-1 top-0 hidden h-full w-[119px] items-center justify-end space-x-1 rounded-lg group-hover:flex'
style={{
background: 'linear-gradient(270deg, #FFF 49.99%, rgba(255, 255, 255, 0.00) 98.1%)',
}}
className='absolute right-0 top-0 hidden h-full w-[119px] items-center justify-end space-x-1 rounded-lg bg-gradient-to-l from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent pr-1 group-hover:flex'
>
<div
className='cursor-pointer rounded-md p-1 hover:bg-black/5'
className='cursor-pointer rounded-md p-1 hover:bg-state-base-hover'
onClick={onEdit}
>
<RiEditLine className='h-4 w-4 text-gray-500' />
<RiEditLine className='h-4 w-4 text-text-tertiary' />
</div>
<div
className='cursor-pointer rounded-md p-1 hover:bg-black/5'
className='group shrink-0 cursor-pointer rounded-md p-1 hover:!bg-state-destructive-hover'
onClick={onDelete}
>
<RiDeleteBinLine className='h-4 w-4 text-gray-500' />
<RiDeleteBinLine className='h-4 w-4 text-text-tertiary group-hover:text-text-destructive' />
</div>
</div>
</div>

4
web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
View File

@@ -146,7 +146,7 @@ const AddExtractParameter: FC<Props> = ({
<Select
defaultValue={param.type}
allowSearch={false}
bgClassName='bg-gray-100'
// bgClassName='bg-gray-100'
onSelect={v => handleParamChange('type')(v.value)}
optionClassName='capitalize'
items={
@@ -171,7 +171,7 @@ const AddExtractParameter: FC<Props> = ({
</Field>
<Field title={t(`${i18nPrefix}.addExtractParameterContent.required`)}>
<>
<div className='mb-1.5 text-xs font-normal leading-[18px] text-gray-500'>{t(`${i18nPrefix}.addExtractParameterContent.requiredContent`)}</div>
<div className='mb-1.5 text-xs font-normal leading-[18px] text-text-tertiary'>{t(`${i18nPrefix}.addExtractParameterContent.requiredContent`)}</div>
<Switch size='l' defaultValue={param.required} onChange={handleParamChange('required')} />
</>
</Field>

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

@@ -164,7 +164,7 @@ const Panel: FC<NodePanelProps<ParameterExtractorNodeType>> = ({
{!readOnly && (
<ImportFromTool onImport={handleImportFromTool} />
)}
{!readOnly && (<div className='h-3 w-px bg-gray-200'></div>)}
{!readOnly && (<div className='h-3 w-px bg-divider-regular'></div>)}
<AddExtractParameter type='add' onSave={addExtractParameter} />
</div>
)

22
web/app/components/workflow/nodes/start/components/var-item.tsx
View File

@@ -47,12 +47,12 @@ const VarItem: FC<Props> = ({
hideEditVarModal()
}, [onChange, hideEditVarModal])
return (
<div ref={ref} className='flex h-8 cursor-pointer items-center justify-between rounded-lg border border-gray-200 bg-white px-2.5 shadow-xs hover:shadow-md'>
<div ref={ref} className='flex h-8 cursor-pointer items-center justify-between rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 shadow-xs hover:shadow-md'>
<div className='flex w-0 grow items-center space-x-1'>
<Variable02 className='h-3.5 w-3.5 text-primary-500' />
<div title={payload.variable} className='max-w-[130px] shrink-0 truncate text-[13px] font-medium text-gray-700'>{payload.variable}</div>
{payload.label && (<><div className='shrink-0 text-xs font-medium text-gray-400'>·</div>
<div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-gray-500'>{payload.label as string}</div>
<Variable02 className='h-3.5 w-3.5 text-text-accent' />
<div title={payload.variable} className='max-w-[130px] shrink-0 truncate text-[13px] font-medium text-text-secondary'>{payload.variable}</div>
{payload.label && (<><div className='shrink-0 text-xs font-medium text-text-quaternary'>·</div>
<div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-text-tertiary'>{payload.label as string}</div>
</>)}
{showLegacyBadge && (
<Badge
@@ -67,18 +67,18 @@ const VarItem: FC<Props> = ({
? (
<>
{payload.required && (
<div className='mr-2 text-xs font-normal text-gray-500'>{t('workflow.nodes.start.required')}</div>
<div className='mr-2 text-xs font-normal text-text-tertiary'>{t('workflow.nodes.start.required')}</div>
)}
<InputVarTypeIcon type={payload.type} className='h-3.5 w-3.5 text-gray-500' />
<InputVarTypeIcon type={payload.type} className='h-3.5 w-3.5 text-text-tertiary' />
</>
)
: (!readonly && (
<>
<div onClick={showEditVarModal} className='mr-1 cursor-pointer rounded-md p-1 hover:bg-black/5'>
<Edit03 className='h-4 w-4 text-gray-500' />
<div onClick={showEditVarModal} className='mr-1 cursor-pointer rounded-md p-1 hover:bg-state-base-hover'>
<Edit03 className='h-4 w-4 text-text-tertiary' />
</div>
<div onClick={onRemove} className='cursor-pointer rounded-md p-1 hover:bg-black/5'>
<RiDeleteBinLine className='h-4 w-4 text-gray-500' />
<div onClick={onRemove} className='group cursor-pointer rounded-md p-1 hover:bg-state-destructive-hover'>
<RiDeleteBinLine className='h-4 w-4 text-text-tertiary group-hover:text-text-destructive' />
</div>
</>
))}

2
web/app/components/workflow/nodes/start/components/var-list.tsx
View File

@@ -46,7 +46,7 @@ const VarList: FC<Props> = ({
if (list.length === 0) {
return (
<div className='flex h-[42px] items-center justify-center rounded-md bg-gray-50 text-xs font-normal leading-[18px] text-gray-500'>
<div className='flex h-[42px] items-center justify-center rounded-md bg-components-panel-bg text-xs font-normal leading-[18px] text-text-tertiary'>
{t('workflow.nodes.start.noVarTip')}
</div>
)

10
web/app/components/workflow/nodes/start/node.tsx
View File

@@ -20,15 +20,15 @@ const Node: FC<NodeProps<StartNodeType>> = ({
<div className='mb-1 px-3 py-1'>
<div className='space-y-0.5'>
{variables.map(variable => (
<div key={variable.variable} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-gray-100 px-1 text-xs font-normal text-gray-700'>
<div key={variable.variable} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1'>
<div className='flex w-0 grow items-center space-x-1'>
<Variable02 className='h-3.5 w-3.5 shrink-0 text-primary-500' />
<span className='w-0 grow truncate text-xs font-normal text-gray-700'>{variable.variable}</span>
<Variable02 className='h-3.5 w-3.5 shrink-0 text-text-accent' />
<span className='system-xs-regular w-0 grow truncate text-text-secondary'>{variable.variable}</span>
</div>
<div className='ml-1 flex items-center space-x-1'>
{variable.required && <span className='text-xs font-normal uppercase text-gray-500'>{t(`${i18nPrefix}.required`)}</span>}
<InputVarTypeIcon type={variable.type} className='h-3 w-3 text-gray-500' />
{variable.required && <span className='system-2xs-regular-uppercase text-text-tertiary'>{t(`${i18nPrefix}.required`)}</span>}
<InputVarTypeIcon type={variable.type} className='h-3 w-3 text-text-tertiary' />
</div>
</div>
))}

16
web/app/components/workflow/nodes/start/panel.tsx
View File

@@ -64,7 +64,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.query',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
String
</div>
}
@@ -78,7 +78,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.files',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
Array[File]
</div>
}
@@ -92,7 +92,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.dialogue_count',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
Number
</div>
}
@@ -103,7 +103,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.conversation_id',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
String
</div>
}
@@ -117,7 +117,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.user_id',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
String
</div>
}
@@ -128,7 +128,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.app_id',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
String
</div>
}
@@ -139,7 +139,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.workflow_id',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
String
</div>
}
@@ -150,7 +150,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.workflow_run_id',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
String
</div>
}

4
web/app/components/workflow/nodes/template-transform/panel.tsx
View File

@@ -81,13 +81,13 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
headerRight={
<div className='flex items-center'>
<a
className='flex h-[18px] items-center space-x-0.5 text-xs font-normal text-gray-500'
className='flex h-[18px] items-center space-x-0.5 text-xs font-normal text-text-tertiary'
href="https://jinja.palletsprojects.com/en/3.1.x/templates/"
target='_blank'>
<span>{t(`${i18nPrefix}.codeSupportTip`)}</span>
<RiQuestionLine className='h-3 w-3' />
</a>
<div className='mx-1.5 h-3 w-px bg-gray-200'></div>
<div className='mx-1.5 h-3 w-px bg-divider-regular'></div>
</div>
}
value={inputs.template}

10
web/app/components/workflow/nodes/tool/node.tsx
View File

@@ -17,22 +17,22 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
<div className='mb-1 px-3 py-1'>
<div className='space-y-0.5'>
{toolConfigs.map((key, index) => (
<div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-gray-100 px-1 text-xs font-normal text-gray-700'>
<div title={key} className='max-w-[100px] shrink-0 truncate text-xs font-medium uppercase text-gray-500'>
<div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1 text-xs font-normal text-text-secondary'>
<div title={key} className='max-w-[100px] shrink-0 truncate text-xs font-medium uppercase text-text-tertiary'>
{key}
</div>
{typeof tool_configurations[key] === 'string' && (
<div title={tool_configurations[key]} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-gray-700'>
<div title={tool_configurations[key]} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-text-secondary'>
{paramSchemas?.find(i => i.name === key)?.type === FormTypeEnum.secretInput ? '********' : tool_configurations[key]}
</div>
)}
{typeof tool_configurations[key] === 'number' && (
<div title={tool_configurations[key].toString()} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-gray-700'>
<div title={tool_configurations[key].toString()} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-text-secondary'>
{tool_configurations[key]}
</div>
)}
{typeof tool_configurations[key] !== 'string' && tool_configurations[key]?.type === FormTypeEnum.modelSelector && (
<div title={tool_configurations[key].model} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-gray-700'>
<div title={tool_configurations[key].model} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-text-secondary'>
{tool_configurations[key].model}
</div>
)}

4
web/app/components/workflow/nodes/tool/panel.tsx
View File

@@ -107,14 +107,14 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
<Form
className='space-y-4'
itemClassName='!py-0'
fieldLabelClassName='!text-[13px] !font-semibold !text-gray-700 uppercase'
fieldLabelClassName='!text-[13px] !font-semibold !text-text-secondary uppercase'
value={toolSettingValue}
onChange={setToolSettingValue}
formSchemas={toolSettingSchema as any}
isEditMode={false}
showOnVariableMap={{}}
validating={false}
inputClassName='!bg-gray-50'
// inputClassName='!bg-gray-50'
readonly={readOnly}
/>
</div>

6
web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
View File

@@ -68,9 +68,9 @@ const AddVariable = ({
>
<Plus02
className={cn(
'h-2.5 w-2.5 text-gray-500',
'group-hover/addvariable:text-white',
open && '!text-white',
'h-2.5 w-2.5 text-text-tertiary',
'group-hover/addvariable:text-text-primary',
open && '!text-text-primary',
)}
/>
</div>

12
web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
View File

@@ -82,17 +82,17 @@ const NodeGroupItem = ({
<div
className={cn(
'relative rounded-lg border-[1.5px] border-transparent px-1.5 pb-1.5 pt-1',
showSelectionBorder && '!border-dashed !border-gray-300 bg-black/[0.02]',
showSelectedBorder && '!border-primary-600 !bg-primary-50',
showSelectionBorder && '!border-dashed !border-divider-subtle bg-state-base-hover',
showSelectedBorder && '!border-text-accent !bg-util-colors-blue-blue-50',
)}
onMouseEnter={() => groupEnabled && handleGroupItemMouseEnter(item.targetHandleId)}
onMouseLeave={handleGroupItemMouseLeave}
>
<div className='flex h-4 items-center justify-between text-[10px] font-medium text-gray-500'>
<div className='flex h-4 items-center justify-between text-[10px] font-medium text-text-tertiary'>
<span
className={cn(
'grow truncate uppercase',
showSelectedBorder && 'text-primary-600',
showSelectedBorder && 'text-text-accent',
)}
title={item.title}
>
@@ -100,7 +100,7 @@ const NodeGroupItem = ({
</span>
<div className='flex items-center'>
<span className='ml-2 shrink-0'>{item.type}</span>
<div className='ml-2 mr-1 h-2.5 w-[1px] bg-gray-200'></div>
<div className='ml-2 mr-1 h-2.5 w-[1px] bg-divider-regular'></div>
<AddVariable
availableVars={availableVars}
variableAssignerNodeId={item.variableAssignerNodeId}
@@ -113,7 +113,7 @@ const NodeGroupItem = ({
!item.variables.length && (
<div
className={cn(
'relative flex h-[22px] items-center justify-between space-x-1 rounded-md bg-gray-100 px-1 text-[10px] font-normal uppercase text-gray-400',
'relative flex h-[22px] items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1 text-[10px] font-normal uppercase text-text-tertiary',
(showSelectedBorder || showSelectionBorder) && '!bg-black/[0.02]',
)}
>

8
web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
View File

@@ -64,7 +64,7 @@ const NodeVariableItem = ({
<div
className={cn(
'system-xs-medium ml-0.5 shrink truncate text-text-accent',
isEnv && 'text-gray-900',
isEnv && 'text-text-primary',
isException && 'text-text-warning',
isChatVar && 'text-util-colors-teal-teal-700',
)}
@@ -77,7 +77,7 @@ const NodeVariableItem = ({
return (
<div className={cn(
'relative flex items-center gap-1 self-stretch rounded-md bg-workflow-block-parma-bg p-[3px] pl-[5px]',
showBorder && '!bg-black/[0.02]',
showBorder && '!bg-state-base-hover',
className,
)}>
<div className='flex w-0 grow items-center'>
@@ -86,12 +86,12 @@ const NodeVariableItem = ({
<>
<div className='shrink-0 p-[1px]'>
<VarBlockIcon
className='!text-gray-900'
className='!text-text-primary'
type={node.data.type}
/>
</div>
<div
className='mx-0.5 shrink-[1000] truncate text-xs font-medium text-gray-700'
className='mx-0.5 shrink-[1000] truncate text-xs font-medium text-text-secondary'
title={node?.data.title}
>
{node?.data.title}

2
web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
View File

@@ -132,7 +132,7 @@ const VarGroupItem: FC<Props> = ({
</div>
{canRemove && (
<div
className='ml-0.5 hidden cursor-pointer rounded-md p-1 text-gray-500 hover:bg-[#FEE4E2] hover:text-[#D92D20] group-hover:block'
className='ml-0.5 hidden cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive group-hover:block'
onClick={onRemove}
>
<RiDeleteBinLine

1
web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx
View File

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

30
web/app/components/workflow/nodes/variable-assigner/panel.tsx
View File

@@ -99,22 +99,20 @@ const Panel: FC<NodePanelProps<VariableAssignerNodeType>> = ({
{isEnableGroup && (
<>
<Split />
<div>
<OutputVars>
<>
{inputs.advanced_settings?.groups.map((item, index) => (
<VarItem
key={index}
name={`${item.group_name}.output`}
type={item.output_type}
description={t(`${i18nPrefix}.outputVars.varDescribe`, {
groupName: item.group_name,
})}
/>
))}
</>
</OutputVars>
</div>
<OutputVars>
<>
{inputs.advanced_settings?.groups.map((item, index) => (
<VarItem
key={index}
name={`${item.group_name}.output`}
type={item.output_type}
description={t(`${i18nPrefix}.outputVars.varDescribe`, {
groupName: item.group_name,
})}
/>
))}
</>
</OutputVars>
</>
)}
<RemoveEffectVarConfirm