| | |
| | | import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' |
| | | import { |
| | | RiErrorWarningFill, |
| | | RiMoreLine, |
| | | } from '@remixicon/react' |
| | | import { useSelectOrDelete } from '../../hooks' |
| | | import type { WorkflowNodesMap } from './node' |
| | |
| | | import { isConversationVar, isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils' |
| | | import Tooltip from '@/app/components/base/tooltip' |
| | | import { isExceptionVariable } from '@/app/components/workflow/utils' |
| | | import VarFullPathPanel from '@/app/components/workflow/nodes/_base/components/variable/var-full-path-panel' |
| | | import { Type } from '@/app/components/workflow/nodes/llm/types' |
| | | import type { ValueSelector } from '@/app/components/workflow/types' |
| | | |
| | | type WorkflowVariableBlockComponentProps = { |
| | | nodeKey: string |
| | | variables: string[] |
| | | workflowNodesMap: WorkflowNodesMap |
| | | getVarType?: (payload: { |
| | | nodeId: string, |
| | | valueSelector: ValueSelector, |
| | | }) => Type |
| | | } |
| | | |
| | | const WorkflowVariableBlockComponent = ({ |
| | | nodeKey, |
| | | variables, |
| | | workflowNodesMap = {}, |
| | | getVarType, |
| | | }: WorkflowVariableBlockComponentProps) => { |
| | | const { t } = useTranslation() |
| | | const [editor] = useLexicalComposerContext() |
| | | const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND) |
| | | const variablesLength = variables.length |
| | | const isShowAPart = variablesLength > 2 |
| | | const varName = ( |
| | | () => { |
| | | const isSystem = isSystemVar(variables) |
| | | const varName = variables[variablesLength - 1] |
| | | const varName = variablesLength >= 3 ? (variables).slice(-2).join('.') : variables[variablesLength - 1] |
| | | return `${isSystem ? 'sys.' : ''}${varName}` |
| | | } |
| | | )() |
| | |
| | | const Item = ( |
| | | <div |
| | | className={cn( |
| | | 'group/wrap relative mx-0.5 flex h-[18px] select-none items-center rounded-[5px] border pl-0.5 pr-[3px] hover:border-state-accent-solid hover:bg-state-accent-hover', |
| | | 'mx-0.5 relative group/wrap flex items-center h-[18px] pl-0.5 pr-[3px] rounded-[5px] border select-none', |
| | | isSelected ? ' border-state-accent-solid bg-state-accent-hover' : ' border-components-panel-border-subtle bg-components-badge-white-to-dark', |
| | | !node && !isEnv && !isChatVar && '!border-state-destructive-solid !bg-state-destructive-hover', |
| | | )} |
| | |
| | | </div> |
| | | ) |
| | | } |
| | | <div className='mx-0.5 max-w-[60px] shrink-0 truncate text-xs font-medium text-text-secondary' title={node?.title} style={{ |
| | | <div className='shrink-0 mx-0.5 max-w-[60px] text-xs font-medium text-text-secondary truncate' title={node?.title} style={{ |
| | | }}>{node?.title}</div> |
| | | <Line3 className='mr-0.5 text-divider-deep'></Line3> |
| | | </div> |
| | | )} |
| | | {isShowAPart && ( |
| | | <div className='flex items-center'> |
| | | <RiMoreLine className='h-3 w-3 text-text-secondary' /> |
| | | <Line3 className='mr-0.5 text-divider-deep'></Line3> |
| | | </div> |
| | | )} |
| | | |
| | | <div className='flex items-center text-text-accent'> |
| | | {!isEnv && !isChatVar && <Variable02 className={cn('h-3.5 w-3.5 shrink-0', 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 && <Variable02 className={cn('shrink-0 w-3.5 h-3.5', 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={cn( |
| | | 'ml-0.5 shrink-0 truncate text-xs font-medium', |
| | | 'shrink-0 ml-0.5 text-xs font-medium truncate', |
| | | isEnv && 'text-util-colors-violet-violet-600', |
| | | isChatVar && 'text-util-colors-teal-teal-700', |
| | | isException && 'text-text-warning', |
| | | )} title={varName}>{varName}</div> |
| | | { |
| | | !node && !isEnv && !isChatVar && ( |
| | | <RiErrorWarningFill className='ml-0.5 h-3 w-3 text-text-destructive' /> |
| | | <RiErrorWarningFill className='ml-0.5 w-3 h-3 text-text-destructive' /> |
| | | ) |
| | | } |
| | | </div> |
| | |
| | | ) |
| | | } |
| | | |
| | | if (!node) |
| | | return Item |
| | | |
| | | return ( |
| | | <Tooltip |
| | | noDecoration |
| | | popupContent={ |
| | | <VarFullPathPanel |
| | | nodeName={node.title} |
| | | path={variables.slice(1)} |
| | | varType={getVarType ? getVarType({ |
| | | nodeId: variables[0], |
| | | valueSelector: variables, |
| | | }) : Type.string} |
| | | nodeType={node?.type} |
| | | />} |
| | | disabled={!isShowAPart} |
| | | > |
| | | <div>{Item}</div> |
| | | </Tooltip> |
| | | ) |
| | | return Item |
| | | } |
| | | |
| | | export default memo(WorkflowVariableBlockComponent) |