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/base/chat/chat/answer/index.tsx

@@ -201,7 +201,7 @@ const Answer: FC<AnswerProps> = ({
               annotation?.id && annotation.authorName && (
                 <EditTitle
                   className="mt-1"
-                  title={t('appAnnotation.editBy', { author: annotation.authorName })}
+                  title={t('editBy', { ns: 'appAnnotation', author: annotation.authorName })}
                 />
               )
             }

web/app/components/base/chat/chat/answer/more.tsx

@@ -19,15 +19,15 @@ const More: FC<MoreProps> = ({
           <>
             <div
               className="mr-2 max-w-[25%] shrink-0 truncate"
-              title={`${t('appLog.detail.timeConsuming')} ${more.latency}${t('appLog.detail.second')}`}
+              title={`${t('detail.timeConsuming', { ns: 'appLog' })} ${more.latency}${t('detail.second', { ns: 'appLog' })}`}
             >
-              {`${t('appLog.detail.timeConsuming')} ${more.latency}${t('appLog.detail.second')}`}
+              {`${t('detail.timeConsuming', { ns: 'appLog' })} ${more.latency}${t('detail.second', { ns: 'appLog' })}`}
             </div>
             <div
               className="mr-2 max-w-[25%] shrink-0 truncate"
-              title={`${t('appLog.detail.tokenCost')} ${formatNumber(more.tokens)}`}
+              title={`${t('detail.tokenCost', { ns: 'appLog' })} ${formatNumber(more.tokens)}`}
             >
-              {`${t('appLog.detail.tokenCost')} ${formatNumber(more.tokens)}`}
+              {`${t('detail.tokenCost', { ns: 'appLog' })} ${formatNumber(more.tokens)}`}
             </div>
             {more.tokens_per_second && (
               <div

web/app/components/base/chat/chat/answer/operation.tsx

@@ -92,8 +92,8 @@ const Operation: FC<OperationProps> = ({
   const shouldShowUserFeedbackBar = !isOpeningStatement && config?.supportFeedback && !!onFeedback && !config?.supportAnnotation
   const shouldShowAdminFeedbackBar = !isOpeningStatement && config?.supportFeedback && !!onFeedback && !!config?.supportAnnotation
 
-  const userFeedbackLabel = t('appLog.table.header.userRate') || 'User feedback'
-  const adminFeedbackLabel = t('appLog.table.header.adminRate') || 'Admin feedback'
+  const userFeedbackLabel = t('table.header.userRate', { ns: 'appLog' }) || 'User feedback'
+  const adminFeedbackLabel = t('table.header.adminRate', { ns: 'appLog' }) || 'Admin feedback'
   const feedbackTooltipClassName = 'max-w-[260px]'
 
   const buildFeedbackTooltip = (feedbackData?: Feedback | null, label = userFeedbackLabel) => {
@@ -101,8 +101,8 @@ const Operation: FC<OperationProps> = ({
       return label
 
     const ratingLabel = feedbackData.rating === 'like'
-      ? (t('appLog.detail.operation.like') || 'like')
-      : (t('appLog.detail.operation.dislike') || 'dislike')
+      ? (t('detail.operation.like', { ns: 'appLog' }) || 'like')
+      : (t('detail.operation.dislike', { ns: 'appLog' }) || 'dislike')
     const feedbackText = feedbackData.content?.trim()
 
     if (feedbackText)
@@ -314,7 +314,7 @@ const Operation: FC<OperationProps> = ({
             )}
             <ActionButton onClick={() => {
               copy(content)
-              Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
+              Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
             }}
             >
               <RiClipboardLine className="h-4 w-4" />
@@ -353,23 +353,23 @@ const Operation: FC<OperationProps> = ({
       />
       {isShowFeedbackModal && (
         <Modal
-          title={t('common.feedback.title') || 'Provide Feedback'}
-          subTitle={t('common.feedback.subtitle') || 'Please tell us what went wrong with this response'}
+          title={t('feedback.title', { ns: 'common' }) || 'Provide Feedback'}
+          subTitle={t('feedback.subtitle', { ns: 'common' }) || 'Please tell us what went wrong with this response'}
           onClose={handleFeedbackCancel}
           onConfirm={handleFeedbackSubmit}
           onCancel={handleFeedbackCancel}
-          confirmButtonText={t('common.operation.submit') || 'Submit'}
-          cancelButtonText={t('common.operation.cancel') || 'Cancel'}
+          confirmButtonText={t('operation.submit', { ns: 'common' }) || 'Submit'}
+          cancelButtonText={t('operation.cancel', { ns: 'common' }) || 'Cancel'}
         >
           <div className="space-y-3">
             <div>
               <label className="system-sm-semibold mb-2 block text-text-secondary">
-                {t('common.feedback.content') || 'Feedback Content'}
+                {t('feedback.content', { ns: 'common' }) || 'Feedback Content'}
               </label>
               <Textarea
                 value={feedbackContent}
                 onChange={e => setFeedbackContent(e.target.value)}
-                placeholder={t('common.feedback.placeholder') || 'Please describe what went wrong or how we can improve...'}
+                placeholder={t('feedback.placeholder', { ns: 'common' }) || 'Please describe what went wrong or how we can improve...'}
                 rows={4}
                 className="w-full"
               />

web/app/components/base/chat/chat/answer/tool-detail.tsx

@@ -17,7 +17,7 @@ const ToolDetail = ({
 }: ToolDetailProps) => {
   const { t } = useTranslation()
   const { name, label, input, isFinished, output } = payload
-  const toolLabel = name.startsWith('dataset_') ? t('dataset.knowledge') : label
+  const toolLabel = name.startsWith('dataset_') ? t('knowledge', { ns: 'dataset' }) : label
   const [expand, setExpand] = useState(false)
 
   return (
@@ -37,7 +37,7 @@ const ToolDetail = ({
       >
         {isFinished && <RiHammerFill className="mr-1 h-3.5 w-3.5" />}
         {!isFinished && <RiLoader2Line className="mr-1 h-3.5 w-3.5 animate-spin" />}
-        {t(`tools.thought.${isFinished ? 'used' : 'using'}`)}
+        {t(`thought.${isFinished ? 'used' : 'using'}`, { ns: 'tools' })}
         <div className="mx-1 text-text-secondary">{toolLabel}</div>
         {!expand && <RiArrowRightSLine className="h-4 w-4" />}
         {expand && <RiArrowDownSLine className="ml-auto h-4 w-4" />}
@@ -47,7 +47,7 @@ const ToolDetail = ({
           <>
             <div className="mx-1 mb-0.5 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary">
               <div className="system-xs-semibold-uppercase flex h-7 items-center justify-between px-2 pt-1">
-                {t('tools.thought.requestTitle')}
+                {t('thought.requestTitle', { ns: 'tools' })}
               </div>
               <div className="code-xs-regular break-words px-3 pb-2 pt-1">
                 {input}
@@ -55,7 +55,7 @@ const ToolDetail = ({
             </div>
             <div className="mx-1 mb-1 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary">
               <div className="system-xs-semibold-uppercase flex h-7 items-center justify-between px-2 pt-1">
-                {t('tools.thought.responseTitle')}
+                {t('thought.responseTitle', { ns: 'tools' })}
               </div>
               <div className="code-xs-regular break-words px-3 pb-2 pt-1">
                 {output}

web/app/components/base/chat/chat/answer/workflow-process.tsx

@@ -73,7 +73,7 @@ const WorkflowProcessItem = ({
           )
         }
         <div className={cn('system-xs-medium text-text-secondary', !collapse && 'grow')}>
-          {t('workflow.common.workflowProcess')}
+          {t('common.workflowProcess', { ns: 'workflow' })}
         </div>
         <RiArrowRightSLine className={cn('ml-1 h-4 w-4 text-text-tertiary', !collapse && 'rotate-90')} />
       </div>