@alicloud/appflow-chat 0.0.1-beta.1

package/src/markdown/index.tsx

@@ -0,0 +1,250 @@
+import React, { useMemo } from 'react';
+import ReactMarkdown, { Options } from 'react-markdown';
+import remarkMath from 'remark-math';
+import remarkGfm from 'remark-gfm';
+import rehypeKatex from 'rehype-katex';
+import { Image } from 'antd';
+import { ASyntaxHighLight } from './components/SyntaxHighlight';
+import rehypeRaw from 'rehype-raw';
+import remarkBreaks from 'remark-breaks';
+import { StyledContentRender } from './styled';
+import FileDisplay from './components/FileDisplay';
+import Chart from './components/Chart';
+import { convertTableDataToMarkdown } from './utils/dataProcessor';
+import Loading from './components/Loading';
+import Error from './components/Error';
+
+export interface MarkdownViewProps {
+  /** Markdown 内容 */
+  content: any;
+  /** 状态 */
+  status?: string;
+  /** 完整数据 */
+  fullData?: any;
+  /** 事件类型 */
+  eventType?: string;
+  /** 等待消息提示 */
+  waitingMessage?: string;
+}
+
+export const MarkdownView: React.FC<MarkdownViewProps> = ({
+  content,
+  waitingMessage = '',
+}) => {
+
+  // markdown扩展配置
+  const markdownOptions: Options = useMemo(() => ({
+    remarkPlugins: [remarkMath, remarkGfm, remarkBreaks],
+    rehypePlugins: [rehypeKatex, rehypeRaw],
+    components: {
+      // 自定义组件渲染
+      img: ({ node, ...props }: any) => {
+        return (
+          <Image
+            style={{
+              maxWidth: '200px',
+              maxHeight: '150px',
+              objectFit: 'contain',
+            }}
+            src={props.src} 
+            alt={props.alt} 
+          />
+        );
+      },
+      code: ({ node, className, ...props }: any) => {
+        // 元信息中解析语言类型
+        const languageType = /language-(\w+)/.exec(node?.properties?.className || '')?.[0];
+        const langFromMeta = node?.position?.start?.line === 2 ? 'language-file' : null;
+        const finalLang = languageType || langFromMeta;
+
+        // 文件信息块特殊处理
+        if (finalLang === 'language-file') {
+          // 解析原始文本内容
+          const content = String(props.children).replace(/\n$/, '');
+          const fileInfo = parseFileInfo(content);
+          return <FileDisplay fileInfo={fileInfo} />;
+        }
+
+        // ant_table信息块特殊处理
+        if (finalLang === 'language-ant_table') {
+          try {
+            // 解析原始文本内容
+            const content = String(props?.children).replace(/\n$/, '');
+            const tableData = JSON.parse(content);
+            const markdownTable = convertTableDataToMarkdown(tableData);
+            return <MarkdownView content={markdownTable} />;
+          } catch (error) {
+            // 检查是否是流式输出导致的解析错误
+            if (!isValidJSON(String(props?.children))) {
+              return (
+                <Loading text={'表格加载中...'} />
+              );
+            }
+            // 真实错误的处理
+            console.error("ant_table数据解析错误:", error);
+            return <Error text={'表格数据加载失败，请检查数据格式'} />;
+          }
+        }
+
+        // echarts图表信息块特殊处理
+        if (finalLang === 'language-echarts') {
+          try {
+            // 确保children是字符串
+            const codeContent = Array.isArray(props.children) ? props.children.join('') : props.children.toString();
+
+            // 检查是否是完整的JSON字符串
+            if (!isValidJSON(codeContent)) {
+              return <Loading />;
+            }
+
+            const chartContent = JSON.parse(codeContent);
+
+            // 检查图表配置是否完整
+            let chartOptions;
+            try {
+              if (typeof chartContent?.option === 'string') {
+                chartOptions = JSON.parse(chartContent?.option);
+              } else {
+                chartOptions = chartContent?.option;
+              }
+
+              // 检查图表配置是否有必要的属性
+              if (!chartOptions || Object.keys(chartOptions).length === 0) {
+                return <Loading />;
+              }
+
+              return (
+                <div style={{ minWidth: '300px' }}>
+                  <Chart options={chartOptions} />
+                </div>
+              );
+            } catch (configError) {
+              // 图表配置解析错误
+              console.error("图表配置解析错误:", configError);
+              return <Error text={'图表数据加载失败，请检查数据格式'} />;
+            }
+          } catch (error: any) {
+            // 如果是流式输出导致的json解析错误，显示加载状态
+            if (!isValidJSON(String(props.children))) {
+              return <Loading />;
+            }
+
+            // 其他真实错误的处理
+            console.error("图表数据解析错误:", error);
+            return <Error text={'图表数据加载失败，请检查数据格式'} />;
+          }
+        }
+
+        return <ASyntaxHighLight>{props.children}</ASyntaxHighLight>;
+      },
+      p: (paragraph: any) => {
+        const { node }: any = paragraph || {};
+        if (node?.children[0]?.tagName === 'img') {
+          const image = node.children[0];
+          const isSlice = (Array.isArray(paragraph?.children) || typeof paragraph?.children?.slice === 'function');
+
+          return (
+            <>
+              <Image
+                style={{
+                  maxWidth: '200px',
+                  maxHeight: '150px',
+                  objectFit: 'contain',
+                }}
+                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"
+                alt={image.properties.alt}
+              />
+              {isSlice && <p>
+                {paragraph?.children?.slice(1)}
+              </p>}
+            </>
+          );
+        }
+        return (
+          <p>
+            {paragraph?.children}
+          </p>
+        );
+      },
+      a: ({ children, href }) => (
+        <a href={href} target="_blank">
+          {children}
+        </a>
+      ),
+    },
+  }), []);
+
+  // 检查是否是完整的JSON字符串
+  const isValidJSON = (str: string) => {
+    try {
+      const firstChar = str?.trim()[0];
+      const lastChar = str?.trim()[str?.trim().length - 1];
+      return (firstChar === '{' && lastChar === '}') || (firstChar === '[' && lastChar === ']');
+    } catch {
+      return false;
+    }
+  };
+
+  // 将think标签转换为details标签
+  const convertThinkToDetails = (content: string) => {
+    return content?.replace(
+      /<think>([\s\S]*?)<\/think>/g,
+      '<details open><summary>深度思考</summary><pre class="think">$1</pre></details>'
+    );
+  };
+
+  // 将数学公式转换为markdown
+  const coverMath2Markdown = (v: string) => {
+    if (!v) {
+      return `<span><span class="prompt-message">${waitingMessage}</span><span class="prompt-loading-cursor">...</span></span>`;
+    }
+    
+    const mathContent = `${v?.replace(/\\\[.*?\\\]/gims, (str) => {
+      const line = str.split(/[\r\n]/g);
+
+      if (line[0].trim() === '\\[') {
+        return '$$' + str.slice(2, -2) + '$$';
+      } else {
+        return '$' + str.slice(2, -2) + '$';
+      }
+    })
+    .replace(/\\\(.*?\\\)/gims, (str) => {
+      return '$' + str.slice(2, -2) + '$';
+    })}`
+
+    return convertThinkToDetails(mathContent);
+  }
+
+  // 解析文件信息
+  const parseFileInfo = (content: string) => {
+    const lines = content.split('\n');
+    const fileInfo = {
+      name: '',
+      size: '',
+      type: 'unknown'
+    };
+
+    lines.forEach(line => {
+      const [key, value] = line.split(':').map(part => part.trim());
+
+      if (key && value) {
+        if (key.toLowerCase() === '名称') fileInfo.name = value;
+        if (key.toLowerCase() === '大小') fileInfo.size = value;
+        if (key.toLowerCase() === '类型') fileInfo.type = value;
+      }
+    });
+
+    return fileInfo;
+  };
+  
+  return (
+    <StyledContentRender>
+      <ReactMarkdown {...markdownOptions}>
+        {`${coverMath2Markdown(content)}`}
+      </ReactMarkdown>
+    </StyledContentRender>
+  );
+};
+
+export default MarkdownView;

package/src/markdown/styled.ts

@@ -0,0 +1,234 @@
+import styled from 'styled-components';
+
+export const StyledContentRender = styled.div<{
+    color?: string;
+    bg_color?: string;
+    second_color?: string;
+    primary_color?: string;
+    loading_color?: string;
+}>`
+    position: relative;
+  
+    > p {
+        margin-bottom: 16px;
+    }
+  
+    > p:last-child {
+        margin-bottom: 0;
+    }
+  
+    @keyframes dots {
+        0%, 20% {
+            color: ${({ loading_color }) => loading_color};
+            text-shadow: ${({ loading_color }) => `.25em 0 0 ${loading_color}, .5em 0 0 ${loading_color}`};
+        }
+        40% {
+            color: ${({ primary_color }) => primary_color};
+            text-shadow:  ${({ loading_color }) => `.25em 0 0 ${loading_color}, .5em 0 0 ${loading_color}`};
+        }
+        60% {
+            text-shadow: ${({ primary_color, loading_color }) => `.25em 0 0 ${primary_color}, .5em 0 0 ${loading_color}`};
+        }
+        80%, 100% {
+            text-shadow: ${({ primary_color }) => `.25em 0 0 ${primary_color}, .5em 0 0 ${primary_color}`};
+  
+        }
+    }
+  
+    @keyframes blink-dots {
+        0%,
+        80%,
+        100% {
+            box-shadow: 0 -1em 0 -1.3em #5584ff;
+        }
+        40% {
+            box-shadow: 0 -1em 0 0 #5584ff;
+        }
+    }
+
+    .prompt-message {
+        font-size: 12px;
+    }
+  
+    .prompt-loading {
+        margin-left: 2px;
+        color: ${({ second_color }) => second_color};
+        position: relative;
+  
+        .dots {
+            //text-align: center;
+            //font-size: 1.5em;
+            //letter-spacing: 2px;
+            //animation: dots 1s steps(5, end) infinite;
+  
+            display: inline-block;
+            position: relative;
+            text-indent: -9999em;
+            animation-delay: -0.16s;
+            margin: 0 auto !important;
+            transform: scale(0.5);
+            top: 0.6em;
+            left: 1.5em;
+  
+            &:before,
+            &:after,
+            & {
+              border-radius: 50%;
+              width: 1em;
+              height: 1em;
+              animation: 1.8s ease-in-out 0s infinite normal none running blink-dots;
+            }
+            &:before {
+              left: -2em;
+              animation-delay: -0.32s;
+            }
+            &:after {
+              left: 2em;
+            }
+            &:before,
+            &:after {
+              content: '';
+              position: absolute;
+            }
+        }
+    }
+  
+    h1,h2,h3,h4,h5,h6 {
+        padding: 10px;
+        color: ${({ color }) => color};
+        // background: ${({ bg_color }) => bg_color}; // TODO dark mode ?
+    }
+    
+    h1 {
+        font-size: 18px;
+    }
+     
+    h2 {
+        font-size: 16px;
+    }
+
+    h3,h4 {
+        font-size: 14px;
+    }
+
+    ul,ol {
+        padding-left: 2em;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        list-style-type: disc;   
+    }
+
+    ul ul,
+    ol ul {
+        list-style-type: circle;
+    }
+    
+    ul ul ul,
+    ul ol ul,
+    ol ul ul,
+    ol ol ul {
+        list-style-type: square;
+    }
+
+    ol {
+       list-style-type: decimal;
+    }
+
+    li {
+        white-space: normal;
+    }
+
+    details {
+        font-size: 12px;
+        color: rgb(106 105 105);
+        white-space: normal;  
+    }
+    
+    details:has(pre:empty) {
+        display: none;
+    }
+
+    summary {
+        margin-left: -4px;
+    }
+
+    pre.think {
+        font-size: 12px;
+        color: #a6a6a6;
+        border-left: 1px #a6a6a6 solid;
+        display: inline-block;    
+        white-space: pre-wrap;
+        overflow-wrap: break-word;
+        padding-left: 10px;
+        margin-top: 8px;
+    }
+
+    pre.think > p {
+        margin-top: 10px;
+    }
+
+    table {
+        display: block;
+        overflow-x: auto;
+        width: max-content;
+        max-width: 100%;
+    }
+        
+    th, td {
+        border: 1px solid #d9d9d9;
+        padding: 12px;
+        text-align: center;
+        white-space: nowrap;
+    }
+
+    /* 用于 coverMath2Markdown 的加载动画 */
+    @keyframes cursorImg {
+        0%, 100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0;
+        }
+    }
+
+    .prompt-loading-cursor {
+        color: #5584ff;
+        animation: cursorImg 1s infinite steps(1, start);
+    }
+
+    /* KaTeX 数学公式样式 */
+    .katex {
+        font: inherit;
+        text-rendering: auto;
+    }
+
+    .katex-display {
+        display: block;
+        margin: 1em 0;
+        text-align: center;
+    }
+
+    /* 数学符号和布局样式 */
+    .katex .mord,
+    .katex .mbin,
+    .katex .mrel,
+    .katex .mopen,
+    .katex .mclose,
+    .katex .mpunct,
+    .katex .minner {
+        font-family: inherit;
+    }
+
+    /* 数学布局样式 */
+    .katex .vlist-t,
+    .katex .vlist-r,
+    .katex .vlist {
+        display: inline-block;
+    }
+
+    .katex .mfrac {
+        display: inline-block;
+        vertical-align: middle;
+    }
+  `;

package/src/markdown/utils/dataProcessor.ts

@@ -0,0 +1,89 @@
+// 将表格数据转换为Markdown表格格式
+export const convertTableDataToMarkdown = (tableData: any): string => {
+  try {
+    const { column, data } = tableData;
+
+    if (!Array.isArray(column) || !Array.isArray(data)) {
+      return '表格数据格式错误';
+    }
+
+    if (column.length === 0 || data.length === 0) {
+      return '暂无数据';
+    }
+
+    // 构建Markdown表格，添加序号列
+    let markdown = '';
+
+    // 表头 - 添加序号列
+    markdown += '| 序号 | ' + column.join(' | ') + ' |\n';
+
+    // 分隔线 - 序号列居中对齐，其他列默认左对齐
+    markdown += '| :---: | ' + column.map(() => '---').join(' | ') + ' |\n';
+
+    // 数据行 - 添加序号
+    data.forEach((row, index) => {
+      const rowData = column.map(col => {
+        const value = row[col];
+        return value !== undefined ? String(value) : '-';
+      });
+      // 序号从1开始
+      markdown += '| ' + (index + 1) + ' | ' + rowData.join(' | ') + ' |\n';
+    });
+
+    return markdown;
+  } catch (error) {
+    console.error('转换表格数据失败:', error);
+    return '表格数据转换失败';
+  }
+};
+
+// 检查内容是否为表格数据
+const isTableData = (content: string): boolean => {
+  try {
+    const parsed = JSON.parse(content);
+    return parsed && typeof parsed === 'object' &&
+      Array.isArray(parsed.column) &&
+      Array.isArray(parsed.data);
+  } catch {
+    return false;
+  }
+};
+
+// 处理步骤内容
+export const processStepContent = (content: any, stepType?: string): string | null => {
+  if (!content) return null;
+
+  // 如果是表格类型，转换为Markdown表格格式
+  if (stepType === 'ant_table' && isTableData(content)) {
+    try {
+      const tableData = JSON.parse(content);
+      const markdownTable = convertTableDataToMarkdown(tableData);
+      return markdownTable;
+    } catch (error) {
+      console.error('解析表格数据失败:', error);
+      return '```json\n' + content + '\n```';
+    }
+  }
+
+  // 如果是echart类型，包装为echarts代码块
+  if (stepType === 'echart') {
+    return '```echarts\n' + content + '\n```';
+  }
+
+  // 如果是code类型，包装为sql代码块
+  if (stepType === 'code') {
+    return '```sql\n' + content + '\n```';
+  }
+
+  // 如果是JSON格式，格式化显示
+  try {
+    JSON.parse(content);
+    const parsed = JSON.parse(content);
+    return '```json\n' + JSON.stringify(parsed, null, 2) + '\n```';
+  } catch {
+    // 不是JSON，继续其他处理
+    console.log('不是JSON');
+  }
+
+  return content;
+};