@alicloud/appflow-chat 0.0.4 → 0.0.5-alpha.2

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(() => ({
@@ -43,11 +45,10 @@ export const MarkdownView: React.FC<MarkdownViewProps> = ({
         return (
           <Image
             style={{
-              maxWidth: '200px',
-              maxHeight: '150px',
-              objectFit: 'contain',
+              maxWidth: '100%',
+              maxHeight: '600px',
             }}
-            src={props.src} 
+            src={props.src}
             alt={props.alt}
             preview={{ zIndex: 1100 }}
           />
@@ -57,7 +58,7 @@ export const MarkdownView: React.FC<MarkdownViewProps> = ({
         // 判断是否为行内代码
         // 行内代码没有 className，且 inline 为 true
         const isInline = inline || (!className && !node?.properties?.className);
-        
+
         if (isInline) {
           // 行内代码 - 使用简单的 <code> 标签样式
           return (
@@ -98,12 +99,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 +143,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 +153,7 @@ export const MarkdownView: React.FC<MarkdownViewProps> = ({
 
             // 其他真实错误的处理
             console.error("图表数据解析错误:", error);
-            return <Error text={'图表数据加载失败，请检查数据格式'} />;
+            return <Error text={t('markdown.chartLoadFailed')} />;
           }
         }
 
@@ -174,9 +175,8 @@ export const MarkdownView: React.FC<MarkdownViewProps> = ({
             <>
               <Image
                 style={{
-                  maxWidth: '200px',
-                  maxHeight: '150px',
-                  objectFit: 'contain',
+                  maxWidth: '100%',
+                  maxHeight: '600px',
                 }}
                 src={image.properties.src}
                 className="max-w-full h-auto align-middle border-none rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out mt-2 mb-2"
@@ -201,7 +201,7 @@ export const MarkdownView: React.FC<MarkdownViewProps> = ({
         </a>
       ),
     },
-  }), []);
+  }), [t]);
 
   // 检查是否是完整的JSON字符串
   const isValidJSON = (str: string) => {
@@ -216,9 +216,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`
     );
   };