@mxmweb/aichat 1.1.1 → 1.1.8

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

@@ -0,0 +1,530 @@
+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>
+  );
+}