@mxmweb/aichat 1.1.8 → 1.2.0

package/src/adopters/gientechCommon/components/Messages/AiChatBox.tsx

@@ -1,530 +0,0 @@
-import React, { useRef, useState, useEffect, useMemo } from 'react';
-import { Slate, Editable, withReact } from 'slate-react';
-import { createEditor, Descendant } from 'slate';
-import { deserializeMarkdown } from '../../slate/converters/deserializers';
-import { renderElement, renderLeaf } from '../../slate/richElements';
-import dayjs from 'dayjs';
-import ReferenceCard from './ReferenceCard';
-import { Copy, RefreshCcw, ThumbsDown, ThumbsUp } from 'lucide-react';
-import { Tooltip } from 'antd';
-import { AiChatStyles, defaultTheme } from '../../configs/stylesConfig';
-import { uid } from 'uid';
-import RetriveItem from './RetriveItem';
-
-export interface ReferenceItem {
-  name: string;
-  file_type: string;
-  url: string;
-  parse_url?: string;
-  retrieve_tags?: any;
-  //  {
-  //   id: string;
-  //   type: string;
-  //   search_type?: string;
-  //   chunk_type?: string;
-  //   position?: any
-  // }
-}
-
-export interface SessionContext {
-  searchConfigDTO?: any;
-  sessionId?: string;
-  label?: string;
-  filePath?: string;
-  configId?: string;
-  kbId?: string;
-  queryId: string;
-}
-
-interface AiChatBoxProps {
-  time: string;
-  content: any;
-  reference?: string;
-  eventsEmit?: (eventName: string, payload?: any) => void;
-  sessionContext?: SessionContext;
-  feedbackResult: null | number;
-  queryId: string;
-  defaultAnswer?: string;
-  idx: number;
-  isWelcome?: boolean;
-  messages: any[];
-  respTime: number;
-  resultType: number;
-  displayStatus?:
-    | 'ready'
-    | 'processing'
-    | 'thinking'
-    | 'uploading'
-    | 'error'
-    | 'initializing'
-    | 'analyzing';
-  styles?: AiChatStyles;
-  tokens?: number;
-}
-
-// 工具函数：从 url/path 提取文件后缀（不含点，转小写）
-function getFileTypeFromUrl(url?: string): string | undefined {
-  if (!url) return undefined;
-  const match = url.match(/\.([a-zA-Z0-9]+)(\?|#|$)/);
-  return match ? match[1].toLowerCase() : undefined;
-}
-/**
- * 递归查找所有包含 retrive: true 的节点
- * @param nodes Slate.js 的数据结构（通常是一个数组）
- * @returns 所有包含 retrive: true 的节点数组
- */
-function findRetriveNodes(nodes: any[]): any[] {
-  let result: any[] = [];
-  for (const node of nodes) {
-    if (node.retrive === true) {
-      result.push(node);
-    }
-    if (Array.isArray(node.children)) {
-      result = result.concat(findRetriveNodes(node.children));
-    }
-  }
-  return result;
-}
-const createAiChatBoxStyles = (colors: any, icons: any, classId: string) => {
-  return `
-    .ai-chatbox-${classId} .ai-avatar {
-      background: url('${icons.aiAvatar}') center/cover no-repeat;
-      border-radius: 50%;
-      width: 2rem; height: 2rem;
-      box-shadow: 0 2px 8px ${colors.shadow}22;
-    }
-    .ai-chatbox-${classId} .ai-card {
-      background: ${colors.background};
-      border: 1px solid ${colors.border};
-      border-radius: 0.5rem;
-      box-shadow: 0 2px 8px ${colors.shadow}11;
-    }
-    .ai-chatbox-${classId} .ai-time {
-      color: ${colors.disabled};
-    }
-    .ai-chatbox-${classId} .ai-content {
-      color: ${colors.text};
-    }
-    .ai-chatbox-${classId} .ai-actions-btns button {
-      color: ${colors.disabled};
-      background: none;
-      border: none;
-      transition: color 0.2s;
-    }
-    .ai-chatbox-${classId} .ai-actions-btns button:hover {
-      color: ${colors.primary};
-    }
-    .ai-chatbox-${classId} .ai-actions-btns button.active,
-    .ai-chatbox-${classId} .ai-actions-btns button.active span,
-    .ai-chatbox-${classId} .ai-actions-btns button.active svg,
-    .ai-chatbox-${classId} .ai-actions-btns .icon-active {
-      color: ${colors.primary} !important;
-      fill: ${colors.primary} !important;
-    }
-    .ai-chatbox-${classId} .ai-actions-btns button:not(.active) svg {
-      color: ${colors.disabled};
-      fill: none;
-    }
-    .ai-chatbox-${classId} .ai-status-processing {
-      color: ${colors.info};
-    }
-    .ai-chatbox-${classId} .ai-status-uploading {
-      color: ${colors.warning};
-    }
-    .ai-chatbox-${classId} .ai-status-error {
-      color: ${colors.error};
-    }
-    .ai-chatbox-${classId} .ai-status-dot-processing {
-      background: ${colors.info};
-    }
-    .ai-chatbox-${classId} .ai-status-dot-uploading {
-      background: ${colors.warning};
-    }
-    .ai-chatbox-${classId} .ai-status-dot-error {
-      background: ${colors.error};
-    }
-  `;
-};
-
-export default function AiChatBox({
-  time,
-  content,
-  reference,
-  eventsEmit,
-  sessionContext,
-  feedbackResult,
-  queryId,
-  defaultAnswer,
-  respTime,
-  tokens,
-  resultType,
-  isWelcome,
-  displayStatus = 'ready',
-  styles,
-}: AiChatBoxProps) {
-  const editor = useRef(withReact(createEditor()));
-  const classId = useMemo(() => uid(), []);
-  const theme = useMemo(
-    () => ({
-      colors: { ...defaultTheme.colors, ...styles?.theme?.colors },
-      icons: { ...defaultTheme.icons, ...styles?.theme?.icons },
-    }),
-    [styles]
-  );
-  const { colors, icons } = theme;
-  //console.log('isWelcome111111',isWelcome,styles,theme);
-  useEffect(() => {
-    const styleTag = document.createElement('style');
-    styleTag.innerHTML = createAiChatBoxStyles(colors, icons, classId);
-    styleTag.id = `ai-chatbox-style-${classId}`;
-    document.head.appendChild(styleTag);
-    return () => {
-      const el = document.getElementById(styleTag.id);
-      if (el) el.remove();
-    };
-  }, [colors, icons, classId]);
-
-  const slateContent = useMemo(() => {
-    let sourceText = '';
-    // 优先使用实时或最终的 content
-    if (typeof content === 'string' && content) {
-      sourceText = content;
-    }
-    // 仅当流程结束(ready)且内容为空时，才使用兜底回复
-    else if (displayStatus === 'ready' && !content) {
-      sourceText = defaultAnswer || '';
-    }
-    // 在处理中，如果还没有任何内容，则显示空，让外部的状态指示器生效
-    else if (displayStatus === 'processing' || displayStatus === 'thinking') {
-      sourceText = content || '';
-    }
-    return deserializeMarkdown(sourceText, respTime);
-  }, [content, defaultAnswer, displayStatus, respTime]);
-
-  const parseReference = useMemo(() => {
-    if (!reference) return [];
-    let refs: any[] = [];
-    try {
-      refs = JSON.parse(reference);
-    } catch (error) {
-      return [];
-    }
-
-    // 获取所有retriveNodes
-    const retriveNodes = findRetriveNodes(slateContent);
-    // 1. 按id去重
-    const uniqueRetriveMap = new Map();
-    retriveNodes.forEach(node => {
-      if (node.id && !uniqueRetriveMap.has(node.id)) {
-        uniqueRetriveMap.set(node.id, node);
-      }
-    });
-    const uniqueRetriveNodes = Array.from(uniqueRetriveMap.values());
-    // 2. 用去重后的retriveNodes的id，在refs里找到order_num等于该id的文档对象
-
-    let result = uniqueRetriveNodes.map(node => {
-      const refDoc = refs.find(ref => String(ref.order_num) === String(node.id));
-      if (!refDoc) return null;
-      const meta = refDoc.metadata || {};
-      console.log(refs,uniqueRetriveNodes,'node``````````````````',content)
-      return {
-        file_id: meta.file_id ,
-        file_name: meta.source ? meta.source.split('/').pop() : refDoc.file_name || refDoc.order_num,
-        file_type: (meta.file_path || refDoc.file_path || '').split('.').pop() || 'pdf',
-        path: node.parsedFilePath,
-        score: Number(refDoc.score) || 0,
-        tags:uniqueRetriveNodes
-        .filter(n => n.parsedFilePath === node.parsedFilePath)
-        .map(n => ({
-          id: n.id || '',
-          index: n.indexId || '',
-          image_urls: n.imageUrls ? (Array.isArray(n.imageUrls) ? n.imageUrls : [n.imageUrls]) : [],
-        })),
-        parsedFilePath: refDoc.parsedFilePath,
-        ...refDoc // 保留原始字段以便后续扩展
-      };
-    }).filter(Boolean);
-    // 按parsedFilePath去重
-    const seen = new Set();
-    result = result.filter(item => {
-      if (!item.parsedFilePath) return true;
-      if (seen.has(item.parsedFilePath)) return false;
-      seen.add(item.parsedFilePath);
-      return true;
-    });
-    return result;
-  }, [reference, slateContent]);
-
-  // 新增：原始refs
-  const rawRefs = useMemo(() => {
-    try {
-      return JSON.parse(reference || '[]');
-    } catch {
-      return [];
-    }
-  }, [reference]);
-
-  // 1. 新增 think 展开状态管理
-  const [thinkExpandMap, setThinkExpandMap] = useState<Record<string, boolean>>({});
-
-  // 2. toggle 回调
-  const handleThinkToggle = (key: string) => {
-    setThinkExpandMap(prev => ({ ...prev, [key]: !prev[key] }));
-  };
-
-  // 3. 传递给 renderElement，带上 index 作为 key
-  const customRenderElement = (props: any) => {
-    // 传递 index 作为 thinkKey，Slate 没有 index 时 fallback 用 element.key
-    return renderElement({
-      ...props,
-      thinkExpandMap,
-      onThinkToggle: handleThinkToggle,
-      parentIndex: props.element?.queryId || props.element?.id || props.element?.key || undefined,
-    });
-  };
-
-  // 高阶函数传递回调（如需检索tag点击可扩展）
-  const customRenderLeaf = (props: any) => renderLeaf(props);
-
-  // 事件处理
-  const handleCopy = (event: any) => {
-    eventsEmit?.('action_copy:click', { content, event });
-  };
-  const handleThumbsup = () => {
-    eventsEmit?.('action_thumbsup', { restult: feedbackResult, queryId });
-  };
-  const handleThumbsdown = () => {
-    eventsEmit?.('action_thumbsdown', { restult: feedbackResult, queryId });
-  };
-
-  const handleRetriveTagClick = (tag: any) => {
-    // 在原始refs里查找
-    function findReferenceByTagId(refs: any[], tagId: any) {
-      for (const ref of refs) {
-        // 兼容references字段和自身order_num
-        if (ref.references && Array.isArray(ref.references)) {
-          const found = ref.references.find(
-            (r: any) => String(r.order_num) === String(tagId) || String(r.id) === String(tagId)
-          );
-          if (found) return found;
-        }
-        // 兼容refs本身就是扁平结构
-        if (String(ref.order_num) === String(tagId) || String(ref.id) === String(tagId)) {
-          return ref;
-        }
-      }
-      return null;
-    }
-    const found = findReferenceByTagId(rawRefs, tag.id);
-    eventsEmit?.('action_retrive_tag', { tagInfo: found });
-  };
-
-  // 获取所有retriveNodes
-  const retriveNodes = findRetriveNodes(slateContent);
-  // 收集图片
-  const retriveImages = useMemo(() => {
-    const imgs = retriveNodes
-      .filter(node => node.imageUrls && Array.isArray(node.imageUrls))
-      .flatMap(node => node.imageUrls);
-    //console.log('[retriveImages]', imgs, retriveNodes);
-    return imgs;
-  }, [retriveNodes]);
-
-  return (
-    <div className={`ai-chatbox-${classId}`}>
-      <div className="flex items-start mb-2 animate-fadeIn w-full text-wrap">
-        <div className="ai-avatar mr-3 shadow-sm flex-shrink-0" />
-        <div className="flex-1 w-[calc(100%-40px)]">
-          <div className="flex flex-col w-full relative">
-            <div className="text-xs mb-3 ai-time">{dayjs(time).format('YY-MM-DD HH:mm:ss')}</div>
-            <div className="ai-card w-full overflow-hidden">
-              <div className="ai-content w-full leading-relaxed">
-                <Slate
-                  editor={editor.current}
-                  initialValue={slateContent}
-                  key={JSON.stringify(slateContent)}
-                >
-                  <Editable
-                    readOnly
-                    renderElement={customRenderElement}
-                    renderLeaf={props =>
-                      customRenderLeaf({ ...props, onRetriveTagClick: handleRetriveTagClick })
-                    }
-                    className="min-h-[50px] w-full p-4 rounded-lg "
-                  />
-                </Slate>
-                {retriveImages.length > 0 && (
-                  <div className="mt-4 flex flex-wrap gap-3">
-                    {retriveImages.map((url, idx) => (
-                      <div key={url+idx} className="w-32 h-32 bg-gray-100 flex items-center justify-center rounded overflow-hidden relative">
-                        <img
-                          src={url}
-                          alt="retrive-img"
-                          className="object-contain w-full h-full"
-                          style={{ display: 'block' }}
-                          onLoad={e => { e.currentTarget.style.background = 'none'; }}
-                          onError={e => { e.currentTarget.style.background = '#f00'; }}
-                        />
-                        <span className="absolute left-0 right-0 top-0 bottom-0 flex items-center justify-center text-xs text-gray-400" style={{display:'none'}}>加载中...</span>
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-              {resultType !== 5 && parseReference && parseReference?.length > 0 && (
-                <div className="px-4 mb-4" style={{ borderTop: `1px solid ${colors.border}` }}>
-                  <div className="text-sm mt-4 pb-0 ai-time">知识库文档引用：</div>
-                  <div className=" pt-2 flex flex-wrap gap-2">
-                    {/* {parseReference.map((item: any, index: number) => {
-                      // collection类型需传collectionItems
-                      if (item.type === 'collection') {
-                        return (
-                          <ReferenceCard
-                            key={index}
-                            type="collection"
-                            file_type={item.file_type}
-                            file_name={item.file_name}
-                            collectionItems={item.references}
-                            eventsEmit={eventsEmit}
-                            styles={styles}
-                          />
-                        );
-                      }
-                      return (
-                        <ReferenceCard
-                          key={index}
-                          file_type={item.file_type}
-                          file_name={item.file_name}
-                          url={item.file_path}
-                          file_id={item.file_id}
-                          parse_url={item.parsed_file_url}
-                          parsed_file_type={item.parsed_file_type}
-                          references={item.references}
-                          retrieve_tags={item.retrieve_tags || []}
-                          eventsEmit={eventsEmit}
-                          styles={styles}
-                        />
-                      );
-                    })} */}
-                  </div>
-                  <RetriveItem files={parseReference} styles={styles} onTagClick={handleRetriveTagClick} eventsEmit={eventsEmit}/>
-                </div>
-              )}
-              <div>
-                {(displayStatus === 'processing' || displayStatus === 'thinking') && (
-                  <div className="px-4 pb-3 flex items-center gap-2 text-sm ai-status-processing">
-                    <span className="inline-block w-2 h-2 rounded-full animate-pulse ai-status-dot-processing"></span>
-                    <span>AI 正在思考...</span>
-                  </div>
-                )}
-                {displayStatus === 'uploading' && (
-                  <div className="px-4 pb-3 flex items-center gap-2 text-sm ai-status-uploading">
-                    <span className="inline-block w-2 h-2 rounded-full animate-pulse ai-status-dot-uploading"></span>
-                    <span>文件上传中...</span>
-                  </div>
-                )}
-                {displayStatus === 'analyzing' && (
-                  <div className="px-4 pb-3 flex items-center gap-2 text-sm ai-status-uploading">
-                    <span className="inline-block w-2 h-2 rounded-full animate-pulse ai-status-dot-uploading"></span>
-                    <span>知识解析中...</span>
-                  </div>
-                )}
-                {displayStatus === 'error' && (
-                  <div className="px-4 pb-3 flex items-center gap-2 text-sm ai-status-error">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      className="lucide lucide-alert-circle"
-                    >
-                      <circle cx="12" cy="12" r="10" />
-                      <line x1="12" x2="12" y1="8" y2="12" />
-                      <line x1="12" x2="12.01" y1="16" y2="16" />
-                    </svg>
-                    <span>抱歉，本次请求出错了，请稍后重试</span>
-                  </div>
-                )}
-                {displayStatus === 'ready' && !isWelcome && (
-                  <div>
-                    <div
-                      className="flex border-t pt-3 border-gray-100 items-center px-5 pb-1 justify-center text-xs "
-                      style={{ color: colors.disabledText }}
-                    >
-                      <div>
-                        本次回答总计消耗{' '}
-                        <span
-                          style={{
-                            color: colors.primary,
-                          }}
-                        >
-                          {tokens}
-                        </span>{' '}
-                        tokens,等待总计耗时{' '}
-                        <span
-                          style={{
-                            color: colors.primary,
-                          }}
-                        >
-                          {Math.round(respTime / 1000)}
-                        </span>
-                        秒
-                      </div>
-                    </div>
-                    <div className="ai-card-footer  border-dashed text-center text-xs text-gray-300 pb-4  ">
-                      免责声明：本回答仅基于大模型知识库数据，不保证100%准确，仅供参考。
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      {!isWelcome && (
-        <div className="w-full mt-2 ai-actions-btns flex py-2 items-center justify-end gap-2 px-2">
-          <button
-            className="flex group hover:text-primary cursor-pointer items-center gap-1 text-sm"
-            onClick={handleCopy}
-            title="复制"
-          >
-            <Copy
-              size={13}
-              className="transition-colors text-gray-500! group-hover:text-blue-500!"
-            />
-            <span className="hidden text-xs sm:inline">复制</span>
-          </button>
-          <button
-            className={`flex group cursor-pointer items-center gap-1 text-sm${feedbackResult === 1 ? ' active' : ''}`}
-            onClick={handleThumbsup}
-            title="点赞"
-          >
-            <ThumbsUp
-              fill={feedbackResult === 1 ? colors.primary : 'none'}
-              size={13}
-              className={`transition-colors text-gray-500! group-hover:text-blue-500! ${feedbackResult === 1 ? 'icon-active' : ''}`}
-            />
-            <span className={`hidden text-xs sm:inline`}>赞</span>
-          </button>
-          <button
-            className={`flex group cursor-pointer items-center gap-1 text-sm${feedbackResult === 0 ? ' active' : ''}`}
-            onClick={handleThumbsdown}
-            title="点踩"
-          >
-            <ThumbsDown
-              fill={feedbackResult === 0 ? colors.primary : 'none'}
-              size={13}
-              className={`transition-colors text-gray-500! group-hover:text-blue-500! ${feedbackResult === 0 ? 'icon-active' : ''}`}
-            />
-            <span className={`hidden text-xs sm:inline`}>踩</span>
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}