feat(pipeline): add language support to built-in pipeline templates and update related components (#26124)

web/app/components/datasets/create-from-pipeline/list/built-in-pipeline-list.tsx

@@ -1,9 +1,18 @@
 import { usePipelineTemplateList } from '@/service/use-pipeline'
 import TemplateCard from './template-card'
 import CreateCard from './create-card'
+import { useI18N } from '@/context/i18n'
+import { useMemo } from 'react'
+import { LanguagesSupported } from '@/i18n-config/language'
 
 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 || []
 
   return (

web/app/components/plugins/plugin-item/index.tsx

@@ -146,7 +146,6 @@ const PluginItem: FC<Props> = ({
         {/* Organization & Name */}
         <div className='flex grow items-center overflow-hidden'>
           <OrgInfo
-            className='mt-0.5'
             orgName={orgName}
             packageName={name}
             packageNameClassName='w-auto max-w-[150px]'
@@ -154,8 +153,8 @@ const PluginItem: FC<Props> = ({
           {category === PluginType.extension && (
             <>
               <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'>
+              <div className='system-xs-regular flex items-center gap-x-1 overflow-hidden text-text-tertiary'>
-                <RiLoginCircleLine className='h-4 w-4 shrink-0' />
+                <RiLoginCircleLine className='size-3 shrink-0' />
                 <span
                   className='truncate'
                   title={t('plugin.endpointsEnabled', { num: endpoints_active })}
@@ -184,7 +183,7 @@ const PluginItem: FC<Props> = ({
             && <>
               <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>
-                <RiArrowRightUpLine className='h-3 w-3 text-text-tertiary' />
+                <RiArrowRightUpLine className='h-3 w-3 text-text-secondary' />
               </a>
             </>
           }

web/app/components/tools/provider/detail.tsx

@@ -244,9 +244,8 @@ const ProviderDetail = ({
               <div className="flex h-5 items-center">
                 <Title title={collection.label[language]} />
               </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
-                  className="mt-0.5"
                   packageNameClassName='w-auto'
                   orgName={collection.author}
                   packageName={collection.name}

web/models/pipeline.ts

@@ -17,6 +17,7 @@ export enum DatasourceType {
 
 export type PipelineTemplateListParams = {
   type: 'built-in' | 'customized'
+  language?: string
 }
 
 export type PipelineTemplate = {

web/service/use-pipeline.ts

@@ -40,8 +40,9 @@ const NAME_SPACE = 'pipeline'
 
 export const PipelineTemplateListQueryKeyPrefix = [NAME_SPACE, 'template-list']
 export const usePipelineTemplateList = (params: PipelineTemplateListParams) => {
+  const { type, language } = params
   return useQuery<PipelineTemplateListResponse>({
-    queryKey: [...PipelineTemplateListQueryKeyPrefix, params.type],
+    queryKey: [...PipelineTemplateListQueryKeyPrefix, type, language],
     queryFn: () => {
       return get<PipelineTemplateListResponse>('/rag/pipeline/templates', { params })
     },
@@ -55,7 +56,7 @@ export const useInvalidCustomizedTemplateList = () => {
 export const usePipelineTemplateById = (params: PipelineTemplateByIdRequest, enabled: boolean) => {
   const { template_id, type } = params
   return useQuery<PipelineTemplateByIdResponse>({
-    queryKey: [NAME_SPACE, 'template', template_id],
+    queryKey: [NAME_SPACE, 'template', type, template_id],
     queryFn: () => {
       return get<PipelineTemplateByIdResponse>(`/rag/pipeline/templates/${template_id}`, {
         params: {
@@ -64,6 +65,7 @@ export const usePipelineTemplateById = (params: PipelineTemplateByIdRequest, ena
       })
     },
     enabled,
+    staleTime: 0,
   })
 }