fix: malformed dynamic translation key chunk.docType.${chunkType} (#12329)

### What problem does this PR solve?

Back-end may returns empty array on `"doc_type_kwd"` property which
causes translation key malformed.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/interfaces/database/knowledge.ts

@@ -116,7 +116,7 @@ export interface ITenantInfo {
   tts_id: string;
 }
 
-export type ChunkDocType = 'image' | 'table';
+export type ChunkDocType = 'image' | 'table' | 'text';
 
 export interface IChunk {
   available_int: number; // Whether to enable, 0: not enabled, 1: enabled

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx

@@ -8,7 +8,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
-import { IChunk } from '@/interfaces/database/knowledge';
+import type { ChunkDocType, IChunk } from '@/interfaces/database/knowledge';
 import { cn } from '@/lib/utils';
 import { CheckedState } from '@radix-ui/react-checkbox';
 import classNames from 'classnames';
@@ -67,6 +67,10 @@ const ChunkCard = ({
     setEnabled(available === 1);
   }, [available]);
 
+  const chunkType =
+    ((item.doc_type_kwd &&
+      String(item.doc_type_kwd)?.toLowerCase()) as ChunkDocType) || 'text';
+
   return (
     <Card
       className={classNames('relative flex-none', styles.chunkCard, {
@@ -81,9 +85,7 @@ const ChunkCard = ({
         bg-bg-card rounded-bl-2xl rounded-tr-lg
         border-l-0.5 border-b-0.5 border-border-button"
       >
-        {t(
+        {t(`chunk.docType.${chunkType}`)}
-          `chunk.docType.${item.doc_type_kwd ? String(item.doc_type_kwd).toLowerCase() : 'text'}`,
-        )}
       </span>
 
       <div className="flex items-start justify-between gap-2">

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/index.tsx

@@ -22,6 +22,7 @@ import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { useFetchChunk } from '@/hooks/use-chunk-request';
 import { IModalProps } from '@/interfaces/common';
+import type { ChunkDocType } from '@/interfaces/database/knowledge';
 import React, { useCallback, useEffect, useState } from 'react';
 import { FieldValues, FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -151,20 +152,25 @@ const ChunkCreatingModal: React.FC<IModalProps<any> & kFProps> = ({
             <FormField
               control={form.control}
               name="doc_type_kwd"
-              render={({ field }) => (
+              render={({ field }) => {
+                const chunkType =
+                  ((field.value &&
+                    String(field.value)?.toLowerCase()) as ChunkDocType) ||
+                  'text';
+
+                return (
                   <FormItem>
                     <FormLabel>{t(`chunk.type`)}</FormLabel>
                     <FormControl>
                       <Input
                         type="text"
-                      value={t(
+                        value={t(`chunk.docType.${chunkType}`)}
-                        `chunk.docType.${field.value ? String(field.value).toLowerCase() : 'text'}`,
-                      )}
                         readOnly
                       />
                     </FormControl>
                   </FormItem>
-              )}
+                );
+              }}
             />
           )}