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

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

@@ -0,0 +1,127 @@
+import React, { useState, useMemo } from 'react';
+import { Flex, Input, Select } from 'antd';
+import './style.less';
+import Search from '../../../assets/img/search.svg';
+import IconAi from '../../../assets/img/iconAi.svg';
+import Selected from '../../../assets/img/selected.svg';
+interface AssistantSelectorProps {
+  assistList: any[];
+  value: string;
+  onChange?: (value: string) => void;
+  loading: boolean;
+  disabled?: boolean;
+  className?: string;
+  defaultValue?: string;
+}
+
+const AssistantSelector: React.FC<AssistantSelectorProps> = ({
+  assistList,
+  value,
+  onChange,
+  loading,
+  defaultValue,
+  disabled = false,
+  className = '',
+}) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [filteredAssistantList, setFilteredAssistantList] = useState<any[]>();
+
+  const handleSearchAssistant = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (assistList && assistList.length > 0) {
+      const filteredList = assistList.filter(item =>
+        item.label.toLowerCase().includes(e.target.value.toLowerCase())
+      );
+      setFilteredAssistantList(filteredList);
+    }
+  };
+
+  const handleSelect = (selectedValue: string) => {
+    onChange && onChange(selectedValue || '');
+    setDropdownOpen(false);
+  };
+
+  const getAssistDetailInfo = useMemo(() => {
+    return (value: string) => {
+      const assist = assistList.find(assist => assist.value === value);
+      return {
+        modelName: assist?.details.model_name || 'N/A',
+        temperature: assist?.details.temperature || 'N/A',
+        maxTokens: assist?.details.max_tokens || 'N/A',
+      };
+    };
+  }, [assistList]);
+
+  return (
+    <div className={`w-[233px] h-[30px] relative ${className}`}>
+      <img
+        src={IconAi}
+        width={20}
+        height={20}
+        style={{ position: 'absolute', margin: '4px  12px 0 12px', zIndex: 10 }}
+      />
+      <Select
+        open={dropdownOpen}
+        onDropdownVisibleChange={setDropdownOpen}
+        popupMatchSelectWidth={false}
+        style={{ height: '30px', width: '233px' }}
+        dropdownStyle={{
+          width: '323px',
+          maxHeight: '425px',
+          overflowY: 'auto',
+          backgroundColor: '#fff',
+        }}
+        disabled={disabled}
+        className="assistantSelector"
+        dropdownRender={() => (
+          <div style={{ padding: '8px', marginTop: '4px' }}>
+            <Input
+              placeholder="请输入"
+              onChange={handleSearchAssistant}
+              style={{ marginBottom: '8px' }}
+              suffix={<img src={Search} />}
+            />
+            <div
+              style={{ maxHeight: 'calc(280px - 40px)', overflowY: 'auto', overflowX: 'hidden' }}
+            >
+              {(filteredAssistantList || assistList).map((item, index) => (
+                <Flex
+                  align="center"
+                  className="w-[280px] h-[68px] rounded-[8px] mt-[8px] cursor-pointer"
+                  style={{ backgroundColor: value === item.value ? '#F1F7FF' : '#fff' }}
+                  onClick={() => handleSelect(item.value)}
+                  key={index}
+                >
+                  <img src={IconAi} width={24} height={24} className="mr-[8px] ml-[8px]" />
+                  <div className="w-[344px]">
+                    <div className="w-full text-[#2a2a2a] text-[14px] text-ellipsis break-words line-clamp-1">
+                      {item.label}
+                    </div>
+                    <div className="w-full text-[#888888] text-[12px] text-ellipsis break-words line-clamp-1 mt-[2px]">
+                      大模型：{getAssistDetailInfo(item.value).modelName}:&nbsp;&nbsp; 温度：
+                      {getAssistDetailInfo(item.value).temperature}&nbsp;&nbsp; 最大标记：
+                      {getAssistDetailInfo(item.value).maxTokens}
+                    </div>
+                  </div>
+                  <div className="w-[32px] h-full flex justify-center items-center">
+                    {value === item.value && <img src={Selected} />}
+                  </div>
+                </Flex>
+              ))}
+            </div>
+          </div>
+        )}
+        value={value}
+        onChange={handleSelect}
+        options={(filteredAssistantList || assistList).map(item => ({
+          value: item.value,
+          label: item.label,
+        }))}
+        placeholder="没有助手可选，请先创建助手配置"
+        defaultValue={defaultValue}
+        loading={loading}
+      />
+    </div>
+  );
+};
+
+export default AssistantSelector;

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

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import './style.less';
+
+const ChatInputer = () => {
+  const [rows, setRows] = useState(1);
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (!event.shiftKey && event.key === 'Enter') {
+      event.preventDefault();
+    } else if (event.shiftKey && event.key === 'Enter') {
+      if (rows >= 5) return;
+      setRows(rows + 1);
+    }
+  };
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <div
+        style={{
+          minHeight: '54px',
+          width: '869px',
+          border: '1px solid #D9D9D9',
+          borderRadius: '4px',
+          backgroundColor: '#FFFFFF',
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <textarea
+          className="hide-scrollbar "
+          rows={rows}
+          onKeyDown={handleKeyDown}
+          onChange={e => {
+            const v = e.target.value;
+            if (!v) {
+              setRows(1);
+              return;
+            } else {
+              const lines = v.split('\n').length;
+              if (lines < rows) {
+                setRows(lines);
+              }
+            }
+            if (e.target.value) return;
+            setRows(1);
+          }}
+          style={{
+            width: '800px',
+            backgroundColor: '#FFFFFF',
+            resize: 'none',
+            outline: 'none',
+            overflowY: 'auto',
+            border: 'none',
+            marginLeft: '12px',
+          }}
+          placeholder="请输入您的问题，通过shift+回车换行，回车发送"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ChatInputer;

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

@@ -0,0 +1,426 @@
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { ChatItem } from './ChatItem';
+import close from '../../../assets/img/close.png';
+import AssistantSelector from './AssistantSelector';
+import './style.less';
+import UseScrollHooks from './UseScrollHooks';
+import UseChatInstanceHooks from './UseChatInstanceHooks';
+import { getUrlPrefix } from '../../../utils';
+import { uid } from 'uid';
+import AichatCompareUseController from './AichatCompareUseController';
+import { useFileManager } from './useFileManager';
+import axios from 'axios';
+import { useFileDisplayTools } from '../../../utils/gientechCommon/hooks/useFileDisplayTools';
+import { AppStatusManager } from '@mxmweb/aichat';
+
+const ChatInstance = forwardRef((props: any, ref) => {
+  const {
+    item,
+    inputValue,
+    status,
+    senderSwitchValues,
+    clearInput,
+    configLoading,
+    assistantList,
+    emitEvent,
+    token,
+    CSRFToken = '',
+    showRemoveIcon,
+    onRemove,
+    index,
+    senderConfig,
+    normalizedStyles,
+    setChatItems,
+  } = props;
+  const [appStatus, setAppStatus] = useState<AppStatusManager>({
+    display: 'ready', // 主聊天区域状态: ready, loading, processing, error, uploading
+    sender: 'ready', // 发送器状态: ready, processing, error, uploading
+    app: 'initializing', // 应用整体状态: initializing, ready, error
+  });
+  const get_dialog_Id = (id: string, assist_id: string) => {
+    return id + '_' + assist_id;
+  };
+
+  let uploadController: AbortController | null = null;
+  let stopPoll: (() => void) | null = null;
+  const tempKnowledgeBaseCheck = useRef(false);
+  const [recommandQuestions, setRecommandQuestions] = useState<any[]>([]);
+  const sessionId = useMemo(() => get_dialog_Id(uid(32), item.configId), [item.configId]);
+  const [currentChatData, setCurrentChatData] = useState<any>({ messages: [] }); //mockData
+  const { chatContainerRef } = UseScrollHooks({ scrollOld: props.scrollOld });
+
+  const {
+    fileStatuses,
+    setFileStatuses,
+    pollFileStatus: pollFileStatusHook,
+    handleRemoveFromTemp,
+    resetStopFlag,
+    setStopFlag,
+    stoppedRef,
+    getTempFileList,
+    setFileManagerData,
+    fileManagerData,
+  } = useFileManager({
+    url: getUrlPrefix(),
+    token,
+    CSRFToken,
+    activeSessionId: sessionId,
+    chatData: currentChatData,
+  });
+  const {
+    api_startChat_re,
+    addEmptyMessage,
+    setLastEmptyMessage,
+    stopStream,
+    cancelStreamBySessionId,
+  } = AichatCompareUseController({
+    baseUrl: getUrlPrefix(),
+    CSRFToken,
+    token,
+    setCurrentChatData,
+    activeSessionId: sessionId,
+    setAppStatus,
+  });
+  const { handleSendMessage } = UseChatInstanceHooks({
+    token,
+    api_startChat_re,
+    addEmptyMessage,
+    setLastEmptyMessage,
+    stopStream,
+    cancelStreamBySessionId,
+    setCurrentChatData,
+    setAppStatus,
+    uploadController,
+    resetStopFlag,
+    setFileStatuses,
+    stoppedRef,
+    stopPoll,
+    pollFileStatusHook,
+    setFileManagerData,
+    senderSwitchValues,
+    tempKnowledgeBaseCheck,
+    setRecommandQuestions,
+    configId: item.configId,
+    currentChatData,
+    sessionId,
+  });
+
+  useEffect(() => {
+    setChatItems((pre: any) => {
+      const curItem = pre.find((v: any) => v.id === item.id);
+      curItem.appStatus = appStatus;
+      return [...pre];
+    });
+  }, [appStatus, item]);
+
+  useEffect(() => {
+    emitEvent('fileChanges', fileManagerData);
+  }, [fileManagerData]);
+
+  useImperativeHandle(ref, () => ({
+    handleStopMessage: () => {
+      setStopFlag(); // 使用 hook 提供的停止函数
+      if (uploadController) {
+        uploadController.abort();
+        uploadController = null;
+      }
+      if (stopPoll) {
+        stopPoll();
+        stopPoll = null;
+      }
+      setAppStatus((pre: any) => ({ ...pre, display: 'ready', sender: 'ready' }));
+      setFileStatuses([]);
+      stopStream?.();
+    },
+    handleSendMessage: (uploadedFiles: any[]) => {
+      uploadedFiles.length && (tempKnowledgeBaseCheck.current = true);
+      handleSendMessage({
+        content: inputValue,
+        files: uploadedFiles,
+        status,
+        currentData: currentChatData,
+        senderConfig,
+        clearFn: clearInput,
+        assist_id: item.configId,
+        index,
+      });
+    },
+  }));
+
+  const fetchRecommendQuestions = async (queryId: string) => {
+    if (!queryId) return;
+    try {
+      // 需要携带当前 configId
+      const configId = currentChatData?.configId || item.configId || '';
+      const res = await axios.get(
+        `${getUrlPrefix()}/qa/ai/recommendQuestion?queryId=${queryId}&configId=${configId || ''}`.replace(
+          /\?&/,
+          '?'
+        ),
+        {
+          headers: { Authorization: token },
+        }
+      );
+      setRecommandQuestions(res.data?.data || []);
+    } catch (e) {
+      setRecommandQuestions([]);
+    }
+  };
+
+  const setFeed = (queryId: any, restult: any) => {
+    setCurrentChatData((chatList: any) => {
+      if (!chatList) return chatList;
+      const newList = {
+        ...chatList,
+        messages: chatList.messages.map((item: any) => {
+          if (item.queryId === queryId) {
+            return {
+              ...item,
+              feedbackResult: restult,
+            };
+          }
+          return item;
+        }),
+      };
+      return newList;
+    });
+  };
+
+  function handleReSenderSend(data: any) {
+    const { content, audioUrl, filePaths, queryId } = data;
+    if (!sessionId || !queryId) return;
+
+    // 从当前会话中按 queryId 定位本次 AI 回复
+    const msgs = currentChatData?.messages || [];
+    const aiIdx = msgs.findIndex(
+      (m: any) => m?.queryId === queryId && (m?.istype === 'ai' || m?.isUser === false)
+    );
+
+    // 回溯上一条用户消息
+    let userMsg: any | undefined;
+    if (aiIdx > 0) {
+      for (let i = aiIdx - 1; i >= 0; i -= 1) {
+        const m = msgs[i];
+        if (m?.istype === 'user' || m?.isUser === true) {
+          userMsg = m;
+          break;
+        }
+      }
+    }
+
+    const question = userMsg?.content ?? content;
+    if (!question) return;
+
+    const sourceFilePaths = userMsg?.filePaths ?? filePaths;
+    const _fileUids = (
+      typeof sourceFilePaths === 'string' && sourceFilePaths
+        ? JSON.parse(sourceFilePaths)
+        : sourceFilePaths || []
+    ).map((item: any) => item.uid);
+    const now = Date.now();
+    setLastEmptyMessage({ now });
+    setAppStatus((pre: any) => {
+      return {
+        ...pre,
+        display: 'processing',
+        sender: 'processing',
+      };
+    });
+
+    // 清除上一条AI消息的引用数据，避免重复显示（保留正文内容）
+    if (aiIdx >= 0 && msgs[aiIdx]) {
+      setCurrentChatData((chatList: any) => {
+        if (!chatList) return chatList;
+        const current = chatList;
+        const messages = current.messages || [];
+        if (aiIdx >= messages.length) return chatList;
+
+        const newMessages = messages.slice();
+        // 清除引用数据（知识库 / 网络 / 图谱 / 数据库 / 思维链），但保留上一条 AI 的正文内容，
+        // 保持 status 为 Done，这样 reset_chat 中的 isRestart 检测能正确工作
+        newMessages[aiIdx] = {
+          ...newMessages[aiIdx],
+          // 不再清空 content，避免上一条回答在新问题发送时被“抹掉”
+          content: newMessages[aiIdx].content,
+          reference: '[]', // 清空知识库引用
+          webReference: '[]', // 清空网络引用
+          graphReference: null, // 清空图谱引用
+          databaseReference: null, // 清空数据库引用
+          status: 2, // 保持为 Done 状态，这样当流式数据第一次返回时，isRestart 检测能正确工作
+          chain: undefined, // 清空思维链数据
+        };
+
+        const newChat0 = { ...current, messages: newMessages };
+        return newChat0;
+      });
+    }
+
+    data.clearFn && data.clearFn();
+
+    api_startChat_re(
+      {
+        configId: currentChatData.configId,
+        content: question,
+        fileUids: _fileUids,
+        lastDate: now,
+        name: currentChatData.label || '',
+        queryId: queryId,
+        sessionId: String(sessionId || ''),
+        type: (userMsg?.audioUrl ?? audioUrl) ? 'audioUrl' : 'text',
+        audioUrl: (userMsg?.audioUrl ?? audioUrl) || '',
+        enableThinking: !!senderSwitchValues.reasoning,
+        enableWebsearch: !!senderSwitchValues.netSearch,
+        qaChannel: senderSwitchValues.qaChannel,
+        tempKnowledgeBaseCheck: tempKnowledgeBaseCheck.current,
+      } as any,
+      gmtModified => {
+        // 只在AI回复完成后请求推荐问题
+        fetchRecommendQuestions(queryId);
+      }
+    );
+  }
+  const ChatItemCom = useMemo(() => {
+    return (
+      <ChatItem
+        {...props}
+        currentChatData={currentChatData}
+        setFeed={setFeed}
+        handleReSenderSend={handleReSenderSend}
+        setAppStatus={setAppStatus}
+        appStatus={appStatus}
+        recommandQuestions={recommandQuestions}
+      />
+    );
+  }, [currentChatData, setAppStatus, appStatus, recommandQuestions]);
+
+  const uploadedFiles = useMemo(() => {
+    return (fileManagerData.uploadedFiles || []) as any[];
+  }, [fileManagerData]);
+
+  const { FileDisplayTools } = useFileDisplayTools({
+    fileManagerData: {
+      uploadedFiles,
+    },
+    styles: normalizedStyles,
+    eventsEmit: (eventName: string, data: any) => {
+      console.log('upload Event:', eventName, data);
+
+      switch (eventName) {
+        case 'uploaded_file:removeFromTemp':
+          const uid = data?.file?.uid;
+          if (!uid) {
+            console.warn('[DEBUG] 缺少uid，无法删除临时文件', data);
+            break;
+          }
+          // 获取当前对话最后一条用户消息的 queryId
+          const lastUserMsg = [...(currentChatData?.messages || [])]
+            .reverse()
+            .find((msg: any) => msg.istype === 'user');
+          const queryId = lastUserMsg?.queryId;
+
+          // 使用统一的文件删除处理函数
+          handleRemoveFromTemp(uid, queryId);
+          break;
+        case 'TempKnowledgeBase':
+          tempKnowledgeBaseCheck.current = data;
+          break;
+      }
+    },
+  });
+  useEffect(() => {
+    console.log('currentChatData', currentChatData);
+  }, [currentChatData]);
+
+  useEffect(() => {
+    if (!fileStatuses.length) return;
+    setCurrentChatData((chatList: any) => {
+      if (!chatList) return chatList;
+      const { messages } = chatList;
+      for (let i = messages.length - 1; i >= 0; i--) {
+        if (messages[i].istype === 'user') {
+          const oldFiles = messages[i].currentFiles || [];
+          messages[i].currentFiles = fileStatuses.map((f: any) => {
+            const old = oldFiles.find((of: any) => of.uid === f.uid);
+            return {
+              name: f.file?.name || f.name,
+              size: f.file?.size || f.size,
+              type: f.file?.type || f.type,
+              status: f.status,
+              uid: f.uid,
+              url: f.url || old?.url || '', // 优先用已有 url
+            };
+          });
+          break;
+        }
+      }
+      return chatList;
+    });
+  }, [fileStatuses]);
+
+  return (
+    <div
+      style={{
+        height: 'calc(100% - 8px)',
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 1,
+        minWidth: 568,
+        padding: 16,
+        borderRadius: 8,
+        backgroundColor: '#FFFFFF',
+      }}
+    >
+      <div
+        style={{
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'space-between',
+          paddingBottom: 12,
+        }}
+      >
+        <div className="flex">
+          <AssistantSelector
+            assistList={assistantList}
+            value={item.configId}
+            loading={configLoading}
+            onChange={v => emitEvent && emitEvent('assistant:change', { ...item, configId: v })}
+          />
+          <div className="ml-[12px]">{FileDisplayTools}</div>
+        </div>
+        <div style={{ display: showRemoveIcon ? '' : 'none' }}>
+          {
+            <img
+              src={close}
+              className="cursor-pointer"
+              width={14}
+              height={14}
+              onClick={() => onRemove(item.id)}
+            />
+          }
+        </div>
+      </div>
+      <div
+        ref={chatContainerRef}
+        className="relative"
+        style={{
+          direction: props.scrollOld ? 'ltr' : 'rtl',
+          transform: props.scrollOld ? '' : 'rotate(180deg)',
+          flex: 1,
+          overflowY: 'scroll',
+          overflowX: 'hidden',
+          paddingBottom: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          borderRadius: 8,
+        }}
+      >
+        <div style={{ flexGrow: 1, flexShrink: 1, flex: 1 }}></div>
+
+        <div style={{ maxWidth: 1000, borderRadius: 8, width: '100%' }}>{ChatItemCom}</div>
+      </div>
+    </div>
+  );
+});
+
+export default ChatInstance;