@mxmweb/aichat 1.1.7 → 1.1.8

package/src/components/RetrieveTest/index.tsx

@@ -0,0 +1,679 @@
+import React, { useState, useEffect, useRef } from "react";
+import { Form } from "antd";
+import { Paperclip } from "lucide-react";
+import dayjs from "dayjs";
+import { ConfigPanel } from "./components/ConfigPanel";
+import { ChatMessage, Welcome } from "./components/ChatMessage";
+import { ChatInput } from "./components/ChatInput";
+import { markdownExample } from "./components/converters/mockData";
+import { deserializeMarkdown } from "./components/converters/deserializers";
+import { serializeToMarkdown } from "./components/converters/slateConverters";
+import { CustomElement } from "./components/RichTextEditor";
+import { Api } from "@/apis/api/Api";
+import { HttpClient } from "@/apis/api/http-client";
+import { getTokenLocal } from "@/apis/token";
+import { uid } from "uid";
+import { SystemApi } from "@/apis/system/SystemApi";
+import { HttpClient as SystemHttpClient } from "@/apis/system/http-client";
+import { token } from "../../../apis/config";
+import useSystemApi from "@/apis/system";
+import FileViewer, { registerPDFWorker } from "@mxmweb/file-viewer";
+// 测试用的检索块数据
+const mockRetrievedChunks = [
+  {
+    content:
+      "根据知识库内容，Apple Watch具有以下超级功能：\n1. 健康监测：包括心率监测、血氧监测、睡眠追踪等\n2. 运动追踪：支持多种运动模式，记录运动数据\n3. 智能通知：接收手机消息、来电提醒等\n4. 生活助手：天气提醒、日程管理、闹钟等\n5. 支付功能：支持Apple Pay快捷支付",
+    similarity: 0.8918,
+    rerank: 1,
+    chunk_id: 0.4772,
+    source: "apple_watch_features.md"
+  },
+  {
+    content:
+      "Apple Watch的创新功能包括：\n- 紧急求助SOS：遇到危险时可一键呼救\n- 跌倒检测：检测到用户跌倒会自动报警\n- ECG心电图：可记录心电图数据\n- 手势控制：通过手势操作设备\n- Siri语音助手：支持语音命令",
+    similarity: 0.7565,
+    rerank: 2,
+    chunk_id: 0.4047,
+    source: "watch_innovation.md"
+  }
+];
+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;
+}
+
+interface RetrieveTestProps {
+  messages?: Message[];
+  onSearch?: (query: string, config: any) => void;
+  setKbInfo?: any;
+}
+
+interface FilePreview {
+  file: File;
+  preview?: string;
+  type: "image" | "document";
+}
+
+export default function RetrieveTest({
+  messages: initialMessages,
+  onSearch,
+  setKbInfo
+}: RetrieveTestProps) {
+  const [form] = Form.useForm();
+  const [enableLLM, setEnableLLM] = useState(false);
+  const [settingPanelVisible, setSettingPanelVisible] = useState(true);
+  const [inputValue, setInputValue] = useState("");
+  const [messages, setMessages] = useState<Message[]>(
+    (initialMessages || [])
+      .filter((msg) => typeof msg.content === "string")
+      .map((msg) => ({ ...msg, content: msg.content as string }))
+  );
+
+  const [sliderValues, setSliderValues] = useState({
+    textChunks: 10,
+    topP: 0.1,
+    topN: 10,
+    denseWeight: 0.5,
+    temperature: 0.3,
+    diversity: 0.8,
+    maxTokens: 4096
+  });
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [uploadedFiles, setUploadedFiles] = useState<FilePreview[]>([]);
+
+  // 新增：AI检索接口
+  const httpClient = new HttpClient({ baseURL: "/proxy/qa" });
+  httpClient.instance.interceptors.request.use((config: any) => {
+    config.headers.Authorization = getTokenLocal();
+    return config;
+  });
+
+  // 进入组件时生成sessionId
+  const sessionIdRef = useRef<string>(uid(32));
+
+  const [aiLoading, setAiLoading] = useState(false);
+
+  // 获取大模型列表
+  const [modelOptions, setModelOptions] = useState<
+    { label: string; value: string }[]
+  >([]);
+  // 获取检索召回模型列表
+  const [recallModelOptions, setRecallModelOptions] = useState<
+    { label: string; value: string }[]
+  >([]);
+
+  // 保存当前prompt和configInfo，供流式消息使用
+  const currentPromptRef = useRef("");
+  const currentConfigInfoRef = useRef<any>({});
+  useEffect(() => {
+    registerPDFWorker("/mxmworker/pdf.worker1.min.mjs");
+  }, []);
+  // 检索召回模型
+  useEffect(() => {
+    const fetchRecallModels = async () => {
+      const systemApi = useSystemApi({ baseURL: "/proxy" });
+      try {
+        const res = await systemApi.getRerankModelInfos();
+        const list = res?.data || [];
+        const options = list.map((item: any) => ({
+          label: item.modelName || item.name,
+          value: item.modelName || item.name
+        }));
+        setRecallModelOptions(options);
+        if (options.length > 0) {
+          form.setFieldsValue({ recallModel: options[0].value });
+        }
+      } catch (e) {
+        setRecallModelOptions([]);
+      }
+    };
+    fetchRecallModels();
+  }, []);
+
+  // 大模型问答模型
+  useEffect(() => {
+    const fetchModels = async () => {
+      const systemApi = useSystemApi({ baseURL: "/proxy" });
+      try {
+        const res = await systemApi.getAllModelList({
+          pageNum: 1,
+          pageSize: 9999,
+          status: 1
+        });
+        const list = res?.data?.records || [];
+        const options = list.map((item: any) => ({
+          label: item.modelName,
+          value: item.modelName
+        }));
+        setModelOptions(options);
+        if (options.length > 0) {
+          form.setFieldsValue({ llmModel: options[0].value });
+        }
+      } catch (e) {
+        setModelOptions([]);
+      }
+    };
+    fetchModels();
+  }, []);
+
+  // 当接收到新的messages时更新
+  useEffect(() => {
+    if (initialMessages) {
+      setMessages(
+        initialMessages.map((msg) => ({
+          ...msg,
+          content: typeof msg.content === "string" ? msg.content : ""
+        }))
+      );
+    }
+  }, [initialMessages]);
+
+  // 初始化表单数据
+  useEffect(() => {
+    form.setFieldsValue({
+      ...sliderValues,
+      enableKG: false,
+      enableRerank: true,
+      recallModel: recallModelOptions[0]?.value,
+      llmModel: modelOptions[0]?.value
+    });
+
+    // 测试 Markdown 转换
+    // console.log('=== 测试 Markdown 转换 ===');
+    // console.log('原始 Markdown:');
+    // console.log(markdownExample);
+
+    // console.log('\n转换为 Slate:');
+    // const slateFromMarkdown = deserializeMarkdown(markdownExample);
+    // console.log(JSON.stringify(slateFromMarkdown, null, 2));
+
+    // console.log('\n转换回 Markdown:');
+    // console.log(serializeToMarkdown(slateFromMarkdown));
+  }, []);
+
+  const handleSliderChange = (
+    field: keyof typeof sliderValues,
+    value: number
+  ) => {
+    setSliderValues((prev) => ({ ...prev, [field]: value }));
+    form.setFieldsValue({ [field]: value });
+  };
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  const handleSend = async () => {
+    setAutoScroll(true);
+    if (!inputValue.trim()) return;
+
+    const timeStr = dayjs().format("YYYY/MM/DD HH:mm:ss");
+
+    // 添加用户消息
+    const newMessage: Message = {
+      type: "user",
+      time: timeStr,
+      content: String(inputValue)
+    };
+    setMessages((prev) => [...prev, newMessage]);
+    setAiLoading(true);
+    setInputValue("");
+
+    // 组装当前prompt和configInfo，保存到ref
+    const currentPrompt = form.getFieldValue("prompt") || "";
+    const currentConfigInfo = {
+      textChunks: sliderValues.textChunks,
+      topP: sliderValues.topP,
+      topN: sliderValues.topN,
+      denseWeight: sliderValues.denseWeight,
+      enableKG: form.getFieldValue("enableKG"),
+      enableRerank: form.getFieldValue("enableRerank"),
+      recallModel: form.getFieldValue("recallModel"),
+      llmModel: form.getFieldValue("llmModel"),
+      temperature: sliderValues.temperature,
+      diversity: sliderValues.diversity,
+      maxTokens: sliderValues.maxTokens,
+      search_policy: form.getFieldValue("search_policy"),
+      search_type: form.getFieldValue("search_type")
+    };
+    currentPromptRef.current = currentPrompt;
+    currentConfigInfoRef.current = currentConfigInfo;
+
+    // 组装接口参数
+    const params = {
+      sessionId: sessionIdRef.current,
+      queryId: `query-${uid(32)}`,
+      sysType: "RETRIEVE_RECALL_TEST",
+      lastDate: new Date().toISOString(),
+      audioUrl: "",
+      type: "text",
+      content: inputValue,
+      configId: 0,
+      fileUids: [],
+      config: JSON.stringify({
+        top_k: sliderValues.textChunks,
+        score_threshold: sliderValues.topP,
+        enabled_rerank: true,
+        knowledge_base_name: setKbInfo?.primitiveName,
+        enabled_graph: form.getFieldValue("enableKG"),
+        rerank_model_name: form.getFieldValue("recallModel"),
+        top_n: sliderValues.topN,
+        dense_weight: sliderValues.denseWeight,
+        enabled_llm: enableLLM,
+        model_name: form.getFieldValue("llmModel"),
+        temperature: sliderValues.temperature,
+        top_p: sliderValues.topP,
+        max_tokens: sliderValues.maxTokens,
+        system_prompt: form.getFieldValue("prompt") || "",
+        search_policy: form.getFieldValue("search_policy")
+      })
+    };
+
+    // console.log('打印看看',params)
+    // fetch + ReadableStream 方式请求 SSE
+    try {
+      const response = await fetch("/proxy/qa/ai/retrieveTecallTest", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: getTokenLocal()
+        },
+        body: JSON.stringify(params)
+      });
+      if (!response.body) throw new Error("无响应流");
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let done = false;
+      while (!done) {
+        const { value, done: readDone } = await reader.read();
+        done = readDone;
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        let lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+        for (let line of lines) {
+          if (line.startsWith("data:")) {
+            try {
+              const json = JSON.parse(line.replace("data:", "").trim());
+              handleStreamMessage(json);
+            } catch (e) {
+              console.warn("SSE解析失败", line, e);
+            }
+          }
+        }
+      }
+    } catch (err) {
+      setMessages((prev) => [
+        ...prev,
+        {
+          type: "ai",
+          time: dayjs().format("YYYY/MM/DD HH:mm:ss"),
+          content: "[AI接口请求失败]",
+          hasLLMConfig: enableLLM
+        }
+      ]);
+    } finally {
+      setAiLoading(false);
+    }
+
+    // ...如需调用父组件onSearch可保留
+    if (onSearch) {
+      const currentConfig = {
+        textChunks: sliderValues.textChunks,
+        topP: sliderValues.topP,
+        topN: sliderValues.topN,
+        denseWeight: sliderValues.denseWeight,
+        enableKG: form.getFieldValue("enableKG"),
+        enableRerank: form.getFieldValue("enableRerank"),
+        model: form.getFieldValue("llmModel"),
+        temperature: sliderValues.temperature,
+        diversity: sliderValues.diversity,
+        maxTokens: sliderValues.maxTokens
+      };
+      onSearch(inputValue, currentConfig);
+    }
+  };
+
+  // 流式AI消息拼接
+  const handleStreamMessage = (streamMsg: any) => {
+    // console.log('收到stream流:', streamMsg);
+    setMessages((prev) => {
+      //console.log("[流式拼接] prev:", prev, streamMsg);
+      const newMessages = [...prev];
+      const last = newMessages[newMessages.length - 1];
+      const isLastAi =
+        last && last.type === "ai" && last.queryId === streamMsg.queryId;
+
+      if (isLastAi) {
+        // 拼接 fullContent
+        const prevFull =
+          typeof last.fullContent === "string" ? last.fullContent : "";
+        const curContent = streamMsg.reply.content || "";
+        const newFull = prevFull + curContent;
+        last.fullContent = newFull;
+        last.content = newFull; // 保证每次流拼接都能触发 useEffect，实现滚动跟随
+        // 结束标记
+        if ("docs" in streamMsg) {
+          let docs = streamMsg.docs;
+          console.log("[流式拼接] docs 原始:", docs, "类型:", typeof docs);
+          if (typeof docs === "string") {
+            try {
+              docs = JSON.parse(docs);
+              console.log(
+                "[流式拼接] docs 解析后:",
+                docs,
+                "类型:",
+                typeof docs
+              );
+            } catch (e) {
+              docs = [];
+              console.log("[流式拼接] docs 解析失败:", e);
+            }
+          } else {
+            console.log(
+              "[流式拼接] docs 非字符串:",
+              docs,
+              "类型:",
+              typeof docs
+            );
+          }
+          last.retrievedChunks = Array.isArray(docs)
+            ? docs.map((doc: any, idx: number) =>
+                typeof doc === "string"
+                  ? {
+                      content: doc,
+                      similarity: 0,
+                      rerank: idx + 1,
+                      chunk_id: idx,
+                      source: ""
+                    }
+                  : doc
+              )
+            : [];
+        }
+        // console.log('streamMsg---------', streamMsg.promptContent !==null||streamMsg.promptContent !== undefined && streamMsg.promptContent)
+        last.prompt = streamMsg.promptContent;
+        if (streamMsg.status === 2) {
+          last.finished = true; // 可用于 UI loading
+          // 记录总耗时和t
+          //
+          // console.log("streamMsg---------", streamMsg, streamMsg.tokons);
+          if (last.configInfo) {
+            last.configInfo.respTime = streamMsg.respTime;
+            last.configInfo.tokens = streamMsg.tokons;
+          }
+        }
+        // 保证configInfo和prompt不丢失
+        last.configInfo = currentConfigInfoRef.current;
+
+        last.hasLLMConfig = enableLLM;
+        // 启动打字机
+        if (typeof last.content !== "string") last.content = "";
+        if (typeof last.typedLength !== "number")
+          last.typedLength = last.content.length;
+        if (last.finished || last.typedLength >= last.fullContent.length) {
+          last.content = String(last.fullContent);
+          return [...prev.slice(0, -1), last];
+        }
+        last.typedLength += 1;
+        last.content = String(last.fullContent.slice(0, last.typedLength));
+        setTimeout(() => typeWriterUpdate(streamMsg.queryId), 20);
+        // console.log("[setMessages后]", newMessages);
+        return [...prev.slice(0, -1), last];
+      } else {
+        // 新增一条AI消息
+        // console.log(
+        //   "[流式拼接] last 不存在或不匹配，新增AI消息",
+        //   last,
+        //   streamMsg
+        // );
+        let docs = streamMsg.docs;
+        if (typeof docs === "string") {
+          try {
+            docs = JSON.parse(docs);
+            // console.log("[流式拼接] docs 解析后:", docs, "类型:", typeof docs);
+          } catch (e) {
+            docs = [];
+            console.log("[流式拼接] docs 解析失败:", e);
+          }
+        } else {
+          // console.log("[流式拼接] docs 非字符串:", docs, "类型:", typeof docs);
+        }
+        const configInfo = { ...currentConfigInfoRef.current };
+        console.log("ca,ni,mei", currentConfigInfoRef.current);
+        if (streamMsg.status === 2) {
+          configInfo.respTime = streamMsg.respTime;
+          configInfo.tokens = streamMsg.tokens;
+        }
+        return [
+          ...prev,
+          {
+            type: "ai",
+            time: dayjs(streamMsg.lastDate).format("YYYY/MM/DD HH:mm:ss"),
+            content: "",
+            fullContent: streamMsg.reply.content || "",
+            queryId: streamMsg.queryId,
+            finished: streamMsg.status === 2,
+            retrievedChunks: Array.isArray(docs)
+              ? docs.map((doc: any, idx: number) =>
+                  typeof doc === "string"
+                    ? {
+                        content: doc,
+                        similarity: 0,
+                        rerank: idx + 1,
+                        chunk_id: idx,
+                        source: ""
+                      }
+                    : doc
+                )
+              : [],
+            configInfo,
+            prompt: streamMsg.promptContent || currentPromptRef.current,
+            typedLength: 0,
+            hasLLMConfig: enableLLM
+          }
+        ];
+      }
+    });
+  };
+
+  const handleUpload = async (files: FileList) => {
+    const newFiles = Array.from(files).map((file) => ({
+      file,
+      type: file.type.startsWith("image/")
+        ? ("image" as const)
+        : ("document" as const),
+      preview: file.type.startsWith("image/")
+        ? URL.createObjectURL(file)
+        : undefined
+    }));
+
+    setUploadedFiles((prev) => [...prev, ...newFiles]);
+  };
+
+  const handleRemoveFile = (index: number) => {
+    setUploadedFiles((prev) => {
+      const newFiles = [...prev];
+      if (newFiles[index].preview) {
+        URL.revokeObjectURL(newFiles[index].preview);
+      }
+      newFiles.splice(index, 1);
+      return newFiles;
+    });
+  };
+
+  const handleVoice = () => {
+    console.log("Voice input triggered");
+  };
+
+  // 处理拖拽事件
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.currentTarget.contains(e.relatedTarget as Node)) return;
+    setIsDragging(false);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const files = e.dataTransfer.files;
+    if (files && files.length > 0) {
+      handleUpload(files);
+    }
+  };
+
+  // 打字机动画函数，实现简单的逐字显示效果
+  function typeWriterUpdate(queryId: string) {
+    setMessages((prev) => {
+      const newMessages = [...prev];
+      if (newMessages.length === 0) return newMessages;
+      const last = { ...newMessages[newMessages.length - 1] };
+      if (
+        last &&
+        last.type === "ai" &&
+        last.queryId === queryId &&
+        typeof last.fullContent === "string"
+      ) {
+        if (typeof last.content !== "string") last.content = "";
+        if (typeof last.typedLength !== "number")
+          last.typedLength = last.content.length;
+        if (last.finished || last.typedLength >= last.fullContent.length) {
+          last.content = String(last.fullContent);
+          newMessages[newMessages.length - 1] = last;
+          return newMessages;
+        }
+        last.typedLength += 1;
+        last.content = String(last.fullContent.slice(0, last.typedLength));
+        newMessages[newMessages.length - 1] = last;
+        setTimeout(() => {
+          typeWriterUpdate(queryId);
+          // 打字机动画期间直接滚动到底部
+        }, 20);
+      }
+      return newMessages;
+    });
+  }
+
+  return (
+    <div className="w-full h-[calc(100vh-245px)] bg-background rounded-md">
+      <div className="w-full h-full relative flex">
+        <ConfigPanel
+          form={form}
+          visible={settingPanelVisible}
+          enableLLM={enableLLM}
+          sliderValues={sliderValues}
+          onSliderChange={handleSliderChange}
+          onEnableLLMChange={setEnableLLM}
+          onVisibleChange={setSettingPanelVisible}
+          modelOptions={modelOptions}
+          recallModelOptions={recallModelOptions}
+        />
+
+        <div className=" w-8/12 h-full bg-white relative flex flex-col">
+          {/* 拖拽提示层 - 固定定位 */}
+          {isDragging && (
+            <div className="fixed inset-0 bg-blue-50 bg-opacity-30 backdrop-blur-sm z-50 flex items-center justify-center pointer-events-none">
+              <div className="bg-white/80 backdrop-blur-sm p-6 rounded-xl shadow-lg flex flex-col items-center">
+                <Paperclip className="w-8 h-8 text-blue-500 mb-3" />
+                <span className="text-blue-600 font-medium">
+                  将文件拖放到这里
+                </span>
+                <span className="text-sm text-gray-500 mt-2">
+                  支持 PDF、Word、图片等文件
+                </span>
+              </div>
+            </div>
+          )}
+
+          <div
+            className=" w-full  overflow-y-auto h-full py-6 px-6 relative flex flex-col"
+            onDragEnter={handleDragEnter}
+            onDragLeave={handleDragLeave}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop}
+            ref={messagesContainerRef}
+          >
+            <div
+              style={{ direction: "rtl", transform: "rotate(180deg)" }}
+              className=" py-6 px-6 relative flex flex-col"
+            >
+              <div
+                style={{
+                  flexGrow: 1,
+                  flexShrink: 1,
+                  flex: 1
+                }}
+              ></div>
+              {messages.length === 0 ? (
+                <Welcome />
+              ) : (
+                <div
+                  className="w-full relative"
+                  style={{ direction: "ltr", transform: "rotate(180deg)" }}
+                >
+                  {messages.map((message, index) => (
+                    <ChatMessage
+                      key={index}
+                      type={message.type}
+                      time={message.time}
+                      content={message.content}
+                      hasLLMConfig={message.hasLLMConfig}
+                      retrievedChunks={message.retrievedChunks}
+                      prompt={message.prompt}
+                      configInfo={message.configInfo}
+                      streaming={true}
+                      isLatest={index === messages.length - 1}
+                    />
+                  ))}
+                </div>
+              )}
+              <div ref={messagesEndRef} />
+            </div>
+          </div>
+
+          <ChatInput
+            value={inputValue}
+            onChange={setInputValue}
+            onSend={handleSend}
+            onUpload={handleUpload}
+            onVoice={handleVoice}
+            onClear={() => setInputValue("")}
+            uploadedFiles={uploadedFiles}
+            onRemoveFile={handleRemoveFile}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}