Spaces:
Running
Running
File size: 3,501 Bytes
27fd333 |
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 |
import type { FC } from 'react'
import { memo } from 'react'
import { BlockEnum } from './types'
import {
Answer,
Code,
End,
Home,
Http,
IfElse,
KnowledgeRetrieval,
Llm,
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.Tool]: <VariableX className={className} />,
}[type]
}
const ICON_CONTAINER_BG_COLOR_MAP: Record<string, string> = {
[BlockEnum.Start]: 'bg-primary-500',
[BlockEnum.LLM]: 'bg-[#6172F3]',
[BlockEnum.Code]: 'bg-[#2E90FA]',
[BlockEnum.End]: 'bg-[#F79009]',
[BlockEnum.IfElse]: 'bg-[#06AED4]',
[BlockEnum.HttpRequest]: 'bg-[#875BF7]',
[BlockEnum.Answer]: 'bg-[#F79009]',
[BlockEnum.KnowledgeRetrieval]: 'bg-[#16B364]',
[BlockEnum.QuestionClassifier]: 'bg-[#16B364]',
[BlockEnum.TemplateTransform]: 'bg-[#2E90FA]',
[BlockEnum.VariableAssigner]: 'bg-[#2E90FA]',
}
const BlockIcon: FC<BlockIconProps> = ({
type,
size = 'sm',
className,
toolIcon,
}) => {
return (
<div className={`
flex items-center justify-center border-[0.5px] border-white/[0.02] 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)
|