@gientech/modual 2.2.3-fix.5 → 2.2.3-fix.6

package/src/modules/chatCompare/components/ChatItem.tsx

@@ -0,0 +1,556 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ChatMessageAdapter } from '@mxmweb/rtext';
+import { AppStatusManager } from '@mxmweb/aichat';
+import { deepMergeTheme, defaultTheme, type Styles } from '@mxmweb/zui';
+import {
+  fileViewTypes,
+  getMarkExcludeType,
+  getUrlPrefix,
+  TempBaseUrl,
+} from '../../../utils/gientechCommon/utils';
+import { ConfigProvider, Drawer, message } from 'antd';
+import DrawerGraphPreview from './components/DrawerGraphPreview';
+import { DrawerContent } from './components/DrawerContent';
+import DrawerPreview from './components/DrawerPreview';
+import DrawerDatabase from './components/DrawerDatabase';
+import DrawerVideo from './components/DrawerVideo';
+import { ReferenceBar } from './components/ReferenceBar';
+import {
+  getFeedbackList,
+  handleCancelFeedBack,
+  handleFeedBack,
+} from '../../../utils/gientechCommon/utils/serverFn';
+import FeedBackModal from '../../../utils/gientechCommon/components/FeedBackModal';
+import axios from 'axios';
+export enum DrawerType {
+  REFERENCELIST = 'referencelist',
+  ALLFILELIST = 'allFileList',
+}
+export const ChatItem = ({
+  item,
+  scrollOld,
+  token,
+  normalizedStyles,
+  currentChatData,
+  assistantList,
+  setFeed,
+  CSRFToken,
+  handleReSenderSend,
+  appStatus,
+  recommandQuestions,
+}: {
+  item: { id: string; configId: string };
+  scrollOld: boolean;
+  token: string;
+  normalizedStyles: Styles;
+  currentChatData: any;
+  assistantList: any[];
+  setFeed: any;
+  CSRFToken?: any;
+  handleReSenderSend: any;
+  appStatus: any;
+  recommandQuestions: any[];
+}) => {
+  const [feedBackList, setFeedBackList] = useState<any>([]);
+  const [openFeed, setOpenFeed] = useState(false);
+  const [feedParam, setFeedParam] = useState<{
+    queryId?: number | string | undefined;
+    restult?: number;
+  }>({});
+  const [open, setOpen] = useState(false);
+  const [content, setContent] = useState<
+    | {
+        title: '';
+        file_type: '';
+        metadata: { offset: [] };
+      }
+    | any
+  >(null);
+  const [drawerType, setDrawerType] = useState<string>('mark');
+  const [curFileInfo, setCurFileInfo] = useState({
+    url: '',
+    parse_url: '',
+    file_type: '',
+    file_name: '',
+  });
+
+  const assistantMap = useMemo(() => {
+    const map: Record<string, any> = {};
+    (assistantList || []).forEach(item => {
+      map[item.id] = item;
+    });
+    return map;
+  }, [assistantList]);
+  const is_download = useMemo(() => {
+    if (item.configId && assistantMap) {
+      const curAssist = assistantMap[item.configId];
+      if (curAssist?.configJson) {
+        const config = JSON.parse(curAssist.configJson);
+        return config.is_download;
+      }
+      return false;
+    } else {
+      return false;
+    }
+  }, [item.configId, assistantMap]);
+
+  function handleThumbsup(data: any) {
+    if (data.restult == 1) {
+      handleCancelFeedBack(
+        { url: getUrlPrefix(), token, CSRFToken },
+        { queryId: data.queryId },
+        () => {
+          setFeed(data.queryId, null);
+        }
+      );
+    } else {
+      handleFeedBack(
+        { url: getUrlPrefix(), token, CSRFToken },
+        { restult: 1, queryId: data.queryId },
+        () => {
+          setFeed(data.queryId, 1);
+        }
+      );
+    }
+  }
+  const api_getFileStatusByUid = async (data: any) => {
+    try {
+      const res: any = await axios.get(
+        `${getUrlPrefix()}/index/knowledgeBase/file/getFileStatusByUids?uids=${data.data.uids}`,
+        { headers: { Authorization: token } }
+      );
+      console.log('resslkdjgalsg', res);
+      return res?.data?.data;
+    } catch (error) {}
+  };
+  const referenceFile_question_upload = async (data: any) => {
+    if (fileViewTypes.includes(data.file_type)) {
+      // 优先使用 metadata.source，否则使用 url 或 convertedFilePath
+      const previewUrl = data.metadata?.source
+        ? `${TempBaseUrl}${data.metadata.source}`
+        : data.url || data.convertedFilePath || data.filePath;
+      setCurFileInfo({
+        ...data,
+        parse_url: previewUrl,
+      });
+
+      setDrawerType('preview');
+      setOpen(true);
+      return;
+    }
+    try {
+      const res: any = await api_getFileStatusByUid({
+        data: { uids: data.uid },
+        config: {
+          url: getUrlPrefix(),
+          token,
+          enableMock: false,
+        },
+      });
+      if (res?.length) {
+        const d = res[0];
+        setCurFileInfo({
+          ...data,
+          parse_url: d.convertedFilePath,
+        });
+
+        setDrawerType('preview');
+        setOpen(true);
+      }
+    } catch (error) {}
+  };
+  const mergedEventsEmit = (eventName: string, data: any) => {
+    console.log(`[Event] ${eventName}`, data);
+    switch (eventName) {
+      case 'reference_file:click':
+        if (data.file_type === 'image') return;
+
+        if (!data.parse_url) {
+          if (!data.uid) {
+            if (data.references) return;
+            return message.warning('文件还未解析完成,请稍后预览');
+          }
+          referenceFile_question_upload(data);
+          return;
+        }
+        setCurFileInfo({
+          ...data,
+          file_type: data.type,
+          file_name: data.file,
+        });
+        setDrawerType('preview');
+        setOpen(true);
+
+        break;
+      case 'chatbox:repeat':
+        handleReSenderSend(data);
+        break;
+      case 'chatbox:dislike':
+        if (data?.result === 0) {
+          handleCancelFeedBack(
+            { url: getUrlPrefix(), token, CSRFToken },
+            { queryId: data.queryId },
+            () => {
+              setFeed(data.queryId, null);
+            }
+          );
+        } else {
+          setFeedParam({ queryId: data?.queryId });
+          setOpenFeed(true);
+        }
+        break;
+      case 'chatbox:like':
+        handleThumbsup({ queryId: data?.queryId, restult: data?.result });
+        break;
+      case 'chatbox:copy': {
+        let text = data?.content || '';
+        if (!text) break;
+        // 过滤掉 [retrive-tag]...[/retrive-tag] 标签及内容
+        text = text.replace(/\[retrive-tag[^\]]*\][\s\S]*?\[\/retrive-tag\]/g, '');
+        // 直接使用 Clipboard API，避免依赖 event.currentTarget
+        const copyByClipboardApi = async (t: string) => {
+          try {
+            await navigator.clipboard.writeText(t);
+            message.success('已复制到剪贴板');
+            return true;
+          } catch (_) {
+            return false;
+          }
+        };
+        const fallbackCopy = (t: string) => {
+          const textarea = document.createElement('textarea');
+          textarea.value = t;
+          textarea.style.position = 'fixed';
+          textarea.style.opacity = '0';
+          document.body.appendChild(textarea);
+          textarea.focus();
+          textarea.select();
+          try {
+            document.execCommand('copy');
+            message.success('已复制到剪贴板');
+          } catch (_) {
+            message.error('复制失败');
+          }
+          document.body.removeChild(textarea);
+        };
+        copyByClipboardApi(text).then(ok => {
+          if (!ok) fallbackCopy(text);
+        });
+        break;
+      }
+      case 'action_retrive_tag':
+      case 'retrive_tag:click':
+        if (data?.graph?.id) {
+          //图谱溯源
+          setDrawerType('graphPreview');
+          setCurFileInfo({ ...data.graph, traceNode: data.traceNode });
+          setOpen(true);
+          return;
+        }
+        if (!data?.tagInfo && !data?.file && !data?.referenceDoc) return;
+        const curFile = data?.referenceDoc || data?.file || data?.tagInfo;
+        const { pdfPages, parsedFilePath, order_num, metadata, tags } = curFile;
+        if (curFile.type == 'video') {
+          setCurFileInfo({
+            ...metadata,
+            displayType: 'retrive',
+          });
+          setDrawerType('video');
+          setOpen(true);
+          return;
+        }
+
+        const id = curFile.id || order_num || 'Unknown ID';
+        // 解析 source 字段
+        const sourceParts = metadata.source.split('/');
+        const fileName = sourceParts[sourceParts.length - 1] || '';
+        const fileParts = fileName.split('.');
+        const label = fileParts.slice(0, -1).join('.') || 'Unknown Label';
+        const file_type = fileParts[fileParts.length - 1] || 'Unknown Type';
+
+        setContent({
+          id,
+          title: label,
+          file_name: fileName,
+          file_type: file_type,
+          file_source: getMarkExcludeType(file_type)
+            ? `${TempBaseUrl}${metadata.source}`
+            : parsedFilePath,
+          metadata: metadata,
+          pdfPages: pdfPages,
+        });
+        setDrawerType('mark');
+        setOpen(true);
+        break;
+      case 'references:click':
+        setCurFileInfo(data);
+        setDrawerType('reference');
+        setOpen(true);
+        break;
+      case 'knowledge_base_view_all:click':
+        break;
+      default:
+    }
+  };
+  const handleFeedDownConfirm = (data: any) => {
+    handleFeedBack(
+      { url: getUrlPrefix(), token, CSRFToken },
+      { ...data, ...feedParam, restult: 0 },
+      () => {
+        setFeed(feedParam.queryId, 0);
+      }
+    );
+  };
+  const aiChatBox = (msg: any, idx: number) => {
+    const isLastMessage = idx === (currentChatData?.messages?.length || 0) - 1;
+
+    // 根据消息的 status 和 appStatus 来确定 displayStatus
+    let displayStatus = 'ready';
+    if (isLastMessage) {
+      // 优先使用消息的 status 字段
+      if (msg.status !== undefined) {
+        switch (msg.status) {
+          case 0: // StatusType.Pending
+            displayStatus = 'thinking';
+            break;
+          case 1: // StatusType.Process - 对话正文输出中
+            displayStatus = 'processing';
+            break;
+          case 2: // StatusType.Done - 整个对话完成
+            displayStatus = 'ready';
+            break;
+          case 3: // StatusType.Error - 整个对话出现异常
+            displayStatus = 'error';
+            break;
+          case 4: // StatusType.ThoughtChain - 思维链输出中
+            displayStatus = 'thinking';
+            break;
+          default:
+            displayStatus = appStatus.display;
+        }
+      } else {
+        // 如果没有 status 字段，使用 appStatus.display
+        displayStatus = appStatus.display;
+      }
+    }
+    // 将推荐问题强制转换为数组，避免切换会话时报 .map 错误
+    let safeFollowUps: string[] = [];
+    if (Array.isArray(recommandQuestions)) {
+      safeFollowUps = recommandQuestions as string[];
+    } else if (typeof recommandQuestions === 'string') {
+      try {
+        safeFollowUps = JSON.parse(recommandQuestions) || [];
+      } catch {
+        safeFollowUps = [];
+      }
+    }
+    // 保证传入 ChatMessageAdapter 的 reference/webReference/graphReference 始终是有效的 JSON 字符串
+    const safeReference = (() => {
+      const r = (msg as any)?.reference;
+      if (!r) return '[]';
+      if (typeof r === 'string') {
+        try {
+          JSON.parse(r);
+          return r;
+        } catch {
+          return '[]';
+        }
+      }
+      try {
+        return JSON.stringify(r);
+      } catch {
+        return '[]';
+      }
+    })();
+    const safeWebReference = (() => {
+      const r = (msg as any)?.webReference;
+      if (!r) return '[]';
+      if (typeof r === 'string') {
+        try {
+          JSON.parse(r);
+          return r;
+        } catch {
+          return '[]';
+        }
+      }
+      try {
+        return JSON.stringify(r);
+      } catch {
+        return '[]';
+      }
+    })();
+    const safeGraphReference = (() => {
+      const r = (msg as any)?.graphReference;
+      if (!r) return '[]';
+      if (typeof r === 'string') {
+        try {
+          JSON.parse(r);
+          return r;
+        } catch {
+          return '[]';
+        }
+      }
+      try {
+        return JSON.stringify(r);
+      } catch {
+        return '[]';
+      }
+    })();
+    // databaseReference 在 rtext 内部会自行解析，这里直接透传原始结构即可（对象或字符串都支持）
+    const safeDatabaseReference = (msg as any)?.databaseReference;
+
+    // 从 chain 数组中提取 chainRespTime（累加所有节点的 chainRespTime 作为总时间）
+    // 如果 msg 已经有 chainRespTime，优先使用；否则从 chain 数组中累加
+
+    const extractChainRespTime = (() => {
+      // 优先使用已有的 chainRespTime
+      if (msg?.chainRespTime || (msg as any)?.reply?.chainRespTime) {
+        return msg?.chainRespTime ?? (msg as any)?.reply?.chainRespTime;
+      }
+      // 从 chain 数组中累加所有节点的 chainRespTime
+      const chain = msg?.chain || (msg as any)?.reply?.chain;
+      if (Array.isArray(chain) && chain.length > 0) {
+        const totalTime = chain.reduce((sum: number, node: any) => {
+          const time = node?.chainRespTime ?? node?.respTime;
+          if (time !== null && time !== undefined && time > 0) {
+            return sum + time;
+          }
+          return sum;
+        }, 0);
+        return totalTime > 0 ? totalTime : undefined;
+      }
+      return undefined;
+    })();
+
+    return (
+      <ChatMessageAdapter
+        key={`${msg?.queryId || msg?.id || idx}-${msg?.istype || 'unknown'}`}
+        {...msg}
+        token={token}
+        streamUrl="/proxy/index/knowledgeBase/file/stream"
+        referenceMode="button"
+        reference={safeReference}
+        webReference={safeWebReference}
+        graphReference={safeGraphReference}
+        databaseReference={safeDatabaseReference}
+        contentType={msg.istype === 'ai' ? 'stream' : 'plainText'} // 添加 contentType 确保 slateContent 能正确生成
+        displayStatus={displayStatus}
+        eventsEmit={mergedEventsEmit}
+        isLast={isLastMessage && msg?.istype === 'ai'}
+        followUpQuestions={isLastMessage && msg?.istype === 'ai' ? safeFollowUps : []}
+        defaultAnswer={
+          currentChatData?.searchConfigDTO?.defaultAnswer ||
+          '不知道什么原因我们没能查到你要的问题*-*'
+        }
+        isUser={msg?.istype === 'user'}
+        is_download={is_download}
+        styles={normalizedStyles as any}
+        enableThoughtChain
+        chain={msg?.chain}
+        thoughtChainNodes={msg?.thoughtChainNodes} // 实时思维链节点（优先使用）
+        thoughtChainStatus={msg?.status}
+        enableCot={msg?.enableCot ?? (msg as any)?.reply?.enableCot}
+        chainRespTime={extractChainRespTime}
+      />
+    );
+  };
+  useEffect(() => {
+    getFeedbackList({ url: getUrlPrefix(), token }, data => {
+      setFeedBackList(data);
+    });
+  }, []);
+  return (
+    <>
+      <div
+        style={{
+          direction: scrollOld ? 'ltr' : 'rtl',
+          transform: scrollOld ? '' : 'rotate(180deg)',
+          borderRadius: 8,
+        }}
+        className=" max-w-[1000px] min-w-[430px] mx-auto"
+      >
+        {currentChatData.messages.map((msg: any, idx: number) => {
+          return (
+            <div
+              key={msg.istype === 'user' ? msg.queryId : 'relatedTo-' + msg.queryId}
+              style={{ flex: 1 }}
+            >
+              {msg.istype === 'user' && (
+                <div style={{ direction: 'ltr' }}>{aiChatBox(msg, idx)}</div>
+              )}
+              {msg.istype === 'ai' && <div style={{ direction: 'ltr' }}>{aiChatBox(msg, idx)}</div>}
+            </div>
+          );
+        })}
+      </div>
+      <FeedBackModal
+        open={openFeed}
+        feedBackList={feedBackList}
+        setOpen={setOpenFeed}
+        handleConfirm={handleFeedDownConfirm}
+      />
+      <ConfigProvider
+        drawer={{
+          styles: {
+            body: { padding: 0 },
+            header: { display: 'none' },
+          },
+        }}
+      >
+        <Drawer
+          autoFocus={false}
+          onClose={() => setOpen(false)}
+          open={open}
+          width={drawerType === 'graphPreview' ? '100%' : drawerType === 'reference' ? 400 : 720}
+          className="overflow-x-hidden"
+          destroyOnClose
+          afterOpenChange={open => {
+            if (!open) {
+              setContent(null);
+            }
+          }}
+        >
+          {drawerType === 'graphPreview' && (
+            <DrawerGraphPreview
+              curFileInfo={curFileInfo as any}
+              onClose={() => setOpen(false)}
+              token={token}
+            />
+          )}
+          {drawerType === 'mark' && (
+            <DrawerContent content={content as any} onClose={() => setOpen(false)} token={token} />
+          )}
+          {drawerType === 'preview' && (
+            <DrawerPreview curFileInfo={curFileInfo} onClose={() => setOpen(false)} token={token} />
+          )}
+          {drawerType === 'database' && (
+            <DrawerDatabase
+              curFileInfo={curFileInfo}
+              onClose={() => setOpen(false)}
+              token={token}
+            />
+          )}
+          {drawerType == 'video' && (
+            <DrawerVideo
+              type={DrawerType.REFERENCELIST}
+              data={curFileInfo}
+              token={token}
+              eventsEmit={mergedEventsEmit}
+              is_download={is_download}
+            />
+          )}
+          {drawerType === 'reference' && (
+            <ReferenceBar
+              type={DrawerType.REFERENCELIST}
+              data={curFileInfo}
+              token={token}
+              eventsEmit={mergedEventsEmit}
+              is_download={is_download}
+              onClose={() => setOpen(false)}
+            />
+          )}
+        </Drawer>
+      </ConfigProvider>
+    </>
+  );
+};

package/src/modules/chatCompare/components/Sender/FileCardCommon.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { X } from 'lucide-react';
+
+export interface FileCardCommonProps {
+  fileName: string;
+  fileSize?: number;
+  icon: React.ReactNode;
+  statusText?: string;
+  statusColor?: string;
+  statusIcon?: React.ReactNode;
+  onRemove?: () => void;
+  themeColors?: any;
+  cardId?: string;
+  showRemove?: boolean;
+  disabledRemove?: boolean;
+  onRemoveWithAnim?: (id: string) => void;
+  extra?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+const formatSize = (size?: number) => {
+  if (!size) return '';
+  if (size < 1024) return `${size}B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)}KB`;
+  return `${(size / 1024 / 1024).toFixed(1)}MB`;
+};
+
+const FileCardCommon: React.FC<FileCardCommonProps> = ({
+  fileName,
+  fileSize,
+  icon,
+  statusText,
+  statusColor = 'text-gray-400',
+  statusIcon,
+  onRemove,
+  themeColors = {},
+  cardId,
+  showRemove = true,
+  disabledRemove = false,
+  onRemoveWithAnim,
+  extra,
+  style,
+}) => {
+  return (
+    <div
+      id={cardId}
+      className="group gap-x-3 items-center file-display-card relative flex w-[240px] bg-white border border-gray-200 rounded-lg shadow-sm px-3 py-2.5 transition-all hover:shadow-md hover:border-blue-300"
+      style={style}
+    >
+      <div
+        className="pt-0.5 flex-shrink-0"
+        style={{
+          width: 24,
+          height: 24,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <div style={{ transform: 'scale(1.2)', transformOrigin: 'center' }}>{icon}</div>
+      </div>
+      <div className="flex-1 min-w-0 flex flex-col justify-center">
+        <div className="flex items-center justify-between gap-1.5">
+          <span className="text-[13px] font-medium truncate max-w-[140px]" title={fileName}>
+            {fileName}
+          </span>
+          <span className="ml-1 text-[12px] text-gray-400 whitespace-nowrap">
+            {formatSize(fileSize)}
+          </span>
+        </div>
+        <div className={`text-[11px] mt-1 flex items-center gap-2 ${statusColor}`}>
+          {statusIcon}
+          <span>{statusText}</span>
+        </div>
+      </div>
+      {extra}
+      {showRemove && !disabledRemove && (
+        <button
+          className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity text-gray-300 hover:text-red-400 text-xs p-1 rounded-full bg-white shadow-sm z-10"
+          onClick={() => {
+            if (onRemoveWithAnim && cardId) {
+              onRemoveWithAnim(cardId);
+            } else if (onRemove) {
+              onRemove();
+            }
+          }}
+          title="移除"
+          style={{ lineHeight: 0, color: themeColors.error || '#FF0000' }}
+        >
+          <X className="w-4 h-4" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default FileCardCommon;