@mxmweb/aichat 1.1.1 → 1.1.8

package/src/components/Displayer/slate/converters/slateConverters.ts

@@ -0,0 +1,258 @@
+
+
+import {  BaseEditor } from 'slate';
+import {  ReactEditor } from 'slate-react';
+import React from 'react';
+
+// 定义自定义文本类型
+export type CustomText = {
+  text: string;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  code?: boolean;
+  retrive?: boolean;
+  strikethrough?: boolean;
+  link?: string;
+}
+
+// 定义基础元素类型
+export interface BaseElement {
+  type: string;
+  children: (CustomElement | CustomText)[];
+  align?: 'left' | 'center' | 'right';
+}
+
+// 定义各种元素类型
+export interface ParagraphElement extends BaseElement {
+  type: 'paragraph';
+}
+
+export interface HeadingOneElement extends BaseElement {
+  type: 'heading-one';
+}
+
+export interface HeadingTwoElement extends BaseElement {
+  type: 'heading-two';
+}
+
+export interface HeadingThreeElement extends BaseElement {
+  type: 'heading-three';
+}
+
+export interface ListElement extends BaseElement {
+  type: 'bulleted-list' | 'numbered-list';
+}
+
+export interface ListItemElement extends BaseElement {
+  type: 'list-item';
+}
+
+export interface TableElement extends BaseElement {
+  type: 'table';
+}
+
+export interface TableRowElement extends BaseElement {
+  type: 'table-row';
+}
+
+export interface TableCellElement extends BaseElement {
+  type: 'table-cell';
+}
+
+export interface ImageElement extends BaseElement {
+  type: 'image';
+  url: string;
+}
+
+export interface CodeBlockElement extends BaseElement {
+  type: 'code-block';
+}
+
+export interface BlockQuoteElement extends BaseElement {
+  type: 'block-quote';
+}
+
+// 组合所有元素类型
+export type CustomElement =
+  | ParagraphElement
+  | HeadingOneElement
+  | HeadingTwoElement
+  | HeadingThreeElement
+  | ListElement
+  | ListItemElement
+  | TableElement
+  | TableRowElement
+  | TableCellElement
+  | ImageElement
+  | CodeBlockElement
+  | BlockQuoteElement;
+
+declare module 'slate' {
+  interface CustomTypes {
+    Editor: BaseEditor & ReactEditor;
+    Element: CustomElement;
+    Text: CustomText;
+  }
+}
+// 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/Displayer/slate/richElements/index.tsx

@@ -0,0 +1,308 @@
+// 富文本元素渲染统一出口
+
+// 迁移自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: '0px 12px'  }}>{children}</div>
+          </div>
+        </div>
+      );
+
+    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/DrawerContent.tsx

@@ -0,0 +1,105 @@
+import { uid } from 'uid';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import FileViewer, { registerPDFWorker } from '@mxmweb/file-viewer';
+import { dealMinioUrl } from '../utils';
+registerPDFWorker('/worker/pdf.worker.min.js');
+export const DrawerContent = ({
+  content,
+  onClose,
+}: {
+  content: {
+    file_source: string;
+    contents: any[];
+    curMark: string;
+    file_type: string;
+    title: string;
+    metadata: any;
+  } | null;
+  onClose: any;
+}) => {
+  const [annotations, setAnnotations] = useState<any[]>([]);
+  const [tableAnnotations, setTableAnnotations] = useState<any>([]);
+  const [initialPage, setInitialPage] = useState(1);
+
+  useEffect(() => {
+    console.log('annotations', annotations);
+    console.log('initialPage', initialPage);
+  }, [annotations, initialPage]);
+  const fileType = useMemo(() => {
+    if (!content) return;
+    const { file_source } = content;
+    const arr = file_source.split('.');
+    if (!arr.length) return '';
+    return arr[arr.length - 1];
+  }, [content]);
+
+  useEffect(() => {
+    console.log('content88888888888', content);
+    if (!content) return;
+    const { contents, metadata } = content;
+    if (!metadata) return;
+    const { page_number, page_size, position, offset, chunk_type, table_name } = metadata;
+    if (fileType === 'md') {
+      if (offset?.length) {
+        setTableAnnotations([{ id: uid(), offsets: offset }]);
+      } else {
+        setTableAnnotations([]);
+      }
+    } else {
+      if (!page_size || !position) {
+        console.log('%c缺少文件size或者文件坐标', 'color: red');
+        return;
+      }
+      const pageSizes = Array.isArray(page_size) ? page_size : JSON.parse(page_size);
+      if (!pageSizes.length) {
+        console.log('%c缺少文件size', 'color: red');
+        return;
+      }
+      const positions = Array.isArray(position) ? position : JSON.parse(position);
+      if (!positions.length || !page_number) {
+        console.log('%c缺少文件坐标或者文件页数', 'color: red');
+        return;
+      }
+      const anno = positions.map((item: any, index: number) => {
+        return {
+          id: uid(),
+          pageNumber: page_number[index],
+          x: +(item[0][0] / pageSizes[0][0]).toFixed(4),
+          y: +(item[0][1] / pageSizes[0][1]).toFixed(4),
+          width: +((item[1][0] - item[0][0]) / pageSizes[0][0]).toFixed(4),
+          height: +((item[2][1] - item[0][1]) / pageSizes[0][1]).toFixed(4),
+          content: '',
+          color: chunk_type === 'image' ? '#60f74f' : '#4FC3F7',
+        };
+      });
+      console.log('anno', anno);
+      setInitialPage(page_number[0]);
+      setAnnotations(anno);
+    }
+  }, [content]);
+
+  return (
+    <div
+      style={{
+        fontFamily: 'Source Han Sans CN',
+        fontSize: '12px',
+      }}
+      className="h-full w-full"
+    >
+      <FileViewer
+        content={dealMinioUrl(content?.file_source) as any}
+        onClose={onClose}
+        annotations={annotations}
+        tableAnnotations={tableAnnotations as any}
+        tools={{
+          annotation: true,
+          download: true,
+          close: true,
+        }}
+        initialPage={initialPage}
+        headerClass="bg-white"
+        contentClass="bg-white p-[12px] md:p-[12px]"
+      />
+    </div>
+  );
+};

package/src/components/DrawerPreview.tsx

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { dealMinioUrl, fileViewTypes, TempBaseUrl } from '../utils';
+import FileViewer, { registerPDFWorker } from '@mxmweb/file-viewer';
+registerPDFWorker('/worker/pdf.worker.min.js');
+
+const DrawerPreview = ({ curFileInfo, onClose }: { curFileInfo: any; onClose: any }) => {
+  useEffect(() => {
+    console.log('curFileInfo1', curFileInfo);
+  }, [curFileInfo]);
+  return (
+    <div className="h-full overflow-y-auto">
+      <FileViewer
+        fileName={curFileInfo.file_name || ''}
+        content={
+          fileViewTypes.includes(curFileInfo.file_type)
+            ? dealMinioUrl(
+                curFileInfo.url.indexOf('http') > -1
+                  ? curFileInfo.url
+                  : `${TempBaseUrl}/${curFileInfo.url}`
+              )
+            : dealMinioUrl(curFileInfo.parse_url || curFileInfo.url)
+        }
+        onClose={onClose}
+        tools={{
+          annotation: false,
+          download: true,
+          close: true,
+        }}
+        headerClass="bg-white"
+        contentClass="bg-gray-50 p-[12px] md:p-[12px]"
+      />
+    </div>
+  );
+};
+
+export default DrawerPreview;