feat: Add useDatasetApiAccessUrl hook and update API links in various components for localization support

web/app/components/datasets/create/embedding-process/index.tsx

@@ -32,6 +32,8 @@ import { RETRIEVE_METHOD } from '@/types/app'
 import Tooltip from '@/app/components/base/tooltip'
 import { useInvalidDocumentList } from '@/service/knowledge/use-document'
 import Divider from '@/app/components/base/divider'
+import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
+import Link from 'next/link'
 
 type Props = {
   datasetId: string
@@ -212,9 +214,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
     invalidDocumentList()
     router.push(`/datasets/${datasetId}/documents`)
   }
-  const navToApiDocs = () => {
-    router.push('/datasets?category=api')
-  }
+  const apiReferenceUrl = useDatasetApiAccessUrl()
 
   const isEmbedding = useMemo(() => {
     return indexingStatusBatchDetail.some(indexingStatusDetail => ['indexing', 'splitting', 'parsing', 'cleaning'].includes(indexingStatusDetail?.indexing_status || ''))
@@ -344,13 +344,18 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
         />
       </div>
       <div className='mt-6 flex items-center gap-x-2 py-2'>
-        <Button
-          className='w-fit gap-x-0.5 px-3'
-          onClick={navToApiDocs}
+        <Link
+          href={apiReferenceUrl}
+          target='_blank'
+          rel='noopener noreferrer'
         >
-          <RiTerminalBoxLine className='size-4' />
-          <span className='px-0.5'>Access the API</span>
-        </Button>
+          <Button
+            className='w-fit gap-x-0.5 px-3'
+          >
+            <RiTerminalBoxLine className='size-4' />
+            <span className='px-0.5'>Access the API</span>
+          </Button>
+        </Link>
         <Button
           className='w-fit gap-x-0.5 px-3'
           variant='primary'

web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx

@@ -26,6 +26,8 @@ import type { RETRIEVE_METHOD } from '@/types/app'
 import { DatasourceType, type InitialDocumentDetail } from '@/models/pipeline'
 import { useIndexingStatusBatch, useProcessRule } from '@/service/knowledge/use-dataset'
 import Divider from '@/app/components/base/divider'
+import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
+import Link from 'next/link'
 
 type EmbeddingProcessProps = {
   datasetId: string
@@ -84,9 +86,7 @@ const EmbeddingProcess = ({
     invalidDocumentList()
     router.push(`/datasets/${datasetId}/documents`)
   }
-  const navToApiDocs = () => {
-    router.push('/datasets?category=api')
-  }
+  const apiReferenceUrl = useDatasetApiAccessUrl()
 
   const isEmbeddingWaiting = useMemo(() => {
     if (!indexingStatusBatchDetail.length) return false
@@ -223,13 +223,18 @@ const EmbeddingProcess = ({
         />
       </div>
       <div className='mt-6 flex items-center gap-x-2 py-2'>
-        <Button
-          className='w-fit gap-x-0.5 px-3'
-          onClick={navToApiDocs}
+        <Link
+          href={apiReferenceUrl}
+          target='_blank'
+          rel='noopener noreferrer'
         >
-          <RiTerminalBoxLine className='size-4' />
-          <span className='px-0.5'>Access the API</span>
-        </Button>
+          <Button
+            className='w-fit gap-x-0.5 px-3'
+          >
+            <RiTerminalBoxLine className='size-4' />
+            <span className='px-0.5'>Access the API</span>
+          </Button>
+        </Link>
         <Button
           className='w-fit gap-x-0.5 px-3'
           variant='primary'

web/app/components/datasets/extra-info/service-api/card.tsx

@@ -12,6 +12,7 @@ import { useDisableDatasetServiceApi, useEnableDatasetServiceApi } from '@/servi
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import Link from 'next/link'
 import SecretKeyModal from '@/app/components/develop/secret-key/secret-key-modal'
+import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
 
 type CardProps = {
   apiEnabled: boolean
@@ -31,6 +32,8 @@ const Card = ({
 
   const isCurrentWorkspaceManager = useAppContextSelector(state => state.isCurrentWorkspaceManager)
 
+  const apiReferenceUrl = useDatasetApiAccessUrl()
+
   const onToggle = useCallback(async (state: boolean) => {
     let result: 'success' | 'fail'
     if (state)
@@ -113,7 +116,7 @@ const Card = ({
           </span>
         </Button>
         <Link
-          href={'https://docs.dify.ai/api-reference/datasets'}
+          href={apiReferenceUrl}
           target='_blank'
           rel='noopener noreferrer'
         >

web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx

@@ -45,6 +45,7 @@ import PremiumBadge from '@/app/components/base/premium-badge'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import { useModalContextSelector } from '@/context/modal-context'
 import Link from 'next/link'
+import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
 
 const PUBLISH_SHORTCUT = ['ctrl', '⇧', 'P']
 
@@ -64,6 +65,7 @@ const Popup = () => {
   const workflowStore = useWorkflowStore()
   const { isAllowPublishAsCustomKnowledgePipelineTemplate } = useProviderContext()
   const setShowPricingModal = useModalContextSelector(s => s.setShowPricingModal)
+  const apiReferenceUrl = useDatasetApiAccessUrl()
 
   const [confirmVisible, {
     setFalse: hideConfirm,
@@ -273,7 +275,11 @@ const Popup = () => {
           </div>
           <RiArrowRightUpLine className='ml-2 h-4 w-4 shrink-0' />
         </Button>
-        <a href='/datasets?category=api' target='_blank'>
+        <Link
+          href={apiReferenceUrl}
+          target='_blank'
+          rel='noopener noreferrer'
+        >
           <Button
             className='w-full hover:bg-state-accent-hover hover:text-text-accent'
             variant='tertiary'
@@ -285,7 +291,7 @@ const Popup = () => {
             </div>
             <RiArrowRightUpLine className='ml-2 h-4 w-4 shrink-0' />
           </Button>
-        </a>
+        </Link>
         <Divider className='my-2' />
         <Button
           className='w-full hover:bg-state-accent-hover hover:text-text-accent'

web/hooks/use-api-access-url.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react'
+import { useGetLanguage } from '@/context/i18n'
+
+export const useDatasetApiAccessUrl = () => {
+  const locale = useGetLanguage()
+
+  const apiReferenceUrl = useMemo(() => {
+    if (locale === 'zh_Hans')
+      return 'https://docs.dify.ai/api-reference/%E6%95%B0%E6%8D%AE%E9%9B%86'
+    if (locale === 'ja_JP')
+      return 'https://docs.dify.ai/api-reference/%E3%83%87%E3%83%BC%E3%82%BF%E3%82%BB%E3%83%83%E3%83%88'
+    return 'https://docs.dify.ai/api-reference/datasets'
+  }, [locale])
+
+  return apiReferenceUrl
+}