chore: install from local i18n

web/app/components/plugins/install-plugin/install-from-local-package/index.tsx

@@ -1,14 +1,15 @@
 'use client'
 
 import React, { useCallback, useState } from 'react'
-import { useContext } from 'use-context-selector'
 import Modal from '@/app/components/base/modal'
-import I18n from '@/context/i18n'
 import type { PluginDeclaration } from '../../types'
 import { InstallStep } from '../../types'
 import Uploading from './steps/uploading'
 import Install from './steps/install'
 import Installed from './steps/installed'
+import { useTranslation } from 'react-i18next'
+
+const i18nPrefix = 'plugin.installModal'
 
 type InstallFromLocalPackageProps = {
   file: File
@@ -18,12 +19,18 @@ type InstallFromLocalPackageProps = {
 
 const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
   file,
-  onClose
+  onClose,
 }) => {
+  const { t } = useTranslation()
   const [step, setStep] = useState<InstallStep>(InstallStep.uploading)
-  const { locale } = useContext(I18n)
 
   const [uniqueIdentifier, setUniqueIdentifier] = useState<string | null>(null)
+
+  const getTitle = useCallback(() => {
+    if (step === InstallStep.installed)
+      return t(`${i18nPrefix}.installedSuccessfully`)
+    return t(`${i18nPrefix}.installPlugin`)
+  }, [])
   const [manifest, setManifest] = useState<PluginDeclaration | null>({
     name: 'Notion Sync',
     description: 'Sync your Notion notes with Dify',
@@ -51,7 +58,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
     >
       <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
         <div className='self-stretch text-text-primary title-2xl-semi-bold'>
-          Install plugin
+          {getTitle()}
         </div>
       </div>
       {step === InstallStep.uploading && (

web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx

@@ -6,6 +6,9 @@ import Card from '../../../card'
 import { pluginManifestToCardPluginProps } from '../../utils'
 import Button from '@/app/components/base/button'
 import { sleep } from '@/utils'
+import { Trans, useTranslation } from 'react-i18next'
+
+const i18nPrefix = 'plugin.installModal'
 
 type Props = {
   payload: PluginDeclaration
@@ -18,6 +21,7 @@ const Installed: FC<Props> = ({
   onCancel,
   onInstalled,
 }) => {
+  const { t } = useTranslation()
   const [isInstalling, setIsInstalling] = React.useState(false)
 
   const handleInstall = async () => {
@@ -31,8 +35,13 @@ const Installed: FC<Props> = ({
     <>
       <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
         <div className='text-text-secondary system-md-regular'>
-          <p>About to install the following plugin.</p>
+          <p>{t(`${i18nPrefix}.readyToInstall`)}</p>
-          <p>Please make sure that you only install plugins from a <span className='system-md-semibold'>trusted source</span>.</p>
+          <p>
+            <Trans
+              i18nKey={`${i18nPrefix}.fromTrustSource`}
+              components={{ trustSource: <span className='system-md-semibold' /> }}
+            />
+          </p>
         </div>
         <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
           <Card
@@ -45,7 +54,7 @@ const Installed: FC<Props> = ({
       <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
         {!isInstalling && (
           <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
-            Cancel
+            {t('common.operation.cancel')}
           </Button>
         )}
         <Button
@@ -54,7 +63,7 @@ const Installed: FC<Props> = ({
           disabled={isInstalling}
           onClick={handleInstall}
         >
-          {isInstalling ? 'Installing...' : 'Install'}
+          {t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}
         </Button>
       </div>
     </>

web/app/components/plugins/install-plugin/install-from-local-package/steps/installed.tsx

@@ -5,6 +5,7 @@ import type { PluginDeclaration } from '../../../types'
 import Card from '../../../card'
 import Button from '@/app/components/base/button'
 import { pluginManifestToCardPluginProps } from '../../utils'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   payload: PluginDeclaration
@@ -14,8 +15,9 @@ type Props = {
 
 const Installed: FC<Props> = ({
   payload,
-  onCancel
+  onCancel,
 }) => {
+  const { t } = useTranslation()
   return (
     <>
       <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
@@ -35,7 +37,7 @@ const Installed: FC<Props> = ({
           className='min-w-[72px]'
           onClick={onCancel}
         >
-          close
+          {t('common.operation.close')}
         </Button>
       </div>
     </>

web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx

@@ -6,6 +6,9 @@ import Card from '../../../card'
 import type { PluginDeclaration } from '../../../types'
 import Button from '@/app/components/base/button'
 import { sleep } from '@/utils'
+import { useTranslation } from 'react-i18next'
+
+const i18nPrefix = 'plugin.installModal'
 
 type Props = {
   file: File
@@ -21,9 +24,10 @@ const Uploading: FC<Props> = ({
   onCancel,
   onUploaded,
 }) => {
+  const { t } = useTranslation()
   const fileName = file.name
   const handleUpload = async () => {
-    await sleep(1500)
+    await sleep(3000)
     onUploaded({
       uniqueIdentifier: 'yeuoly/neko:0.0.1@5395654da2c0b919b3d9b946a1a0545b737004380765e5f3b8c49976d3276c87',
       manifest: {
@@ -42,7 +46,9 @@ const Uploading: FC<Props> = ({
         <div className='flex items-center gap-1 self-stretch'>
           <RiLoader2Line className='text-text-accent w-4 h-4' />
           <div className='text-text-secondary system-md-regular'>
-            Uploading {fileName}...
+            {t(`${i18nPrefix}.uploadingPackage`, {
+              packageName: fileName,
+            })}
           </div>
         </div>
         <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
@@ -59,14 +65,14 @@ const Uploading: FC<Props> = ({
       {/* Action Buttons */}
       <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
         <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
-          Cancel
+          {t('common.operation.cancel')}
         </Button>
         <Button
           variant='primary'
           className='min-w-[72px]'
           disabled
         >
-          installing
+          {t(`${i18nPrefix}.install`)}
         </Button>
       </div>
     </>

web/i18n/en-US/common.ts

@@ -39,6 +39,7 @@ const translation = {
     duplicate: 'Duplicate',
     rename: 'Rename',
     audioSourceUnavailable: 'AudioSource is unavailable',
+    close: 'Close',
   },
   errorMsg: {
     fieldRequired: '{{field}} is required',

web/i18n/en-US/plugin.ts

@@ -59,6 +59,15 @@ const translation = {
     deleteContentRight: ' plugin?',
     usedInApps: 'This plugin is being used in {{num}} apps.',
   },
+  installModal: {
+    installPlugin: 'Install Plugin',
+    installedSuccessfully: 'Install successful',
+    install: 'Install',
+    installing: 'Installing...',
+    uploadingPackage: 'Uploading {{packageName}}...',
+    readyToInstall: 'About to install the following plugin.',
+    fromTrustSource: 'Please make sure that you only install plugins from a <trustSource>trusted source</trustSource>.',
+  },
   upgrade: {
     title: 'Upgrade Plugin',
     successfulTitle: 'Upgrade successful',

web/i18n/zh-Hans/common.ts

@@ -39,6 +39,7 @@ const translation = {
     duplicate: '复制',
     rename: '重命名',
     audioSourceUnavailable: '音源不可用',
+    close: '关闭',
   },
   errorMsg: {
     fieldRequired: '{{field}} 为必填项',

web/i18n/zh-Hans/plugin.ts

@@ -59,6 +59,15 @@ const translation = {
     deleteContentRight: ' 插件?',
     usedInApps: '此插件正在 {{num}} 个应用中使用。',
   },
+  installModal: {
+    installPlugin: '安装插件',
+    installedSuccessfully: '安装成功',
+    install: '安装',
+    installing: '安装中...',
+    uploadingPackage: '上传 {{packageName}} 中...',
+    readyToInstall: '即将安装以下插件。',
+    fromTrustSource: '请保证仅从<trustSource>可信源</trustSource>安装插件。',
+  },
   upgrade: {
     title: '升级插件',
     successfulTitle: '升级成功',