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

package/src/components/HumanVerify/CustomParamsRenderer/TimeField.tsx

@@ -1,72 +1,24 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { DatePicker, version } from 'antd';
+import React, { useCallback, useMemo } from 'react';
+import { DatePicker } from 'antd';
+import dayjs, { Dayjs } from 'dayjs';
 import { TimeFieldProps, TimeSubType } from './types';
 import styled from 'styled-components';
+import { useTranslation } from '../../../i18n';
 
+// ==================== Styled Components ====================
+
+// 时间选择器容器
 const TimeFieldContainer = styled.div`
   width: 100%;
+
   .ant-picker {
     width: 100%;
   }
 `;
 
-const getAntdMajorVersion = (): number => {
-  try {
-    return parseInt(version.split('.')[0], 10);
-  } catch {
-    return 5;
-  }
-};
-
-const isAntd5OrAbove = getAntdMajorVersion() >= 5;
-
-// 兼容 ESM 和 CJS 环境的时间库加载
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let timeLib: any = null;
-
-// 同步尝试加载时间库（CJS 环境下可用）
-const loadTimeLibSync = (): any => {
-  if (timeLib) return timeLib;
-
-  if (isAntd5OrAbove) {
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      timeLib = require('dayjs');
-    } catch {
-      // require 在 ESM 环境中可能失败，后续通过异步 import 兜底
-    }
-  } else {
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      timeLib = require('moment');
-    } catch {
-      // require 在 ESM 环境中可能失败，后续通过异步 import 兜底
-    }
-  }
-  return timeLib;
-};
-
-// 异步加载时间库（ESM 环境下的兜底方案）
-const loadTimeLibAsync = async (): Promise<any> => {
-  if (timeLib) return timeLib;
-
-  try {
-    if (isAntd5OrAbove) {
-      const dayjs = await import('dayjs');
-      timeLib = dayjs.default || dayjs;
-    } else {
-      const moment = await import('moment');
-      timeLib = moment.default || moment;
-    }
-  } catch {
-    console.warn('Failed to load time library (both sync and async)');
-  }
-  return timeLib;
-};
-
-// 先尝试同步加载
-loadTimeLibSync();
-
+/**
+ * 根据时间子类型获取日期格式
+ */
 const getDateFormat = (subType?: TimeSubType): string => {
   switch (subType) {
     case 'year-month':
@@ -80,40 +32,34 @@ const getDateFormat = (subType?: TimeSubType): string => {
   }
 };
 
+/**
+ * 根据时间子类型获取 picker 类型
+ */
 const getPickerType = (subType?: TimeSubType): 'date' | 'month' | undefined => {
   switch (subType) {
     case 'year-month':
       return 'month';
+    case 'year-month-day':
+    case 'datetime':
     default:
       return 'date';
   }
 };
 
+/**
+ * 时间字段组件
+ * 根据 SubType 渲染不同的时间选择器
+ * 优先从 AssociationPropertyMetadata.SubType 读取，兼容旧的 TimeSubType 字段
+ */
 export const TimeField: React.FC<TimeFieldProps> = ({
   schema,
   value,
   onChange,
   disabled = false,
 }) => {
-  // 使用 state 管理时间库引用，确保异步加载完成后能触发重新渲染
-  const [lib, setLib] = useState<any>(() => timeLib);
-
-  // 如果同步加载失败，通过异步 import 兜底加载
-  useEffect(() => {
-    if (lib) return;
-
-    let cancelled = false;
-    loadTimeLibAsync().then((loaded) => {
-      if (!cancelled && loaded) {
-        setLib(loaded);
-      }
-    });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [lib]);
-
+  const { t } = useTranslation();
+  // 优先从 AssociationPropertyMetadata.SubType 读取，取数组第一个元素
+  // 兼容旧的 TimeSubType 字段
   const subType = useMemo((): TimeSubType | undefined => {
     const subTypeArray = schema.AssociationPropertyMetadata?.SubType;
     if (Array.isArray(subTypeArray) && subTypeArray.length > 0) {
@@ -126,44 +72,35 @@ export const TimeField: React.FC<TimeFieldProps> = ({
   const picker = getPickerType(subType);
   const showTime = subType === 'datetime';
 
-  // 将字符串值转换为时间对象
-  const dateValue = useMemo(() => {
-    if (!value || !lib) return null;
-    
-    try {
-      const parsed = lib(value, format);
-      if (parsed && typeof parsed.isValid === 'function' && !parsed.isValid()) {
-        // 如果严格解析失败，尝试宽松解析
-        return lib(value);
-      }
-      return parsed;
-    } catch {
-      return null;
-    }
-  }, [value, format, lib]);
-
+  // 处理值变化
   const handleChange = useCallback(
-    (_date: any, dateString: string | string[]) => {
-      const stringValue = Array.isArray(dateString) ? dateString[0] : dateString;
-      onChange?.(stringValue || null);
+    (date: Dayjs | null) => {
+      if (date) {
+        onChange?.(date.format(format));
+      } else {
+        onChange?.(null);
+      }
     },
-    [onChange]
+    [onChange, format]
   );
 
+  // 将字符串值转换为 dayjs 对象
+  const dayjsValue = value ? dayjs(value, format) : null;
+
   return (
     <TimeFieldContainer>
       <DatePicker
-        value={dateValue}
+        value={dayjsValue}
         onChange={handleChange}
         format={format}
         picker={picker}
         showTime={showTime ? { format: 'HH:mm:ss' } : false}
         disabled={disabled}
         style={{ width: '100%' }}
-        placeholder="请选择"
+        placeholder={t('common.placeholderSelect')}
       />
     </TimeFieldContainer>
   );
 };
 
-export default TimeField;
+export default TimeField;

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 };
+}