hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-11 11:56:53 +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/block-icon.tsx
View File

@@ -108,7 +108,7 @@ const BlockIcon: FC<BlockIconProps> = ({
typeof toolIcon === 'string'
? (
<div
className='shrink-0 w-full h-full bg-cover bg-center rounded-md'
className='h-full w-full shrink-0 rounded-md bg-cover bg-center'
style={{
backgroundImage: `url(${toolIcon})`,
}}
@@ -116,7 +116,7 @@ const BlockIcon: FC<BlockIconProps> = ({
)
: (
<AppIcon
className='shrink-0 !w-full !h-full'
className='!h-full !w-full shrink-0'
size='tiny'
icon={toolIcon?.content}
background={toolIcon?.background}

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

@@ -98,13 +98,13 @@ const AllTools = ({
return (
<div className={cn(className)}>
<div className='flex items-center justify-between px-3 bg-background-default-hover border-b-[0.5px] border-divider-subtle shadow-xs'>
<div className='flex items-center h-8 space-x-1'>
<div className='flex items-center justify-between border-b-[0.5px] border-divider-subtle bg-background-default-hover px-3 shadow-xs'>
<div className='flex h-8 items-center space-x-1'>
{
tabs.map(tab => (
<div
className={cn(
'flex items-center px-2 h-6 rounded-md hover:bg-state-base-hover cursor-pointer',
'flex h-6 cursor-pointer items-center rounded-md px-2 hover:bg-state-base-hover',
'text-xs font-medium text-text-secondary',
activeTab === tab.key && 'bg-state-base-hover-alt',
)}
@@ -119,12 +119,12 @@ const AllTools = ({
<ViewTypeSelect viewType={activeView} onChange={setActiveView} />
{supportAddCustomTool && (
<div className='flex items-center'>
<div className='mr-1.5 w-px h-3.5 bg-divider-regular'></div>
<div className='mr-1.5 h-3.5 w-px bg-divider-regular'></div>
<ActionButton
className='bg-components-button-primary-bg hover:bg-components-button-primary-bg text-components-button-primary-text hover:text-components-button-primary-text'
className='bg-components-button-primary-bg text-components-button-primary-text hover:bg-components-button-primary-bg hover:text-components-button-primary-text'
onClick={onShowAddCustomCollectionModal}
>
<RiAddLine className='w-4 h-4' />
<RiAddLine className='h-4 w-4' />
</ActionButton>
</div>
)}

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

@@ -58,7 +58,7 @@ const Blocks = ({
>
{
classification !== '-' && !!list.length && (
<div className='flex items-start px-3 h-[22px] text-xs font-medium text-text-tertiary'>
<div className='flex h-[22px] items-start px-3 text-xs font-medium text-text-tertiary'>
{t(`workflow.tabs.${classification}`)}
</div>
)
@@ -76,14 +76,14 @@ const Blocks = ({
className='mb-2'
type={block.type}
/>
<div className='mb-1 system-md-medium text-text-primary'>{block.title}</div>
<div className='text-text-tertiary system-xs-regular'>{nodesExtraData[block.type].about}</div>
<div className='system-md-medium mb-1 text-text-primary'>{block.title}</div>
<div className='system-xs-regular text-text-tertiary'>{nodesExtraData[block.type].about}</div>
</div>
)}
>
<div
key={block.type}
className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-state-base-hover cursor-pointer'
className='flex h-8 w-full cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover'
onClick={() => onSelect(block.type)}
>
<BlockIcon
@@ -103,7 +103,7 @@ const Blocks = ({
<div className='p-1'>
{
isEmpty && (
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
<div className='flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
)
}
{

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

@@ -86,7 +86,7 @@ const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs, className }) => {
<div className={classNames('index-bar absolute right-0 top-36 flex flex-col items-center w-6 justify-center text-xs font-medium text-text-quaternary', className)}>
<div className='absolute left-0 top-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]'></div>
{letters.map(letter => (
<div className="hover:text-text-secondary cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}>
<div className="cursor-pointer hover:text-text-secondary" key={letter} onClick={() => handleIndexClick(letter)}>
{letter}
</div>
))}

7
web/app/components/workflow/block-selector/index.tsx
View File

@@ -27,7 +27,6 @@ import SearchBox from '@/app/components/plugins/marketplace/search-box'
import {
Plus02,
} from '@/app/components/base/icons/src/vender/line/general'
import classNames from '@/utils/classnames'
type NodeSelectorProps = {
open?: boolean
@@ -117,13 +116,13 @@ const NodeSelector: FC<NodeSelectorProps> = ({
: (
<div
className={`
flex items-center justify-center
w-4 h-4 rounded-full bg-components-button-primary-bg text-text-primary-on-surface hover:bg-components-button-primary-bg-hover cursor-pointer z-10
z-10 flex h-4
w-4 cursor-pointer items-center justify-center rounded-full bg-components-button-primary-bg text-text-primary-on-surface hover:bg-components-button-primary-bg-hover
${triggerClassName?.(open)}
`}
style={triggerStyle}
>
<Plus02 className='w-2.5 h-2.5' />
<Plus02 className='h-2.5 w-2.5' />
</div>
)
}

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

@@ -72,13 +72,13 @@ const OperationDropdown: FC<Props> = ({
>
<PortalToFollowElemTrigger onClick={handleTrigger}>
<ActionButton className={cn(open && 'bg-state-base-hover')}>
<RiMoreFill className='w-4 h-4 text-components-button-secondary-accent-text' />
<RiMoreFill className='h-4 w-4 text-components-button-secondary-accent-text' />
</ActionButton>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[9999]'>
<div className='w-[112px] p-1 bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg'>
<div onClick={handleDownload} className='px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'>{t('common.operation.download')}</div>
<a href={`${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}`} target='_blank' className='block px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'>{t('common.operation.viewDetails')}</a>
<div className='w-[112px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
<div onClick={handleDownload} className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>{t('common.operation.download')}</div>
<a href={`${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}`} target='_blank' className='system-md-regular block cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>{t('common.operation.viewDetails')}</a>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>

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

@@ -36,24 +36,24 @@ const Item: FC<Props> = ({
}] = useBoolean(false)
return (
<div className='group/plugin flex rounded-lg py-1 pr-1 pl-3 hover:bg-state-base-hover'>
<div className='group/plugin flex rounded-lg py-1 pl-3 pr-1 hover:bg-state-base-hover'>
<div
className='shrink-0 relative w-6 h-6 border-[0.5px] border-components-panel-border-subtle rounded-md bg-center bg-no-repeat bg-contain'
className='relative h-6 w-6 shrink-0 rounded-md border-[0.5px] border-components-panel-border-subtle bg-contain bg-center bg-no-repeat'
style={{ backgroundImage: `url(${payload.icon})` }}
/>
<div className='ml-2 w-0 grow flex'>
<div className='ml-2 flex w-0 grow'>
<div className='w-0 grow'>
<div className='h-4 leading-4 text-text-primary system-sm-medium truncate '>{getLocalizedText(payload.label)}</div>
<div className='h-5 leading-5 text-text-tertiary system-xs-regular truncate'>{getLocalizedText(payload.brief)}</div>
<div className='flex text-text-tertiary system-xs-regular space-x-1'>
<div className='system-sm-medium h-4 truncate leading-4 text-text-primary '>{getLocalizedText(payload.label)}</div>
<div className='system-xs-regular h-5 truncate leading-5 text-text-tertiary'>{getLocalizedText(payload.brief)}</div>
<div className='system-xs-regular flex space-x-1 text-text-tertiary'>
<div>{payload.org}</div>
<div>·</div>
<div>{t('plugin.install', { num: formatNumber(payload.install_count || 0) })}</div>
</div>
</div>
{/* Action */}
<div className={cn(!open ? 'hidden' : 'flex', 'group-hover/plugin:flex items-center space-x-1 h-4 text-components-button-secondary-accent-text system-xs-medium')}>
<div className='px-1.5 cursor-pointer' onClick={showInstallModal}>{t('plugin.installAction')}</div>
<div className={cn(!open ? 'hidden' : 'flex', 'system-xs-medium h-4 items-center space-x-1 text-components-button-secondary-accent-text group-hover/plugin:flex')}>
<div className='cursor-pointer px-1.5' onClick={showInstallModal}>{t('plugin.installAction')}</div>
<Action
open={open}
onOpenChange={setOpen}

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

@@ -1,5 +1,5 @@
'use client'
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import useStickyScroll, { ScrollPosition } from '../use-sticky-scroll'
import Item from './item'
@@ -19,14 +19,17 @@ type Props = {
disableMaxWidth?: boolean
}
const List = forwardRef<{ handleScroll: () => void }, Props>(({
wrapElemRef,
searchText,
tags,
list,
toolContentClassName,
disableMaxWidth = false,
}, ref) => {
const List = (
{
ref,
wrapElemRef,
searchText,
tags,
list,
toolContentClassName,
disableMaxWidth = false,
},
) => {
const { t } = useTranslation()
const hasFilter = !searchText
const hasRes = list.length > 0
@@ -68,12 +71,12 @@ const List = forwardRef<{ handleScroll: () => void }, Props>(({
if (hasFilter) {
return (
<Link
className='sticky bottom-0 z-10 flex h-8 px-4 py-1 system-sm-medium items-center border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-b-lg shadow-lg text-text-accent-light-mode-only cursor-pointer'
className='system-sm-medium sticky bottom-0 z-10 flex h-8 cursor-pointer items-center rounded-b-lg border-[0.5px] border-t border-components-panel-border bg-components-panel-bg-blur px-4 py-1 text-text-accent-light-mode-only shadow-lg'
href={`${marketplaceUrlPrefix}/`}
target='_blank'
>
<span>{t('plugin.findMoreInMarketplace')}</span>
<RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
<RiArrowRightUpLine className='ml-0.5 h-3 w-3' />
</Link>
)
}
@@ -84,7 +87,7 @@ const List = forwardRef<{ handleScroll: () => void }, Props>(({
<>
{hasRes && (
<div
className={cn('sticky z-10 flex justify-between h-8 px-4 py-1 text-text-primary system-sm-medium cursor-pointer', stickyClassName, !disableMaxWidth && maxWidthClassName)}
className={cn('system-sm-medium sticky z-10 flex h-8 cursor-pointer justify-between px-4 py-1 text-text-primary', stickyClassName, !disableMaxWidth && maxWidthClassName)}
onClick={handleHeadClick}
>
<span>{t('plugin.fromMarketplace')}</span>
@@ -95,7 +98,7 @@ const List = forwardRef<{ handleScroll: () => void }, Props>(({
onClick={e => e.stopPropagation()}
>
<span>{t('plugin.searchInMarketplace')}</span>
<RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
<RiArrowRightUpLine className='ml-0.5 h-3 w-3' />
</Link>
</div>
)}
@@ -107,22 +110,22 @@ const List = forwardRef<{ handleScroll: () => void }, Props>(({
onAction={() => { }}
/>
))}
<div className='mt-2 mb-3 flex items-center justify-center space-x-2'>
<div className="w-[90px] h-[2px] bg-gradient-to-l from-[rgba(16,24,40,0.08)] to-[rgba(255,255,255,0.01)]"></div>
<div className='mb-3 mt-2 flex items-center justify-center space-x-2'>
<div className="h-[2px] w-[90px] bg-gradient-to-l from-[rgba(16,24,40,0.08)] to-[rgba(255,255,255,0.01)]"></div>
<Link
href={urlWithSearchText}
target='_blank'
className='shrink-0 flex items-center h-4 system-sm-medium text-text-accent-light-mode-only'
className='system-sm-medium flex h-4 shrink-0 items-center text-text-accent-light-mode-only'
>
<RiSearchLine className='mr-0.5 w-3 h-3' />
<RiSearchLine className='mr-0.5 h-3 w-3' />
<span>{t('plugin.searchInMarketplace')}</span>
</Link>
<div className="w-[90px] h-[2px] bg-gradient-to-l from-[rgba(255,255,255,0.01)] to-[rgba(16,24,40,0.08)]"></div>
<div className="h-[2px] w-[90px] bg-gradient-to-l from-[rgba(255,255,255,0.01)] to-[rgba(16,24,40,0.08)]"></div>
</div>
</div>
</>
)
})
}
List.displayName = 'List'

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

@@ -36,13 +36,13 @@ const Tabs: FC<TabsProps> = ({
<div onClick={e => e.stopPropagation()}>
{
!noBlocks && (
<div className='flex items-center px-3 border-b-[0.5px] border-divider-subtle'>
<div className='flex items-center border-b-[0.5px] border-divider-subtle px-3'>
{
tabs.map(tab => (
<div
key={tab.key}
className={cn(
'relative mr-4 pt-1 pb-2 system-sm-medium cursor-pointer',
'system-sm-medium relative mr-4 cursor-pointer pb-2 pt-1',
activeTab === tab.key
? 'text-text-primary after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-util-colors-blue-brand-blue-brand-600'
: 'text-text-tertiary',

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

@@ -142,7 +142,7 @@ const ToolPicker: FC<Props> = ({
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1000]'>
<div className={cn('relative w-[356px] min-h-20 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg', panelClassName)}>
<div className={cn('relative min-h-20 w-[356px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm', panelClassName)}>
<div className='p-2 pb-1'>
<SearchBox
search={searchText}

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

@@ -44,13 +44,13 @@ const ToolItem: FC<Props> = ({
toolIcon={provider.icon}
/>
<div className='mb-1 text-sm leading-5 text-text-primary'>{payload.label[language]}</div>
<div className='text-xs text-text-secondary leading-[18px]'>{payload.description[language]}</div>
<div className='text-xs leading-[18px] text-text-secondary'>{payload.description[language]}</div>
</div>
)}
>
<div
key={payload.name}
className='flex justify-between items-center pr-1 rounded-lg pl-[21px] hover:bg-state-base-hover cursor-pointer'
className='flex cursor-pointer items-center justify-between rounded-lg pl-[21px] pr-1 hover:bg-state-base-hover'
onClick={() => {
if (disabled) return
const params: Record<string, string> = {}
@@ -73,12 +73,12 @@ const ToolItem: FC<Props> = ({
})
}}
>
<div className={cn('h-8 leading-8 border-l-2 border-divider-subtle pl-4 truncate text-text-secondary system-sm-medium', disabled && 'opacity-30')}>{payload.label[language]}</div>
<div className={cn('system-sm-medium h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary', disabled && 'opacity-30')}>{payload.label[language]}</div>
{disabled && <Badge
className='flex items-center h-5 text-text-tertiary space-x-0.5'
className='flex h-5 items-center space-x-0.5 text-text-tertiary'
uppercase
>
<RiCheckLine className='w-3 h-3 ' />
<RiCheckLine className='h-3 w-3 ' />
<div>{t('tools.addToolModal.added')}</div>
</Badge>
}

2
web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
View File

@@ -24,7 +24,7 @@ const Item: FC<Props> = ({
}) => {
return (
<div>
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>
<div className='flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary'>
{groupName}
</div>
<div>

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

@@ -75,7 +75,7 @@ const Tool: FC<Props> = ({
>
<div className={cn(className)}>
<div
className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-state-base-hover cursor-pointer select-none'
className='flex w-full cursor-pointer select-none items-center justify-between rounded-lg pl-3 pr-1 hover:bg-state-base-hover'
onClick={() => {
if (hasAction)
setFold(!isFold)
@@ -97,21 +97,21 @@ const Tool: FC<Props> = ({
// })
}}
>
<div className='flex grow items-center h-8'>
<div className='flex h-8 grow items-center'>
<BlockIcon
className='shrink-0'
type={BlockEnum.Tool}
toolIcon={payload.icon}
/>
<div className='ml-2 text-sm text-text-primary flex-1 w-0 grow truncate'>{payload.label[language]}</div>
<div className='ml-2 w-0 flex-1 grow truncate text-sm text-text-primary'>{payload.label[language]}</div>
</div>
<div className='flex items-center'>
{isFlatView && (
<div className='text-text-tertiary system-xs-regular'>{groupName}</div>
<div className='system-xs-regular text-text-tertiary'>{groupName}</div>
)}
{hasAction && (
<FoldIcon className={cn('w-4 h-4 text-text-quaternary shrink-0', isFold && 'text-text-tertiary')} />
<FoldIcon className={cn('h-4 w-4 shrink-0 text-text-quaternary', isFold && 'text-text-tertiary')} />
)}
</div>
</div>

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

@@ -90,7 +90,7 @@ const Blocks = ({
<div className={classNames('p-1 max-w-[320px]', className)}>
{
!tools.length && !showWorkflowEmpty && (
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
<div className='flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
)
}
{!tools.length && showWorkflowEmpty && (

16
web/app/components/workflow/block-selector/view-type-select.tsx
View File

@@ -30,27 +30,27 @@ const ViewTypeSelect: FC<Props> = ({
<div className='flex items-center rounded-lg bg-components-segmented-control-bg-normal p-px'>
<div
className={
cn('p-[3px] rounded-lg',
cn('rounded-lg p-[3px]',
viewType === ViewType.flat
? 'bg-components-segmented-control-item-active-bg shadow-xs text-text-accent-light-mode-only'
: 'text-text-tertiary cursor-pointer',
? 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-xs'
: 'cursor-pointer text-text-tertiary',
)
}
onClick={handleChange(ViewType.flat)}
>
<RiSortAlphabetAsc className='w-4 h-4' />
<RiSortAlphabetAsc className='h-4 w-4' />
</div>
<div
className={
cn('p-[3px] rounded-lg',
cn('rounded-lg p-[3px]',
viewType === ViewType.tree
? 'bg-components-segmented-control-item-active-bg shadow-xs text-text-accent-light-mode-only'
: 'text-text-tertiary cursor-pointer',
? 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-xs'
: 'cursor-pointer text-text-tertiary',
)
}
onClick={handleChange(ViewType.tree)}
>
<RiNodeTree className='w-4 h-4 ' />
<RiNodeTree className='h-4 w-4 ' />
</div>
</div>
)

2
web/app/components/workflow/context.tsx
View File

@@ -11,7 +11,7 @@ type WorkflowProviderProps = {
children: React.ReactNode
}
export const WorkflowContextProvider = ({ children }: WorkflowProviderProps) => {
const storeRef = useRef<WorkflowStore>()
const storeRef = useRef<WorkflowStore | undefined>(undefined)
if (!storeRef.current)
storeRef.current = createWorkflowStore()

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

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

2
web/app/components/workflow/header/chat-variable-button.tsx
View File

@@ -16,7 +16,7 @@ const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
return (
<Button className='p-2' disabled={disabled} onClick={handleClick}>
<BubbleX className='w-4 h-4 text-components-button-secondary-text' />
<BubbleX className='h-4 w-4 text-components-button-secondary-text' />
</Button>
)
}

34
web/app/components/workflow/header/checklist.tsx
View File

@@ -57,20 +57,20 @@ const WorkflowChecklist = ({
<PortalToFollowElemTrigger onClick={() => !disabled && setOpen(v => !v)}>
<div
className={cn(
'relative ml-0.5 flex items-center justify-center w-7 h-7 rounded-md',
disabled && 'opacity-50 cursor-not-allowed',
'relative ml-0.5 flex h-7 w-7 items-center justify-center rounded-md',
disabled && 'cursor-not-allowed opacity-50',
)}
>
<div
className={cn('group flex items-center justify-center w-full h-full rounded-md cursor-pointer hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
className={cn('group flex h-full w-full cursor-pointer items-center justify-center rounded-md hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
>
<RiListCheck3
className={cn('w-4 h-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')}
className={cn('h-4 w-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')}
/>
</div>
{
!!needWarningNodes.length && (
<div className='absolute -right-1.5 -top-1.5 flex items-center justify-center min-w-[18px] h-[18px] rounded-full border border-gray-100 text-white text-[11px] font-semibold bg-[#F79009]'>
<div className='absolute -right-1.5 -top-1.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full border border-gray-100 bg-[#F79009] text-[11px] font-semibold text-white'>
{needWarningNodes.length}
</div>
)
@@ -79,18 +79,18 @@ const WorkflowChecklist = ({
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[12]'>
<div
className='w-[420px] rounded-2xl bg-white border-[0.5px] border-black/5 shadow-lg overflow-y-auto'
className='w-[420px] overflow-y-auto rounded-2xl border-[0.5px] border-black/5 bg-white shadow-lg'
style={{
maxHeight: 'calc(2 / 3 * 100vh)',
}}
>
<div className='sticky top-0 bg-white flex items-center pl-4 pr-3 pt-3 h-[44px] text-md font-semibold text-gray-900 z-[1]'>
<div className='text-md sticky top-0 z-[1] flex h-[44px] items-center bg-white pl-4 pr-3 pt-3 font-semibold text-gray-900'>
<div className='grow'>{t('workflow.panel.checklist')}{needWarningNodes.length ? `(${needWarningNodes.length})` : ''}</div>
<div
className='shrink-0 flex items-center justify-center w-6 h-6 cursor-pointer'
className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center'
onClick={() => setOpen(false)}
>
<RiCloseLine className='w-4 h-4 text-gray-500' />
<RiCloseLine className='h-4 w-4 text-gray-500' />
</div>
</div>
<div className='py-2'>
@@ -103,13 +103,13 @@ const WorkflowChecklist = ({
needWarningNodes.map(node => (
<div
key={node.id}
className='mb-2 last-of-type:mb-0 border-[0.5px] border-gray-200 bg-white shadow-xs rounded-lg cursor-pointer'
className='mb-2 cursor-pointer rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xs last-of-type:mb-0'
onClick={() => {
handleNodeSelect(node.id)
setOpen(false)
}}
>
<div className='flex items-center p-2 h-9 text-xs font-medium text-gray-700'>
<div className='flex h-9 items-center p-2 text-xs font-medium text-gray-700'>
<BlockIcon
type={node.type}
className='mr-1.5'
@@ -122,9 +122,9 @@ const WorkflowChecklist = ({
<div className='border-t-[0.5px] border-t-black/2'>
{
node.unConnected && (
<div className='px-3 py-2 bg-gray-25 rounded-b-lg'>
<div className='rounded-b-lg bg-gray-25 px-3 py-2'>
<div className='flex text-xs leading-[18px] text-gray-500'>
<AlertTriangle className='mt-[3px] mr-2 w-3 h-3 text-[#F79009]' />
<AlertTriangle className='mr-2 mt-[3px] h-3 w-3 text-[#F79009]' />
{t('workflow.common.needConnectTip')}
</div>
</div>
@@ -132,9 +132,9 @@ const WorkflowChecklist = ({
}
{
node.errorMessage && (
<div className='px-3 py-2 bg-gray-25 rounded-b-lg'>
<div className='rounded-b-lg bg-gray-25 px-3 py-2'>
<div className='flex text-xs leading-[18px] text-gray-500'>
<AlertTriangle className='mt-[3px] mr-2 w-3 h-3 text-[#F79009]' />
<AlertTriangle className='mr-2 mt-[3px] h-3 w-3 text-[#F79009]' />
{node.errorMessage}
</div>
</div>
@@ -150,8 +150,8 @@ const WorkflowChecklist = ({
}
{
!needWarningNodes.length && (
<div className='mx-4 mb-3 py-4 rounded-lg bg-gray-50 text-gray-400 text-xs text-center'>
<ChecklistSquare className='mx-auto mb-[5px] w-8 h-8 text-gray-300' />
<div className='mx-4 mb-3 rounded-lg bg-gray-50 py-4 text-center text-xs text-gray-400'>
<ChecklistSquare className='mx-auto mb-[5px] h-8 w-8 text-gray-300' />
{t('workflow.panel.checklistResolved')}
</div>
)

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

@@ -13,7 +13,7 @@ const EditingTitle = () => {
const isSyncingWorkflowDraft = useStore(s => s.isSyncingWorkflowDraft)
return (
<div className='flex items-center h-[18px] system-xs-regular text-text-tertiary'>
<div className='system-xs-regular flex h-[18px] items-center text-text-tertiary'>
{
!!draftUpdatedAt && (
<>
@@ -21,7 +21,7 @@ const EditingTitle = () => {
</>
)
}
<span className='flex items-center mx-1'>·</span>
<span className='mx-1 flex items-center'>·</span>
{
publishedAt
? `${t('workflow.common.published')} ${formatTimeFromNow(publishedAt)}`
@@ -30,7 +30,7 @@ const EditingTitle = () => {
{
isSyncingWorkflowDraft && (
<>
<span className='flex items-center mx-1'>·</span>
<span className='mx-1 flex items-center'>·</span>
{t('workflow.common.syncingData')}
</>
)

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

@@ -16,7 +16,7 @@ const EnvButton = ({ disabled }: { disabled: boolean }) => {
return (
<Button className='p-2' disabled={disabled} onClick={handleClick}>
<Env className='w-4 h-4 text-components-button-secondary-text' />
<Env className='h-4 w-4 text-components-button-secondary-text' />
</Button>
)
}

2
web/app/components/workflow/header/global-variable-button.tsx
View File

@@ -12,7 +12,7 @@ const GlobalVariableButton = ({ disabled }: { disabled: boolean }) => {
return (
<Button className='p-2' disabled={disabled} onClick={handleClick}>
<GlobalVariable className='w-4 h-4 text-components-button-secondary-text' />
<GlobalVariable className='h-4 w-4 text-components-button-secondary-text' />
</Button>
)
}

14
web/app/components/workflow/header/index.tsx
View File

@@ -206,7 +206,7 @@ const Header: FC = () => {
return (
<div
className='absolute top-0 left-0 z-10 flex items-center justify-between w-full px-3 h-14 bg-mask-top2bottom-gray-50-to-transparent'
className='absolute left-0 top-0 z-10 flex h-14 w-full items-center justify-between bg-mask-top2bottom-gray-50-to-transparent px-3'
>
<div>
{
@@ -225,10 +225,10 @@ const Header: FC = () => {
{/* <GlobalVariableButton disabled={nodesReadOnly} /> */}
{isChatMode && <ChatVariableButton disabled={nodesReadOnly} />}
<EnvButton disabled={nodesReadOnly} />
<Divider type='vertical' className='h-3.5 mx-auto' />
<Divider type='vertical' className='mx-auto h-3.5' />
<RunAndHistory />
<Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
<RiApps2AddLine className='w-4 h-4 mr-1 text-components-button-secondary-text' />
<RiApps2AddLine className='mr-1 h-4 w-4 text-components-button-secondary-text' />
{t('workflow.common.features')}
</Button>
<AppPublisher
@@ -252,12 +252,12 @@ const Header: FC = () => {
viewHistory && (
<div className='flex items-center space-x-2'>
<ViewHistory withText />
<Divider type='vertical' className='h-3.5 mx-auto' />
<Divider type='vertical' className='mx-auto h-3.5' />
<Button
variant='primary'
onClick={handleGoBackToEdit}
>
<ArrowNarrowLeft className='w-4 h-4 mr-1' />
<ArrowNarrowLeft className='mr-1 h-4 w-4' />
{t('workflow.common.goBackToEdit')}
</Button>
</div>
@@ -265,7 +265,7 @@ const Header: FC = () => {
}
{
restoring && (
<div className='flex justify-end items-center gap-x-2'>
<div className='flex items-center justify-end gap-x-2'>
<Button
onClick={handleRestore}
disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft}
@@ -278,7 +278,7 @@ const Header: FC = () => {
onClick={handleCancelRestore}
>
<div className='flex items-center gap-x-0.5'>
<RiHistoryLine className='w-4 h-4' />
<RiHistoryLine className='h-4 w-4' />
<span className='px-0.5'>{t('workflow.common.exitVersions')}</span>
</div>
</Button>

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

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

24
web/app/components/workflow/header/run-and-history.tsx
View File

@@ -31,9 +31,9 @@ const RunMode = memo(() => {
<>
<div
className={cn(
'flex items-center px-2.5 h-7 rounded-md text-[13px] font-medium text-components-button-secondary-accent-text',
'hover:bg-state-accent-hover cursor-pointer',
isRunning && 'bg-state-accent-hover !cursor-not-allowed',
'flex h-7 items-center rounded-md px-2.5 text-[13px] font-medium text-components-button-secondary-accent-text',
'cursor-pointer hover:bg-state-accent-hover',
isRunning && '!cursor-not-allowed bg-state-accent-hover',
)}
onClick={() => {
handleWorkflowStartRunInWorkflow()
@@ -43,13 +43,13 @@ const RunMode = memo(() => {
isRunning
? (
<>
<RiLoader2Line className='mr-1 w-4 h-4 animate-spin' />
<RiLoader2Line className='mr-1 h-4 w-4 animate-spin' />
{t('workflow.common.running')}
</>
)
: (
<>
<RiPlayLargeLine className='mr-1 w-4 h-4' />
<RiPlayLargeLine className='mr-1 h-4 w-4' />
{t('workflow.common.run')}
</>
)
@@ -58,10 +58,10 @@ const RunMode = memo(() => {
{
isRunning && (
<div
className='flex items-center justify-center ml-0.5 w-7 h-7 cursor-pointer hover:bg-black/5 rounded-md'
className='ml-0.5 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-black/5'
onClick={() => handleStopRun(workflowRunningData?.task_id || '')}
>
<StopCircle className='w-4 h-4 text-components-button-ghost-text' />
<StopCircle className='h-4 w-4 text-components-button-ghost-text' />
</div>
)
}
@@ -77,12 +77,12 @@ const PreviewMode = memo(() => {
return (
<div
className={cn(
'flex items-center px-2.5 h-7 rounded-md text-[13px] font-medium text-components-button-secondary-accent-text',
'hover:bg-state-accent-hover cursor-pointer',
'flex h-7 items-center rounded-md px-2.5 text-[13px] font-medium text-components-button-secondary-accent-text',
'cursor-pointer hover:bg-state-accent-hover',
)}
onClick={() => handleWorkflowStartRunInChatflow()}
>
<RiPlayLargeLine className='mr-1 w-4 h-4' />
<RiPlayLargeLine className='mr-1 h-4 w-4' />
{t('workflow.common.debugAndPreview')}
</div>
)
@@ -94,14 +94,14 @@ const RunAndHistory: FC = () => {
const { nodesReadOnly } = useNodesReadOnly()
return (
<div className='flex items-center px-0.5 h-8 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs'>
<div className='flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-0.5 shadow-xs'>
{
!isChatMode && <RunMode />
}
{
isChatMode && <PreviewMode />
}
<div className='mx-0.5 w-[1px] h-3.5 bg-divider-regular'></div>
<div className='mx-0.5 h-3.5 w-[1px] bg-divider-regular'></div>
<ViewHistory />
<Checklist disabled={nodesReadOnly} />
</div>

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

@@ -10,11 +10,11 @@ const RunningTitle = () => {
const historyWorkflowData = useStore(s => s.historyWorkflowData)
return (
<div className='flex items-center h-[18px] text-xs text-gray-500'>
<ClockPlay className='mr-1 w-3 h-3 text-gray-500' />
<div className='flex h-[18px] items-center text-xs text-gray-500'>
<ClockPlay className='mr-1 h-3 w-3 text-gray-500' />
<span>{isChatMode ? `Test Chat#${historyWorkflowData?.sequence_number}` : `Test Run#${historyWorkflowData?.sequence_number}`}</span>
<span className='mx-1'>·</span>
<span className='ml-1 uppercase flex items-center px-1 h-[18px] rounded-[5px] border border-indigo-300 bg-white/[0.48] text-[10px] font-semibold text-indigo-600'>
<span className='ml-1 flex h-[18px] items-center rounded-[5px] border border-indigo-300 bg-white/[0.48] px-1 text-[10px] font-semibold uppercase text-indigo-600'>
{t('workflow.common.viewOnly')}
</span>
</div>

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

@@ -31,7 +31,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
const { nodesReadOnly } = useNodesReadOnly()
return (
<div className='flex items-center space-x-0.5 p-0.5 backdrop-blur-[5px] rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-lg'>
<div className='flex items-center space-x-0.5 rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-lg backdrop-blur-[5px]'>
<TipPopup title={t('workflow.common.undo')!} shortcuts={['ctrl', 'z']}>
<div
data-tooltip-id='workflow.undo'
@@ -57,7 +57,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
<RiArrowGoForwardFill className='h-4 w-4' />
</div>
</TipPopup>
<Divider type='vertical' className="h-3.5 mx-0.5" />
<Divider type='vertical' className="mx-0.5 h-3.5" />
<ViewWorkflowHistory />
</div >
)

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

@@ -16,14 +16,14 @@ const PopupContent = React.memo(() => {
const { t } = useTranslation()
return (
<div className='flex items-center gap-x-1'>
<div className='text-text-secondary system-xs-medium px-0.5'>
<div className='system-xs-medium px-0.5 text-text-secondary'>
{t('workflow.common.versionHistory')}
</div>
<div className='flex items-center gap-x-0.5'>
{VERSION_HISTORY_SHORTCUT.map(key => (
<span
key={key}
className='rounded-[4px] bg-components-kbd-bg-white text-text-tertiary system-kbd px-[1px]'
className='system-kbd rounded-[4px] bg-components-kbd-bg-white px-[1px] text-text-tertiary'
>
{key}
</span>
@@ -45,8 +45,8 @@ const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({
useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.h`, (e) => {
e.preventDefault()
handleViewVersionHistory()
}
, { exactMatch: true, useCapture: true })
},
{ exactMatch: true, useCapture: true })
return <Tooltip
popupContent={<PopupContent />}
@@ -58,7 +58,7 @@ const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({
className={'p-2'}
onClick={handleViewVersionHistory}
>
<RiHistoryLine className='w-4 h-4 text-components-button-secondary-text' />
<RiHistoryLine className='h-4 w-4 text-components-button-secondary-text' />
</Button>
</Tooltip>
}

32
web/app/components/workflow/header/view-history.tsx
View File

@@ -87,12 +87,12 @@ const ViewHistory = ({
{
withText && (
<div className={cn(
'flex items-center px-3 h-8 rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xs',
'text-[13px] font-medium text-primary-600 cursor-pointer',
'flex h-8 items-center rounded-lg border-[0.5px] border-gray-200 bg-white px-3 shadow-xs',
'cursor-pointer text-[13px] font-medium text-primary-600',
open && '!bg-primary-50',
)}>
<ClockPlay
className={'mr-1 w-4 h-4'}
className={'mr-1 h-4 w-4'}
/>
{t('workflow.common.showRunHistory')}
</div>
@@ -104,13 +104,13 @@ const ViewHistory = ({
popupContent={t('workflow.common.viewRunHistory')}
>
<div
className={cn('group flex items-center justify-center w-7 h-7 rounded-md hover:bg-state-accent-hover cursor-pointer', open && 'bg-state-accent-hover')}
className={cn('group flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
onClick={() => {
setCurrentLogItem()
setShowMessageLogModal(false)
}}
>
<ClockPlay className={cn('w-4 h-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} />
<ClockPlay className={cn('h-4 w-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} />
</div>
</Tooltip>
)
@@ -118,27 +118,27 @@ const ViewHistory = ({
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[12]'>
<div
className='flex flex-col ml-2 w-[240px] bg-white border-[0.5px] border-gray-200 shadow-xl rounded-xl overflow-y-auto'
className='ml-2 flex w-[240px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-gray-200 bg-white shadow-xl'
style={{
maxHeight: 'calc(2 / 3 * 100vh)',
}}
>
<div className='sticky top-0 bg-white flex items-center justify-between px-4 pt-3 text-base font-semibold text-gray-900'>
<div className='sticky top-0 flex items-center justify-between bg-white px-4 pt-3 text-base font-semibold text-gray-900'>
<div className='grow'>{t('workflow.common.runHistory')}</div>
<div
className='shrink-0 flex items-center justify-center w-6 h-6 cursor-pointer'
className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center'
onClick={() => {
setCurrentLogItem()
setShowMessageLogModal(false)
setOpen(false)
}}
>
<RiCloseLine className='w-4 h-4 text-gray-500' />
<RiCloseLine className='h-4 w-4 text-gray-500' />
</div>
</div>
{
isLoading && (
<div className='flex items-center justify-center h-10'>
<div className='flex h-10 items-center justify-center'>
<Loading />
</div>
)
@@ -149,7 +149,7 @@ const ViewHistory = ({
{
!data?.data.length && (
<div className='py-12'>
<ClockPlaySlim className='mx-auto mb-2 w-8 h-8 text-gray-300' />
<ClockPlaySlim className='mx-auto mb-2 h-8 w-8 text-gray-300' />
<div className='text-center text-[13px] text-gray-400'>
{t('workflow.common.notRunning')}
</div>
@@ -161,7 +161,7 @@ const ViewHistory = ({
<div
key={item.id}
className={cn(
'flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-primary-50 cursor-pointer',
'mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px] hover:bg-primary-50',
item.id === historyWorkflowData?.id && 'bg-primary-50',
)}
onClick={() => {
@@ -179,17 +179,17 @@ const ViewHistory = ({
>
{
!isChatMode && item.status === WorkflowRunningStatus.Stopped && (
<AlertTriangle className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#F79009]' />
<AlertTriangle className='mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F79009]' />
)
}
{
!isChatMode && item.status === WorkflowRunningStatus.Failed && (
<RiErrorWarningLine className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#F04438]' />
<RiErrorWarningLine className='mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F04438]' />
)
}
{
!isChatMode && item.status === WorkflowRunningStatus.Succeeded && (
<RiCheckboxCircleLine className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#12B76A]' />
<RiCheckboxCircleLine className='mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#12B76A]' />
)
}
<div>
@@ -201,7 +201,7 @@ const ViewHistory = ({
>
{`Test ${isChatMode ? 'Chat' : 'Run'}#${item.sequence_number}`}
</div>
<div className='flex items-center text-xs text-gray-500 leading-[18px]'>
<div className='flex items-center text-xs leading-[18px] text-gray-500'>
{item.created_by_account?.name} · {formatTimeFromNow((item.finished_at || item.created_at) * 1000)}
</div>
</div>

26
web/app/components/workflow/header/view-workflow-history.tsx
View File

@@ -138,31 +138,31 @@ const ViewWorkflowHistory = () => {
setShowMessageLogModal(false)
}}
>
<RiHistoryLine className='w-4 h-4' />
<RiHistoryLine className='h-4 w-4' />
</div>
</TipPopup>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[12]'>
<div
className='flex flex-col ml-2 min-w-[240px] max-w-[360px] bg-components-panel-bg-blur backdrop-blur-[5px] border-[0.5px] border-components-panel-border shadow-xl rounded-xl overflow-y-auto'
className='ml-2 flex min-w-[240px] max-w-[360px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-[5px]'
>
<div className='sticky top-0 flex items-center justify-between px-4 pt-3'>
<div className='grow text-text-secondary system-mg-regular'>{t('workflow.changeHistory.title')}</div>
<div className='system-mg-regular grow text-text-secondary'>{t('workflow.changeHistory.title')}</div>
<div
className='shrink-0 flex items-center justify-center w-6 h-6 cursor-pointer'
className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center'
onClick={() => {
setCurrentLogItem()
setShowMessageLogModal(false)
setOpen(false)
}}
>
<RiCloseLine className='w-4 h-4 text-text-secondary' />
<RiCloseLine className='h-4 w-4 text-text-secondary' />
</div>
</div>
{
(
<div
className='p-2 overflow-y-auto'
className='overflow-y-auto p-2'
style={{
maxHeight: 'calc(1 / 2 * 100vh)',
}}
@@ -170,7 +170,7 @@ const ViewWorkflowHistory = () => {
{
!calculateChangeList.statesCount && (
<div className='py-12'>
<RiHistoryLine className='mx-auto mb-2 w-8 h-8 text-text-tertiary' />
<RiHistoryLine className='mx-auto mb-2 h-8 w-8 text-text-tertiary' />
<div className='text-center text-[13px] text-text-tertiary'>
{t('workflow.changeHistory.placeholder')}
</div>
@@ -183,7 +183,7 @@ const ViewWorkflowHistory = () => {
<div
key={item?.index}
className={cn(
'flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-state-base-hover text-text-secondary cursor-pointer',
'mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px] text-text-secondary hover:bg-state-base-hover',
item?.index === currentHistoryStateIndex && 'bg-state-base-hover',
)}
onClick={() => {
@@ -208,7 +208,7 @@ const ViewWorkflowHistory = () => {
<div
key={item?.index}
className={cn(
'flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-state-base-hover cursor-pointer',
'mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px] hover:bg-state-base-hover',
item?.index === calculateChangeList.statesCount - 1 && 'bg-state-base-hover',
)}
onClick={() => {
@@ -238,7 +238,7 @@ const ViewWorkflowHistory = () => {
<Divider className='m-0' />
<div
className={cn(
'flex my-0.5 px-2 py-[7px] rounded-lg text-text-secondary cursor-pointer',
'my-0.5 flex cursor-pointer rounded-lg px-2 py-[7px] text-text-secondary',
'hover:bg-state-base-hover',
)}
onClick={() => {
@@ -259,9 +259,9 @@ const ViewWorkflowHistory = () => {
</div>
)
}
<div className="px-3 w-[240px] py-2 text-xs text-text-tertiary" >
<div className="flex items-center mb-1 h-[22px] font-medium uppercase">{t('workflow.changeHistory.hint')}</div>
<div className="mb-1 text-text-tertiary leading-[18px]">{t('workflow.changeHistory.hintText')}</div>
<div className="w-[240px] px-3 py-2 text-xs text-text-tertiary" >
<div className="mb-1 flex h-[22px] items-center font-medium uppercase">{t('workflow.changeHistory.hint')}</div>
<div className="mb-1 leading-[18px] text-text-tertiary">{t('workflow.changeHistory.hintText')}</div>
</div>
</div>
</PortalToFollowElemContent>

4
web/app/components/workflow/help-line/index.tsx
View File

@@ -15,7 +15,7 @@ const HelpLineHorizontal = memo(({
return (
<div
className='absolute h-[1px] bg-primary-300 z-[9]'
className='absolute z-[9] h-[1px] bg-primary-300'
style={{
top: top * zoom + y,
left: left * zoom + x,
@@ -35,7 +35,7 @@ const HelpLineVertical = memo(({
return (
<div
className='absolute w-[1px] bg-primary-300 z-[9]'
className='absolute z-[9] w-[1px] bg-primary-300'
style={{
top: top * zoom + y,
left: left * zoom + x,

4
web/app/components/workflow/index.tsx
View File

@@ -285,7 +285,7 @@ const Workflow: FC<WorkflowProps> = memo(({
<div
id='workflow-container'
className={`
relative w-full min-w-[960px] h-full
relative h-full w-full min-w-[960px]
${workflowReadOnly && 'workflow-panel-animation'}
${nodeAnimation && 'workflow-node-animation'}
`}
@@ -409,7 +409,7 @@ const WorkflowWrap = memo(() => {
if (!data || isLoading) {
return (
<div className='flex justify-center items-center relative w-full h-full'>
<div className='relative flex h-full w-full items-center justify-center'>
<Loading />
</div>
)

12
web/app/components/workflow/limit-tips.tsx
View File

@@ -13,24 +13,24 @@ const LimitTips = () => {
return null
return (
<div className='absolute bottom-16 left-1/2 -translate-x-1/2 flex items-center rounded-xl p-2 h-10 border border-components-panel-border bg-components-panel-bg-blur shadow-md z-[9]'>
<div className='absolute bottom-16 left-1/2 z-[9] flex h-10 -translate-x-1/2 items-center rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-2 shadow-md'>
<div
className='absolute inset-0 opacity-[0.4] rounded-xl'
className='absolute inset-0 rounded-xl opacity-[0.4]'
style={{
background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)',
}}
></div>
<div className='flex items-center justify-center w-5 h-5'>
<RiAlertFill className='w-4 h-4 text-text-warning-secondary' />
<div className='flex h-5 w-5 items-center justify-center'>
<RiAlertFill className='h-4 w-4 text-text-warning-secondary' />
</div>
<div className='mx-1 px-1 system-xs-medium text-text-primary'>
<div className='system-xs-medium mx-1 px-1 text-text-primary'>
{showTips}
</div>
<ActionButton
className='z-[1]'
onClick={() => setShowTips('')}
>
<RiCloseLine className='w-4 h-4' />
<RiCloseLine className='h-4 w-4' />
</ActionButton>
</div>
)

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>

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