refactor(ui): update knowledge graph, chunk, metadata, agent log styles (#13518)

### What problem does this PR solve?

Update UI styles:
- **Dataset** > **Knowledge graph** tooltip
- **Dataset** > **Files** > **Manage metadata** modal
- **Dataset** > **Files** > **Modify Chunking Method** > **Auto
metadata** > **Manage generation settings** modal
- **Agent** > **Canvas (Ingestion pipeline)** > **Dataflow result**

### Type of change

- [x] Refactoring

web/src/components/document-preview/document-header.tsx

@@ -1,21 +1,35 @@
 import { formatDate } from '@/utils/date';
 import { formatBytes } from '@/utils/file-util';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
   size: number;
   name: string;
   create_date: string;
+  className?: string;
 };
 
-export default ({ size, name, create_date }: Props) => {
+export default ({ size, name, create_date, className }: Props) => {
   const sizeName = formatBytes(size);
   const dateStr = formatDate(create_date);
+
+  const { t } = useTranslation();
+
   return (
-    <div>
-      <h2 className="text-[16px] truncate">{name}</h2>
-      <div className="text-text-secondary text-[12px] pt-[5px]">
-        Size：{sizeName} Uploaded Time：{dateStr}
-      </div>
-    </div>
+    <header className={className}>
+      <h2 className="text-2xl font-semibold truncate">{name}</h2>
+      <dl
+        className="
+        text-text-secondary text-sm flex
+        [&_dt]:after:content-[':'] [&_dt]:after:me-[.5ch]
+        [&_dd]:me-[2ch]"
+      >
+        <dt>{t('chunk.size')}</dt>
+        <dd>{sizeName}</dd>
+
+        <dt>{t('chunk.uploadedTime')}</dt>
+        <dd>{dateStr}</dd>
+      </dl>
+    </header>
   );
 };