| import { usePipelineTemplateList } from '@/service/use-pipeline' | import { usePipelineTemplateList } from '@/service/use-pipeline' | ||||
| import TemplateCard from './template-card' | import TemplateCard from './template-card' | ||||
| import CreateCard from './create-card' | import CreateCard from './create-card' | ||||
| import { useI18N } from '@/context/i18n' | |||||
| import { useMemo } from 'react' | |||||
| import { LanguagesSupported } from '@/i18n-config/language' | |||||
| const BuiltInPipelineList = () => { | const BuiltInPipelineList = () => { | ||||
| const { data: pipelineList, isLoading } = usePipelineTemplateList({ type: 'built-in' }) | |||||
| const { locale } = useI18N() | |||||
| const language = useMemo(() => { | |||||
| if (['zh-Hans', 'ja-JP'].includes(locale)) | |||||
| return locale | |||||
| return LanguagesSupported[0] | |||||
| }, [locale]) | |||||
| const { data: pipelineList, isLoading } = usePipelineTemplateList({ type: 'built-in', language }) | |||||
| const list = pipelineList?.pipeline_templates || [] | const list = pipelineList?.pipeline_templates || [] | ||||
| return ( | return ( |
| {/* Organization & Name */} | {/* Organization & Name */} | ||||
| <div className='flex grow items-center overflow-hidden'> | <div className='flex grow items-center overflow-hidden'> | ||||
| <OrgInfo | <OrgInfo | ||||
| className='mt-0.5' | |||||
| orgName={orgName} | orgName={orgName} | ||||
| packageName={name} | packageName={name} | ||||
| packageNameClassName='w-auto max-w-[150px]' | packageNameClassName='w-auto max-w-[150px]' | ||||
| {category === PluginType.extension && ( | {category === PluginType.extension && ( | ||||
| <> | <> | ||||
| <div className='system-xs-regular mx-2 text-text-quaternary'>·</div> | <div className='system-xs-regular mx-2 text-text-quaternary'>·</div> | ||||
| <div className='system-xs-regular flex space-x-1 overflow-hidden text-text-tertiary'> | |||||
| <RiLoginCircleLine className='h-4 w-4 shrink-0' /> | |||||
| <div className='system-xs-regular flex items-center gap-x-1 overflow-hidden text-text-tertiary'> | |||||
| <RiLoginCircleLine className='size-3 shrink-0' /> | |||||
| <span | <span | ||||
| className='truncate' | className='truncate' | ||||
| title={t('plugin.endpointsEnabled', { num: endpoints_active })} | title={t('plugin.endpointsEnabled', { num: endpoints_active })} | ||||
| && <> | && <> | ||||
| <a href={getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })} target='_blank' className='flex items-center gap-0.5'> | <a href={getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })} target='_blank' className='flex items-center gap-0.5'> | ||||
| <div className='system-2xs-medium-uppercase text-text-tertiary'>{t('plugin.from')} <span className='text-text-secondary'>marketplace</span></div> | <div className='system-2xs-medium-uppercase text-text-tertiary'>{t('plugin.from')} <span className='text-text-secondary'>marketplace</span></div> | ||||
| <RiArrowRightUpLine className='h-3 w-3 text-text-tertiary' /> | |||||
| <RiArrowRightUpLine className='h-3 w-3 text-text-secondary' /> | |||||
| </a> | </a> | ||||
| </> | </> | ||||
| } | } |
| <div className="flex h-5 items-center"> | <div className="flex h-5 items-center"> | ||||
| <Title title={collection.label[language]} /> | <Title title={collection.label[language]} /> | ||||
| </div> | </div> | ||||
| <div className='mb-1 flex h-4 items-center justify-between'> | |||||
| <div className='mb-1 mt-0.5 flex h-4 items-center justify-between'> | |||||
| <OrgInfo | <OrgInfo | ||||
| className="mt-0.5" | |||||
| packageNameClassName='w-auto' | packageNameClassName='w-auto' | ||||
| orgName={collection.author} | orgName={collection.author} | ||||
| packageName={collection.name} | packageName={collection.name} |
| export type PipelineTemplateListParams = { | export type PipelineTemplateListParams = { | ||||
| type: 'built-in' | 'customized' | type: 'built-in' | 'customized' | ||||
| language?: string | |||||
| } | } | ||||
| export type PipelineTemplate = { | export type PipelineTemplate = { |
| export const PipelineTemplateListQueryKeyPrefix = [NAME_SPACE, 'template-list'] | export const PipelineTemplateListQueryKeyPrefix = [NAME_SPACE, 'template-list'] | ||||
| export const usePipelineTemplateList = (params: PipelineTemplateListParams) => { | export const usePipelineTemplateList = (params: PipelineTemplateListParams) => { | ||||
| const { type, language } = params | |||||
| return useQuery<PipelineTemplateListResponse>({ | return useQuery<PipelineTemplateListResponse>({ | ||||
| queryKey: [...PipelineTemplateListQueryKeyPrefix, params.type], | |||||
| queryKey: [...PipelineTemplateListQueryKeyPrefix, type, language], | |||||
| queryFn: () => { | queryFn: () => { | ||||
| return get<PipelineTemplateListResponse>('/rag/pipeline/templates', { params }) | return get<PipelineTemplateListResponse>('/rag/pipeline/templates', { params }) | ||||
| }, | }, | ||||
| export const usePipelineTemplateById = (params: PipelineTemplateByIdRequest, enabled: boolean) => { | export const usePipelineTemplateById = (params: PipelineTemplateByIdRequest, enabled: boolean) => { | ||||
| const { template_id, type } = params | const { template_id, type } = params | ||||
| return useQuery<PipelineTemplateByIdResponse>({ | return useQuery<PipelineTemplateByIdResponse>({ | ||||
| queryKey: [NAME_SPACE, 'template', template_id], | |||||
| queryKey: [NAME_SPACE, 'template', type, template_id], | |||||
| queryFn: () => { | queryFn: () => { | ||||
| return get<PipelineTemplateByIdResponse>(`/rag/pipeline/templates/${template_id}`, { | return get<PipelineTemplateByIdResponse>(`/rag/pipeline/templates/${template_id}`, { | ||||
| params: { | params: { | ||||
| }) | }) | ||||
| }, | }, | ||||
| enabled, | enabled, | ||||
| staleTime: 0, | |||||
| }) | }) | ||||
| } | } | ||||