@alicloud/appflow-chat 0.0.4 → 0.0.5

package/src/components/HumanVerify/HistoryCard.tsx

@@ -3,6 +3,7 @@ import { Button } from 'antd';
 import styled from 'styled-components';
 import CustomParamsRenderer from './CustomParamsRenderer';
 import { CustomParamSchema } from './CustomParamsRenderer/types';
+import { useTranslation } from '../../i18n';
 
 // ==================== Styled Components ====================
 
@@ -114,6 +115,7 @@ export const convertSchemaToUpperCase = (schema: any): CustomParamSchema | undef
  * 用于展示历史对话中的 card 类型消息（只读模式）
  */
 export const HistoryCard: React.FC<HistoryCardProps> = ({ data }) => {
+  const { t } = useTranslation();
   // 从data中提取需要的参数
   const approvalStatus = data?.approvalStatus;
   
@@ -131,7 +133,7 @@ export const HistoryCard: React.FC<HistoryCardProps> = ({ data }) => {
         <StatusContainer $approved={isApproved}>
           <StatusContent>
             <StatusText>
-              {isApproved ? '已提交' : '待提交'}
+              {isApproved ? t('humanVerify.submitted') : t('humanVerify.pending')}
             </StatusText>
           </StatusContent>
           <Button 
@@ -139,7 +141,7 @@ export const HistoryCard: React.FC<HistoryCardProps> = ({ data }) => {
             variant="filled"
             disabled={true}
           >
-            {isApproved ? '已提交' : '提交'}
+            {isApproved ? t('humanVerify.submitted') : t('common.submit')}
           </Button>
         </StatusContainer>
       </HistoryCardContainer>
@@ -156,7 +158,7 @@ export const HistoryCard: React.FC<HistoryCardProps> = ({ data }) => {
       <StatusContainer $approved={isApproved}>
         <StatusContent>
           <StatusText>
-            {isApproved ? '已提交' : '待提交'}
+            {isApproved ? t('humanVerify.submitted') : t('humanVerify.pending')}
           </StatusText>
         </StatusContent>
         <Button 
@@ -164,7 +166,7 @@ export const HistoryCard: React.FC<HistoryCardProps> = ({ data }) => {
           variant="filled"
           disabled={true}
         >
-          {isApproved ? '已提交' : '提交'}
+          {isApproved ? t('humanVerify.submitted') : t('common.submit')}
         </Button>
       </StatusContainer>
     </HistoryCardContainer>

package/src/components/HumanVerify/HumanVerify.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Button, message } from 'antd';
 import styled from 'styled-components';
 import CustomParamsRenderer, { validateCustomParams, UploadSender, FileUploader } from './CustomParamsRenderer';
+import { useTranslation } from '../../i18n';
 
 // ==================== Styled Components ====================
 
@@ -61,6 +62,7 @@ export const HumanVerify: React.FC<HumanVerifyProps> = ({
   fileUploader,
   onSubmit
 }) => {
+  const { t } = useTranslation();
   // 从 data 中提取需要的参数
   const verifyId = data?.verifyId;
   const sessionWebhook = data?.sessionWebhook;
@@ -110,7 +112,7 @@ export const HumanVerify: React.FC<HumanVerifyProps> = ({
         setValidationErrors(errors);
 
         // 提示用户
-        message.error('请填写所有必填项');
+        message.error(t('humanVerify.requiredAll'));
         return;
       }
 
@@ -143,7 +145,7 @@ export const HumanVerify: React.FC<HumanVerifyProps> = ({
       <StatusContainer $approved={approved}>
         <StatusContent>
           <StatusText>
-            {approved ? '已提交' : '待提交'}
+            {approved ? t('humanVerify.submitted') : t('humanVerify.pending')}
           </StatusText>
         </StatusContent>
         <Button 
@@ -152,7 +154,7 @@ export const HumanVerify: React.FC<HumanVerifyProps> = ({
           onClick={handleApprove}
           disabled={approved}
         >
-          {'提交'}
+          {t('common.submit')}
         </Button>
       </StatusContainer>
     </HumanVerifyContainer>

package/src/components/MessageBubble.tsx

@@ -12,6 +12,7 @@ import { DocReferences, DocReferenceItem } from './DocReferences';
 import { WebSearchPanel } from './WebSearchPanel';
 import { HumanVerify, HistoryCard, CustomParamSchema } from './HumanVerify';
 import { BubbleContent } from '@/core';
+import { useTranslation } from '@/i18n';
 
 /** HumanVerify 提交数据类型 */
 export interface HumanVerifySubmitData {
@@ -271,6 +272,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
   historyCardData,
   onHumanVerifySubmit,
 }) => {
+  const { t } = useTranslation();
   const [modal, contextHolder] = Modal.useModal();
   
   // 网页搜索抽屉状态
@@ -293,7 +295,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
     modal.confirm({
       bodyStyle: { maxHeight: '80vh', overflow: 'auto' },
       icon: null,
-      title: '参考资料',
+      title: t('source.title'),
       destroyOnClose: true,
       maskClosable: true,
       closable: true,
@@ -317,7 +319,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
       ),
       footer: null,
     });
-  }, [modal]);
+  }, [modal, t]);
 
   // 默认的网页搜索点击处理
   const defaultWebSearchClick = useCallback((items: DocReferenceItem[]) => {

package/src/components/RichMessageBubble.tsx

@@ -12,6 +12,7 @@ import { loadEchartsScript } from '../utils/loadEcharts';
 import { DocReferences, DocReferenceItem } from './DocReferences';
 import { WebSearchPanel } from './WebSearchPanel';
 import { RichBubbleContent } from '../core';
+import { useTranslation } from '../i18n';
 
 export interface RichMessageBubbleProps {
   /** 消息内容 */
@@ -177,6 +178,7 @@ export const RichMessageBubble: React.FC<RichMessageBubbleProps> = ({
   onReferenceClick,
   onWebSearchClick,
 }) => {
+  const { t } = useTranslation();
   const [modal, contextHolder] = Modal.useModal();
   
   // 网页搜索抽屉状态
@@ -199,7 +201,7 @@ export const RichMessageBubble: React.FC<RichMessageBubbleProps> = ({
     modal.confirm({
       bodyStyle: { maxHeight: '80vh', overflow: 'auto' },
       icon: null,
-      title: '参考资料',
+      title: t('source.title'),
       destroyOnClose: true,
       maskClosable: true,
       closable: true,
@@ -223,7 +225,7 @@ export const RichMessageBubble: React.FC<RichMessageBubbleProps> = ({
       ),
       footer: null,
     });
-  }, [modal]);
+  }, [modal, t]);
 
   // 默认的网页搜索点击处理
   const defaultWebSearchClick = useCallback((items: DocReferenceItem[]) => {

package/src/core/RichBubbleContent.tsx

@@ -19,6 +19,7 @@ import { Collapse } from 'antd';
 import { MarkdownView } from '../markdown';
 import { convertTableDataToMarkdown, processStepContent } from '../markdown/utils/dataProcessor';
 import { RichBubbleProvider } from '../context/RichBubble';
+import { useTranslation } from '../i18n';
 
 export interface RichBubbleContentProps {
   /** 消息内容 */
@@ -110,6 +111,7 @@ export const RichBubbleContent: React.FC<RichBubbleContentProps> = ({
   children,
   waitingMessage,
 }) => {
+  const { t } = useTranslation();
   // step消息折叠面板激活的索引
   const [activeKey, setActiveKey] = useState<string | string[]>([]);
 
@@ -150,7 +152,7 @@ export const RichBubbleContent: React.FC<RichBubbleContentProps> = ({
     } else {
       const contentToRender = detail || '';
       if (!contentToRender) {
-        return <StyledStepContent>暂无内容</StyledStepContent>;
+        return <StyledStepContent>{t('rich.emptyContent')}</StyledStepContent>;
       }
 
       return (
@@ -250,7 +252,7 @@ export const RichBubbleContent: React.FC<RichBubbleContentProps> = ({
                     <StyledStatusIcon $success={status === 'Success'}>
                       {status === 'Success' ? '✓' : '⟳'}
                     </StyledStatusIcon>
-                    <StyledStepNumber>步骤{index + 1}:</StyledStepNumber>
+                    <StyledStepNumber>{t('rich.stepLabel', { index: index + 1 })}</StyledStepNumber>
                     <StyledStepText>{itemContent?.title}</StyledStepText>
                   </StyledStepTitleWrapper>
                 ),

package/src/core/SourceContent.tsx

@@ -11,6 +11,7 @@ import styled from 'styled-components';
 import { Image } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import { flatten, uniq } from 'lodash-es';
+import { useTranslation } from '../i18n';
 
 // 参考资料项类型
 export interface SourceItem {
@@ -195,6 +196,7 @@ export const SourceContent: React.FC<SourceContentProps> = ({
   className,
   style,
 }) => {
+  const { t } = useTranslation();
   // 提取唯一图片
   const uniqueImages = useMemo(() => {
     let images;
@@ -244,14 +246,14 @@ export const SourceContent: React.FC<SourceContentProps> = ({
       {webSearchArray.length > 0 && (
         <StyledWebSearchSource onClick={handleWebSearchClick}>
           <SearchOutlined />
-          <div>已搜索到{webSearchArray.length}个网页</div>
+          <div>{t('webSearch.foundPages', { count: webSearchArray.length })}</div>
         </StyledWebSearchSource>
       )}
 
       {/* RAG参考资料 */}
       {ragArray.length > 0 && (
         <StyledAnswerSource>
-          <StyledLabel>回答来源：</StyledLabel>
+          <StyledLabel>{t('source.answerFrom')}</StyledLabel>
           <div style={{ width: 'calc(100% - 70px)' }}>
             {ragArray.map((item, index) => (
               <SourceItemComponent
@@ -268,7 +270,7 @@ export const SourceContent: React.FC<SourceContentProps> = ({
       {/* 图片来源 */}
       {uniqueImages.length > 0 && (
         <StyledAnswerSource>
-          <StyledLabel>图片来源：</StyledLabel>
+          <StyledLabel>{t('source.imageFrom')}</StyledLabel>
           <StyledWrapSpace>
             {uniqueImages.map((image, index) => (
               <StyledImageBox key={index}>

package/src/core/WebSearchContent.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Drawer, List, Typography } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
+import { useTranslation } from '../i18n';
 
 const { Title } = Typography;
 
@@ -136,6 +137,7 @@ export const WebSearchContent: React.FC<WebSearchContentProps> = ({
   className,
   style,
 }) => {
+  const { t } = useTranslation();
   // 判断是否移动端
   const isMobile = typeof window !== 'undefined' && window.innerWidth <= 500;
   const panelWidth = isMobile ? '100%' : width;
@@ -174,7 +176,7 @@ export const WebSearchContent: React.FC<WebSearchContentProps> = ({
       <StyledContainer $isMobile={isMobile}>
         <StyledContent>
           <StyledHeader>
-            <Title level={5} style={{ margin: 0 }}>搜索结果</Title>
+            <Title level={5} style={{ margin: 0 }}>{t('webSearch.title')}</Title>
             <StyledCloseButton onClick={handleClose}>
               <CloseOutlined />
             </StyledCloseButton>

package/src/i18n/LocaleContext.tsx

@@ -0,0 +1,70 @@
+/**
+ * Locale Context 与 Provider
+ */
+
+import React, { createContext, useEffect, useMemo } from 'react';
+import zhCN from '../locales/zh-CN';
+import type { DeepPartial, Locale } from '../locales/types';
+import { setGlobalLocale } from './translate';
+import { deepMerge } from './utils';
+
+export interface LocaleContextValue {
+  locale: Locale;
+  localeName: string;
+}
+
+export const LocaleContext = createContext<LocaleContextValue>({
+  locale: zhCN as unknown as Locale,
+  localeName: 'zh-CN',
+});
+
+export interface LocaleProviderProps {
+  /** 完整 locale 对象，默认使用内置 zhCN */
+  locale?: Locale;
+  /** 语言标识，如 'zh-CN' / 'en-US' */
+  localeName?: string;
+  /** 部分覆盖：在选定 locale 基础上 deep merge 自定义文案 */
+  overrides?: DeepPartial<Locale>;
+  children: React.ReactNode;
+}
+
+/**
+ * LocaleProvider
+ *
+ * 用法示例：
+ * ```tsx
+ * import { LocaleProvider, enUS } from '@alicloud/appflow-chat';
+ *
+ * <LocaleProvider locale={enUS} localeName="en-US">
+ *   <App />
+ * </LocaleProvider>
+ * ```
+ */
+export const LocaleProvider: React.FC<LocaleProviderProps> = ({
+  locale,
+  localeName = 'zh-CN',
+  overrides,
+  children,
+}) => {
+  const baseLocale = (locale ?? (zhCN as unknown as Locale)) as Locale;
+
+  const mergedLocale = useMemo<Locale>(() => {
+    if (!overrides) return baseLocale;
+    return deepMerge(
+      baseLocale as unknown as Record<string, unknown>,
+      overrides as Record<string, unknown>
+    ) as unknown as Locale;
+  }, [baseLocale, overrides]);
+
+  // 同步到全局，供非 React 场景（如 ChatService）使用
+  useEffect(() => {
+    setGlobalLocale(mergedLocale, localeName);
+  }, [mergedLocale, localeName]);
+
+  const contextValue = useMemo<LocaleContextValue>(
+    () => ({ locale: mergedLocale, localeName }),
+    [mergedLocale, localeName]
+  );
+
+  return <LocaleContext.Provider value={contextValue}>{children}</LocaleContext.Provider>;
+};

package/src/i18n/index.ts

@@ -0,0 +1,16 @@
+/**
+ * i18n 模块统一导出
+ */
+
+export { LocaleProvider, LocaleContext } from './LocaleContext';
+export type { LocaleProviderProps, LocaleContextValue } from './LocaleContext';
+
+export { useTranslation } from './useTranslation';
+export type { UseTranslationResult } from './useTranslation';
+
+export {
+  translate,
+  setGlobalLocale,
+  getGlobalLocale,
+  getGlobalLocaleName,
+} from './translate';

package/src/i18n/translate.ts

@@ -0,0 +1,42 @@
+/**
+ * 全局 translate 函数
+ *
+ * 用于非 React 组件场景（如 ChatService、工具函数）。
+ * 在 LocaleProvider 挂载/更新时会自动同步全局 locale。
+ */
+
+import zhCN from '../locales/zh-CN';
+import type { Locale, TranslationKey, TranslationParams } from '../locales/types';
+import { getByPath, interpolate } from './utils';
+
+let globalLocale: Locale = zhCN as unknown as Locale;
+let globalLocaleName = 'zh-CN';
+
+/** 设置全局 locale，由 LocaleProvider 在挂载/更新时调用 */
+export function setGlobalLocale(locale: Locale, localeName?: string): void {
+  globalLocale = locale;
+  if (localeName) globalLocaleName = localeName;
+}
+
+/** 获取当前全局 locale */
+export function getGlobalLocale(): Locale {
+  return globalLocale;
+}
+
+/** 获取当前全局 locale 名称 */
+export function getGlobalLocaleName(): string {
+  return globalLocaleName;
+}
+
+/**
+ * 全局翻译函数（非 Hook 版本）
+ *
+ * @example
+ *   translate('common.loading') // '加载中...'
+ *   translate('humanVerify.placeholder.input', { title: '名称' }) // '请输入名称'
+ */
+export function translate(key: TranslationKey, params?: TranslationParams): string {
+  const value = getByPath(globalLocale, key);
+  if (typeof value !== 'string') return key;
+  return params ? interpolate(value, params) : value;
+}

package/src/i18n/useTranslation.ts

@@ -0,0 +1,39 @@
+/**
+ * useTranslation Hook
+ */
+
+import { useCallback, useContext } from 'react';
+import type { Locale, TranslationKey, TranslationParams } from '../locales/types';
+import { LocaleContext } from './LocaleContext';
+import { getByPath, interpolate } from './utils';
+
+export interface UseTranslationResult {
+  /** 翻译函数 */
+  t: (key: TranslationKey, params?: TranslationParams) => string;
+  /** 当前 locale 对象 */
+  locale: Locale;
+  /** 当前语言标识 */
+  localeName: string;
+}
+
+/**
+ * 在 React 组件内消费国际化文案
+ *
+ * @example
+ *   const { t } = useTranslation();
+ *   <Input placeholder={t('humanVerify.placeholder.input', { title: '名称' })} />
+ */
+export function useTranslation(): UseTranslationResult {
+  const { locale, localeName } = useContext(LocaleContext);
+
+  const t = useCallback(
+    (key: TranslationKey, params?: TranslationParams): string => {
+      const value = getByPath(locale, key);
+      if (typeof value !== 'string') return key;
+      return params ? interpolate(value, params) : value;
+    },
+    [locale]
+  );
+
+  return { t, locale, localeName };
+}

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];