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

package/src/modules/chatCompare/index.tsx

@@ -0,0 +1,537 @@
+import '../../style.css';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import ChatInstance from './components/ChatInstance';
+import Sender from './components/Sender';
+import { AppTheme, deepMergeTheme, defaultTheme, Styles } from '@mxmweb/zui';
+import { mapSpaceToCssValue } from './components/utils';
+import { CirclePlus, Plus } from 'lucide-react';
+import { deepMerge } from './utils';
+import { DefaultSenderConfig, FilePreview } from './utils/constants';
+import useChatCompareHooks from './UseChatCompareHooks';
+import { Badge, Button } from 'antd';
+import { getHelperlistApi } from './components/server';
+import { uid } from 'uid';
+import { useFileDisplayTools } from '../../utils/gientechCommon/hooks/useFileDisplayTools';
+import { SenderConfig, showValidationErrors, validateFileUpload } from '@mxmweb/aichat';
+import './components/style.less';
+interface AppStatusManager {
+  display: 'ready' | 'loading' | 'error' | 'processing' | 'uploading' | 'thinking' | 'analyzing';
+  sender: 'ready' | 'loading' | 'error' | 'processing' | 'uploading';
+  // sidebar: 'ready' | 'loading' | 'error' | 'success' | 'processing';
+  app: 'ready' | 'initializing' | 'error';
+}
+const InitData = [
+  {
+    id: uid(32),
+  },
+  {
+    id: uid(32),
+  },
+];
+export const ChatCompareComponent = ({
+  scrollOld = false,
+  token,
+  styles = {},
+  senderConfig = {},
+  disclaimer = '内容由AI生成，仅供参考，不代表本公司观点。',
+  viewLimit,
+}: {
+  scrollOld?: boolean;
+  token: string;
+  styles?: Record<string, any>;
+  senderConfig?: Record<string, any>;
+  disclaimer?: string;
+  viewLimit?: number;
+}) => {
+  const boxRef = useRef(null);
+  const removeFileRef = useRef<(fileObj: any, idx: number, _type: string) => void>(undefined);
+  const uploadedFilesRef = useRef<any[]>([]);
+  const senderConfigRef = useRef<SenderConfig | undefined>(undefined);
+  const setUploadedFilesRef = useRef<(files: any[]) => void>(undefined);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const childRefs = useRef(new Map());
+  const [pendingFiles, setPendingFiles] = useState<any[]>([]);
+  InitData.forEach((item: any) => {
+    childRefs.current.set(item.id, { current: item.id });
+  });
+  const getChildMethods = (methodName: string, data?: any) => {
+    const arrs = [...childRefs.current.values()];
+    arrs.forEach(childRef => {
+      const instance = (childRef as any)?.current;
+      if (instance && typeof instance[methodName] === 'function') {
+        instance[methodName](uploadedFiles);
+      }
+    });
+  };
+  const [fileManagerData, setFileManagerData] = useState<{ uploadedFiles: any[] }>(() => {
+    return { uploadedFiles: [] };
+  });
+  const [chatItems, setChatItems] = useState<any[]>(InitData);
+  const [assistList, setAssistList] = useState<any[]>([]);
+  const [configLoading, setConfigLoading] = useState(false);
+  const [senderSwitchValues, setSenderSwitchValues] = useState<{ [key: string]: boolean }>({});
+  const [senderConfigValues, setSenderConfigValues] = useState<Record<string, boolean>>({});
+  const theme: AppTheme = deepMergeTheme(defaultTheme, styles?.theme);
+  const mappedSpace = mapSpaceToCssValue(theme.space as unknown as Record<string, string>);
+  const mappedTheme: AppTheme = {
+    ...theme,
+    space: mappedSpace,
+    colors: {
+      ...theme.colors,
+      // 确保所有必需的颜色字段都有值
+      info: theme.colors.info || '#0000FF',
+      background: theme.colors.background || '#ffffff',
+      text: theme.colors.text || '#343a40',
+      border: theme.colors.border || '#dee2e6',
+      disabled: theme.colors.disabled || '#808080',
+      disabledBackground: theme.colors.disabledBackground || '#F5F5F5',
+      disabledText: theme.colors.disabledText || '#808080',
+    },
+  };
+  const normalizedStyles: Styles = useMemo(() => {
+    const baseStyles: Styles = { theme: defaultTheme, mode: 'light' };
+    return deepMergeTheme(baseStyles, styles);
+  }, [styles]);
+  const newStyles: Styles = { ...styles, theme: mappedTheme as any };
+  const [fileStatuses, setFileStatuses] = useState<any[]>([]);
+  const [dynamicSenderConfig, setDynamicSenderConfig] = useState(() => {
+    const merged = deepMerge(DefaultSenderConfig, senderConfig);
+
+    return merged;
+  });
+
+  useEffect(() => {
+    if (senderConfig) {
+      const merged = deepMerge(DefaultSenderConfig, senderConfig);
+
+      setDynamicSenderConfig(merged);
+    }
+  }, [senderConfig]);
+
+  const handleEventsEmit = (type: string, payload?: any) => {
+    console.log('Event emitted:', type, payload);
+    // console.log(type, payload, 'core内部转发');
+    // //inner function
+    switch (type) {
+      case 'sender:action_upload':
+        // 触发文件上传按钮点击，打开文件选择对话框
+        if (fileInputRef.current) {
+          fileInputRef.current.click();
+        }
+        break;
+      case 'fileChanges':
+        setFileManagerData(payload);
+        break;
+      case 'fileManager:change': {
+        if (typeof payload?.setUploadedFiles === 'function') {
+          setUploadedFilesRef.current = payload.setUploadedFiles;
+          removeFileRef.current = payload.removeFile;
+          senderConfigRef.current = payload?.senderConfig;
+          uploadedFilesRef.current = Array.isArray(payload?.uploadedFiles)
+            ? payload.uploadedFiles
+            : [];
+          // 同步待上传文件状态（从 AiChat 内部获取）
+          if (Array.isArray(payload?.uploadedFiles)) {
+            setPendingFiles(payload.uploadedFiles);
+          }
+        }
+        break;
+      }
+      case 'sender:stop':
+        getChildMethods('handleStopMessage');
+        break;
+      case 'assistant:change':
+        setChatItems(prevItems =>
+          prevItems.map(item =>
+            item.id === payload.id ? { ...item, configId: payload.configId } : item
+          )
+        );
+        break;
+      case 'sender:configChange':
+        if (payload && payload.all) {
+          setSenderSwitchValues(payload.all);
+        }
+        break;
+      case 'sender:change':
+        handleMessageChange(payload);
+        break;
+      case 'sender:send': {
+        getChildMethods('handleSendMessage', uploadedFiles);
+        // --- 补丁：发送后自动滚动到底部 ---
+        // setTimeout(() => {
+        //   if (chatContainerRef.current && chatContainerRef.current.scrollTo) {
+        //     chatContainerRef.current.scrollTo({
+        //       top: 0,
+        //       behavior: 'smooth',
+        //     });
+        //   }
+        // }, 120);
+        break;
+      }
+      //   default:
+      //     eventsEmit(type, payload);
+    }
+  };
+  const {
+    handleMessageChange,
+    clearInput,
+    inputValue,
+    handleUploadFiles,
+    uploadedFiles,
+    handleRemoveFile,
+  } = useChatCompareHooks({ senderConfig, handleEventsEmit });
+
+  const handleSenderConfigChange = (data: {
+    name: string;
+    checked: boolean;
+    all: Record<string, boolean>;
+  }) => {
+    // console.log('执行了？');
+    setSenderConfigValues(data.all);
+  };
+
+  const handleAddComparisonChat = () => {
+    const id = uid(32);
+    // add a ref object for the new chat item into childRefs map
+    childRefs.current.set(id, { current: id });
+    // choose a configId that is not already used by existing chat items
+    const existingConfigIds = new Set(chatItems.map((c: any) => c.configId).filter(Boolean));
+    let selectedConfigId = '';
+
+    // try to find an assistant not yet selected
+    const available: any = assistList.find((a: any) => !existingConfigIds.has(a.value));
+    if (available) {
+      selectedConfigId = available.value;
+    } else if (assistList.length) {
+      // fallback to the first one if all are used (or if none selected yet)
+      selectedConfigId = assistList[0].value;
+    }
+
+    setChatItems((pre: any) => {
+      return [...pre, { id, configId: selectedConfigId }];
+    });
+  };
+
+  const handleRemoveComparisonChat = (id: string) => {
+    setChatItems((prev: any[]) => {
+      // keep at least two comparison chats
+      if (prev.length <= 2) return prev;
+
+      // find the item by id
+      const idx = prev.findIndex(item => item.id === id);
+      if (idx === -1) return prev;
+
+      const removed = prev[idx];
+
+      // attempt to call a cleanup method on the child if present
+      const childRef = childRefs.current.get(removed.id);
+      const instance = childRef?.current;
+      if (instance && typeof instance?.unmount === 'function') {
+        try {
+          instance.unmount();
+        } catch (e) {
+          // ignore cleanup errors
+        }
+      }
+
+      // remove ref entry and update state removing the specific item
+      childRefs.current.delete(removed.id);
+      return [...prev.slice(0, idx), ...prev.slice(idx + 1)];
+    });
+  };
+
+  const assistantDTO_to_SelectOption = (data: any) => {
+    return data.map((item: any) => {
+      const config = JSON.parse(item.configJson);
+
+      return {
+        details: {
+          model_name: config.model_name || '',
+          temperature: config.temperature || '',
+          max_tokens: config.max_tokens || '',
+        },
+        label: item.name,
+        value: item.id,
+      };
+    });
+  };
+
+  const getHelperlist = async () => {
+    try {
+      const res: any = await getHelperlistApi({ token });
+
+      if (res.length) {
+        const output = assistantDTO_to_SelectOption(res);
+        setAssistList(output);
+        setChatItems(prevItems =>
+          prevItems.map((item, index) => ({
+            ...item,
+            configId: output?.[index]?.value || '',
+          }))
+        );
+        setConfigLoading(false);
+      }
+    } catch (error) {
+      console.log('error', error);
+    }
+  };
+
+  const finalyFiles = useMemo(() => {
+    return (fileManagerData.uploadedFiles || []) as any[];
+  }, [fileManagerData]);
+  const { FileDisplayTools } = useFileDisplayTools({
+    fileManagerData: {
+      uploadedFiles: finalyFiles,
+    },
+    styles: normalizedStyles,
+    eventsEmit: handleEventsEmit,
+  }); // 处理文件选择
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      console.log('[DEBUG] handleFileSelect 触发', {
+        filesCount: files.length,
+        hasSetUploadedFilesRef: !!setUploadedFilesRef.current,
+        hasSenderConfig: !!senderConfigRef.current,
+        dynamicSenderConfig: dynamicSenderConfig,
+        dynamicSenderConfigKeys: dynamicSenderConfig ? Object.keys(dynamicSenderConfig) : [],
+        senderConfigRef: senderConfigRef.current,
+        senderConfigRefKeys: senderConfigRef.current ? Object.keys(senderConfigRef.current) : [],
+      });
+
+      const fileArray = Array.from(files);
+
+      // 应用上传限制配置验证
+      // 优先使用 senderConfigRef.current，但如果它没有上传限制字段，则使用 dynamicSenderConfig
+      let configSource: any = senderConfigRef.current;
+      if (
+        !configSource ||
+        (configSource.upload_size_limit === undefined &&
+          configSource.upload_number_limit === undefined &&
+          (!configSource.upload_file_type_limit ||
+            configSource.upload_file_type_limit.length === 0))
+      ) {
+        configSource = dynamicSenderConfig;
+      }
+      const existingFiles = uploadedFilesRef.current || [];
+
+      console.log('[DEBUG] 验证配置检查', {
+        configSource,
+        upload_number_limit: configSource?.upload_number_limit,
+        upload_size_limit: configSource?.upload_size_limit,
+        existingFilesCount: existingFiles.length,
+        newFilesCount: fileArray.length,
+      });
+
+      // 检查是否有上传限制配置（只要有一个限制配置存在就执行验证）
+      const hasUploadLimitConfig =
+        configSource &&
+        (configSource.upload_size_limit !== undefined ||
+          (configSource.upload_number_limit !== undefined &&
+            configSource.upload_number_limit > 0) ||
+          (configSource.upload_file_type_limit && configSource.upload_file_type_limit.length > 0));
+
+      console.log('[DEBUG] 配置检查结果', {
+        hasUploadLimitConfig,
+        upload_number_limit: configSource?.upload_number_limit,
+        upload_size_limit: configSource?.upload_size_limit,
+        upload_file_type_limit: configSource?.upload_file_type_limit,
+      });
+
+      if (hasUploadLimitConfig) {
+        // 提取上传限制相关配置
+        const uploadConfig = {
+          upload_size_limit: configSource.upload_size_limit,
+          upload_number_limit: configSource.upload_number_limit,
+          upload_file_type_limit: configSource.upload_file_type_limit,
+          upload_limit_message: configSource.upload_limit_message,
+        };
+
+        console.log('[DEBUG] 执行文件验证', {
+          uploadConfig,
+          existingFilesCount: existingFiles.length,
+          newFilesCount: fileArray.length,
+          totalCount: existingFiles.length + fileArray.length,
+        });
+
+        const validationResult = validateFileUpload(fileArray, existingFiles, uploadConfig);
+
+        console.log('[DEBUG] 验证结果', {
+          valid: validationResult.valid,
+          errors: validationResult.errors,
+          rejectedFilesCount: validationResult.rejectedFiles.length,
+        });
+
+        if (!validationResult.valid) {
+          // 显示错误提示
+          showValidationErrors(validationResult);
+          // 只保留通过验证的文件
+          const validFiles = fileArray.filter(
+            file => !validationResult.rejectedFiles.includes(file)
+          );
+
+          if (validFiles.length === 0) {
+            // 所有文件都被拒绝，清空 input 并返回
+            if (fileInputRef.current) {
+              fileInputRef.current.value = '';
+            }
+            return;
+          }
+
+          // 使用通过验证的文件
+          fileArray.splice(0, fileArray.length, ...validFiles);
+        }
+      }
+
+      // 通过 setUploadedFilesRef 直接设置文件到 aichat 内部
+      // 这个 ref 在 fileManager:change 事件中设置
+      if (setUploadedFilesRef.current) {
+        const fileList = fileArray.map(file => ({
+          file,
+          type: file.type.startsWith('image/') ? ('image' as const) : ('document' as const),
+          status: 'pending' as const, // 添加 status 字段，确保文件可以正确显示
+          name: file.name, // 添加 name 字段，方便 FilesDisplay 使用
+        }));
+        console.log('[DEBUG] 通过 setUploadedFilesRef 设置文件', fileList);
+        setUploadedFilesRef.current(fileList);
+      } else {
+        console.warn('[DEBUG] setUploadedFilesRef 未设置，延迟重试');
+        // 如果 ref 还没有设置，延迟重试
+        setTimeout(() => {
+          if (setUploadedFilesRef.current) {
+            const fileList = fileArray.map(file => ({
+              file,
+              type: file.type.startsWith('image/') ? ('image' as const) : ('document' as const),
+              status: 'pending' as const, // 添加 status 字段，确保文件可以正确显示
+              name: file.name, // 添加 name 字段，方便 FilesDisplay 使用
+            }));
+            console.log('[DEBUG] 延迟后通过 setUploadedFilesRef 设置文件', fileList);
+            setUploadedFilesRef.current(fileList);
+          } else {
+            console.error('[DEBUG] 延迟后 setUploadedFilesRef 仍未设置');
+          }
+        }, 100);
+      }
+    }
+    // 清空 input，以便可以重复选择同一文件
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const senderStatus = useMemo(() => {
+    const statuses = chatItems
+      .map((item: any) => item?.appStatus?.sender)
+      .filter(Boolean) as string[];
+    console.log('chatItems', chatItems);
+
+    if (statuses.includes('error')) return 'error';
+    if (statuses.includes('uploading')) return 'uploading';
+    if (statuses.includes('processing')) return 'processing';
+    return 'ready';
+  }, [chatItems]);
+
+  useEffect(() => {
+    console.log('senderStatus', senderStatus);
+  }, [senderStatus]);
+
+  useEffect(() => {
+    setConfigLoading(true);
+    getHelperlist();
+  }, []);
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: '20px',
+        height: '100%',
+        boxSizing: 'border-box',
+        flexDirection: 'column',
+        position: 'relative',
+      }}
+      className="selfScrollBar"
+      ref={boxRef}
+    >
+      <div
+        style={{ display: 'flex', gap: '20px', height: 'calc(100% - 195px)', overflowX: 'auto' }}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          accept="image/*,.pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.txt,.md,.json,.csv,.zip,.rar,.7z"
+          style={{ display: 'none' }}
+          onChange={handleFileSelect}
+        />
+
+        {chatItems.map((item: any, index: number) => {
+          const childRef = childRefs.current.get(item.id);
+
+          return (
+            <ChatInstance
+              index={index}
+              key={item.id}
+              ref={childRef}
+              item={item}
+              scrollOld={scrollOld}
+              token={token}
+              styles={styles}
+              status={senderStatus}
+              inputValue={inputValue}
+              uploadedFiles={uploadedFiles}
+              senderSwitchValues={senderSwitchValues}
+              clearInput={clearInput}
+              configLoading={configLoading}
+              showRemoveIcon={chatItems?.length > 2}
+              assistantList={assistList.filter((v: any) => {
+                return (
+                  v.value === item.configId || chatItems.every((ci: any) => ci.configId !== v.value)
+                );
+              })}
+              emitEvent={handleEventsEmit}
+              onRemove={handleRemoveComparisonChat}
+              senderConfig={dynamicSenderConfig}
+              normalizedStyles={normalizedStyles}
+              setChatItems={setChatItems}
+            />
+          );
+        })}
+      </div>
+      <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'end' }}>
+        <Sender
+          value={inputValue}
+          status={senderStatus}
+          styles={newStyles}
+          recommandQuestions={[]}
+          eventsEmit={(eventName, data) => {
+            handleEventsEmit(eventName, data);
+          }}
+          uploadedFiles={uploadedFiles}
+          fileUploadStatus={fileStatuses}
+          onUpload={handleUploadFiles}
+          onRemoveFile={handleRemoveFile}
+          senderConfig={senderConfig}
+          onSenderConfigChange={handleSenderConfigChange}
+          disclaimer={disclaimer}
+        />
+        <div
+          className="flex absolute text-[12px] cursor-pointer z-20"
+          style={{ left: '24px', bottom: '150px' }}
+        >
+          <Badge count={chatItems.length} size="small" color="#1677ff">
+            <Button
+              icon={<CirclePlus className="w-3" />}
+              onClick={handleAddComparisonChat}
+              type="link"
+              disabled={chatItems.length >= (viewLimit || 10)}
+              size="small"
+            >
+              添加助手
+            </Button>
+          </Badge>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default ChatCompareComponent;

package/src/modules/chatCompare/utils/AiChat.types.tsx

@@ -0,0 +1,110 @@
+
+
+
+export interface RetrieveTestProps {
+  messages?: Message[];
+  onSearch?: (query: string, config: any) => void;
+  setKbInfo?: any;
+}
+
+export interface FilePreview {
+  file: File;
+  preview?: string;
+  type: "image" | "document";
+}
+
+export interface FormItemProps {
+  type: 'input' | 'select' | 'number' | 'slider' | 'switch' | 'date' | 'radio' | 'textarea' | 'divider';
+  label: string;
+  description?: string;
+  control?: string[];
+  controlledItems?: string[];
+  name: string;
+  defaultValue?: any;
+  options?: { label: string; value: string }[];
+  range?: { min: number; max: number };
+  step?: number;
+  unit?: string;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  required?: boolean;
+  error?: string;
+}
+
+export interface BaseChatMessage {
+  id?:string;
+  type: "user" | "ai";
+  time: string;
+  content: any;
+  [key: string]: any;
+}
+
+export interface ChatMessageProps {
+  type: "user" | "ai";
+  time: string;
+  content: any;
+  id?:string;
+  hasLLMConfig?: boolean;
+  retrievedChunks?: Array<{ [key: string]: any }>;
+  prompt?: string;
+  configInfo?: {
+    textChunks: number;
+    topP: number;
+    topN: number;
+    denseWeight: number;
+    enableKG: boolean;
+    enableRerank: boolean;
+    model: string;
+    temperature?: number;
+    diversity?: number;
+    maxTokens?: number;
+    recallModel: string;
+    llmModel: string;
+    respTime?: number;
+    tokens?: number;
+    search_type?: string | string[];
+    search_policy?: string;
+  };
+  streaming?: boolean;
+  isLatest?: boolean;
+  finished?: boolean;
+}
+export interface Message {
+  type: "user" | "ai";
+  time: string;
+  content: string;
+  hasLLMConfig?: boolean;
+  retrievedChunks?: Array<{
+    content: string;
+    similarity: number;
+    rerank: number;
+    chunk_id: number;
+    source: string;
+  }>;
+  prompt?: string;
+  configInfo?: any;
+  queryId?: string;
+  fullContent?: string;
+  finished?: boolean;
+  typedLength?: number;
+}
+export interface ConversationData{
+  id:string;
+  messages:Message[] ;
+  [key: string]: any;
+}
+
+
+export interface ListItemType {
+  label: string;
+  sessionId: string;
+  gmtModified: number;
+  [key: string]: any;
+}
+export interface ListType {
+  activedItem?: string;
+  data: ListItemType[];
+  sortRules?: { label: string; dayPeriod: number }[];
+}
+