@alicloud/appflow-chat 0.0.1-beta.1

package/src/markdown/components/Chart.tsx

@@ -0,0 +1,120 @@
+
+import React, { useEffect, useRef, useState } from 'react';
+import { useRichBubbleContext } from '@/context/RichBubble';
+import loadEchartsScript from '@/utils/loadEcharts';
+
+interface Iprops {
+  options: any;
+}
+
+export const Chart: React.FC<Iprops> = ({
+  options,
+}) => {
+  const chartContainerRef = useRef(null);
+  const chartInstanceRef = useRef(null);
+  const [isEchartsLoaded, setIsEchartsLoaded] = useState(false);
+
+  const { activeKey } = useRichBubbleContext();
+
+  // 加载echarts
+  useEffect(() => {
+    const initEcharts = async () => {
+      try {
+        await loadEchartsScript();
+        setIsEchartsLoaded(true);
+      } catch (error) {
+        console.error('echarts加载失败:', error);
+        setIsEchartsLoaded(false);
+      }
+    };
+
+    initEcharts();
+  }, []);
+
+  useEffect(() => {
+    // 确保echarts已加载且DOM元素存在
+    if (!isEchartsLoaded || !chartContainerRef.current || !options) return;
+
+    const echarts = (window as any).echarts;
+    if (!echarts) {
+      console.error('echarts未正确加载');
+      return;
+    }
+
+    // 清理之前的实例
+    if (chartInstanceRef.current) {
+      // @ts-ignore
+      chartInstanceRef.current.dispose();
+    }
+
+    // 创建新的图表实例
+    const chartInstance = echarts.init(chartContainerRef.current);
+    // @ts-ignore
+    chartInstanceRef.current = chartInstance;
+
+    // 设置图表选项
+    chartInstance.setOption(options);
+
+    // 处理窗口大小变化
+    const handleResize = () => {
+      chartInstance.resize();
+    };
+    window.addEventListener('resize', handleResize);
+
+    // 清理函数
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      chartInstance.dispose();
+      chartInstanceRef.current = null;
+    };
+  }, [options, isEchartsLoaded]);
+
+  // 在步骤消息折叠框改变时更新图表
+  useEffect(() => {
+    if (chartInstanceRef.current && activeKey && isEchartsLoaded) {
+      // 确保折叠动画完成后再resize
+      const timer = setTimeout(() => {
+        // @ts-ignore
+        chartInstanceRef.current?.resize();
+      }, 50);
+
+      return () => clearTimeout(timer);
+    }
+  }, [activeKey, isEchartsLoaded]);
+
+  // 等待echarts加载完成
+  if (!isEchartsLoaded) {
+    return (
+      <div 
+        style={{ 
+          width: '100%', 
+          height: '400px', 
+          marginTop: '20px', 
+          marginBottom: '20px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          border: '1px dashed #d9d9d9',
+          borderRadius: '6px',
+          color: '#666'
+        }}
+      >
+        图表加载中...
+      </div>
+    );
+  }
+
+  return (
+    <div 
+      ref={chartContainerRef} 
+      style={{ 
+        width: '100%', 
+        height: '400px', 
+        marginTop: '20px', 
+        marginBottom: '20px' 
+      }} 
+    />
+  );
+};
+
+export default Chart;

package/src/markdown/components/Error.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+// ==================== Styled Components ====================
+
+const ChartErrorContainer = styled.div`
+  margin: 10px 0;
+  padding: 10px;
+  border-radius: 4px;
+  text-align: center;
+  background: #ffeeee;
+  color: rgb(200, 0, 0);
+  border: 1px solid #ffcccc;
+
+  span {
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  &:hover {
+    background: #f5f5f5;
+  }
+`;
+
+// ==================== Component ====================
+
+interface ChartErrorProps {
+  text?: string;
+}
+
+const ChartError: React.FC<ChartErrorProps> = ({ text = '' }) => {
+  return (
+    <ChartErrorContainer>
+      <span>{text}</span>
+    </ChartErrorContainer>
+  );
+};
+
+export default ChartError;

package/src/markdown/components/FileDisplay.tsx

@@ -0,0 +1,246 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faFilePdf,
+  faFileImage,
+  faFileExcel,
+  faFilePowerpoint,
+  faFileWord,
+  faFileArchive,
+  faFileCode,
+  faFileVideo,
+  faFileAudio,
+  faFile,
+  faFileLines
+} from '@fortawesome/free-solid-svg-icons';
+
+// Styled Components
+const FileDisplayContainer = styled.div`
+  display: flex;
+  align-items: center;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  border: 1px solid #e9ecef;
+  transition: all 0.3s ease;
+  padding: 8px 12px;
+
+  @media (max-width: 500px) {
+    flex-direction: column;
+    text-align: center;
+  }
+`;
+
+const FileIconWrapper = styled.div<{ $color: string }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  color: ${props => props.$color};
+  background-color: #e8f4fc;
+  border-radius: 8px;
+  margin-right: 12px;
+
+  @media (max-width: 500px) {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+`;
+
+const FileInfo = styled.div`
+  flex: 1;
+`;
+
+const FileName = styled.div`
+  font-weight: bold;
+  font-size: 12px;
+  margin-bottom: 4px;
+  color: #2d3436;
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const FileDetails = styled.div`
+  display: flex;
+  font-size: 14px;
+  color: #636e72;
+
+  @media (max-width: 500px) {
+    justify-content: center;
+  }
+`;
+
+const FileSize = styled.span`
+  margin-right: 12px;
+`;
+
+const FileType = styled.span`
+  background-color: rgba(0, 0, 0, 0.08);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+`;
+
+interface Iprops {
+  fileInfo: any;
+}
+
+export const FileDisplay: React.FC<Iprops> = ({
+  fileInfo
+}) => {
+  const { name, size, type = 'doc' } = fileInfo;
+
+  const getFileIcon = () => {
+    switch (type.toLowerCase()) {
+      case 'pdf':
+        return faFilePdf;
+      case 'image':
+      case 'img':
+      case 'jpg':
+      case 'jpeg':
+      case 'png':
+      case 'gif':
+        return faFileImage;
+      case 'excel':
+      case 'xlsx':
+      case 'xls':
+      case 'csv':
+        return faFileExcel;
+      case 'powerpoint':
+      case 'ppt':
+      case 'pptx':
+        return faFilePowerpoint;
+      case 'word':
+      case 'doc':
+      case 'docx':
+        return faFileWord;
+      case 'archive':
+      case 'zip':
+      case 'rar':
+      case 'tar':
+      case '7z':
+        return faFileArchive;
+      case 'code':
+      case 'js':
+      case 'jsx':
+      case 'ts':
+      case 'tsx':
+      case 'html':
+      case 'css':
+      case 'json':
+      case 'py':
+      case 'java':
+      case 'cpp':
+        return faFileCode;
+      case 'video':
+      case 'mp4':
+      case 'avi':
+      case 'mov':
+      case 'webm':
+        return faFileVideo;
+      case 'audio':
+      case 'mp3':
+      case 'wav':
+      case 'ogg':
+        return faFileAudio;
+      case 'md':
+      case 'markdown':
+      case 'txt':
+      case 'text':
+        return faFileLines;
+      default:
+        return faFile;
+    }
+  };
+
+  const getFileTypeColor = () => {
+    switch (type.toLowerCase()) {
+      case 'pdf':
+        return '#e74c3c'; // 红色
+      case 'image':
+      case 'img':
+      case 'jpg':
+      case 'jpeg':
+      case 'png':
+      case 'gif':
+        return '#3498db'; // 蓝色
+      case 'excel':
+      case 'xlsx':
+      case 'xls':
+      case 'csv':
+        return '#27ae60'; // 绿色
+      case 'powerpoint':
+      case 'ppt':
+      case 'pptx':
+        return '#e67e22'; // 橙色
+      case 'word':
+      case 'doc':
+      case 'docx':
+        return '#2980b9'; // 深蓝色
+      case 'archive':
+      case 'zip':
+      case 'rar':
+      case 'tar':
+      case '7z':
+        return '#8e44ad'; // 紫色
+      case 'code':
+      case 'js':
+      case 'jsx':
+      case 'ts':
+      case 'tsx':
+      case 'html':
+      case 'css':
+      case 'json':
+      case 'py':
+      case 'java':
+      case 'cpp':
+        return '#f1c40f'; // 黄色
+      case 'video':
+      case 'mp4':
+      case 'avi':
+      case 'mov':
+      case 'webm':
+        return '#e84393'; // 粉色
+      case 'audio':
+      case 'mp3':
+      case 'wav':
+      case 'ogg':
+        return '#00cec9'; // 青色
+      case 'md':
+      case 'markdown':
+      case 'txt':
+      case 'text':
+        return '#636e72'; // 深灰色
+      default:
+        return '#7f8c8d'; // 灰色
+    }
+  };
+
+  const formatSize = (bytes: number) => {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1048576) return (bytes/1024).toFixed(1) + ' KB';
+    return (bytes/1048576).toFixed(1) + ' MB';
+  };
+
+  return (
+    <FileDisplayContainer>
+      <FileIconWrapper $color={getFileTypeColor()}>
+        <FontAwesomeIcon icon={getFileIcon()} style={{ fontSize: '24px' }} />
+      </FileIconWrapper>
+      <FileInfo>
+        <FileName>{name}</FileName>
+        <FileDetails>
+          <FileSize>{formatSize(size)}</FileSize>
+          <FileType>{type.toUpperCase()}</FileType>
+        </FileDetails>
+      </FileInfo>
+    </FileDisplayContainer>
+  );
+};
+
+export default FileDisplay;

package/src/markdown/components/Loading.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+
+// ==================== Styled Components ====================
+
+const ChartLoadingContainer = styled.div`
+  padding: 10px;
+  text-align: center;
+  background: #f9f9f9;
+  border-radius: 4px;
+  color: #666;
+  min-height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  &:hover {
+    background: #f5f5f5;
+  }
+`;
+
+// ==================== Component ====================
+
+interface ChartLoadingProps {
+  text?: string;
+}
+
+const ChartLoading: React.FC<ChartLoadingProps> = ({ text = '图表加载中...' }) => {
+  return (
+    <ChartLoadingContainer>
+      <span>{text}</span>
+    </ChartLoadingContainer>
+  );
+};
+
+export default ChartLoading;

package/src/markdown/components/SyntaxHighlight.tsx

@@ -0,0 +1,182 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { loadPrism, loadPrismLanguage } from '@/utils/loadPrism';
+
+interface ASyntaxHighLightProps {
+  language?: string;
+  children: any;
+  style?: React.CSSProperties;
+}
+
+const CopyIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z" />
+  </svg>
+);
+
+const CheckIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z" />
+  </svg>
+);
+
+export const ASyntaxHighLight: React.FC<ASyntaxHighLightProps> = ({
+  language = 'javascript',
+  children,
+  style
+}) => {
+  const [copied, setCopied] = useState(false);
+  const [highlightedCode, setHighlightedCode] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(true);
+  const codeRef = useRef<HTMLElement>(null);
+
+  // 获取代码文本
+  const codeText = typeof children === 'string' 
+    ? children 
+    : Array.isArray(children) 
+      ? children.join('') 
+      : String(children || '');
+
+  // 加载 Prism 并高亮代码
+  useEffect(() => {
+    let isMounted = true;
+
+    const highlight = async () => {
+      try {
+        setIsLoading(true);
+        const Prism = await loadPrism();
+        await loadPrismLanguage(language);
+
+        if (!isMounted) return;
+
+        // 获取语法定义
+        const grammar = Prism.languages[language] || Prism.languages.javascript;
+        const highlighted = Prism.highlight(codeText.replace(/\n$/, ''), grammar, language);
+        
+        setHighlightedCode(highlighted);
+        setIsLoading(false);
+      } catch (error) {
+        console.error('Failed to highlight code:', error);
+        if (isMounted) {
+          setHighlightedCode(escapeHtml(codeText));
+          setIsLoading(false);
+        }
+      }
+    };
+
+    highlight();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [codeText, language]);
+
+  // HTML 转义函数
+  const escapeHtml = (text: string) => {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  };
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(codeText);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  // 计算行号
+  const lines = codeText.split('\n');
+  const lineCount = lines[lines.length - 1] === '' ? lines.length - 1 : lines.length;
+
+  return (
+    <div style={{ position: 'relative', ...style }}>
+      <pre 
+        className="line-numbers"
+        style={{
+          margin: 0,
+          padding: '1em',
+          paddingLeft: '3.8em',
+          overflow: 'auto',
+          background: '#e3eaf2',
+          borderRadius: '4px',
+          fontSize: '13px',
+          lineHeight: '1.5',
+          fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+        }}
+      >
+        {/* 行号 */}
+        <span 
+          className="line-numbers-rows"
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: '1em',
+            width: '3em',
+            borderRight: '1px solid #8da1b9',
+            textAlign: 'right',
+            paddingRight: '0.8em',
+            userSelect: 'none',
+            color: '#8da1b9',
+            fontSize: '13px',
+            lineHeight: '1.5',
+          }}
+        >
+          {Array.from({ length: lineCount }, (_, i) => (
+            <span key={i} style={{ display: 'block' }}>{i + 1}</span>
+          ))}
+        </span>
+        
+        <code
+          ref={codeRef}
+          className={`language-${language}`}
+          style={{
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+          }}
+          dangerouslySetInnerHTML={
+            isLoading 
+              ? { __html: escapeHtml(codeText) }
+              : { __html: highlightedCode }
+          }
+        />
+      </pre>
+      
+      {/* 复制按钮 */}
+      <button
+        onClick={handleCopy}
+        style={{
+          position: 'absolute',
+          right: '8px',
+          top: '8px',
+          padding: '4px 8px',
+          background: 'rgba(255,255,255,0.8)',
+          border: '1px solid #ccc',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          opacity: 0.7,
+          transition: 'all 0.2s',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: '12px',
+          color: '#333',
+        }}
+        onMouseEnter={e => {
+          e.currentTarget.style.opacity = '1';
+          e.currentTarget.style.background = 'rgba(255,255,255,1)';
+        }}
+        onMouseLeave={e => {
+          e.currentTarget.style.opacity = '0.7';
+          e.currentTarget.style.background = 'rgba(255,255,255,0.8)';
+        }}
+        title={copied ? 'Copied!' : 'Copy code'}
+      >
+        {copied ? <CheckIcon /> : <CopyIcon />}
+        <span style={{ marginLeft: '4px' }}>{copied ? 'Copied' : 'Copy'}</span>
+      </button>
+    </div>
+  );
+};