@alicloud/appflow-chat 0.0.4-beta.5 → 0.0.4-beta.6

package/src/i18n/utils.ts

@@ -0,0 +1,67 @@
+/**
+ * i18n 工具函数：插值、路径取值、深度合并
+ */
+
+import type { TranslationParams } from '../locales/types';
+
+/**
+ * 字符串插值
+ * @example
+ *   interpolate('请输入{title}', { title: '名称' }) // '请输入名称'
+ */
+export function interpolate(template: string, params: TranslationParams): string {
+  return template.replace(/\{(\w+)\}/g, (_, key: string) => {
+    const value = params[key];
+    return value === undefined || value === null ? `{${key}}` : String(value);
+  });
+}
+
+/**
+ * 按点分路径从对象中取值
+ * @example
+ *   getByPath({ a: { b: 1 } }, 'a.b') // 1
+ */
+export function getByPath(obj: unknown, path: string): unknown {
+  if (!obj || typeof obj !== 'object') return undefined;
+  return path.split('.').reduce<unknown>((acc, key) => {
+    if (acc && typeof acc === 'object' && key in acc) {
+      return (acc as Record<string, unknown>)[key];
+    }
+    return undefined;
+  }, obj);
+}
+
+/**
+ * 深度合并两个对象（不修改原对象）
+ * 仅合并普通对象，数组和其他类型直接覆盖。
+ */
+export function deepMerge<T extends Record<string, unknown>>(
+  target: T,
+  source: Record<string, unknown> | undefined
+): T {
+  if (!source) return target;
+
+  const result: Record<string, unknown> = { ...target };
+
+  for (const key of Object.keys(source)) {
+    const sourceValue = source[key];
+    const targetValue = result[key];
+
+    if (isPlainObject(targetValue) && isPlainObject(sourceValue)) {
+      result[key] = deepMerge(
+        targetValue as Record<string, unknown>,
+        sourceValue as Record<string, unknown>
+      );
+    } else if (sourceValue !== undefined) {
+      result[key] = sourceValue;
+    }
+  }
+
+  return result as T;
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  if (value === null || typeof value !== 'object') return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === null || proto === Object.prototype;
+}

package/src/index.ts

@@ -79,3 +79,28 @@ export type {
 // ==================== 工具函数导出 ====================
 export { loadEchartsScript } from './utils/loadEcharts';
 export { loadMermaidScript } from './utils/loadMermaid';
+
+// ==================== 国际化（i18n）导出 ====================
+export {
+  LocaleProvider,
+  LocaleContext,
+  useTranslation,
+  translate,
+  setGlobalLocale,
+  getGlobalLocale,
+  getGlobalLocaleName,
+} from './i18n';
+export type {
+  LocaleProviderProps,
+  LocaleContextValue,
+  UseTranslationResult,
+} from './i18n';
+
+// ==================== 国际化词条导出 ====================
+export { zhCN, enUS } from './locales';
+export type {
+  Locale,
+  TranslationKey,
+  TranslationParams,
+  DeepPartial,
+} from './locales';

package/src/locales/en-US.ts

@@ -0,0 +1,77 @@
+/**
+ * 英文词条
+ */
+
+import type { Locale } from './types';
+
+const enUS: Locale = {
+  common: {
+    loading: 'Loading...',
+    confirm: 'OK',
+    cancel: 'Cancel',
+    submit: 'Submit',
+    retry: 'Retry',
+    copy: 'Copy',
+    copied: 'Copied',
+    placeholderSelect: 'Please select',
+  },
+  humanVerify: {
+    requiredAll: 'Please fill in all required fields',
+    submitted: 'Submitted',
+    pending: 'Pending',
+    placeholder: {
+      input: 'Please enter {title}',
+      select: 'Please select',
+    },
+    file: {
+      supportAll: 'Supports all file formats',
+      supportFormats: 'Supports {formats} formats',
+      uploadButton: 'Select File',
+      uploading: 'Uploading',
+      upload: 'Upload',
+      defaultFileName: 'File',
+      maxSizeError: 'File size cannot exceed {size}',
+      uploadFailed: 'File upload failed',
+      tokenFailed: 'Failed to get upload credentials',
+      uploaderNotConfigured: 'Upload feature is not configured',
+      uploadMethodNotConfigured: 'File upload method is not configured',
+      getFileIdFailed: 'Failed to get file ID',
+    },
+  },
+  webSearch: {
+    title: 'Search Results',
+    foundPages: 'Found {count} web pages',
+  },
+  source: {
+    title: 'References',
+    answerFrom: 'Sources:',
+    imageFrom: 'Images:',
+  },
+  rich: {
+    stepLabel: 'Step {index}:',
+    emptyContent: 'No content',
+  },
+  markdown: {
+    copyCode: 'Copy code',
+    copied: 'Copied!',
+    copy: 'Copy',
+    copiedShort: 'Copied',
+    deepThinking: 'Deep Thinking',
+    chartLoading: 'Loading chart...',
+    tableLoading: 'Loading table...',
+    tableLoadFailed: 'Failed to load table data, please check the data format',
+    chartLoadFailed: 'Failed to load chart data, please check the data format',
+    mermaidLoadFailed: 'Failed to load Mermaid library',
+    mermaidNotLoaded: 'Mermaid is not loaded correctly',
+    mermaidRenderFailed: 'Mermaid chart rendering failed',
+  },
+  message: {
+    like: 'Like',
+    dislike: 'Dislike',
+    regenerate: 'Regenerate',
+    copy: 'Copy',
+    copied: 'Copied',
+  },
+};
+
+export default enUS;

package/src/locales/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Locale 词条统一导出
+ */
+
+export { default as zhCN } from './zh-CN';
+export { default as enUS } from './en-US';
+export type { Locale, TranslationKey, TranslationParams, DeepPartial } from './types';

package/src/locales/types.ts

@@ -0,0 +1,35 @@
+/**
+ * Locale 类型定义
+ *
+ * 以 zh-CN 词条结构作为类型基准，所有其他语言必须实现相同的 key 结构。
+ * - 对象结构（哪些 key、嵌套层级）严格等同 zhCN
+ * - 叶子节点的值放宽为 string，避免英文字面量被中文字面量类型卡住
+ */
+
+import type zhCN from './zh-CN';
+
+/** 词条对象类型：保留 zhCN 的结构，但叶子节点统一为 string */
+export type Locale = DeepStringify<typeof zhCN>;
+
+/** 所有合法的扁平 key 路径，如 'common.loading' | 'humanVerify.placeholder.input' */
+export type TranslationKey = DeepKey<typeof zhCN>;
+
+/** 插值参数 */
+export type TranslationParams = Record<string, string | number>;
+
+/** 深度可选，用于 LocaleProvider 的 overrides 字段 */
+export type DeepPartial<T> = {
+  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+
+/** 把所有叶子节点的值类型统一为 string，并去掉 readonly */
+type DeepStringify<T> = {
+  -readonly [K in keyof T]: T[K] extends object ? DeepStringify<T[K]> : string;
+};
+
+/** 递归生成所有叶子节点的扁平路径联合类型 */
+type DeepKey<T, P extends string = ''> = {
+  [K in keyof T & string]: T[K] extends object
+    ? DeepKey<T[K], `${P}${P extends '' ? '' : '.'}${K}`>
+    : `${P}${P extends '' ? '' : '.'}${K}`;
+}[keyof T & string];

package/src/locales/zh-CN.ts

@@ -0,0 +1,78 @@
+/**
+ * 中文词条（默认语言）
+ *
+ * 该文件作为 Locale 类型的基准结构，所有其他语言文件必须实现相同的 key 结构。
+ * 新增文案时优先在此处添加，再补齐其他语言文件。
+ */
+
+const zhCN = {
+  common: {
+    loading: '加载中...',
+    confirm: '确定',
+    cancel: '取消',
+    submit: '提交',
+    retry: '重试',
+    copy: '复制',
+    copied: '已复制',
+    placeholderSelect: '请选择',
+  },
+  humanVerify: {
+    requiredAll: '请填写所有必填项',
+    submitted: '已提交',
+    pending: '待提交',
+    placeholder: {
+      input: '请输入{title}',
+      select: '请选择',
+    },
+    file: {
+      supportAll: '支持所有文件格式',
+      supportFormats: '支持 {formats} 格式',
+      uploadButton: '选择文件',
+      uploading: '上传中',
+      upload: '上传',
+      defaultFileName: '文件',
+      maxSizeError: '文件大小不能超过 {size}',
+      uploadFailed: '文件上传失败',
+      tokenFailed: '获取上传凭证失败',
+      uploaderNotConfigured: '上传功能未配置',
+      uploadMethodNotConfigured: '文件上传方法未配置',
+      getFileIdFailed: '获取文件ID失败',
+    },
+  },
+  webSearch: {
+    title: '搜索结果',
+    foundPages: '已搜索到{count}个网页',
+  },
+  source: {
+    title: '参考资料',
+    answerFrom: '回答来源：',
+    imageFrom: '图片来源：',
+  },
+  rich: {
+    stepLabel: '步骤{index}:',
+    emptyContent: '暂无内容',
+  },
+  markdown: {
+    copyCode: '复制代码',
+    copied: '已复制！',
+    copy: '复制',
+    copiedShort: '已复制',
+    deepThinking: '深度思考',
+    chartLoading: '图表加载中...',
+    tableLoading: '表格加载中...',
+    tableLoadFailed: '表格数据加载失败，请检查数据格式',
+    chartLoadFailed: '图表数据加载失败，请检查数据格式',
+    mermaidLoadFailed: 'Mermaid 库加载失败',
+    mermaidNotLoaded: 'Mermaid 未正确加载',
+    mermaidRenderFailed: 'Mermaid 图表渲染失败',
+  },
+  message: {
+    like: '点赞',
+    dislike: '点踩',
+    regenerate: '重新生成',
+    copy: '复制',
+    copied: '已复制',
+  },
+} as const;
+
+export default zhCN;

package/src/markdown/components/Chart.tsx

@@ -2,6 +2,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useRichBubbleContext } from '@/context/RichBubble';
 import loadEchartsScript from '@/utils/loadEcharts';
+import { useTranslation } from '@/i18n';
 
 interface Iprops {
   options: any;
@@ -10,6 +11,7 @@ interface Iprops {
 export const Chart: React.FC<Iprops> = ({
   options,
 }) => {
+  const { t } = useTranslation();
   const chartContainerRef = useRef(null);
   const chartInstanceRef = useRef(null);
   const [isEchartsLoaded, setIsEchartsLoaded] = useState(false);
@@ -99,7 +101,7 @@ export const Chart: React.FC<Iprops> = ({
           color: '#666'
         }}
       >
-        图表加载中...
+        {t('markdown.chartLoading')}
       </div>
     );
   }

package/src/markdown/components/Mermaid.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import loadMermaidScript from '@/utils/loadMermaid';
+import { useTranslation } from '@/i18n';
 
 interface IProps {
   code: string;
@@ -37,6 +38,7 @@ const isMermaidCodeComplete = (code: string): boolean => {
 };
 
 export const Mermaid: React.FC<IProps> = ({ code }) => {
+  const { t } = useTranslation();
   const containerRef = useRef<HTMLDivElement>(null);
   const [svg, setSvg] = useState<string>('');
   const [error, setError] = useState<string>('');
@@ -55,7 +57,7 @@ export const Mermaid: React.FC<IProps> = ({ code }) => {
         setIsMermaidLoaded(true);
       } catch (error) {
         console.error('mermaid加载失败:', error);
-        setError('Mermaid 库加载失败');
+        setError(t('markdown.mermaidLoadFailed'));
         setIsLoading(false);
       }
     };
@@ -78,7 +80,7 @@ export const Mermaid: React.FC<IProps> = ({ code }) => {
 
     const mermaid = (window as any).mermaid;
     if (!mermaid) {
-      setError('Mermaid 未正确加载');
+      setError(t('markdown.mermaidNotLoaded'));
       setIsLoading(false);
       return;
     }
@@ -143,7 +145,7 @@ export const Mermaid: React.FC<IProps> = ({ code }) => {
         } else {
           // 流式输出结束后，如果仍然有错误，才显示错误
           console.error('Mermaid 渲染错误:', err);
-          setError(err?.message || 'Mermaid 图表渲染失败');
+          setError(err?.message || t('markdown.mermaidRenderFailed'));
         }
       } finally {
         setIsLoading(false);
@@ -176,7 +178,7 @@ export const Mermaid: React.FC<IProps> = ({ code }) => {
           marginBottom: '10px',
         }}
       >
-        图表加载中...
+        {t('markdown.chartLoading')}
       </div>
     );
   }
@@ -202,7 +204,7 @@ export const Mermaid: React.FC<IProps> = ({ code }) => {
             marginBottom: '8px'
           }}
         >
-          Mermaid 图表渲染失败
+          {t('markdown.mermaidRenderFailed')}
         </div>
         <div 
           style={{ 
@@ -238,7 +240,7 @@ export const Mermaid: React.FC<IProps> = ({ code }) => {
           marginBottom: '10px',
         }}
       >
-        图表加载中...
+        {t('markdown.chartLoading')}
       </div>
     );
   }

package/src/markdown/index.tsx

@@ -14,6 +14,7 @@ import { convertTableDataToMarkdown } from './utils/dataProcessor';
 import Loading from './components/Loading';
 import Error from './components/Error';
 import Mermaid from './components/Mermaid';
+import { useTranslation } from '@/i18n';
 
 export interface MarkdownViewProps {
   /** Markdown 内容 */
@@ -32,6 +33,7 @@ export const MarkdownView: React.FC<MarkdownViewProps> = ({
   content,
   waitingMessage = '',
 }) => {
+  const { t } = useTranslation();
 
   // markdown扩展配置
   const markdownOptions: Options = useMemo(() => ({
@@ -47,7 +49,7 @@ export const MarkdownView: React.FC<MarkdownViewProps> = ({
               maxHeight: '150px',
               objectFit: 'contain',
             }}
-            src={props.src} 
+            src={props.src}
             alt={props.alt}
             preview={{ zIndex: 1100 }}
           />
@@ -57,7 +59,7 @@ export const MarkdownView: React.FC<MarkdownViewProps> = ({
         // 判断是否为行内代码
         // 行内代码没有 className，且 inline 为 true
         const isInline = inline || (!className && !node?.properties?.className);
-        
+
         if (isInline) {
           // 行内代码 - 使用简单的 <code> 标签样式
           return (
@@ -98,12 +100,12 @@ export const MarkdownView: React.FC<MarkdownViewProps> = ({
             // 检查是否是流式输出导致的解析错误
             if (!isValidJSON(String(props?.children))) {
               return (
-                <Loading text={'表格加载中...'} />
+                <Loading text={t('markdown.tableLoading')} />
               );
             }
             // 真实错误的处理
             console.error("ant_table数据解析错误:", error);
-            return <Error text={'表格数据加载失败，请检查数据格式'} />;
+            return <Error text={t('markdown.tableLoadFailed')} />;
           }
         }
 
@@ -142,7 +144,7 @@ export const MarkdownView: React.FC<MarkdownViewProps> = ({
             } catch (configError) {
               // 图表配置解析错误
               console.error("图表配置解析错误:", configError);
-              return <Error text={'图表数据加载失败，请检查数据格式'} />;
+              return <Error text={t('markdown.chartLoadFailed')} />;
             }
           } catch (error: any) {
             // 如果是流式输出导致的json解析错误，显示加载状态
@@ -152,7 +154,7 @@ export const MarkdownView: React.FC<MarkdownViewProps> = ({
 
             // 其他真实错误的处理
             console.error("图表数据解析错误:", error);
-            return <Error text={'图表数据加载失败，请检查数据格式'} />;
+            return <Error text={t('markdown.chartLoadFailed')} />;
           }
         }
 
@@ -201,7 +203,7 @@ export const MarkdownView: React.FC<MarkdownViewProps> = ({
         </a>
       ),
     },
-  }), []);
+  }), [t]);
 
   // 检查是否是完整的JSON字符串
   const isValidJSON = (str: string) => {
@@ -216,9 +218,10 @@ export const MarkdownView: React.FC<MarkdownViewProps> = ({
 
   // 将think标签转换为details标签
   const convertThinkToDetails = (content: string) => {
+    const summary = t('markdown.deepThinking');
     return content?.replace(
       /<think>([\s\S]*?)<\/think>/g,
-      '<details open><summary>深度思考</summary><pre class="think">$1</pre></details>\n\n'
+      `<details open><summary>${summary}</summary><pre class="think">$1</pre></details>\n\n`
     );
   };