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'
         >