File size: 4,566 Bytes
a8b3f00 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
import type { FC } from 'react'
import { memo } from 'react'
import { BlockEnum } from './types'
import {
Answer,
Assigner,
Code,
DocsExtractor,
End,
Home,
Http,
IfElse,
Iteration,
KnowledgeRetrieval,
ListFilter,
Llm,
ParameterExtractor,
QuestionClassifier,
TemplatingTransform,
VariableX,
} from '@/app/components/base/icons/src/vender/workflow'
import AppIcon from '@/app/components/base/app-icon'
type BlockIconProps = {
type: BlockEnum
size?: string
className?: string
toolIcon?: string | { content: string; background: string }
}
const ICON_CONTAINER_CLASSNAME_SIZE_MAP: Record<string, string> = {
xs: 'w-4 h-4 rounded-[5px] shadow-xs',
sm: 'w-5 h-5 rounded-md shadow-xs',
md: 'w-6 h-6 rounded-lg shadow-md',
}
const getIcon = (type: BlockEnum, className: string) => {
return {
[BlockEnum.Start]: <Home className={className} />,
[BlockEnum.LLM]: <Llm className={className} />,
[BlockEnum.Code]: <Code className={className} />,
[BlockEnum.End]: <End className={className} />,
[BlockEnum.IfElse]: <IfElse className={className} />,
[BlockEnum.HttpRequest]: <Http className={className} />,
[BlockEnum.Answer]: <Answer className={className} />,
[BlockEnum.KnowledgeRetrieval]: <KnowledgeRetrieval className={className} />,
[BlockEnum.QuestionClassifier]: <QuestionClassifier className={className} />,
[BlockEnum.TemplateTransform]: <TemplatingTransform className={className} />,
[BlockEnum.VariableAssigner]: <VariableX className={className} />,
[BlockEnum.VariableAggregator]: <VariableX className={className} />,
[BlockEnum.Assigner]: <Assigner className={className} />,
[BlockEnum.Tool]: <VariableX className={className} />,
[BlockEnum.Iteration]: <Iteration className={className} />,
[BlockEnum.ParameterExtractor]: <ParameterExtractor className={className} />,
[BlockEnum.DocExtractor]: <DocsExtractor className={className} />,
[BlockEnum.ListFilter]: <ListFilter className={className} />,
}[type]
}
const ICON_CONTAINER_BG_COLOR_MAP: Record<string, string> = {
[BlockEnum.Start]: 'bg-util-colors-blue-brand-blue-brand-500',
[BlockEnum.LLM]: 'bg-util-colors-indigo-indigo-500',
[BlockEnum.Code]: 'bg-util-colors-blue-blue-500',
[BlockEnum.End]: 'bg-util-colors-warning-warning-500',
[BlockEnum.IfElse]: 'bg-util-colors-cyan-cyan-500',
[BlockEnum.Iteration]: 'bg-util-colors-cyan-cyan-500',
[BlockEnum.HttpRequest]: 'bg-util-colors-violet-violet-500',
[BlockEnum.Answer]: 'bg-util-colors-warning-warning-500',
[BlockEnum.KnowledgeRetrieval]: 'bg-util-colors-green-green-500',
[BlockEnum.QuestionClassifier]: 'bg-util-colors-green-green-500',
[BlockEnum.TemplateTransform]: 'bg-util-colors-blue-blue-500',
[BlockEnum.VariableAssigner]: 'bg-util-colors-blue-blue-500',
[BlockEnum.VariableAggregator]: 'bg-util-colors-blue-blue-500',
[BlockEnum.Assigner]: 'bg-util-colors-blue-blue-500',
[BlockEnum.ParameterExtractor]: 'bg-util-colors-blue-blue-500',
[BlockEnum.DocExtractor]: 'bg-util-colors-green-green-500',
[BlockEnum.ListFilter]: 'bg-util-colors-cyan-cyan-500',
}
const BlockIcon: FC<BlockIconProps> = ({
type,
size = 'sm',
className,
toolIcon,
}) => {
return (
<div className={`
flex items-center justify-center border-[0.5px] border-white/2 text-white
${ICON_CONTAINER_CLASSNAME_SIZE_MAP[size]}
${ICON_CONTAINER_BG_COLOR_MAP[type]}
${toolIcon && '!shadow-none'}
${className}
`}
>
{
type !== BlockEnum.Tool && (
getIcon(type, size === 'xs' ? 'w-3 h-3' : 'w-3.5 h-3.5')
)
}
{
type === BlockEnum.Tool && toolIcon && (
<>
{
typeof toolIcon === 'string'
? (
<div
className='shrink-0 w-full h-full bg-cover bg-center rounded-md'
style={{
backgroundImage: `url(${toolIcon})`,
}}
></div>
)
: (
<AppIcon
className='shrink-0 !w-full !h-full'
size='tiny'
icon={toolIcon?.content}
background={toolIcon?.background}
/>
)
}
</>
)
}
</div>
)
}
export const VarBlockIcon: FC<BlockIconProps> = ({
type,
className,
}) => {
return (
<>
{getIcon(type, `w-3 h-3 ${className}`)}
</>
)
}
export default memo(BlockIcon)
|