| | |
| | | import { Line3 } from '@/app/components/base/icons/src/public/common' |
| | | import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development' |
| | | import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others' |
| | | import { RiMoreLine } from '@remixicon/react' |
| | | type Props = { |
| | | nodeId: string |
| | | value: string |
| | |
| | | return VAR_PLACEHOLDER |
| | | }) |
| | | |
| | | const html: React.JSX.Element[] = strWithVarPlaceholder.split(VAR_PLACEHOLDER).map((str, index) => { |
| | | const html: JSX.Element[] = strWithVarPlaceholder.split(VAR_PLACEHOLDER).map((str, index) => { |
| | | if (!vars[index]) |
| | | return <span className='relative top-[-3px] leading-[16px]' key={index}>{str}</span> |
| | | |
| | |
| | | const isChatVar = isConversationVar(value) |
| | | const node = (isSystem ? startNode : getNodeInfoById(availableNodes, value[0]))?.data |
| | | const varName = `${isSystem ? 'sys.' : ''}${value[value.length - 1]}` |
| | | const isShowAPart = value.length > 2 |
| | | |
| | | return (<span key={index}> |
| | | <span className='relative top-[-3px] leading-[16px]'>{str}</span> |
| | | <div className=' inline-flex h-[16px] items-center rounded-[5px] bg-components-badge-white-to-dark px-1.5'> |
| | | <div className=' inline-flex h-[16px] items-center px-1.5 rounded-[5px] bg-white'> |
| | | {!isEnv && !isChatVar && ( |
| | | <div className='flex items-center'> |
| | | <div className='p-[1px]'> |
| | | <VarBlockIcon |
| | | className='!text-text-primary' |
| | | className='!text-gray-900' |
| | | type={node?.type || BlockEnum.Start} |
| | | /> |
| | | </div> |
| | | <div className='mx-0.5 max-w-[60px] truncate text-xs font-medium text-text-secondary' title={node?.title}>{node?.title}</div> |
| | | <div className='max-w-[60px] mx-0.5 text-xs font-medium text-gray-700 truncate' title={node?.title}>{node?.title}</div> |
| | | <Line3 className='mr-0.5'></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='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-text-primary')} title={varName}>{varName}</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> |
| | | </div> |
| | | </div> |
| | | </span>) |