hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-10 11:26:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Chore: frontend infrastructure upgrade (#16420)

Browse Source 
Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@ import {
import cn from '@/utils/classnames'
import Button from '@/app/components/base/button'
interface Props {
type Props = {
className?: string
text: string
onClick: () => void
@@ -25,7 +25,7 @@ const AddButton: FC<Props> = ({
size='medium'
onClick={onClick}
>
<RiAddLine className='mr-1 w-3.5 h-3.5' />
<RiAddLine className='mr-1 h-3.5 w-3.5' />
<div>{text}</div>
</Button>
)

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] bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg'>
<div className='flex items-center px-4 h-[34px] text-[13px] font-semibold text-gray-700 border-b-[0.5px] border-b-gray-200'>
<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'>
{t('workflow.nodes.variableAssigner.setAssignVariable')}
</div>
<div className='p-1'>

24
web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
View File

@@ -32,14 +32,14 @@ const NotFoundWarn = (props: {
return <Tooltip
popupContent={
<div className='space-y-1 text-xs'>
<h3 className='text-text-primary font-semibold'>
<h3 className='font-semibold text-text-primary'>
{title}
</h3>
<p className='text-text-secondary tracking-tight'>
<p className='tracking-tight text-text-secondary'>
{description}
</p>
<p>
<Link href={'/plugins'} className='text-text-accent tracking-tight'>
<Link href={'/plugins'} className='tracking-tight text-text-accent'>
{t('workflow.nodes.agent.linkToPlugin')}
</Link>
</p>
@@ -48,7 +48,7 @@ const NotFoundWarn = (props: {
needsDelay
>
<div>
<RiErrorWarningFill className='text-text-destructive size-4' />
<RiErrorWarningFill className='size-4 text-text-destructive' />
</div>
</Tooltip>
}
@@ -143,11 +143,11 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
return <PortalToFollowElem open={open} onOpenChange={setOpen} placement='bottom'>
<PortalToFollowElemTrigger className='w-full'>
<div
className='h-8 p-1 gap-0.5 flex items-center rounded-lg bg-components-input-bg-normal w-full hover:bg-state-base-hover-alt select-none'
className='flex h-8 w-full select-none items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 hover:bg-state-base-hover-alt'
onClick={() => setOpen(o => !o)}
>
{/* eslint-disable-next-line @next/next/no-img-element */}
{icon && <div className='flex items-center justify-center w-6 h-6'><img
{ }
{icon && <div className='flex h-6 w-6 items-center justify-center'><img
src={icon}
width={20}
height={20}
@@ -191,12 +191,12 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-10'>
<div className='bg-components-panel-bg-blur border-components-panel-border border-[0.5px] rounded-md shadow overflow-hidden w-[388px]'>
<header className='p-2 gap-1 flex'>
<div className='w-[388px] overflow-hidden rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow'>
<header className='flex gap-1 p-2'>
<SearchInput placeholder={t('workflow.nodes.agent.strategy.searchPlaceholder')} value={query} onChange={setQuery} className={'w-full'} />
<ViewTypeSelect viewType={viewType} onChange={setViewType} />
</header>
<main className="md:max-h-[300px] xl:max-h-[400px] 2xl:max-h-[564px] relative overflow-hidden flex flex-col w-full" ref={wrapElemRef}>
<main className="relative flex w-full flex-col overflow-hidden md:max-h-[300px] xl:max-h-[400px] 2xl:max-h-[564px]" ref={wrapElemRef}>
<Tools
tools={filteredTools}
viewType={viewType}
@@ -209,8 +209,8 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
plugin_unique_identifier: tool!.provider_id,
})
setOpen(false)
} }
className='max-w-none max-h-full h-full overflow-y-auto'
}}
className='h-full max-h-full max-w-none overflow-y-auto'
indexBarClassName='top-0 xl:top-36' showWorkflowEmpty={false} hasSearchText={false} />
<PluginList
wrapElemRef={wrapElemRef}

4
web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
View File

@@ -212,9 +212,9 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
/>
</div>
: <ListEmpty
icon={<Agent className='w-5 h-5 shrink-0 text-text-accent' />}
icon={<Agent className='h-5 w-5 shrink-0 text-text-accent' />}
title={t('workflow.nodes.agent.strategy.configureTip')}
description={<div className='text-text-tertiary text-xs'>
description={<div className='text-xs text-text-tertiary'>
{t('workflow.nodes.agent.strategy.configureTipDesc')} <br />
<Link href={'/'} className='text-text-accent-secondary'>
{t('workflow.nodes.agent.learnMore')}

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

@@ -67,22 +67,22 @@ const FormItem: FC<Props> = ({
if (typeof payload.label === 'object') {
const { nodeType, nodeName, variable, isChatVar } = payload.label
return (
<div className='h-full flex items-center'>
<div className='flex h-full items-center'>
{!isChatVar && (
<div className='flex items-center'>
<div className='p-[1px]'>
<VarBlockIcon type={nodeType || BlockEnum.Start} />
</div>
<div className='mx-0.5 text-xs font-medium text-gray-700 max-w-[150px] truncate' title={nodeName}>
<div className='mx-0.5 max-w-[150px] truncate text-xs font-medium text-gray-700' title={nodeName}>
{nodeName}
</div>
<Line3 className='mr-0.5'></Line3>
</div>
)}
<div className='flex items-center text-primary-600'>
{!isChatVar && <Variable02 className='w-3.5 h-3.5' />}
{isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
<div className={cn('ml-0.5 text-xs font-medium max-w-[150px] truncate', isChatVar && 'text-text-secondary')} title={variable} >
{!isChatVar && <Variable02 className='h-3.5 w-3.5' />}
{isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
<div className={cn('ml-0.5 max-w-[150px] truncate text-xs font-medium', isChatVar && 'text-text-secondary')} title={variable} >
{variable}
</div>
</div>
@@ -113,9 +113,9 @@ const FormItem: FC<Props> = ({
return (
<div className={cn(className)}>
{!isArrayLikeType && (
<div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'>
<div className='system-sm-semibold mb-1 flex h-6 items-center gap-1 text-text-secondary'>
<div className='truncate'>{typeof payload.label === 'object' ? nodeKey : payload.label}</div>
{!payload.required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>}
{!payload.required && <span className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</span>}
</div>
)}
<div className='grow'>
@@ -259,7 +259,7 @@ const FormItem: FC<Props> = ({
(value as any).length > 1
? (<RiDeleteBinLine
onClick={handleArrayItemRemove(index)}
className='mr-1 w-3.5 h-3.5 text-text-tertiary cursor-pointer'
className='mr-1 h-3.5 w-3.5 cursor-pointer text-text-tertiary'
/>)
: undefined
}
@@ -285,7 +285,7 @@ const FormItem: FC<Props> = ({
(value as any).length > 1
? (<RiDeleteBinLine
onClick={handleArrayItemRemove(index)}
className='mr-1 w-3.5 h-3.5 text-text-tertiary cursor-pointer'
className='mr-1 h-3.5 w-3.5 cursor-pointer text-text-tertiary'
/>)
: undefined
}

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

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

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

@@ -32,7 +32,7 @@ type BeforeRunFormProps = {
onRun: (submitData: Record<string, any>) => void
onStop: () => void
runningStatus: NodeRunningStatus
result?: JSX.Element
result?: React.JSX.Element
forms: FormProps[]
showSpecialResultPanel?: boolean
} & Partial<SpecialResultPanelProps>
@@ -142,15 +142,15 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
<div className='absolute inset-0 z-10 rounded-2xl pt-10' style={{
backgroundColor: 'rgba(16, 24, 40, 0.20)',
}}>
<div className='h-full rounded-2xl bg-white flex flex-col'>
<div className='shrink-0 flex justify-between items-center h-8 pl-4 pr-3 pt-3'>
<div className='text-base font-semibold text-gray-900 truncate'>
<div className='flex h-full flex-col rounded-2xl bg-white'>
<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'>
{t(`${i18nPrefix}.testRun`)} {nodeName}
</div>
<div className='ml-2 shrink-0 p-1 cursor-pointer' onClick={() => {
<div className='ml-2 shrink-0 cursor-pointer p-1' onClick={() => {
onHide()
}}>
<RiCloseLine className='w-4 h-4 text-gray-500 ' />
<RiCloseLine className='h-4 w-4 text-gray-500 ' />
</div>
</div>
{
@@ -163,7 +163,7 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
{
!showSpecialResultPanel && (
<div className='h-0 grow overflow-y-auto pb-4'>
<div className='mt-3 px-4 space-y-4'>
<div className='mt-3 space-y-4 px-4'>
{forms.map((form, index) => (
<div key={index}>
<Form
@@ -178,14 +178,14 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
<div className='mt-4 flex justify-between space-x-2 px-4' >
{isRunning && (
<div
className='p-2 rounded-lg border border-gray-200 bg-white shadow-xs cursor-pointer'
className='cursor-pointer rounded-lg border border-gray-200 bg-white p-2 shadow-xs'
onClick={onStop}
>
<StopCircle className='w-4 h-4 text-gray-500' />
<StopCircle className='h-4 w-4 text-gray-500' />
</div>
)}
<Button disabled={!isFileLoaded || isRunning} variant='primary' className='w-0 grow space-x-2' onClick={handleRun}>
{isRunning && <RiLoader2Line className='animate-spin w-4 h-4 text-white' />}
{isRunning && <RiLoader2Line className='h-4 w-4 animate-spin text-white' />}
<div>{t(`${i18nPrefix}.${isRunning ? 'running' : 'startRun'}`)}</div>
</Button>
</div>

2
web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
View File

@@ -31,7 +31,7 @@ const CodeGenerateBtn: FC<Props> = ({
<ActionButton
className='hover:bg-[#155EFF]/8'
onClick={showAutomaticTrue}>
<Generator className='w-4 h-4 text-primary-600' />
<Generator className='h-4 w-4 text-primary-600' />
</ActionButton>
{showAutomatic && (
<GetCodeGeneratorResModal

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

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

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

@@ -6,8 +6,8 @@ export { default as FieldCollapse } from './field-collapse'
type CollapseProps = {
disabled?: boolean
trigger: JSX.Element
children: JSX.Element
trigger: React.JSX.Element
children: React.JSX.Element
collapsed?: boolean
onCollapse?: (collapsed: boolean) => void
}
@@ -32,13 +32,13 @@ const Collapse = ({
}
}}
>
<div className='shrink-0 w-4 h-4'>
<div className='h-4 w-4 shrink-0'>
{
!disabled && (
<RiArrowDropRightLine
className={cn(
'w-4 h-4 text-text-tertiary',
!collapsedMerged && 'transform rotate-90',
'h-4 w-4 text-text-tertiary',
!collapsedMerged && 'rotate-90',
)}
/>
)

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

@@ -16,11 +16,11 @@ import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-tog
import type { FileEntity } from '@/app/components/base/file-uploader/types'
import FileListInLog from '@/app/components/base/file-uploader/file-list-in-log'
interface Props {
type Props = {
className?: string
title: JSX.Element | string
headerRight?: JSX.Element
children: JSX.Element
title: React.JSX.Element | string
headerRight?: React.JSX.Element
children: React.JSX.Element
minHeight?: number
value: string
isFocus: boolean
@@ -33,7 +33,7 @@ interface Props {
}[]
showFileList?: boolean
showCodeGenerator?: boolean
tip?: JSX.Element
tip?: React.JSX.Element
}
const Base: FC<Props> = ({
@@ -75,8 +75,8 @@ const Base: FC<Props> = ({
return (
<Wrap className={cn(wrapClassName)} style={wrapStyle} isInNode={isInNode} isExpand={isExpand}>
<div ref={ref} className={cn(className, isExpand && 'h-full', 'rounded-lg border', isFocus ? 'bg-components-input-bg-normal border-transparent' : 'bg-components-input-bg-hover border-components-input-border-hover overflow-hidden')}>
<div className='flex justify-between items-center h-7 pt-1 pl-3 pr-2'>
<div ref={ref} className={cn(className, isExpand && 'h-full', 'rounded-lg border', isFocus ? 'border-transparent bg-components-input-bg-normal' : 'overflow-hidden border-components-input-border-hover bg-components-input-bg-hover')}>
<div className='flex h-7 items-center justify-between pl-3 pr-2 pt-1'>
<div className='system-xs-semibold-uppercase text-text-secondary'>{title}</div>
<div className='flex items-center' onClick={(e) => {
e.nativeEvent.stopImmediatePropagation()
@@ -85,15 +85,15 @@ const Base: FC<Props> = ({
{headerRight}
{showCodeGenerator && codeLanguages && (
<div className='ml-1'>
<CodeGeneratorButton onGenerated={onGenerated} codeLanguages={codeLanguages}/>
<CodeGeneratorButton onGenerated={onGenerated} codeLanguages={codeLanguages} />
</div>
)}
{!isCopied
? (
<Clipboard className='mx-1 w-3.5 h-3.5 text-text-tertiary cursor-pointer' onClick={handleCopy} />
<Clipboard className='mx-1 h-3.5 w-3.5 cursor-pointer text-text-tertiary' onClick={handleCopy} />
)
: (
<ClipboardCheck className='mx-1 w-3.5 h-3.5 text-text-tertiary' />
<ClipboardCheck className='mx-1 h-3.5 w-3.5 text-text-tertiary' />
)
}

2
web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
View File

@@ -148,7 +148,7 @@ const CodeEditor: FC<Props> = ({
{isShowVarPicker && (
<div
ref={popupRef}
className='w-[228px] p-1 bg-white rounded-lg border border-gray-200 shadow-lg space-y-1'
className='w-[228px] space-y-1 rounded-lg border border-gray-200 bg-white p-1 shadow-lg'
style={{
position: 'fixed',
top: popupPosition.y,

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

@@ -18,11 +18,11 @@ const CODE_EDITOR_LINE_HEIGHT = 18
export type Props = {
value?: string | object
placeholder?: JSX.Element | string
placeholder?: React.JSX.Element | string
onChange?: (value: string) => void
title?: JSX.Element
title?: React.JSX.Element
language: CodeLanguage
headerRight?: JSX.Element
headerRight?: React.JSX.Element
readOnly?: boolean
isJSONStringifyBeauty?: boolean
height?: number
@@ -34,7 +34,7 @@ export type Props = {
onGenerated?: (value: string) => void
showCodeGenerator?: boolean
className?: string
tip?: JSX.Element
tip?: React.JSX.Element
}
export const languageMap = {
@@ -186,14 +186,14 @@ const CodeEditor: FC<Props> = ({
}}
onMount={handleEditorDidMount}
/>
{!outPutValue && !isFocus && <div className='pointer-events-none absolute left-[36px] top-0 leading-[18px] text-[13px] font-normal text-gray-300'>{placeholder}</div>}
{!outPutValue && !isFocus && <div className='pointer-events-none absolute left-[36px] top-0 text-[13px] font-normal leading-[18px] text-gray-300'>{placeholder}</div>}
</>
)
return (
<div className={cn(isExpand && 'h-full', className)}>
{noWrapper
? <div className='relative no-wrapper' style={{
? <div className='no-wrapper relative' style={{
height: isExpand ? '100%' : (editorContentHeight) / 2 + CODE_EDITOR_LINE_HEIGHT, // In IDE, the last line can always be in lop line. So there is some blank space in the bottom.
minHeight: CODE_EDITOR_LINE_HEIGHT,
}}>

6
web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx
View File

@@ -7,8 +7,8 @@ import Base from './base'
type Props = {
value: string
onChange: (value: string) => void
title: JSX.Element | string
headerRight?: JSX.Element
title: React.JSX.Element | string
headerRight?: React.JSX.Element
minHeight?: number
onBlur?: () => void
placeholder?: string
@@ -52,7 +52,7 @@ const TextEditor: FC<Props> = ({
onChange={e => onChange(e.target.value)}
onFocus={setIsFocus}
onBlur={handleBlur}
className='w-full h-full px-3 resize-none bg-transparent border-none focus:outline-none leading-[18px] text-[13px] font-normal text-gray-900 placeholder:text-gray-300'
className='h-full w-full resize-none border-none bg-transparent px-3 text-[13px] font-normal leading-[18px] text-gray-900 placeholder:text-gray-300 focus:outline-none'
placeholder={placeholder}
readOnly={readonly}
/>

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

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

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

@@ -25,9 +25,9 @@ const ErrorHandleOnNode = ({
return null
return (
<div className='relative pt-1 pb-2 px-3'>
<div className='relative px-3 pb-2 pt-1'>
<div className={cn(
'relative flex items-center justify-between px-[5px] h-6 bg-workflow-block-parma-bg rounded-md',
'relative flex h-6 items-center justify-between rounded-md bg-workflow-block-parma-bg px-[5px]',
data._runningStatus === NodeRunningStatus.Exception && 'border-[0.5px] border-components-badge-status-light-warning-halo bg-state-warning-hover',
)}>
<div className='system-xs-medium-uppercase text-text-tertiary'>

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

@@ -50,9 +50,9 @@ const ErrorHandle = ({
collapsed={collapsed}
onCollapse={setCollapsed}
trigger={
<div className='grow flex items-center justify-between pr-4'>
<div className='flex grow items-center justify-between pr-4'>
<div className='flex items-center'>
<div className='mr-0.5 system-sm-semibold-uppercase text-text-secondary'>
<div className='system-sm-semibold-uppercase mr-0.5 text-text-secondary'>
{t('workflow.nodes.common.errorHandle.title')}
</div>
<Tooltip popupContent={t('workflow.nodes.common.errorHandle.tip')} />

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

@@ -24,16 +24,16 @@ const ErrorHandleTip = ({
return (
<div
className='relative flex p-2 pr-[52px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xs'
className='relative flex rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 pr-[52px] shadow-xs'
>
<div
className='absolute inset-0 opacity-40 rounded-lg'
className='absolute inset-0 rounded-lg opacity-40'
style={{
background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)',
}}
></div>
<RiAlertFill className='shrink-0 mr-1 w-4 h-4 text-text-warning-secondary' />
<div className='grow system-xs-medium text-text-primary'>
<RiAlertFill className='mr-1 h-4 w-4 shrink-0 text-text-warning-secondary' />
<div className='system-xs-medium grow text-text-primary'>
{text}
</div>
</div>

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

@@ -56,16 +56,16 @@ const ErrorHandleTypeSelector = ({
size='small'
>
{selectedOption?.label}
<RiArrowDownSLine className='w-3.5 h-3.5' />
<RiArrowDownSLine className='h-3.5 w-3.5' />
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[11]'>
<div className='p-1 w-[280px] border-[0.5px] border-components-panel-border rounded-xl bg-components-panel-bg-blur shadow-lg'>
<div className='w-[280px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
{
options.map(option => (
<div
key={option.value}
className='flex p-2 pr-3 rounded-lg hover:bg-state-base-hover cursor-pointer'
className='flex cursor-pointer rounded-lg p-2 pr-3 hover:bg-state-base-hover'
onClick={(e) => {
e.stopPropagation()
onSelected(option.value)
@@ -75,12 +75,12 @@ const ErrorHandleTypeSelector = ({
<div className='mr-1 w-4 shrink-0'>
{
value === option.value && (
<RiCheckLine className='w-4 h-4 text-text-accent' />
<RiCheckLine className='h-4 w-4 text-text-accent' />
)
}
</div>
<div className='grow'>
<div className='mb-0.5 system-sm-semibold text-text-secondary'>{option.label}</div>
<div className='system-sm-semibold mb-0.5 text-text-secondary'>{option.label}</div>
<div className='system-xs-regular text-text-tertiary'>{option.description}</div>
</div>
</div>

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

@@ -5,12 +5,12 @@ const FailBranchCard = () => {
const { t } = useTranslation()
return (
<div className='pt-2 px-4'>
<div className='p-4 rounded-[10px] bg-workflow-process-bg'>
<div className='flex items-center justify-center mb-2 w-8 h-8 rounded-[10px] border-[0.5px] bg-components-card-bg shadow-lg'>
<RiMindMap className='w-5 h-5 text-text-tertiary' />
<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'>
<RiMindMap className='h-5 w-5 text-text-tertiary' />
</div>
<div className='mb-1 system-sm-medium text-text-secondary'>
<div className='system-sm-medium mb-1 text-text-secondary'>
{t('workflow.nodes.common.errorHandle.failBranch.customize')}
</div>
<div className='system-xs-regular text-text-tertiary'>

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

@@ -14,8 +14,8 @@ type Props = {
tooltip?: ReactNode
isSubTitle?: boolean
supportFold?: boolean
children?: JSX.Element | string | null
operations?: JSX.Element
children?: React.JSX.Element | string | null
operations?: React.JSX.Element
inline?: boolean
}
@@ -33,11 +33,11 @@ const Field: FC<Props> = ({
toggle: toggleFold,
}] = useBoolean(true)
return (
<div className={cn(className, inline && 'flex justify-between items-center w-full')}>
<div className={cn(className, inline && 'flex w-full items-center justify-between')}>
<div
onClick={() => supportFold && toggleFold()}
className={cn('flex justify-between items-center', supportFold && 'cursor-pointer')}>
<div className='flex items-center h-6'>
className={cn('flex items-center justify-between', supportFold && 'cursor-pointer')}>
<div className='flex h-6 items-center'>
<div className={cn(isSubTitle ? 'system-xs-medium-uppercase text-text-tertiary' : 'system-sm-semibold-uppercase text-text-secondary')}>{title}</div>
{tooltip && (
<Tooltip
@@ -50,7 +50,7 @@ const Field: FC<Props> = ({
<div className='flex'>
{operations && <div>{operations}</div>}
{supportFold && (
<RiArrowDownSLine className='w-4 h-4 text-text-tertiary cursor-pointer transition-transform' style={{ transform: fold ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
<RiArrowDownSLine className='h-4 w-4 cursor-pointer text-text-tertiary transition-transform' style={{ transform: fold ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
)}
</div>
</div>

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

@@ -35,19 +35,19 @@ const FileTypeItem: FC<Props> = ({
return (
<div
className={cn(
'rounded-lg bg-components-option-card-option-bg border border-components-option-card-option-border cursor-pointer select-none',
!isCustomSelected && 'py-2 px-3',
selected && 'border-[1.5px] bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border',
!selected && 'hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover',
'cursor-pointer select-none rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg',
!isCustomSelected && 'px-3 py-2',
selected && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg',
!selected && 'hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover',
)}
onClick={handleOnSelect}
>
{isCustomSelected
? (
<div>
<div className='flex items-center p-3 pb-2 border-b border-divider-subtle'>
<div className='flex items-center border-b border-divider-subtle p-3 pb-2'>
<FileTypeIcon className='shrink-0' type={type} size='md' />
<div className='mx-2 grow text-text-primary system-sm-medium'>{t(`appDebug.variableConfig.file.${type}.name`)}</div>
<div className='system-sm-medium mx-2 grow text-text-primary'>{t(`appDebug.variableConfig.file.${type}.name`)}</div>
<Checkbox className='shrink-0' checked={selected} />
</div>
<div className='p-3' onClick={e => e.stopPropagation()}>
@@ -63,8 +63,8 @@ const FileTypeItem: FC<Props> = ({
<div className='flex items-center'>
<FileTypeIcon className='shrink-0' type={type} size='md' />
<div className='mx-2 grow'>
<div className='text-text-primary system-sm-medium'>{t(`appDebug.variableConfig.file.${type}.name`)}</div>
<div className='mt-1 text-text-tertiary system-2xs-regular-uppercase'>{type !== SupportUploadFileTypes.custom ? FILE_EXTS[type].join(', ') : t('appDebug.variableConfig.file.custom.description')}</div>
<div className='system-sm-medium text-text-primary'>{t(`appDebug.variableConfig.file.${type}.name`)}</div>
<div className='system-2xs-regular-uppercase mt-1 text-text-tertiary'>{type !== SupportUploadFileTypes.custom ? FILE_EXTS[type].join(', ') : t('appDebug.variableConfig.file.custom.description')}</div>
</div>
<Checkbox className='shrink-0' checked={selected} />
</div>

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

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

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

@@ -10,11 +10,11 @@ export const GroupLabel: FC<GroupLabelProps> = (props) => {
</div>
}
export type Group = PropsWithChildren<{
export type GroupProps = PropsWithChildren<{
label: ReactNode
}>
export const Group: FC<Group> = (props) => {
export const Group: FC<GroupProps> = (props) => {
const { children, label } = props
return <div className={classNames('py-1')}>
{label}

4
web/app/components/workflow/nodes/_base/components/help-link.tsx
View File

@@ -21,9 +21,9 @@ const HelpLink = ({
<a
href={link}
target='_blank'
className='flex items-center justify-center mr-1 w-6 h-6'
className='mr-1 flex h-6 w-6 items-center justify-center'
>
<RiBookOpenLine className='w-4 h-4 text-gray-500' />
<RiBookOpenLine className='h-4 w-4 text-gray-500' />
</a>
</TooltipPlus>

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

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

4
web/app/components/workflow/nodes/_base/components/input-number-with-slider.tsx
View File

@@ -38,10 +38,10 @@ const InputNumberWithSlider: FC<Props> = ({
}, [onChange])
return (
<div className='flex justify-between items-center h-8 space-x-2'>
<div className='flex h-8 items-center justify-between space-x-2'>
<input
value={value}
className='shrink-0 block pl-3 w-12 h-8 appearance-none outline-none rounded-lg bg-components-input-bg-normal text-[13px] text-components-input-text-filled'
className='block h-8 w-12 shrink-0 appearance-none rounded-lg bg-components-input-bg-normal pl-3 text-[13px] text-components-input-text-filled outline-none'
type='number'
min={min}
max={max}

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

@@ -108,12 +108,12 @@ const Editor: FC<Props> = ({
{/* to patch Editor not support dynamic change editable status */}
{readOnly && <div className='absolute inset-0 z-10'></div>}
{isFocus && (
<div className={cn('absolute z-10', insertVarTipToLeft ? 'top-1.5 left-[-12px]' : ' top-[-9px] right-1')}>
<div className={cn('absolute z-10', insertVarTipToLeft ? 'left-[-12px] top-1.5' : ' right-1 top-[-9px]')}>
<Tooltip
popupContent={`${t('workflow.common.insertVarTip')}`}
>
<div className='p-0.5 rounded-[5px] shadow-lg cursor-pointer bg-white hover:bg-gray-100 border-[0.5px] border-black/5'>
<Variable02 className='w-3.5 h-3.5 text-components-button-secondary-accent-text' />
<div className='cursor-pointer rounded-[5px] border-[0.5px] border-black/5 bg-white p-0.5 shadow-lg hover:bg-gray-100'>
<Variable02 className='h-3.5 w-3.5 text-components-button-secondary-accent-text' />
</div>
</Tooltip>
</div>

2
web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
View File

@@ -40,6 +40,6 @@ export const InstallPluginButton = (props: InstallPluginButtonProps) => {
className={classNames('flex items-center', className)}
>
{!isLoading ? t('workflow.nodes.agent.pluginInstaller.install') : t('workflow.nodes.agent.pluginInstaller.installing')}
{!isLoading ? <RiInstallLine className='size-3.5 ml-1' /> : <RiLoader2Line className='size-3.5 ml-1 animate-spin' />}
{!isLoading ? <RiInstallLine className='ml-1 size-3.5' /> : <RiLoader2Line className='ml-1 size-3.5 animate-spin' />}
</Button>
}

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

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

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

@@ -37,7 +37,7 @@ const RoleItem: FC<RoleItemProps> = ({
readOnly={readonly}
value={value}
onChange={handleChange}
className='w-[200px] h-8 leading-8 px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px] placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
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'
type='text' />
</div>
)
@@ -145,16 +145,16 @@ const MemoryConfig: FC<Props> = ({
<>
{/* window size */}
<div className='flex justify-between'>
<div className='flex items-center h-8 space-x-2'>
<div className='flex h-8 items-center space-x-2'>
<Switch
defaultValue={payload?.window?.enabled}
onChange={handleWindowEnabledChange}
size='md'
disabled={readonly}
/>
<div className='text-text-tertiary system-xs-medium-uppercase'>{t(`${i18nPrefix}.windowSize`)}</div>
<div className='system-xs-medium-uppercase text-text-tertiary'>{t(`${i18nPrefix}.windowSize`)}</div>
</div>
<div className='flex items-center h-8 space-x-2'>
<div className='flex h-8 items-center space-x-2'>
<Slider
className='w-[144px]'
value={(payload.window?.size || WINDOW_SIZE_DEFAULT) as number}
@@ -167,7 +167,7 @@ const MemoryConfig: FC<Props> = ({
<Input
value={(payload.window?.size || WINDOW_SIZE_DEFAULT) as number}
wrapperClassName='w-12'
className='pr-0 appearance-none'
className='appearance-none pr-0'
type='number'
min={WINDOW_SIZE_MIN}
max={WINDOW_SIZE_MAX}
@@ -180,7 +180,7 @@ const MemoryConfig: FC<Props> = ({
</div>
{canSetRoleName && (
<div className='mt-4'>
<div className='leading-6 text-xs font-medium text-gray-500 uppercase'>{t(`${i18nPrefix}.conversationRoleName`)}</div>
<div className='text-xs font-medium uppercase leading-6 text-gray-500'>{t(`${i18nPrefix}.conversationRoleName`)}</div>
<div className='mt-1 space-y-2'>
<RoleItem
readonly={readonly}

8
web/app/components/workflow/nodes/_base/components/next-step/add.tsx
View File

@@ -74,14 +74,14 @@ const Add = ({
return (
<div
className={`
relative flex items-center px-2 h-9 rounded-lg border border-dashed border-divider-regular bg-dropzone-bg
hover:bg-dropzone-bg-hover text-xs text-text-placeholder cursor-pointer
bg-dropzone-bg hover:bg-dropzone-bg-hover relative flex h-9 cursor-pointer items-center rounded-lg border border-dashed
border-divider-regular px-2 text-xs text-text-placeholder
${open && '!bg-components-dropzone-bg-alt'}
${nodesReadOnly && '!cursor-not-allowed'}
`}
>
<div className='flex items-center justify-center mr-1.5 w-5 h-5 rounded-[5px] bg-background-default-dimm'>
<RiAddLine className='w-3 h-3' />
<div className='bg-background-default-dimm mr-1.5 flex h-5 w-5 items-center justify-center rounded-[5px]'>
<RiAddLine className='h-3 w-3' />
</div>
<div className='flex items-center uppercase'>
{tip}

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

@@ -25,14 +25,14 @@ const Container = ({
}: ContainerProps) => {
return (
<div className={cn(
'p-0.5 space-y-0.5 rounded-[10px] bg-background-section-burn',
'space-y-0.5 rounded-[10px] bg-background-section-burn p-0.5',
isFailBranch && 'border-[0.5px] border-state-warning-hover-alt bg-state-warning-hover',
)}>
{
branchName && (
<div
className={cn(
'flex items-center px-2 system-2xs-semibold-uppercase text-text-tertiary truncate',
'system-2xs-semibold-uppercase flex items-center truncate px-2 text-text-tertiary',
isFailBranch && 'text-text-warning',
)}
title={branchName}

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

@@ -81,7 +81,7 @@ const NextStep = ({
return (
<div className='flex py-1'>
<div className='shrink-0 relative flex items-center justify-center w-9 h-9 bg-background-default rounded-lg border-[0.5px] border-divider-regular shadow-xs'>
<div className='relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-divider-regular bg-background-default shadow-xs'>
<BlockIcon
type={selectedNode!.data.type}
toolIcon={toolIcon}

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

@@ -39,15 +39,15 @@ const Item = ({
return (
<div
className='relative group flex items-center last-of-type:mb-0 px-2 h-9 rounded-lg border-[0.5px] border-divider-regular bg-background-default hover:bg-background-default-hover shadow-xs text-xs text-text-secondary cursor-pointer'
className='group relative flex h-9 cursor-pointer items-center rounded-lg border-[0.5px] border-divider-regular bg-background-default px-2 text-xs text-text-secondary shadow-xs last-of-type:mb-0 hover:bg-background-default-hover'
>
<BlockIcon
type={data.type}
toolIcon={toolIcon}
className='shrink-0 mr-1.5'
className='mr-1.5 shrink-0'
/>
<div
className='grow system-xs-medium text-text-secondary truncate'
className='system-xs-medium grow truncate text-text-secondary'
title={data.title}
>
{data.title}
@@ -56,7 +56,7 @@ const Item = ({
!nodesReadOnly && (
<>
<Button
className='hidden group-hover:flex shrink-0 mr-1'
className='mr-1 hidden shrink-0 group-hover:flex'
size='small'
onClick={() => handleNodeSelect(nodeId)}
>
@@ -64,7 +64,7 @@ const Item = ({
</Button>
<div
className={cn(
'hidden shrink-0 group-hover:flex items-center',
'hidden shrink-0 items-center group-hover:flex',
open && 'flex',
)}
>

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

@@ -19,7 +19,7 @@ const Line = ({
const svgHeight = processedList[processedListLength - 1] + (processedListLength - 1) * 8
return (
<svg className='shrink-0 w-6' style={{ height: svgHeight }}>
<svg className='w-6 shrink-0' style={{ height: svgHeight }}>
{
processedList.map((item, index) => {
const prevItem = index > 0 ? processedList[index - 1] : 0

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

@@ -44,7 +44,7 @@ const ChangeItem = ({
const renderTrigger = useCallback(() => {
return (
<div className='flex items-center px-2 h-8 rounded-lg cursor-pointer hover:bg-state-base-hover'>
<div className='flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover'>
{t('workflow.panel.change')}
</div>
)
@@ -93,12 +93,12 @@ const Operator = ({
onOpenChange={onOpenChange}
>
<PortalToFollowElemTrigger onClick={() => onOpenChange(!open)}>
<Button className='p-0 w-6 h-6'>
<RiMoreFill className='w-4 h-4' />
<Button className='h-6 w-6 p-0'>
<RiMoreFill className='h-4 w-4' />
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-10'>
<div className='min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg system-md-regular text-text-secondary'>
<div className='system-md-regular min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur text-text-secondary shadow-lg'>
<div className='p-1'>
<ChangeItem
data={data}
@@ -106,7 +106,7 @@ const Operator = ({
sourceHandle={sourceHandle}
/>
<div
className='flex items-center px-2 h-8 rounded-lg cursor-pointer hover:bg-state-base-hover'
className='flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover'
onClick={() => handleNodeDisconnect(nodeId)}
>
{t('workflow.common.disconnect')}
@@ -114,7 +114,7 @@ const Operator = ({
</div>
<div className='p-1'>
<div
className='flex items-center px-2 h-8 rounded-lg cursor-pointer hover:bg-state-base-hover'
className='flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover'
onClick={() => handleNodeDelete(nodeId)}
>
{t('common.operation.delete')}

10
web/app/components/workflow/nodes/_base/components/node-control.tsx
View File

@@ -39,19 +39,19 @@ const NodeControl: FC<NodeControlProps> = ({
return (
<div
className={`
hidden group-hover:flex pb-1 absolute right-0 -top-7 h-7
absolute -top-7 right-0 hidden h-7 pb-1 group-hover:flex
${data.selected && '!flex'}
${open && '!flex'}
`}
>
<div
className='flex items-center px-0.5 h-6 bg-components-actionbar-bg rounded-lg border-[0.5px] border-components-actionbar-border backdrop-blur-[5px] shadow-md text-text-tertiary'
className='flex h-6 items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg px-0.5 text-text-tertiary shadow-md backdrop-blur-[5px]'
onClick={e => e.stopPropagation()}
>
{
canRunBySingle(data.type) && (
<div
className='flex items-center justify-center w-5 h-5 rounded-md cursor-pointer hover:bg-state-base-hover'
className='flex h-5 w-5 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover'
onClick={() => {
handleNodeDataUpdate({
id,
@@ -66,13 +66,13 @@ const NodeControl: FC<NodeControlProps> = ({
>
{
data._isSingleRun
? <Stop className='w-3 h-3' />
? <Stop className='h-3 w-3' />
: (
<Tooltip
popupContent={t('workflow.panel.runThisStep')}
asChild={false}
>
<RiPlayLargeLine className='w-3 h-3' />
<RiPlayLargeLine className='h-3 w-3' />
</Tooltip>
)
}

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

@@ -78,9 +78,9 @@ export const NodeTargetHandle = memo(({
type='target'
position={Position.Left}
className={cn(
'!w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none z-[1]',
'after:absolute after:w-0.5 after:h-2 after:left-1.5 after:top-1 after:bg-workflow-link-line-handle',
'hover:scale-125 transition-all',
'z-[1] !h-4 !w-4 !rounded-none !border-none !bg-transparent !outline-none',
'after:absolute after:left-1.5 after:top-1 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
'transition-all hover:scale-125',
data._runningStatus === NodeRunningStatus.Succeeded && 'after:bg-workflow-link-line-success-handle',
data._runningStatus === NodeRunningStatus.Failed && 'after:bg-workflow-link-line-error-handle',
data._runningStatus === NodeRunningStatus.Exception && 'after:bg-workflow-link-line-failure-handle',
@@ -167,9 +167,9 @@ export const NodeSourceHandle = memo(({
type='source'
position={Position.Right}
className={cn(
'group/handle !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none z-[1]',
'after:absolute after:w-0.5 after:h-2 after:right-1.5 after:top-1 after:bg-workflow-link-line-handle',
'hover:scale-125 transition-all',
'group/handle z-[1] !h-4 !w-4 !rounded-none !border-none !bg-transparent !outline-none',
'after:absolute after:right-1.5 after:top-1 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
'transition-all hover:scale-125',
data._runningStatus === NodeRunningStatus.Succeeded && 'after:bg-workflow-link-line-success-handle',
data._runningStatus === NodeRunningStatus.Failed && 'after:bg-workflow-link-line-error-handle',
showExceptionStatus && data._runningStatus === NodeRunningStatus.Exception && 'after:bg-workflow-link-line-failure-handle',
@@ -179,7 +179,7 @@ export const NodeSourceHandle = memo(({
isConnectable={isConnectable}
onClick={handleHandleClick}
>
<div className='hidden group-hover/handle:block absolute left-1/2 -top-1 -translate-y-full -translate-x-1/2 p-1.5 border-[0.5px] border-components-panel-border bg-components-tooltip-bg rounded-lg shadow-lg'>
<div className='absolute -top-1 left-1/2 hidden -translate-x-1/2 -translate-y-full rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 shadow-lg group-hover/handle:block'>
<div className='system-xs-regular text-text-tertiary'>
<div className=' whitespace-nowrap'>
<span className='system-xs-medium text-text-secondary'>{t('workflow.common.parallelTip.click.title')}</span>

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

@@ -19,7 +19,7 @@ const Icon = () => {
type NodeResizerProps = {
nodeId: string
nodeData: CommonNodeType
icon?: JSX.Element
icon?: React.JSX.Element
minWidth?: number
minHeight?: number
maxWidth?: number

8
web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
View File

@@ -18,22 +18,22 @@ const NodeStatusIcon = ({
<>
{
status === 'succeeded' && (
<RiCheckboxCircleFill className={cn('shrink-0 w-4 h-4 text-text-success', className)} />
<RiCheckboxCircleFill className={cn('h-4 w-4 shrink-0 text-text-success', className)} />
)
}
{
status === 'failed' && (
<RiErrorWarningLine className={cn('shrink-0 w-4 h-4 text-text-warning', className)} />
<RiErrorWarningLine className={cn('h-4 w-4 shrink-0 text-text-warning', className)} />
)
}
{
(status === 'stopped' || status === 'exception') && (
<RiAlertFill className={cn('shrink-0 w-4 h-4 text-text-warning-secondary', className)} />
<RiAlertFill className={cn('h-4 w-4 shrink-0 text-text-warning-secondary', className)} />
)
}
{
status === 'running' && (
<RiLoader2Line className={cn('shrink-0 w-4 h-4 text-text-accent animate-spin', className)} />
<RiLoader2Line className={cn('h-4 w-4 shrink-0 animate-spin text-text-accent', className)} />
)
}
</>

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

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

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

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

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 items-center px-3 w-[232px] h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'>
<div className='flex h-8 w-[232px] cursor-pointer items-center rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50'>
{t('workflow.panel.changeBlock')}
</div>
)

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

@@ -53,13 +53,13 @@ const PanelOperator = ({
<PortalToFollowElemTrigger onClick={() => handleOpenChange(!open)}>
<div
className={`
flex items-center justify-center w-6 h-6 rounded-md cursor-pointer
flex h-6 w-6 cursor-pointer items-center justify-center rounded-md
hover:bg-state-base-hover
${open && 'bg-state-base-hover'}
${triggerClassName}
`}
>
<RiMoreFill className={'w-4 h-4 text-text-tertiary'} />
<RiMoreFill className={'h-4 w-4 text-text-tertiary'} />
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[11]'>

16
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] border-[0.5px] border-gray-200 rounded-lg shadow-xl bg-white'>
<div className='w-[240px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xl'>
{
(showChangeBlock || canRunBySingle(data.type)) && (
<>
@@ -93,7 +93,7 @@ const PanelOperatorPopup = ({
canRunBySingle(data.type) && (
<div
className={`
flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer
flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-gray-700
hover:bg-gray-50
`}
onClick={() => {
@@ -126,7 +126,7 @@ const PanelOperatorPopup = ({
<>
<div className='p-1'>
<div
className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
className='flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50'
onClick={() => {
onClosePopup()
handleNodesCopy(id)
@@ -136,7 +136,7 @@ const PanelOperatorPopup = ({
<ShortcutsName keys={['ctrl', 'c']} />
</div>
<div
className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
className='flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50'
onClick={() => {
onClosePopup()
handleNodesDuplicate(id)
@@ -150,7 +150,7 @@ const PanelOperatorPopup = ({
<div className='p-1'>
<div
className={`
flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer
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
`}
onClick={() => handleNodeDelete(id)}
@@ -170,7 +170,7 @@ const PanelOperatorPopup = ({
<a
href={link}
target='_blank'
className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
className='flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-gray-700 hover:bg-gray-50'
>
{t('workflow.panel.helpLink')}
</a>
@@ -181,10 +181,10 @@ const PanelOperatorPopup = ({
}
<div className='p-1'>
<div className='px-3 py-2 text-xs text-gray-500'>
<div className='flex items-center mb-1 h-[22px] font-medium'>
<div className='mb-1 flex h-[22px] items-center font-medium'>
{t('workflow.panel.about').toLocaleUpperCase()}
</div>
<div className='mb-1 text-gray-700 leading-[18px]'>{about}</div>
<div className='mb-1 leading-[18px] text-gray-700'>{about}</div>
<div className='leading-[18px]'>
{t('workflow.panel.createdBy')} {author}
</div>

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

@@ -41,7 +41,7 @@ type Props = {
className?: string
headerClassName?: string
instanceId?: string
title: string | JSX.Element
title: string | React.JSX.Element
value: string
onChange: (value: string) => void
readOnly?: boolean
@@ -146,19 +146,19 @@ 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 && 'h-full flex flex-col', 'rounded-lg', containerClassName)}>
<div className={cn('pt-1 pl-3 pr-2 flex justify-between items-center', headerClassName)}>
<div className={cn(isFocus ? 'bg-gray-50' : 'bg-gray-100', 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('leading-4 text-xs font-semibold text-gray-700 uppercase', titleClassName)}>{title} {required && <span className='text-red-500'>*</span>}</div>
<div className={cn('text-xs font-semibold uppercase leading-4 text-gray-700', titleClassName)}>{title} {required && <span className='text-red-500'>*</span>}</div>
{titleTooltip && <Tooltip popupContent={titleTooltip} />}
</div>
<div className='flex items-center'>
<div className='leading-[18px] text-xs font-medium text-gray-500'>{value?.length || 0}</div>
<div className='text-xs font-medium leading-[18px] text-gray-500'>{value?.length || 0}</div>
{isSupportPromptGenerator && (
<PromptGeneratorBtn className='ml-[5px]' onGenerated={onGenerated} modelConfig={modelConfig} />
)}
<div className='w-px h-3 ml-2 mr-2 bg-gray-200'></div>
<div className='ml-2 mr-2 h-3 w-px bg-gray-200'></div>
{/* Operations */}
<div className='flex items-center space-x-[2px]'>
{isSupportJinja && (
@@ -171,8 +171,8 @@ const Editor: FC<Props> = ({
}
needsDelay
>
<div className={cn(editionType === EditionType.jinja2 && 'border-black/5 bg-white', 'flex h-[22px] items-center px-1.5 rounded-[5px] border border-transparent hover:border-black/5 space-x-0.5')}>
<Jinja className='w-6 h-3 text-gray-300' />
<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' />
<Switch
size='sm'
defaultValue={editionType === EditionType.jinja2}
@@ -189,24 +189,24 @@ const Editor: FC<Props> = ({
popupContent={`${t('workflow.common.insertVarTip')}`}
>
<ActionButton onClick={handleInsertVariable}>
<Variable02 className='w-4 h-4' />
<Variable02 className='h-4 w-4' />
</ActionButton>
</Tooltip>
)}
{showRemove && (
<ActionButton onClick={onRemove}>
<RiDeleteBinLine className='w-4 h-4' />
<RiDeleteBinLine className='h-4 w-4' />
</ActionButton>
)}
{!isCopied
? (
<ActionButton onClick={handleCopy}>
<Clipboard className='w-4 h-4' />
<Clipboard className='h-4 w-4' />
</ActionButton>
)
: (
<ActionButton>
<ClipboardCheck className='w-4 h-4' />
<ClipboardCheck className='h-4 w-4' />
</ActionButton>
)
}
@@ -217,10 +217,10 @@ const Editor: FC<Props> = ({
</div>
{/* Min: 80 Max: 560. Header: 24 */}
<div className={cn('pb-2', isExpand && 'flex flex-col grow')}>
<div className={cn('pb-2', isExpand && 'flex grow flex-col')}>
{!(isSupportJinja && editionType === EditionType.jinja2)
? (
<div className={cn(isExpand ? 'grow' : 'max-h-[536px]', 'relative px-3 min-h-[56px] overflow-y-auto', editorContainerClassName)}>
<div className={cn(isExpand ? 'grow' : 'max-h-[536px]', 'relative min-h-[56px] overflow-y-auto px-3', editorContainerClassName)}>
<PromptEditor
key={controlPromptEditorRerenderKey}
placeholderClassName={placeholderClassName}
@@ -274,7 +274,7 @@ const Editor: FC<Props> = ({
</div>
)
: (
<div className={cn(isExpand ? 'grow' : 'max-h-[536px]', 'relative px-3 min-h-[56px] overflow-y-auto', editorContainerClassName)}>
<div className={cn(isExpand ? 'grow' : 'max-h-[536px]', 'relative min-h-[56px] overflow-y-auto px-3', editorContainerClassName)}>
<CodeEditor
availableVars={nodesOutputVars || []}
varList={varList}

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

@@ -35,7 +35,7 @@ const ReadonlyInputWithSelectVar: FC<Props> = ({
return VAR_PLACEHOLDER
})
const html: JSX.Element[] = strWithVarPlaceholder.split(VAR_PLACEHOLDER).map((str, index) => {
const html: React.JSX.Element[] = strWithVarPlaceholder.split(VAR_PLACEHOLDER).map((str, index) => {
if (!vars[index])
return <span className='relative top-[-3px] leading-[16px]' key={index}>{str}</span>
@@ -48,7 +48,7 @@ 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 px-1.5 rounded-[5px] bg-white'>
<div className=' inline-flex h-[16px] items-center rounded-[5px] bg-white px-1.5'>
{!isEnv && !isChatVar && (
<div className='flex items-center'>
<div className='p-[1px]'>
@@ -57,15 +57,15 @@ const ReadonlyInputWithSelectVar: FC<Props> = ({
type={node?.type || BlockEnum.Start}
/>
</div>
<div className='max-w-[60px] mx-0.5 text-xs font-medium text-gray-700 truncate' title={node?.title}>{node?.title}</div>
<div className='mx-0.5 max-w-[60px] truncate text-xs font-medium text-gray-700' title={node?.title}>{node?.title}</div>
<Line3 className='mr-0.5'></Line3>
</div>
)}
<div className='flex items-center text-primary-600'>
{!isEnv && !isChatVar && <Variable02 className='shrink-0 w-3.5 h-3.5' />}
{isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
{isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
<div className={cn('max-w-[50px] ml-0.5 text-xs font-medium truncate', (isEnv || isChatVar) && 'text-gray-900')} title={varName}>{varName}</div>
{!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>
</div>
</span>)

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

@@ -15,10 +15,10 @@ const Remove: FC<Props> = ({
}) => {
return (
<div
className={cn(className, 'p-1 cursor-pointer rounded-md hover:bg-black/5 text-gray-500 hover:text-gray-800')}
className={cn(className, 'cursor-pointer rounded-md p-1 text-gray-500 hover:bg-black/5 hover:text-gray-800')}
onClick={onClick}
>
<RiDeleteBinLine className='w-4 h-4' />
<RiDeleteBinLine className='h-4 w-4' />
</div>
)
}

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

@@ -40,10 +40,10 @@ const RetryOnNode = ({
return (
<div className='px-3'>
<div className={cn(
'flex items-center justify-between px-[5px] py-1 bg-workflow-block-parma-bg border-[0.5px] border-transparent rounded-md system-xs-medium-uppercase text-text-tertiary',
isRunning && 'bg-state-accent-hover border-state-accent-active text-text-accent',
isSuccessful && 'bg-state-success-hover border-state-success-active text-text-success',
(isException || isFailed) && 'bg-state-warning-hover border-state-warning-active text-text-warning',
'system-xs-medium-uppercase flex items-center justify-between rounded-md border-[0.5px] border-transparent bg-workflow-block-parma-bg px-[5px] py-1 text-text-tertiary',
isRunning && 'border-state-accent-active bg-state-accent-hover text-text-accent',
isSuccessful && 'border-state-success-active bg-state-success-hover text-text-success',
(isException || isFailed) && 'border-state-warning-active bg-state-warning-hover text-text-warning',
)}>
<div className='flex items-center'>
{
@@ -54,7 +54,7 @@ const RetryOnNode = ({
{
isRunning && (
<>
<RiLoader2Line className='animate-spin mr-1 w-3.5 h-3.5' />
<RiLoader2Line className='mr-1 h-3.5 w-3.5 animate-spin' />
{t('workflow.nodes.common.retry.retrying')}
</>
)
@@ -62,7 +62,7 @@ const RetryOnNode = ({
{
isSuccessful && (
<>
<RiCheckboxCircleFill className='mr-1 w-3.5 h-3.5' />
<RiCheckboxCircleFill className='mr-1 h-3.5 w-3.5' />
{t('workflow.nodes.common.retry.retrySuccessful')}
</>
)
@@ -70,7 +70,7 @@ const RetryOnNode = ({
{
(isFailed || isException) && (
<>
<RiAlertFill className='mr-1 w-3.5 h-3.5' />
<RiAlertFill className='mr-1 h-3.5 w-3.5' />
{t('workflow.nodes.common.retry.retryFailed')}
</>
)

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

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

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

@@ -11,7 +11,7 @@ type Item = {
}
type Props = {
className?: string
trigger?: JSX.Element
trigger?: React.JSX.Element
DropDownIcon?: any
noLeft?: boolean
options: Item[]
@@ -65,14 +65,14 @@ const TypeSelector: FC<Props> = ({
: (
<div
onClick={toggleShow}
className={cn(showOption && 'bg-black/5', 'flex items-center h-5 pl-1 pr-0.5 rounded-md text-xs font-semibold text-gray-700 cursor-pointer hover:bg-black/5')}>
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>
{!readonly && <DropDownIcon className='w-3 h-3 ' />}
{!readonly && <DropDownIcon className='h-3 w-3 ' />}
</div>
)}
{(showOption && !readonly) && (
<div className={cn('absolute z-10 top-[24px] w-[120px] p-1 border border-gray-200 shadow-lg rounded-lg bg-white select-none', popupClassName)}>
<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)}>
{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 items-center h-[30px] justify-between min-w-[44px] px-3 rounded-lg cursor-pointer 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-gray-700 hover:bg-gray-50')}
>
<div>{item.label}</div>
{showChecked && item.value === value && <Check className='text-primary-600 w-4 h-4' />}
{showChecked && item.value === value && <Check className='h-4 w-4 text-primary-600' />}
</div>
))
}

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

@@ -12,12 +12,12 @@ export type SettingItemProps = PropsWithChildren<{
export const SettingItem = memo(({ label, children, status, tooltip }: SettingItemProps) => {
const indicator: ComponentProps<typeof Indicator>['color'] = status === 'error' ? 'red' : status === 'warning' ? 'yellow' : undefined
const needTooltip = ['error', 'warning'].includes(status as any)
return <div className='flex items-center justify-between bg-workflow-block-parma-bg rounded-md py-1 px-1.5 space-x-1 text-xs font-normal relative'>
return <div className='relative flex items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1.5 py-1 text-xs font-normal'>
<div className={classNames('shrink-0 truncate text-text-tertiary system-xs-medium-uppercase', !!children && 'max-w-[100px]')}>
{label}
</div>
<Tooltip popupContent={tooltip} disabled={!needTooltip}>
<div className='truncate text-right system-xs-medium text-text-secondary'>
<div className='system-xs-medium truncate text-right text-text-secondary'>
{children}
</div>
</Tooltip>

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

@@ -3,7 +3,7 @@ import type { FC } from 'react'
import React from 'react'
import cn from '@/utils/classnames'
interface Props {
type Props = {
className?: string
}

4
web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
View File

@@ -31,7 +31,7 @@ const SupportVarInput: FC<Props> = ({
return (
<div
className={
cn(wrapClassName, 'flex w-full h-full')
cn(wrapClassName, 'flex h-full w-full')
} onClick={onFocus}
>
{(isFocus && !readonly && children)
@@ -40,7 +40,7 @@ const SupportVarInput: FC<Props> = ({
)
: (
<div
className={cn(textClassName, 'w-0 grow h-full whitespace-nowrap truncate')}
className={cn(textClassName, 'h-full w-0 grow truncate whitespace-nowrap')}
title={value}
dangerouslySetInnerHTML={{
__html: withHightContent,

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

@@ -61,7 +61,7 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
}
const { t } = useTranslation()
return <Tooltip popupContent={!isShow && !isShowUpdateModal && tooltip} triggerMethod='hover'>
<div className={cn('w-fit flex items-center justify-center', className)} onClick={e => e.stopPropagation()}>
<div className={cn('flex w-fit items-center justify-center', className)} onClick={e => e.stopPropagation()}>
{isShowUpdateModal && pluginDetail && <PluginMutationModel
onCancel={hideUpdateModal}
plugin={pluginManifestToCardPluginProps({
@@ -81,14 +81,14 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
</>}
modalBottomLeft={
<Link
className='flex justify-center items-center gap-1'
className='flex items-center justify-center gap-1'
href={`${marketplaceUrlPrefix}/plugins/${pluginDetail.declaration.author}/${pluginDetail.declaration.name}`}
target='_blank'
>
<span className='text-text-accent system-xs-regular text-xs'>
<span className='system-xs-regular text-xs text-text-accent'>
{t('workflow.nodes.agent.installPlugin.changelog')}
</span>
<RiExternalLinkLine className='text-text-accent size-3' />
<RiExternalLinkLine className='size-3 text-text-accent' />
</Link>
}
/>}
@@ -107,14 +107,14 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
trigger={
<Badge
className={cn(
'mx-1 hover:bg-state-base-hover flex',
'mx-1 flex hover:bg-state-base-hover',
isShow && 'bg-state-base-hover',
)}
uppercase={true}
text={
<>
<div>{pluginDetail.version}</div>
<RiArrowLeftRightLine className='ml-1 w-3 h-3 text-text-tertiary' />
<RiArrowLeftRightLine className='ml-1 h-3 w-3 text-text-tertiary' />
</>
}
hasRedCornerMark={true}

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

@@ -33,8 +33,8 @@ export const TitleInput = memo(({
value={localValue}
onChange={e => setLocalValue(e.target.value)}
className={`
grow mr-2 px-1 h-7 text-text-primary system-xl-semibold rounded-md border border-transparent appearance-none outline-none
focus:shadow-xs min-w-0
system-xl-semibold mr-2 h-7 min-w-0 grow appearance-none rounded-md border border-transparent px-1 text-text-primary
outline-none focus:shadow-xs
`}
placeholder={t('workflow.common.addTitle') || ''}
onBlur={handleBlur}
@@ -63,8 +63,8 @@ export const DescriptionInput = memo(({
return (
<div
className={`
group flex px-2 py-[5px] max-h-[60px] rounded-lg overflow-y-auto
leading-0 bg-components-panel-bg
leading-0 group flex max-h-[60px] overflow-y-auto rounded-lg bg-components-panel-bg
px-2 py-[5px]
${focus && '!shadow-xs'}
`}
>
@@ -75,9 +75,9 @@ export const DescriptionInput = memo(({
onFocus={handleFocus}
onBlur={handleBlur}
className={`
w-full text-xs text-gray-900 leading-[18px] bg-transparent
appearance-none outline-none resize-none
placeholder:text-gray-400 caret-[#295EFF]
w-full resize-none appearance-none bg-transparent text-xs
leading-[18px] text-gray-900 caret-[#295EFF]
outline-none placeholder:text-gray-400
`}
placeholder={t('workflow.common.addDescription') || ''}
autoSize

2
web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx
View File

@@ -23,7 +23,7 @@ const ExpandBtn: FC<Props> = ({
const Icon = isExpand ? RiCollapseDiagonalLine : RiExpandDiagonalLine
return (
<ActionButton onClick={handleToggle}>
<Icon className='w-4 h-4' />
<Icon className='h-4 w-4' />
</ActionButton>
)
}

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

@@ -19,7 +19,7 @@ import Tooltip from '@/app/components/base/tooltip'
import cn from '@/utils/classnames'
import { isExceptionVariable } from '@/app/components/workflow/utils'
interface VariableTagProps {
type VariableTagProps = {
valueSelector: ValueSelector
varType: VarType
isShort?: boolean
@@ -51,7 +51,7 @@ const VariableTag = ({
const { t } = useTranslation()
return (
<Tooltip popupContent={!isValid && t('workflow.errorMsg.invalidVariable')}>
<div className={cn('inline-flex items-center px-1.5 max-w-full h-6 text-xs rounded-md border-[0.5px] border-[rgba(16, 2440,0.08)] bg-white 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] bg-white px-1.5 text-xs shadow-xs',
!isValid && 'border-red-400 !bg-[#FEF3F2]',
)}>
{(!isEnv && !isChatVar && <>
@@ -61,30 +61,30 @@ const VariableTag = ({
type={BlockEnum.Start}
/>
<div
className='max-w-[60px] truncate text-text-secondary font-medium'
className='max-w-[60px] truncate font-medium text-text-secondary'
title={node?.data.title}
>
{node?.data.title}
</div>
</>
)}
<Line3 className='shrink-0 mx-0.5' />
<Variable02 className={cn('shrink-0 mr-0.5 w-3.5 h-3.5 text-text-accent', isException && 'text-text-warning')} />
<Line3 className='mx-0.5 shrink-0' />
<Variable02 className={cn('mr-0.5 h-3.5 w-3.5 shrink-0 text-text-accent', isException && 'text-text-warning')} />
</>)}
{isEnv && <Env className='shrink-0 mr-0.5 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
{isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
{isEnv && <Env className='mr-0.5 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('truncate ml-0.5 text-text-accent font-medium', (isEnv || isChatVar) && 'text-text-secondary', isException && 'text-text-warning')}
className={cn('ml-0.5 truncate font-medium text-text-accent', (isEnv || isChatVar) && 'text-text-secondary', isException && 'text-text-warning')}
title={variableName}
>
{variableName}
</div>
{
!isShort && varType && (
<div className='shrink-0 ml-0.5 text-text-tertiary'>{capitalize(varType)}</div>
<div className='ml-0.5 shrink-0 text-text-tertiary'>{capitalize(varType)}</div>
)
}
{!isValid && <RiErrorWarningFill className='ml-0.5 w-3 h-3 text-[#D92D20]' />}
{!isValid && <RiErrorWarningFill className='ml-0.5 h-3 w-3 text-[#D92D20]' />}
</div>
</Tooltip>
)

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

@@ -19,7 +19,7 @@ const AssignedVarReferencePopup: FC<Props> = ({
const { t } = useTranslation()
// max-h-[300px] overflow-y-auto todo: use portal to handle long list
return (
<div className='p-1 bg-components-panel-bg-bur rounded-lg border-[0.5px] border-components-panel-border shadow-lg w-[352px]' >
<div className='bg-components-panel-bg-bur w-[352px] rounded-lg border-[0.5px] border-components-panel-border p-1 shadow-lg' >
{(!vars || vars.length === 0)
? <ListEmpty
title={t('workflow.nodes.assigner.noAssignedVars') || ''}

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

@@ -48,7 +48,7 @@ const ConstantField: FC<Props> = ({
{schema.type === FormTypeEnum.textNumber && (
<input
type='number'
className='w-full h-8 leading-8 p-2 rounded-lg bg-gray-100 text-[13px] font-normal text-gray-900 placeholder:text-gray-400 focus:outline-none overflow-hidden'
className='h-8 w-full overflow-hidden rounded-lg bg-gray-100 p-2 text-[13px] font-normal leading-8 text-gray-900 placeholder:text-gray-400 focus:outline-none'
value={value}
onChange={handleStaticChange}
readOnly={readonly}

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

@@ -11,7 +11,7 @@ import type { VarType } from '@/app/components/workflow/types'
import { checkKeys } from '@/utils/var'
import Toast from '@/app/components/base/toast'
interface Props {
type Props = {
readonly: boolean
outputs: OutputVar
outputKeyOrders: string[]
@@ -98,7 +98,7 @@ const OutputVarList: FC<Props> = ({
onChange={handleVarTypeChange(index)}
/>
<RemoveButton
className='!p-2 !bg-gray-100 hover:!bg-gray-200'
className='!bg-gray-100 !p-2 hover:!bg-gray-200'
onClick={handleVarRemove(index)}
/>
</div>

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

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

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

@@ -278,7 +278,7 @@ const VarReferencePicker: FC<Props> = ({
if (readonly)
return
!isConstant ? setOpen(!open) : setControlFocus(Date.now())
}} className='!flex group/picker-trigger-wrap relative'>
}} className='group/picker-trigger-wrap relative !flex'>
<>
{isAddBtnTrigger
? (
@@ -286,19 +286,19 @@ const VarReferencePicker: FC<Props> = ({
<AddButton onClick={() => { }}></AddButton>
</div>
)
: (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'relative group/wrap flex items-center w-full h-8', !isSupportConstantValue && 'p-1 rounded-lg bg-components-input-bg-normal', isInTable && 'bg-transparent border-none', readonly && 'bg-components-input-bg-disabled')}>
: (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'group/wrap relative flex h-8 w-full items-center', !isSupportConstantValue && 'rounded-lg bg-components-input-bg-normal p-1', isInTable && 'border-none bg-transparent', readonly && 'bg-components-input-bg-disabled')}>
{isSupportConstantValue
? <div onClick={(e) => {
e.stopPropagation()
setOpen(false)
setControlFocus(Date.now())
}} className='h-full mr-1 flex items-center space-x-1'>
}} className='mr-1 flex h-full items-center space-x-1'>
<TypeSelector
noLeft
trigger={
<div className='flex items-center h-8 px-2 radius-md bg-components-input-bg-normal'>
<div className='mr-1 system-sm-regular text-components-input-text-filled'>{varKindTypes.find(item => item.value === varKindType)?.label}</div>
<RiArrowDownSLine className='w-4 h-4 text-text-quaternary' />
<div className='radius-md flex h-8 items-center bg-components-input-bg-normal px-2'>
<div className='system-sm-regular mr-1 text-components-input-text-filled'>{varKindTypes.find(item => item.value === varKindType)?.label}</div>
<RiArrowDownSLine className='h-4 w-4 text-text-quaternary' />
</div>
}
popupClassName='top-8'
@@ -310,7 +310,7 @@ const VarReferencePicker: FC<Props> = ({
/>
</div>
: (!hasValue && <div className='ml-1.5 mr-1'>
<Variable02 className={`w-4 h-4 ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'}`} />
<Variable02 className={`h-4 w-4 ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'}`} />
</div>)}
{isConstant
? (
@@ -328,43 +328,43 @@ const VarReferencePicker: FC<Props> = ({
return
!isConstant ? setOpen(!open) : setControlFocus(Date.now())
}}
className='grow h-full'
className='h-full grow'
>
<div ref={isSupportConstantValue ? triggerRef : null} className={cn('h-full', isSupportConstantValue && 'flex items-center pl-1 py-1 rounded-lg bg-gray-100')}>
<div ref={isSupportConstantValue ? triggerRef : null} className={cn('h-full', isSupportConstantValue && 'flex items-center rounded-lg bg-gray-100 py-1 pl-1')}>
<Tooltip popupContent={!isValidVar && hasValue && t('workflow.errorMsg.invalidVariable')}>
<div className={cn('h-full items-center px-1.5 rounded-[5px]', hasValue ? 'bg-white inline-flex' : 'flex')}>
<div className={cn('h-full items-center rounded-[5px] px-1.5', hasValue ? 'inline-flex bg-white' : 'flex')}>
{hasValue
? (
<>
{isShowNodeName && !isEnv && !isChatVar && (
<div className='flex items-center'>
<div className='px-[1px] h-3'>
<div className='h-3 px-[1px]'>
{outputVarNode?.type && <VarBlockIcon
className='!text-gray-900'
type={outputVarNode.type}
/>}
</div>
<div className='mx-0.5 text-xs font-medium text-gray-700 truncate' title={outputVarNode?.title} style={{
<div className='mx-0.5 truncate text-xs font-medium text-gray-700' title={outputVarNode?.title} style={{
maxWidth: maxNodeNameWidth,
}}>{outputVarNode?.title}</div>
<Line3 className='mr-0.5'></Line3>
</div>
)}
<div className='flex items-center text-primary-600'>
{!hasValue && <Variable02 className='w-3.5 h-3.5' />}
{isEnv && <Env className='w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
{isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
<div className={cn('ml-0.5 text-xs font-medium truncate', isEnv && '!text-text-secondary', isChatVar && 'text-util-colors-teal-teal-700', isException && 'text-text-warning')} title={varName} style={{
{!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' />}
<div className={cn('ml-0.5 truncate text-xs font-medium', isEnv && '!text-text-secondary', isChatVar && 'text-util-colors-teal-teal-700', isException && 'text-text-warning')} title={varName} style={{
maxWidth: maxVarNameWidth,
}}>{varName}</div>
</div>
<div className='ml-0.5 capitalize truncate text-text-tertiary text-center system-xs-regular' title={type} style={{
<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 w-3 h-3 text-[#D92D20]' />}
{!isValidVar && <RiErrorWarningFill className='ml-0.5 h-3 w-3 text-[#D92D20]' />}
</>
)
: <div className={`overflow-hidden ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'} text-ellipsis system-sm-regular`}>{placeholder ?? t('workflow.common.setVarValuePlaceholder')}</div>}
: <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>}
</div>
</Tooltip>
</div>
@@ -372,10 +372,10 @@ const VarReferencePicker: FC<Props> = ({
</VarPickerWrap>
)}
{(hasValue && !readonly && !isInTable) && (<div
className='invisible group-hover/wrap:visible absolute h-5 right-1 top-[50%] translate-y-[-50%] group p-1 rounded-md hover:bg-black/5 cursor-pointer'
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'
onClick={handleClearVar}
>
<RiCloseLine className='w-3.5 h-3.5 text-gray-500 group-hover:text-gray-800' />
<RiCloseLine className='h-3.5 w-3.5 text-gray-500 group-hover:text-gray-800' />
</div>)}
{!hasValue && valueTypePlaceHolder && (
<Badge
@@ -387,7 +387,7 @@ const VarReferencePicker: FC<Props> = ({
</div>)}
{!readonly && isInTable && (
<RemoveButton
className='group-hover/picker-trigger-wrap:block hidden absolute right-1 top-0.5'
className='absolute right-1 top-0.5 hidden group-hover/picker-trigger-wrap:block'
onClick={() => onRemove?.()}
/>
)}

6
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='p-1 bg-white rounded-lg border border-gray-200 shadow-lg space-y-1' style={{
<div className='space-y-1 rounded-lg border border-gray-200 bg-white p-1 shadow-lg' style={{
width: itemWidth || 228,
}}>
{((!vars || vars.length === 0) && popupFor)
@@ -35,7 +35,7 @@ const VarReferencePopup: FC<Props> = ({
? (
<ListEmpty
title={t('workflow.variableReference.noAvailableVars') || ''}
description={<div className='text-text-tertiary system-xs-regular'>
description={<div className='system-xs-regular text-text-tertiary'>
{t('workflow.variableReference.noVarsForOperation')}
</div>}
/>
@@ -43,7 +43,7 @@ const VarReferencePopup: FC<Props> = ({
: (
<ListEmpty
title={t('workflow.variableReference.noAssignedVars') || ''}
description={<div className='text-text-tertiary system-xs-regular'>
description={<div className='system-xs-regular text-text-tertiary'>
{t('workflow.variableReference.assignedVarsDescription')}
<a target='_blank' rel='noopener noreferrer'
className='text-text-accent-secondary'

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

@@ -106,28 +106,28 @@ const Item: FC<ItemProps> = ({
className={cn(
isObj ? ' pr-1' : 'pr-[18px]',
isHovering && (isObj ? 'bg-primary-50' : 'bg-state-base-hover'),
'relative w-full flex items-center h-6 pl-3 rounded-md cursor-pointer')
'relative flex h-6 w-full cursor-pointer items-center rounded-md pl-3')
}
onClick={handleChosen}
onMouseDown={e => e.preventDefault()}
>
<div className='flex items-center w-0 grow'>
{!isEnv && !isChatVar && <Variable02 className={cn('shrink-0 w-3.5 h-3.5 text-text-accent', isException && 'text-text-warning')} />}
{isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
{isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
<div className='flex w-0 grow items-center'>
{!isEnv && !isChatVar && <Variable02 className={cn('h-3.5 w-3.5 shrink-0 text-text-accent', isException && 'text-text-warning')} />}
{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' />}
{!isEnv && !isChatVar && (
<div title={itemData.variable} className='ml-1 w-0 grow truncate text-text-secondary system-sm-medium'>{itemData.variable}</div>
<div title={itemData.variable} className='system-sm-medium ml-1 w-0 grow truncate text-text-secondary'>{itemData.variable}</div>
)}
{isEnv && (
<div title={itemData.variable} className='ml-1 w-0 grow truncate text-text-secondary system-sm-medium'>{itemData.variable.replace('env.', '')}</div>
<div title={itemData.variable} className='system-sm-medium ml-1 w-0 grow truncate text-text-secondary'>{itemData.variable.replace('env.', '')}</div>
)}
{isChatVar && (
<div title={itemData.des} className='ml-1 w-0 grow truncate text-text-secondary system-sm-medium'>{itemData.variable.replace('conversation.', '')}</div>
<div title={itemData.des} className='system-sm-medium ml-1 w-0 grow truncate text-text-secondary'>{itemData.variable.replace('conversation.', '')}</div>
)}
</div>
<div className='ml-1 shrink-0 text-xs font-normal text-text-tertiary capitalize'>{itemData.type}</div>
<div className='ml-1 shrink-0 text-xs font-normal capitalize text-text-tertiary'>{itemData.type}</div>
{isObj && (
<ChevronRight className={cn('ml-0.5 w-3 h-3 text-text-quaternary', isHovering && 'text-text-tertiary')} />
<ChevronRight className={cn('ml-0.5 h-3 w-3 text-text-quaternary', isHovering && 'text-text-tertiary')} />
)}
</div>
</PortalToFollowElemTrigger>
@@ -202,11 +202,11 @@ const ObjectChildren: FC<ObjectChildrenProps> = ({
}, [isItemHovering])
// absolute top-[-2px]
return (
<div ref={itemRef} className=' bg-white rounded-lg border border-gray-200 shadow-lg space-y-1' style={{
<div ref={itemRef} className=' space-y-1 rounded-lg border border-gray-200 bg-white shadow-lg' style={{
right: itemWidth ? itemWidth - 10 : 215,
minWidth: 252,
}}>
<div className='flex items-center h-[22px] px-3 text-xs font-normal text-gray-700'><span className='text-gray-500'>{title}.</span>{currObjPath.join('.')}</div>
<div className='flex h-[22px] items-center px-3 text-xs font-normal text-gray-700'><span className='text-gray-500'>{title}.</span>{currObjPath.join('.')}</div>
{
(data && data.length > 0)
&& data.map((v, i) => (
@@ -278,7 +278,7 @@ const VarReferenceVars: FC<Props> = ({
{
!hideSearch && (
<>
<div className={cn('mb-1 mx-2 mt-2', searchBoxClassName)} onClick={e => e.stopPropagation()}>
<div className={cn('mx-2 mb-1 mt-2', searchBoxClassName)} onClick={e => e.stopPropagation()}>
<Input
showLeftIcon
showClearIcon
@@ -289,7 +289,7 @@ const VarReferenceVars: FC<Props> = ({
autoFocus
/>
</div>
<div className='h-[0.5px] bg-black/5 relative left-[-4px]' style={{
<div className='relative left-[-4px] h-[0.5px] bg-black/5' style={{
width: 'calc(100% + 8px)',
}}></div>
</>
@@ -303,7 +303,7 @@ const VarReferenceVars: FC<Props> = ({
filteredVars.map((item, i) => (
<div key={i}>
<div
className='leading-[22px] px-3 text-text-tertiary system-xs-medium-uppercase truncate'
className='system-xs-medium-uppercase truncate px-3 leading-[22px] text-text-tertiary'
title={item.title}
>{item.title}</div>
{item.vars.map((v, j) => (
@@ -322,7 +322,7 @@ const VarReferenceVars: FC<Props> = ({
</div>))
}
</div>
: <div className='pl-3 leading-[18px] text-xs font-medium text-gray-500 uppercase'>{t('workflow.common.noVar')}</div>}
: <div className='pl-3 text-xs font-medium uppercase leading-[18px] text-gray-500'>{t('workflow.common.noVar')}</div>}
</ >
)
}

14
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 items-center h-8 justify-between px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px]'>
<div className='capitalize grow w-0 truncate' title={value}>{value}</div>
<RiArrowDownSLine className='shrink-0 w-3.5 h-3.5 text-gray-700' />
<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='w-0 grow truncate capitalize' title={value}>{value}</div>
<RiArrowDownSLine className='h-3.5 w-3.5 shrink-0 text-gray-700' />
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{
zIndex: 100,
}}>
<div className='w-[120px] p-1 bg-white rounded-lg shadow-sm'>
<div className='w-[120px] rounded-lg bg-white p-1 shadow-sm'>
{TYPES.map(type => (
<div
key={type}
className='flex items-center h-[30px] justify-between pl-3 pr-2 rounded-lg hover:bg-gray-100 text-gray-900 text-[13px] cursor-pointer'
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'
onClick={handleChange(type)}
>
<div className='w-0 grow capitalize truncate'>{type}</div>
{type === value && <Check className='shrink-0 w-4 h-4 text-primary-600' />}
<div className='w-0 grow truncate capitalize'>{type}</div>
{type === value && <Check className='h-4 w-4 shrink-0 text-primary-600' />}
</div>
))}
</div>

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

@@ -1,6 +1,6 @@
import type {
FC,
ReactElement,
ReactNode,
} from 'react'
import {
cloneElement,
@@ -46,7 +46,7 @@ import BlockIcon from '@/app/components/workflow/block-icon'
import Tooltip from '@/app/components/base/tooltip'
type BaseNodeProps = {
children: ReactElement
children: ReactNode
} & NodeProps
const BaseNode: FC<BaseNodeProps> = ({
@@ -107,7 +107,7 @@ const BaseNode: FC<BaseNodeProps> = ({
return (
<div
className={cn(
'flex border-[2px] rounded-2xl',
'flex rounded-2xl border-[2px]',
showSelectedBorder ? 'border-components-option-card-option-selected-border' : 'border-transparent',
!showSelectedBorder && data._inParallelHovering && 'border-workflow-block-border-highlight',
data._waitingRun && 'opacity-70',
@@ -121,9 +121,9 @@ const BaseNode: FC<BaseNodeProps> = ({
<div
className={cn(
'group relative pb-1 shadow-xs',
'border border-transparent rounded-[15px]',
'rounded-[15px] border border-transparent',
(data.type !== BlockEnum.Iteration && data.type !== BlockEnum.Loop) && 'w-[240px] bg-workflow-block-bg',
(data.type === BlockEnum.Iteration || data.type === BlockEnum.Loop) && 'flex flex-col w-full h-full bg-workflow-block-bg-transparent border-workflow-block-border',
(data.type === BlockEnum.Iteration || data.type === BlockEnum.Loop) && 'flex h-full w-full flex-col border-workflow-block-border bg-workflow-block-bg-transparent',
!data._runningStatus && 'hover:shadow-lg',
showRunningBorder && '!border-state-accent-solid',
showSuccessBorder && '!border-state-success-solid',
@@ -134,7 +134,7 @@ const BaseNode: FC<BaseNodeProps> = ({
>
{
data._inParallelHovering && (
<div className='absolute left-2 -top-2.5 top system-2xs-medium-uppercase text-text-tertiary z-10'>
<div className='top system-2xs-medium-uppercase absolute -top-2.5 left-2 z-10 text-text-tertiary'>
{t('workflow.common.parallelRun')}
</div>
)
@@ -192,18 +192,18 @@ const BaseNode: FC<BaseNodeProps> = ({
)
}
<div className={cn(
'flex items-center px-3 pt-3 pb-2 rounded-t-2xl',
'flex items-center rounded-t-2xl px-3 pb-2 pt-3',
(data.type === BlockEnum.Iteration || data.type === BlockEnum.Loop) && 'bg-transparent',
)}>
<BlockIcon
className='shrink-0 mr-2'
className='mr-2 shrink-0'
type={data.type}
size='md'
toolIcon={toolIcon}
/>
<div
title={data.title}
className='grow mr-1 system-sm-semibold-uppercase text-text-primary truncate flex items-center'
className='system-sm-semibold-uppercase mr-1 flex grow items-center truncate text-text-primary'
>
<div>
{data.title}
@@ -218,7 +218,7 @@ const BaseNode: FC<BaseNodeProps> = ({
{t('workflow.nodes.iteration.parallelModeEnableDesc')}
</div>}
>
<div className='flex justify-center items-center px-[5px] py-[3px] ml-1 border-[1px] border-text-warning rounded-[5px] text-text-warning system-2xs-medium-uppercase '>
<div className='system-2xs-medium-uppercase ml-1 flex items-center justify-center rounded-[5px] border-[1px] border-text-warning px-[5px] py-[3px] text-text-warning '>
{t('workflow.nodes.iteration.parallelModeUpper')}
</div>
</Tooltip>
@@ -241,22 +241,22 @@ const BaseNode: FC<BaseNodeProps> = ({
}
{
(data._runningStatus === NodeRunningStatus.Running || data._singleRunningStatus === NodeRunningStatus.Running) && (
<RiLoader2Line className='w-3.5 h-3.5 text-text-accent animate-spin' />
<RiLoader2Line className='h-3.5 w-3.5 animate-spin text-text-accent' />
)
}
{
data._runningStatus === NodeRunningStatus.Succeeded && (
<RiCheckboxCircleFill className='w-3.5 h-3.5 text-text-success' />
<RiCheckboxCircleFill className='h-3.5 w-3.5 text-text-success' />
)
}
{
data._runningStatus === NodeRunningStatus.Failed && (
<RiErrorWarningFill className='w-3.5 h-3.5 text-text-destructive' />
<RiErrorWarningFill className='h-3.5 w-3.5 text-text-destructive' />
)
}
{
data._runningStatus === NodeRunningStatus.Exception && (
<RiAlertFill className='w-3.5 h-3.5 text-text-warning-secondary' />
<RiAlertFill className='h-3.5 w-3.5 text-text-warning-secondary' />
)
}
</div>
@@ -267,7 +267,7 @@ const BaseNode: FC<BaseNodeProps> = ({
}
{
(data.type === BlockEnum.Iteration || data.type === BlockEnum.Loop) && (
<div className='grow pl-1 pr-1 pb-1'>
<div className='grow pb-1 pl-1 pr-1'>
{cloneElement(children, { id, data })}
</div>
)
@@ -290,7 +290,7 @@ const BaseNode: FC<BaseNodeProps> = ({
}
{
data.desc && data.type !== BlockEnum.Iteration && data.type !== BlockEnum.Loop && (
<div className='px-3 pt-1 pb-2 system-xs-regular text-text-tertiary whitespace-pre-line break-words'>
<div className='system-xs-regular whitespace-pre-line break-words px-3 pb-2 pt-1 text-text-tertiary'>
{data.desc}
</div>
)

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

@@ -1,6 +1,6 @@
import type {
FC,
ReactElement,
ReactNode,
} from 'react'
import {
cloneElement,
@@ -48,7 +48,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
import { useStore } from '@/app/components/workflow/store'
type BasePanelProps = {
children: ReactElement
children: ReactNode
} & Node
const BasePanel: FC<BasePanelProps> = ({
@@ -105,24 +105,24 @@ const BasePanel: FC<BasePanelProps> = ({
return (
<div className={cn(
'relative mr-2 h-full',
showMessageLogModal && '!absolute !mr-0 w-[384px] overflow-hidden -top-[5px] right-[416px] z-0 shadow-lg border-[0.5px] border-components-panel-border rounded-2xl transition-all',
showMessageLogModal && '!absolute -top-[5px] right-[416px] z-0 !mr-0 w-[384px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border shadow-lg transition-all',
)}>
<div
ref={triggerRef}
className='absolute top-1/2 -translate-y-1/2 -left-2 w-3 h-6 cursor-col-resize resize-x'>
<div className='w-1 h-6 bg-divider-regular rounded-sm'></div>
className='absolute -left-2 top-1/2 h-6 w-3 -translate-y-1/2 cursor-col-resize resize-x'>
<div className='h-6 w-1 rounded-sm bg-divider-regular'></div>
</div>
<div
ref={containerRef}
className={cn('h-full bg-components-panel-bg shadow-lg border-[0.5px] border-components-panel-border rounded-2xl', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
className={cn('h-full rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
style={{
width: `${panelWidth}px`,
}}
>
<div className='sticky top-0 bg-components-panel-bg border-b-[0.5px] border-black/5 z-10'>
<div className='flex items-center px-4 pt-4 pb-1'>
<div className='sticky top-0 z-10 border-b-[0.5px] border-black/5 bg-components-panel-bg'>
<div className='flex items-center px-4 pb-1 pt-4'>
<BlockIcon
className='shrink-0 mr-1'
className='mr-1 shrink-0'
type={data.type}
toolIcon={toolIcon}
size='md'
@@ -131,7 +131,7 @@ const BasePanel: FC<BasePanelProps> = ({
value={data.title || ''}
onBlur={handleTitleBlur}
/>
<div className='shrink-0 flex items-center text-gray-500'>
<div className='flex shrink-0 items-center text-gray-500'>
{
canRunBySingle(data.type) && !nodesReadOnly && (
<Tooltip
@@ -139,25 +139,25 @@ const BasePanel: FC<BasePanelProps> = ({
popupClassName='mr-1'
>
<div
className='flex items-center justify-center mr-1 w-6 h-6 rounded-md hover:bg-black/5 cursor-pointer'
className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5'
onClick={() => {
handleNodeDataUpdate({ id, data: { _isSingleRun: true } })
handleSyncWorkflowDraft(true)
}}
>
<RiPlayLargeLine className='w-4 h-4 text-text-tertiary' />
<RiPlayLargeLine className='h-4 w-4 text-text-tertiary' />
</div>
</Tooltip>
)
}
<HelpLink nodeType={data.type} />
<PanelOperator id={id} data={data} showHelpLink={false} />
<div className='mx-3 w-[1px] h-3.5 bg-divider-regular' />
<div className='mx-3 h-3.5 w-[1px] bg-divider-regular' />
<div
className='flex items-center justify-center w-6 h-6 cursor-pointer'
className='flex h-6 w-6 cursor-pointer items-center justify-center'
onClick={() => handleNodeSelect(id, true)}
>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
</div>
@@ -190,11 +190,11 @@ const BasePanel: FC<BasePanelProps> = ({
}
{
!!availableNextBlocks.length && (
<div className='p-4 border-t-[0.5px] border-t-black/5'>
<div className='flex items-center mb-1 system-sm-semibold-uppercase text-text-secondary'>
<div className='border-t-[0.5px] border-t-black/5 p-4'>
<div className='system-sm-semibold-uppercase mb-1 flex items-center text-text-secondary'>
{t('workflow.panel.nextStep').toLocaleUpperCase()}
</div>
<div className='mb-2 system-xs-regular text-text-tertiary'>
<div className='system-xs-regular mb-2 text-text-tertiary'>
{t('workflow.panel.addNextStep')}
</div>
<NextStep selectedNode={{ id, data } as Node} />