@mxmweb/aichat 1.1.1 → 1.1.8

package/src/components/RetrieveTest/components/converters/mockData.ts

@@ -0,0 +1,190 @@
+// Markdown 示例数据
+export const markdownExample = `# 产品功能概述
+
+这是一个**重要**的产品说明文档，包含了_主要功能_和<u>使用说明</u>。
+
+## 核心功能
+
+* **实时同步：** 数据实时更新
+* **多端支持：** 支持各种设备访问
+* **安全可靠：** 数据加密存储
+
+1. 第一步：安装应用
+2. 第二步：注册账号
+3. 第三步：开始使用
+
+| 功能 | 基础版 | 专业版 |
+|------|--------|--------|
+| 实时同步 | ✓ | ✓ |
+| 多人协作 | × | ✓ |
+| 历史记录 | × | ✓ |
+
+![产品界面预览](https://example.com/preview.jpg)
+
+更多详细信息请访问我们的官网。`;
+
+// HTML 示例数据
+export const htmlExample = `<h1>产品功能概述</h1>
+
+<p>这是一个<strong>重要</strong>的产品说明文档，包含了<em>主要功能</em>和<u>使用说明</u>。</p>
+
+<h2>核心功能</h2>
+
+<ul>
+  <li><strong>实时同步：</strong> 数据实时更新</li>
+  <li><strong>多端支持：</strong> 支持各种设备访问</li>
+  <li><strong>安全可靠：</strong> 数据加密存储</li>
+</ul>
+
+<ol>
+  <li>第一步：安装应用</li>
+  <li>第二步：注册账号</li>
+  <li>第三步：开始使用</li>
+</ol>
+
+<table>
+  <thead>
+    <tr>
+      <th>功能</th>
+      <th>基础版</th>
+      <th>专业版</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>实时同步</td>
+      <td>✓</td>
+      <td>✓</td>
+    </tr>
+    <tr>
+      <td>多人协作</td>
+      <td>×</td>
+      <td>✓</td>
+    </tr>
+    <tr>
+      <td>历史记录</td>
+      <td>×</td>
+      <td>✓</td>
+    </tr>
+  </tbody>
+</table>
+
+<p style="text-align: center">
+  <img src="https://example.com/preview.jpg" alt="" style="display: block; margin: 0 auto;">
+</p>
+
+<p>更多详细信息请访问我们的官网。</p>`;
+
+// Slate 数据结构示例
+export const slateExample = [
+  {
+    type: 'heading-one',
+    children: [{ text: '产品功能概述', bold: true }],
+  },
+  {
+    type: 'paragraph',
+    children: [
+      { text: '这是一个' },
+      { text: '重要', bold: true },
+      { text: '的产品说明文档，包含了' },
+      { text: '主要功能', italic: true },
+      { text: '和' },
+      { text: '使用说明', underline: true },
+      { text: '。' },
+    ],
+  },
+  {
+    type: 'heading-two',
+    children: [{ text: '核心功能', bold: true }],
+  },
+  {
+    type: 'bulleted-list',
+    children: [
+      {
+        type: 'list-item',
+        children: [
+          { text: '实时同步：', bold: true },
+          { text: ' 数据实时更新' },
+        ],
+      },
+      {
+        type: 'list-item',
+        children: [
+          { text: '多端支持：', bold: true },
+          { text: ' 支持各种设备访问' },
+        ],
+      },
+      {
+        type: 'list-item',
+        children: [
+          { text: '安全可靠：', bold: true },
+          { text: ' 数据加密存储' },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'numbered-list',
+    children: [
+      {
+        type: 'list-item',
+        children: [{ text: '第一步：安装应用' }],
+      },
+      {
+        type: 'list-item',
+        children: [{ text: '第二步：注册账号' }],
+      },
+      {
+        type: 'list-item',
+        children: [{ text: '第三步：开始使用' }],
+      },
+    ],
+  },
+  {
+    type: 'table',
+    children: [
+      {
+        type: 'table-row',
+        children: [
+          { type: 'table-cell', children: [{ text: '功能', bold: true }] },
+          { type: 'table-cell', children: [{ text: '基础版', bold: true }] },
+          { type: 'table-cell', children: [{ text: '专业版', bold: true }] },
+        ],
+      },
+      {
+        type: 'table-row',
+        children: [
+          { type: 'table-cell', children: [{ text: '实时同步' }] },
+          { type: 'table-cell', children: [{ text: '✓' }] },
+          { type: 'table-cell', children: [{ text: '✓' }] },
+        ],
+      },
+      {
+        type: 'table-row',
+        children: [
+          { type: 'table-cell', children: [{ text: '多人协作' }] },
+          { type: 'table-cell', children: [{ text: '×' }] },
+          { type: 'table-cell', children: [{ text: '✓' }] },
+        ],
+      },
+      {
+        type: 'table-row',
+        children: [
+          { type: 'table-cell', children: [{ text: '历史记录' }] },
+          { type: 'table-cell', children: [{ text: '×' }] },
+          { type: 'table-cell', children: [{ text: '✓' }] },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'image',
+    url: 'https://example.com/preview.jpg',
+    children: [{ text: '' }],
+    align: 'center',
+  },
+  {
+    type: 'paragraph',
+    children: [{ text: '更多详细信息请访问我们的官网。' }],
+  },
+]; 

package/src/components/RetrieveTest/components/converters/slateConverters.ts

@@ -0,0 +1,164 @@
+import { CustomElement, CustomText } from '../RichTextEditor';
+import { Node } from 'slate';
+
+// Markdown 转换器
+export const serializeToMarkdown = (nodes: CustomElement[]): string => {
+  return nodes.map(node => {
+    switch (node.type) {
+      case 'heading-one':
+        return `# ${serializeLeaf(node.children[0] as CustomText)}\n\n`;
+      case 'heading-two':
+        return `## ${serializeLeaf(node.children[0] as CustomText)}\n\n`;
+      case 'paragraph':
+        return `${node.children.map(child => serializeLeaf(child as CustomText)).join('')}\n\n`;
+      case 'bulleted-list':
+        return (node.children as CustomElement[]).map(item => `* ${(item.children as CustomText[]).map(child => serializeLeaf(child)).join('')}\n`).join('') + '\n';
+      case 'numbered-list':
+        return (node.children as CustomElement[]).map((item, i) => `${i + 1}. ${(item.children as CustomText[]).map(child => serializeLeaf(child)).join('')}\n`).join('') + '\n';
+      case 'block-quote':
+        return `> ${node.children.map(child => serializeLeaf(child as CustomText)).join('')}\n\n`;
+      case 'table':
+        return serializeTable(node) + '\n';
+      case 'image':
+        const align = node.align ? ` align="${node.align}"` : '';
+        return `![](${node.url}${align})\n\n`;
+      default:
+        return '';
+    }
+  }).join('');
+};
+
+const serializeLeaf = (leaf: CustomText): string => {
+  let text = leaf.text;
+  if (leaf.bold) text = `**${text}**`;
+  if (leaf.italic) text = `_${text}_`;
+  if (leaf.underline) text = `<u>${text}</u>`;
+  if (leaf.strikethrough) text = `~~${text}~~`;
+  if (leaf.code) text = `\`${text}\``;
+  if (leaf.link) text = `[${text}](${leaf.link})`;
+  return text;
+};
+
+const serializeTable = (table: CustomElement): string => {
+  const rows = table.children as CustomElement[];
+  if (rows.length === 0) return '';
+
+  // 创建表头
+  const headerRow = rows[0];
+  const headerCells = headerRow.children as CustomElement[];
+  let markdown = '| ' + headerCells.map(cell => {
+    const text = (cell.children[0] as CustomText).text;
+    return text.replace(/\|/g, '\\|'); // 转义表格中的竖线
+  }).join(' | ') + ' |\n';
+
+  // 添加分隔行
+  markdown += '| ' + headerCells.map(() => '---').join(' | ') + ' |\n';
+  
+  // 添加数据行
+  for (let i = 1; i < rows.length; i++) {
+    const row = rows[i];
+    markdown += '| ' + (row.children as CustomElement[])
+      .map(cell => {
+        const text = (cell.children[0] as CustomText).text;
+        return text.replace(/\|/g, '\\|'); // 转义表格中的竖线
+      })
+      .join(' | ') + ' |\n';
+  }
+  
+  return markdown;
+};
+
+// HTML 转换器
+export const serializeToHtml = (nodes: CustomElement[]): string => {
+  return nodes.map(node => {
+    switch (node.type) {
+      case 'heading-one':
+        return `<h1>${serializeLeafToHtml(node.children[0] as CustomText)}</h1>`;
+      case 'heading-two':
+        return `<h2>${serializeLeafToHtml(node.children[0] as CustomText)}</h2>`;
+      case 'paragraph':
+        const align = node.align ? ` style="text-align: ${node.align};"` : '';
+        return `<p${align}>${node.children.map(child => serializeLeafToHtml(child as CustomText)).join('')}</p>`;
+      case 'bulleted-list':
+        return `<ul>${(node.children as CustomElement[]).map(item => `<li>${(item.children as CustomText[]).map(child => serializeLeafToHtml(child)).join('')}</li>`).join('')}</ul>`;
+      case 'numbered-list':
+        return `<ol>${(node.children as CustomElement[]).map(item => `<li>${(item.children as CustomText[]).map(child => serializeLeafToHtml(child)).join('')}</li>`).join('')}</ol>`;
+      case 'block-quote':
+        return `<blockquote>${node.children.map(child => serializeLeafToHtml(child as CustomText)).join('')}</blockquote>`;
+      case 'table':
+        return serializeTableToHtml(node);
+      case 'image':
+        const imgAlign = node.align ? ` style="display: block; margin: 0 auto;"` : '';
+        return `<img src="${node.url}" alt=""${imgAlign}/>`;
+      default:
+        return '';
+    }
+  }).join('\n');
+};
+
+const serializeLeafToHtml = (leaf: CustomText): string => {
+  let text = leaf.text;
+  if (leaf.bold) text = `<strong>${text}</strong>`;
+  if (leaf.italic) text = `<em>${text}</em>`;
+  if (leaf.underline) text = `<u>${text}</u>`;
+  if (leaf.strikethrough) text = `<del>${text}</del>`;
+  if (leaf.code) text = `<code>${text}</code>`;
+  if (leaf.link) text = `<a href="${leaf.link}">${text}</a>`;
+  return text;
+};
+
+const serializeTableToHtml = (table: CustomElement): string => {
+  const rows = table.children as CustomElement[];
+  if (rows.length === 0) return '';
+
+  const tableStyles = {
+    wrapper: 'style="overflow-x: auto; margin: 1rem 0;"',
+    table: 'style="min-width: 420px; width: 550px; border-collapse: collapse; border: 1px solid #e5e7eb;"',
+    thead: 'style="background-color: #f0f9ff;"',
+    headerRow: 'style="border-bottom: 2px solid #93c5fd;"',
+    headerCell: 'style="padding: 0.75rem 1.5rem; text-align: left; font-size: 0.875rem; font-weight: 600; color: #1e3a8a; text-transform: uppercase; letter-spacing: 0.05em; border-right: 1px solid #93c5fd;"',
+    tbody: 'style="background-color: #ffffff;"',
+    row: 'style="border-bottom: 1px solid #e5e7eb;"',
+    cell: 'style="padding: 0.75rem 1.5rem; font-size: 0.875rem; color: #374151; border-right: 1px solid #e5e7eb;"',
+    lastCell: 'style="padding: 0.75rem 1.5rem; font-size: 0.875rem; color: #374151;"'
+  };
+
+  let html = `<div ${tableStyles.wrapper}><table ${tableStyles.table}>`;
+  
+  // 添加表头
+  html += `<thead ${tableStyles.thead}>`;
+  const headerRow = rows[0];
+  if (headerRow) {
+    html += `<tr ${tableStyles.headerRow}>`;
+    const cells = headerRow.children as CustomElement[];
+    html += cells.map((cell, index) => {
+      const isLast = index === cells.length - 1;
+      const cellStyle = isLast ? tableStyles.lastCell : tableStyles.headerCell;
+      return `<th scope="col" ${cellStyle}>${(cell.children[0] as CustomText).text}</th>`;
+    }).join('');
+    html += '</tr>';
+  }
+  html += '</thead>';
+  
+  // 添加表格主体
+  html += `<tbody ${tableStyles.tbody}>`;
+  if (rows.length > 1) {
+    for (let i = 1; i < rows.length; i++) {
+      const row = rows[i];
+      html += `<tr ${tableStyles.row}>`;
+      const cells = row.children as CustomElement[];
+      html += cells.map((cell, index) => {
+        const isLast = index === cells.length - 1;
+        const cellStyle = isLast ? tableStyles.lastCell : tableStyles.cell;
+        return `<td ${cellStyle}>${(cell.children[0] as CustomText).text}</td>`;
+      }).join('');
+      html += '</tr>';
+    }
+  } else {
+    // 如果没有数据行，添加一个空的行
+    html += `<tr ${tableStyles.row}><td colspan="100" style="padding: 0.75rem 1.5rem; text-align: center; color: #6b7280;">暂无数据</td></tr>`;
+  }
+  html += '</tbody></table></div>';
+  
+  return html;
+}; 

package/src/components/RetrieveTest/components/richElements/index.tsx

@@ -0,0 +1,339 @@
+// 富文本元素渲染统一出口
+
+// 迁移自ChatMessage.tsx
+import React from 'react';
+
+export const renderElement = (props: any) => {
+  // console.log('------------------renderElement element:', props);
+  const { element, children, attributes } = props;
+  switch (element.type) {
+    case 'paragraph':
+      return (
+        <p 
+          {...attributes} 
+          className="mb-4 leading-7 text-gray-700 font-normal"
+        >
+          {children}
+        </p>
+      );
+    case 'heading-one':
+      return (
+        <h1 
+          {...attributes} 
+          className="text-xl font-bold mb-6 text-gradient bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-cyan-500"
+        >
+          {children}
+        </h1>
+      );
+    case 'heading-two':
+      return (
+        <h2 
+          {...attributes} 
+          className="text-lg font-semibold mb-4 text-gray-600 border-l-4  pl-3"
+        >
+          {children}
+        </h2>
+      );
+    case 'heading-three':
+      return (
+        <h3 
+          {...attributes} 
+          className="text-lg font-medium mb-3 text-gray-600 flex items-center before:content-[''] before:w-2 before:h-2 before:rounded-full before:bg-blue-500 before:mr-2"
+        >
+          {children}
+        </h3>
+      );
+    case 'bulleted-list':
+      return (
+        <ul 
+          {...attributes} 
+          className="mb-4 space-y-2 list-none pl-4"
+        >
+          {children}
+        </ul>
+      );
+    case 'numbered-list':
+      return (
+        <ol 
+          {...attributes} 
+          className="mb-4 space-y-2 list-decimal pl-4 marker:text-blue-500 marker:font-medium"
+        >
+          {children}
+        </ol>
+      );
+    case 'list-item':
+      return (
+        <li 
+          {...attributes} 
+          className="relative pl-6 before:absolute before:left-0 before:top-3 before:w-2 before:h-2 before:bg-blue-500 before:rounded-full before:transform before:-translate-y-1/2"
+        >
+          {children}
+        </li>
+      );
+    case 'table':
+      return (
+        <div style={{ display: 'flex', msOverflowX:'scroll', width:"100%", maxWidth: '65vw', overflowX: 'auto', margin: '1rem 0' }}>
+          <table style={{ minWidth: 380, maxwidth: '100%', borderCollapse: 'collapse', border: '1px solid #e5e7eb' }} {...attributes}>
+            <tbody>{children}</tbody>
+          </table>
+        </div>
+      );
+    case 'table-row':
+      return (
+        <tr style={{ borderBottom: '1px solid #e5e7eb' }} {...attributes}>
+          {children}
+        </tr>
+      );
+    case 'table-cell':
+      if (element.header) {
+        return (
+          <th
+            style={{
+              padding: '0.75rem 1.5rem',
+              textAlign: 'left',
+              fontSize: '0.875rem',
+              fontWeight: 600,
+              color: '#1e3a8a',
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em',
+              borderRight: '1px solid #93c5fd',
+              backgroundColor: '#f0f9ff'
+            }}
+            {...attributes}
+          >
+            {children}
+          </th>
+        );
+      }
+      return (
+        <td
+          style={{
+            padding: '0.75rem 1.5rem',
+            fontSize: '0.875rem',
+            color: '#374151',
+            borderRight: '1px solid #e5e7eb'
+          }}
+          {...attributes}
+        >
+          {children}
+        </td>
+      );
+    case 'block-quote':
+      return (
+        <blockquote 
+          {...attributes}
+          className="border-l-4 border-blue-500 bg-blue-50 pl-4 py-2 mb-4 rounded-r-lg italic text-gray-700"
+        >
+          {children}
+        </blockquote>
+      );
+    case 'code-block':
+      const codeLines = element.children[0]?.text?.split('\n') || [''];
+      return (
+
+        <div {...attributes} className="mb-4 w-full rounded-lg  overflow-x-scroll bg-[#f6f8fa] border border-[#d0d7de]">
+          <div className="flex w-full">
+            {/* 行号区域 */}
+            <div className="py-4 pr-4 pl-3 text-right select-none bg-[#f6f8fa] border-r border-[#d0d7de] text-gray-400 font-mono text-xs">
+              {codeLines.map((_: string, i: number) => (
+                <div key={i} className="leading-5">
+                  {i + 1}
+                </div>
+              ))}
+            </div>
+            {/* 代码区域 */}
+            <pre className="flex-1 p-4 m-0 overflow-x-auto bg-[#f6f8fa] text-[#1f2328]">
+              <code className="font-mono text-sm leading-5">
+                {children}
+              </code>
+            </pre>
+          </div>
+        </div>
+      );
+    case 'think':
+      return (
+        <div
+          {...attributes}
+          style={{
+            background: '#f8fafc',
+            borderRadius: '8px',
+            border: '1px dashed #e0e7ef',
+            color: '#b0b8c9',
+            margin: '16px 0',
+            padding: '0',
+            position: 'relative',
+            fontStyle: 'italic',
+            overflow: 'hidden',
+            display: 'flex',
+          }}
+          className="relative my-4"
+        >
+          <div style={{
+            width: 4,
+            background: 'linear-gradient(to bottom, #e0e7ef 60%, #f1f5f9 100%)',
+            borderRadius: '2px',
+            marginRight: 12,
+            minHeight: '100%',
+          }} />
+          <div style={{ flex: 1 }}>
+            <div
+              style={{
+                borderTop: '1px solid #e0e7ef',
+                paddingTop: '8px',
+                marginBottom: '6px',
+                fontWeight: 500,
+                color: '#a3a3a3',
+                fontSize: '13px',
+                letterSpacing: '1px',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <span style={{ marginRight: 8, fontSize: 12 }}>💭</span>
+              思考中
+            </div>
+            <div style={{ color: '#b0b8c9', fontSize: '13px', lineHeight: 1.7, padding: '2px 0 10px 0' }}>{children}</div>
+          </div>
+        </div>
+      );
+    // case 'retrive':
+    //   return (
+    //     <span
+    //       {...attributes}
+    //       style={{
+    //         display: 'inline',
+    //         alignItems: 'center',
+    //         padding: '2px 3px',
+    //         borderRadius: '6px',
+    //         background: '#FEF3C7',
+    //         color: '#B45309',
+    //         border: '1px solid #FDE68A',
+    //         cursor: 'pointer',
+    //         margin: '0 4px',
+    //         transition: 'background 0.2s',
+    //         fontWeight: 600,
+    //         fontSize: 10,
+    //       }}
+    //       title={`召回标注ID: ${element.id}`}
+    //       onClick={() => {
+    //         if (props.onRetriveTagClick) {
+    //           props.onRetriveTagClick(element.id);
+    //         }
+    //       }}
+    //       onMouseEnter={e => (e.currentTarget.style.background = '#FDE68A')}
+    //       onMouseLeave={e => (e.currentTarget.style.background = '#FEF3C7')}
+    //     >
+    //       {/* <span style={{ fontWeight: 600, color: '#B45309', marginRight: 4 }}>召回标注</span>
+    //       <span style={{ fontSize: 12, color: '#B45309' }}>ID: {element.id}</span> */}
+    //       {children}
+    //     </span>
+    //   );
+    default:
+      return (
+        <div {...attributes} className="mb-4">
+          {children}
+        </div>
+      );
+  }
+};
+
+export const renderLeaf = (props: any) => {
+  const { attributes, children, leaf } = props;
+  let el = children;
+
+  // retrive-tag 行内高亮渲染
+  if (leaf.retrive) {
+    el = (
+      <span
+        {...attributes}
+        style={{
+          display: 'inline-block',
+          background: '#e6f7ff',
+          color: '#1890ff',
+          border: '1px solid rgba(114,187,255,0.3)',
+          borderRadius: 6,
+          padding: '1px 6px',
+          margin: '0 2px',
+          fontWeight: 600,
+          fontSize: 8,
+          lineHeight: '17px',
+          cursor: 'pointer',
+          verticalAlign: 'middle',
+        }}
+        // title={leaf.id ? `召回标注ID: ${leaf.id}` : ''}
+        onClick={() => {
+          //console.log('老子杯垫了leaf:', leaf,attributes)
+          if (props.onRetriveTagClick) {
+            props.onRetriveTagClick(leaf,attributes);
+          }
+        }}
+        onMouseEnter={e => (e.currentTarget.style.background = '#bae7ff')}
+        onMouseLeave={e => (e.currentTarget.style.background = '#e6f7ff')}
+      >
+        {el}
+      </span>
+    );
+    // 保证行内渲染，直接返回
+    return el;
+  }
+
+  if (leaf.code) {
+    el = (
+      <code 
+        style={{
+          padding: '0.125rem 0.375rem',
+          margin: '0 0.125rem',
+          borderRadius: '0.25rem',
+          backgroundColor: '#f6f8fa',
+          color: '#1f2328',
+          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+          fontSize: '0.875rem',
+          border: '1px solid #d0d7de',
+          fontWeight: leaf.bold ? 600 : 'normal',
+          fontStyle: leaf.italic ? 'italic' : 'normal',
+          textDecoration: [
+            leaf.underline && 'underline',
+            leaf.strikethrough && 'line-through'
+          ].filter(Boolean).join(' ') || 'none'
+        }}
+      >
+        {el}
+      </code>
+    );
+  } else {
+    const style: React.CSSProperties = {
+      fontWeight: leaf.bold ? 600 : 'normal',
+      fontStyle: leaf.italic ? 'italic' : 'normal',
+      textDecoration: [
+        leaf.underline && 'underline',
+        leaf.strikethrough && 'line-through'
+      ].filter(Boolean).join(' ') || 'none',
+      color: leaf.strikethrough ? '#6b7280' : 'inherit'
+    };
+    el = <span style={style}>{el}</span>;
+  }
+
+  if (leaf.link) {
+    el = (
+      <a 
+        href={leaf.link} 
+        target="_blank" 
+        rel="noopener noreferrer" 
+        style={{
+          color: '#3b82f6',
+          textDecoration: 'underline'
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.color = '#2563eb';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.color = '#3b82f6';
+        }}
+      >
+        {el}
+      </a>
+    );
+  }
+
+  return <span {...attributes}>{el}</span>;
+};

package/src/components/RetrieveTest/components/style.css

@@ -0,0 +1,3 @@
+.ant-form-item-control-input{
+    min-height: 0px !important;
+}