refactor: generalize method for getting doc link respecting locale and fix error link paths (#20801)

web/app/components/datasets/external-api/external-api-panel/index.tsx

@@ -12,6 +12,7 @@ import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
 import { useModalContext } from '@/context/modal-context'
+import { useDocLink } from '@/context/i18n'
 
 type ExternalAPIPanelProps = {
   onClose: () => void
@@ -19,6 +20,7 @@ type ExternalAPIPanelProps = {
 
 const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({ onClose }) => {
   const { t } = useTranslation()
+  const docLink = useDocLink()
   const { setShowExternalKnowledgeAPIModal } = useModalContext()
   const { externalKnowledgeApiList, mutateExternalKnowledgeApis, isLoading } = useExternalKnowledgeApi()
 
@@ -50,7 +52,8 @@ const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({ onClose }) => {
           <div className='flex grow flex-col items-start gap-1'>
             <div className='system-xl-semibold self-stretch text-text-primary'>{t('dataset.externalAPIPanelTitle')}</div>
             <div className='body-xs-regular self-stretch text-text-tertiary'>{t('dataset.externalAPIPanelDescription')}</div>
-            <a className='flex cursor-pointer items-center justify-center gap-1 self-stretch' href='https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' target='_blank'>
+            <a className='flex cursor-pointer items-center justify-center gap-1 self-stretch'
+               href={docLink('/guides/knowledge-base/external-knowledge-api-documentation')} target='_blank'>
               <RiBookOpenLine className='h-3 w-3 text-text-accent' />
               <div className='body-xs-regular grow text-text-accent'>{t('dataset.externalAPIPanelDocumentation')}</div>
             </a>