refactor(i18n): use JSON with flattened key and namespace (#30114)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx

@@ -260,10 +260,10 @@ const ToolSelector: FC<Props> = ({
               isError={(!currentProvider || !currentTool) && !inMarketPlace}
               errorTip={(
                 <div className="max-w-[240px] space-y-1 text-xs">
-                  <h3 className="font-semibold text-text-primary">{currentTool ? t('plugin.detailPanel.toolSelector.uninstalledTitle') : t('plugin.detailPanel.toolSelector.unsupportedTitle')}</h3>
-                  <p className="tracking-tight text-text-secondary">{currentTool ? t('plugin.detailPanel.toolSelector.uninstalledContent') : t('plugin.detailPanel.toolSelector.unsupportedContent')}</p>
+                  <h3 className="font-semibold text-text-primary">{currentTool ? t('detailPanel.toolSelector.uninstalledTitle', { ns: 'plugin' }) : t('detailPanel.toolSelector.unsupportedTitle', { ns: 'plugin' })}</h3>
+                  <p className="tracking-tight text-text-secondary">{currentTool ? t('detailPanel.toolSelector.uninstalledContent', { ns: 'plugin' }) : t('detailPanel.toolSelector.unsupportedContent', { ns: 'plugin' })}</p>
                   <p>
-                    <Link href="/plugins" className="tracking-tight text-text-accent">{t('plugin.detailPanel.toolSelector.uninstalledLink')}</Link>
+                    <Link href="/plugins" className="tracking-tight text-text-accent">{t('detailPanel.toolSelector.uninstalledLink', { ns: 'plugin' })}</Link>
                   </p>
                 </div>
               )}
@@ -274,12 +274,12 @@ const ToolSelector: FC<Props> = ({
         <PortalToFollowElemContent className="z-10">
           <div className={cn('relative max-h-[642px] min-h-20 w-[361px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-4 shadow-lg backdrop-blur-sm', 'overflow-y-auto pb-2')}>
             <>
-              <div className="system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary">{t(`plugin.detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`)}</div>
+              <div className="system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary">{t(`detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`, { ns: 'plugin' })}</div>
               {/* base form */}
               <div className="flex flex-col gap-3 px-4 py-2">
                 <div className="flex flex-col gap-1">
                   <div className="system-sm-semibold flex h-6 items-center justify-between text-text-secondary">
-                    {t('plugin.detailPanel.toolSelector.toolLabel')}
+                    {t('detailPanel.toolSelector.toolLabel', { ns: 'plugin' })}
                     <ReadmeEntrance pluginDetail={currentProvider as any} showShortTip className="pb-0" />
                   </div>
                   <ToolPicker
@@ -304,10 +304,10 @@ const ToolSelector: FC<Props> = ({
                   />
                 </div>
                 <div className="flex flex-col gap-1">
-                  <div className="system-sm-semibold flex h-6 items-center text-text-secondary">{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
+                  <div className="system-sm-semibold flex h-6 items-center text-text-secondary">{t('detailPanel.toolSelector.descriptionLabel', { ns: 'plugin' })}</div>
                   <Textarea
                     className="resize-none"
-                    placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
+                    placeholder={t('detailPanel.toolSelector.descriptionPlaceholder', { ns: 'plugin' })}
                     value={value?.extra?.description || ''}
                     onChange={handleDescriptionChange}
                     disabled={!value?.provider_name}
@@ -348,30 +348,30 @@ const ToolSelector: FC<Props> = ({
                         setCurrType(value)
                       }}
                       options={[
-                        { value: 'settings', text: t('plugin.detailPanel.toolSelector.settings')! },
-                        { value: 'params', text: t('plugin.detailPanel.toolSelector.params')! },
+                        { value: 'settings', text: t('detailPanel.toolSelector.settings', { ns: 'plugin' })! },
+                        { value: 'params', text: t('detailPanel.toolSelector.params', { ns: 'plugin' })! },
                       ]}
                     />
                   )}
                   {nodeId && showTabSlider && currType === 'params' && (
                     <div className="px-4 py-2">
-                      <div className="system-xs-regular text-text-tertiary">{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
-                      <div className="system-xs-regular text-text-tertiary">{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
+                      <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip1', { ns: 'plugin' })}</div>
+                      <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip2', { ns: 'plugin' })}</div>
                     </div>
                   )}
                   {/* user settings only */}
                   {userSettingsOnly && (
                     <div className="p-4 pb-1">
-                      <div className="system-sm-semibold-uppercase text-text-primary">{t('plugin.detailPanel.toolSelector.settings')}</div>
+                      <div className="system-sm-semibold-uppercase text-text-primary">{t('detailPanel.toolSelector.settings', { ns: 'plugin' })}</div>
                     </div>
                   )}
                   {/* reasoning config only */}
                   {nodeId && reasoningConfigOnly && (
                     <div className="mb-1 p-4 pb-1">
-                      <div className="system-sm-semibold-uppercase text-text-primary">{t('plugin.detailPanel.toolSelector.params')}</div>
+                      <div className="system-sm-semibold-uppercase text-text-primary">{t('detailPanel.toolSelector.params', { ns: 'plugin' })}</div>
                       <div className="pb-1">
-                        <div className="system-xs-regular text-text-tertiary">{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
-                        <div className="system-xs-regular text-text-tertiary">{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
+                        <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip1', { ns: 'plugin' })}</div>
+                        <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip2', { ns: 'plugin' })}</div>
                       </div>
                     </div>
                   )}

web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx

@@ -223,7 +223,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
               <Tooltip
                 popupContent={(
                   <div className="system-xs-medium text-text-secondary">
-                    {t('workflow.nodes.agent.clickToViewParameterSchema')}
+                    {t('nodes.agent.clickToViewParameterSchema', { ns: 'workflow' })}
                   </div>
                 )}
                 asChild={false}
@@ -239,7 +239,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
 
           </div>
           <div className="flex cursor-pointer items-center gap-1 rounded-[6px] border border-divider-subtle bg-background-default-lighter px-2 py-1 hover:bg-state-base-hover" onClick={() => handleAutomatic(variable, !auto, type)}>
-            <span className="system-xs-medium text-text-secondary">{t('plugin.detailPanel.toolSelector.auto')}</span>
+            <span className="system-xs-medium text-text-secondary">{t('detailPanel.toolSelector.auto', { ns: 'plugin' })}</span>
             <Switch
               size="xs"
               defaultValue={!!auto}
@@ -345,7 +345,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
             rel="noopener noreferrer"
             className="inline-flex items-center text-xs text-text-accent"
           >
-            {t('tools.howToGet')}
+            {t('howToGet', { ns: 'tools' })}
             <RiArrowRightUpLine className="ml-1 h-3 w-3" />
           </a>
         )}

web/app/components/plugins/plugin-detail-panel/tool-selector/schema-modal.tsx

@@ -33,7 +33,7 @@ const SchemaModal: FC<Props> = ({
         {/* Header */}
         <div className="relative flex p-6 pb-3 pr-14">
           <div className="title-2xl-semi-bold grow truncate text-text-primary">
-            {t('workflow.nodes.agent.parameterSchema')}
+            {t('nodes.agent.parameterSchema', { ns: 'workflow' })}
           </div>
           <div className="absolute right-5 top-5 flex h-8 w-8 items-center justify-center p-1.5" onClick={onClose}>
             <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />

web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx

@@ -46,7 +46,7 @@ const ToolCredentialForm: FC<Props> = ({
   const handleSave = () => {
     for (const field of credentialSchema) {
       if (field.required && !tempCredential[field.name]) {
-        Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: getValueFromI18nObject(field.label) }) })
+        Toast.notify({ type: 'error', message: t('errorMsg.fieldRequired', { ns: 'common', field: getValueFromI18nObject(field.label) }) })
         return
       }
     }
@@ -78,7 +78,7 @@ const ToolCredentialForm: FC<Props> = ({
                           rel="noopener noreferrer"
                           className="inline-flex items-center text-xs text-text-accent"
                         >
-                          {t('tools.howToGet')}
+                          {t('howToGet', { ns: 'tools' })}
                           <RiArrowRightUpLine className="ml-1 h-3 w-3" />
                         </a>
                       )
@@ -87,8 +87,8 @@ const ToolCredentialForm: FC<Props> = ({
               </div>
               <div className={cn('mt-1 flex justify-end px-4')}>
                 <div className="flex space-x-2">
-                  <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
-                  <Button variant="primary" onClick={handleSave}>{t('common.operation.save')}</Button>
+                  <Button onClick={onCancel}>{t('operation.cancel', { ns: 'common' })}</Button>
+                  <Button variant="primary" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
                 </div>
               </div>
             </>

web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx

@@ -130,13 +130,13 @@ const ToolItem = ({
       )}
       {!isError && !uninstalled && !versionMismatch && noAuth && (
         <Button variant="secondary" size="small">
-          {t('tools.notAuthorized')}
+          {t('notAuthorized', { ns: 'tools' })}
           <Indicator className="ml-2" color="orange" />
         </Button>
       )}
       {!isError && !uninstalled && !versionMismatch && authRemoved && (
         <Button variant="secondary" size="small">
-          {t('plugin.auth.authRemoved')}
+          {t('auth.authRemoved', { ns: 'plugin' })}
           <Indicator className="ml-2" color="red" />
         </Button>
       )}
@@ -147,9 +147,9 @@ const ToolItem = ({
             uniqueIdentifier={installInfo}
             tooltip={(
               <ToolTipContent
-                title={t('plugin.detailPanel.toolSelector.unsupportedTitle')}
+                title={t('detailPanel.toolSelector.unsupportedTitle', { ns: 'plugin' })}
               >
-                {`${t('plugin.detailPanel.toolSelector.unsupportedContent')} ${t('plugin.detailPanel.toolSelector.unsupportedContent2')}`}
+                {`${t('detailPanel.toolSelector.unsupportedContent', { ns: 'plugin' })} ${t('detailPanel.toolSelector.unsupportedContent2', { ns: 'plugin' })}`}
               </ToolTipContent>
             )}
             onChange={() => {

web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx

@@ -48,7 +48,7 @@ const ToolTrigger = ({
       )}
       {!value?.provider_name && (
         <div className="system-sm-regular grow text-components-input-text-placeholder">
-          {!isConfigure ? t('plugin.detailPanel.toolSelector.placeholder') : t('plugin.detailPanel.configureTool')}
+          {!isConfigure ? t('detailPanel.toolSelector.placeholder', { ns: 'plugin' }) : t('detailPanel.configureTool', { ns: 'plugin' })}
         </div>
       )}
       {isConfigure && (