@gientech/modual 2.0.4 → 2.0.5

package/src/modules/search/components/SearchView.tsx

@@ -0,0 +1,563 @@
+import { message, Spin } from "antd";
+import { useEffect, useState, useMemo, useCallback, useRef } from "react";
+import { uid } from "uid";
+
+import AssisSelect from "./AssisSelect";
+import SearchInput from "./SearchInput";
+import ResultContent from "./ResultContent";
+import FileList from "./FileList";
+import SearchLanding from "./SearchLanding";
+
+import {
+  api_createDialogue,
+  api_start_kb_search,
+  api_kbSearchHistoryList,
+  api_kbSearchHistoryAdd,
+  api_kbSearcHistoryDelete
+} from "../servers";
+
+import { getUrlPrefix } from "../utils";
+import "@/assets/styles/knowledgeSearch.less";
+
+// 临时类型定义
+enum StatusType {
+  Pending = 0,
+  Process = 1,
+  Success = 2,
+  Error = 3,
+  Done = 4
+}
+
+enum ChatSystemType {
+  TEMPORARY = 0,
+  PERMANENT = 1
+}
+
+interface QAChatItem {
+  id: string;
+  query: {
+    content: string;
+    type: string;
+    audioUrl: string;
+    queryId: string;
+  };
+  answer: {
+    content: string;
+  };
+  status: StatusType;
+  searchConfigDTO?: any;
+}
+
+// const initialPage = {
+//   page: 1,
+//   pageSize: 1000
+// };
+
+const cfg = {
+  url: getUrlPrefix(),
+  enableMock: false,
+  token: "/"
+};
+
+const KnowledgeSearch = () => {
+  const token = ""; // TODO: 需要从正确的store获取token
+  const [assistList, setAssistList] = useState<any[]>([]);
+  const [assistId, setAssistId] = useState<string>("");
+  const [searchRes, setSearchRes] = useState<any>({});
+  const [keyWord, setKeyWord] = useState<string>("");
+
+  const [cfgLoading, setCfgLoading] = useState(false);
+  const [loading] = useState(false);
+  const [isShowAssisText, setIsShowAssisText] = useState<boolean>(false);
+  const [historyList, setHistoryList] = useState<Array<any>>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const [isSearch, setIsSearch] = useState(false);
+  const [filesObj, setFilesObj] = useState<any>({});
+  const [conversation, setConversation] = useState<any>({
+    id: uid(32),
+    name: "",
+    status: 0,
+    modify_timeStamp: new Date().getTime(),
+    sseController: new AbortController()
+  });
+  const streamDataRef = useRef<undefined | any>(undefined);
+  const initMessageData = useRef<any | undefined>(undefined);
+  const [selectFile, setSelectFile] = useState<string>("");
+  const [selectBlock, setSelectBlock] = useState<string>("");
+  const [isHistoryHide, setIsHistoryHide] = useState<boolean>(false);
+  const [clickPosition, setClickPosition] = useState<any>({ x: 0, y: 0 });
+  const [isHasSearch, setIsHasSearch] = useState<boolean>(false);
+  const [cptKey, setCptKey] = useState<string>(uid(32));
+
+  const getFileName = (url: string) => {
+    const regex = /([^/]+)\.([^/]+)$/;
+    const match = url.match(regex);
+
+    if (match) {
+      return {
+        fileName: match[1],
+        fileExtension: match[2],
+        url
+      };
+    }
+    return {};
+  };
+
+  const fileList = useMemo(() => {
+    const keys = Object.keys(filesObj);
+
+    return keys.length
+      ? keys.map((key: string) => {
+          const obj = {
+            ...getFileName(key),
+            list: (filesObj[key] || []).map((i: any, idx: number) =>
+              Object.assign({}, i, {
+                id: `${i.order_num || i.score}_${idx}`
+              })
+            )
+          };
+          return obj;
+        })
+      : [];
+  }, [filesObj]);
+
+  const handleAssistChanged = (aId: string) => {
+    setAssistId(aId);
+  };
+
+  const getConfig = () => {
+    return Object.assign({}, cfg, {
+      token: token || cfg.token
+    });
+  };
+
+  const fetchAssisList = () => {
+    setCfgLoading(true);
+    // TODO: 需要实现api_getHelperConfigList函数
+    Promise.resolve({ records: [] })
+      .then((res: any) => {
+        let _records = res;
+        if (Object.prototype.toString.call(_records) !== "[object Array]") {
+          const { records } = res;
+          _records = records || [];
+        }
+        const _assistId = _records && _records.length ? _records[0].id : "";
+        setAssistList([..._records]); // TODO: 需要实现assistantDTO_to_SelectOption函数
+        setAssistId(_assistId);
+      })
+      .finally(() => setCfgLoading(false));
+  };
+
+  const fetchHistoryList = () => {
+    setHistoryLoading(true);
+    api_kbSearchHistoryList({
+      data: {},
+      config: getConfig()
+    })
+      .then((res) => {
+        const _list =
+          Object.prototype.toString.call(res) === "[object Array]"
+            ? [...res]
+            : [];
+        setHistoryList([...Array.from(new Set([..._list]))]);
+      })
+      .finally(() => {
+        setHistoryLoading(false);
+      });
+  };
+
+  const deleteHistory = (queryContent: string = "") => {
+    api_kbSearcHistoryDelete({
+      data: {
+        queryContent
+      },
+      config: getConfig()
+    }).then((res: any) => {
+      if (res) {
+        if (queryContent) {
+          const _historyList = [...historyList];
+          const idx = _historyList.findIndex((i: string) => i === queryContent);
+          _historyList.splice(idx, 1);
+          setHistoryList([..._historyList]);
+        } else {
+          setHistoryList([]);
+        }
+      }
+    });
+  };
+
+  const keyOnChange = (val: string, isSearch: boolean = false) => {
+    setKeyWord(val);
+    if (isSearch) {
+      setTimeout(() => {
+        keyOnSearch(val);
+      }, 0);
+    }
+  };
+
+  const keyOnSearch = (val?: string) => {
+    const _val = val || keyWord;
+    if (_val) {
+      setConversation({
+        ...conversation,
+        status: StatusType.Process,
+        question: _val
+      });
+      api_kbSearchHistoryAdd({
+        data: {
+          queryContent: _val
+        },
+        config: getConfig()
+      }).then(() => {
+        setHistoryList([...Array.from(new Set([...historyList, _val]))]);
+      });
+    }
+  };
+
+  const onBlurHandler = () => {
+    setTimeout(() => {
+      isShowAssisText && setIsShowAssisText(false);
+    }, 500);
+  };
+
+  const showAssisText = () => {
+    !isShowAssisText && setIsShowAssisText(true);
+  };
+
+  const fixRetrieveTag = (content: string) => {
+    return Object.prototype.toString.call(content) === "[object String]"
+      ? content.replace(/\[retrive-tag[^\]]*\].*?\[\/retrive-tag\]/g, "")
+      : content;
+  };
+
+  const onMessageCallback = useCallback((event: any) => {
+    const curData = JSON.parse(event.data);
+    // console.log(curData, StatusType.Done)
+    setConversation({
+      ...conversation,
+      status: curData.status
+    });
+    if (curData.status === StatusType.Done) {
+      const { docsTree } = curData;
+      if (docsTree) {
+        try {
+          setFilesObj(JSON.parse(docsTree));
+        } catch (e) {
+          console.log(e);
+        }
+      }
+      setIsSearch(false);
+      setSearchRes((prevChat: any) => {
+        streamDataRef.current =
+          streamDataRef.current || initMessageData.current;
+        if (streamDataRef.current) {
+          const lastData = { ...curData };
+          lastData.reply.content =
+            streamDataRef.current?.answer?.content + curData.reply.content ||
+            "";
+          const data = lastData; // TODO: 需要实现stremDataToQAdata函数
+          // console.log("最新对话的最终处理数据", data)
+          const p = {
+            ...streamDataRef.current,
+            answer: {
+              ...streamDataRef.current.answer,
+              id: data?.qaData?.id || "",
+              reference: data?.qaData?.answer?.reference || [],
+              content: fixRetrieveTag(lastData.reply.content),
+              type: "text"
+            },
+            status: StatusType.Done
+          };
+          // console.log("最新对话的最终数据", p)
+          streamDataRef.current = undefined;
+          return { ...p };
+        }
+        return prevChat;
+      });
+    } else {
+      streamDataRef.current = !streamDataRef.current
+        ? initMessageData.current
+        : {
+            ...streamDataRef.current,
+            answer: {
+              ...(curData.reply || {}),
+              content:
+                streamDataRef.current.answer.content +
+                (curData.reply.content || ""),
+              type: "text" // 修正类型
+            }
+          };
+      try {
+        setSearchRes((prevChat: any) => {
+          if (streamDataRef.current) {
+            const lastData = { ...curData };
+            lastData.reply.content =
+              streamDataRef.current?.answer?.content || "";
+            const data = lastData; // TODO: 需要实现stremDataToQAdata函数
+            if (streamDataRef.current?.answer?.reference) {
+              streamDataRef.current.answer.reference =
+                data?.qaData?.answer?.reference || [];
+              streamDataRef.current.answer.id = data?.qaData?.id || "";
+            }
+            // console.log("data :", data)
+            const p = {
+              ...streamDataRef.current,
+              status: StatusType.Process
+            };
+            return { ...p };
+          }
+          return prevChat;
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }, []);
+
+  const onErrorCallback = useCallback(
+    (e: any) => {
+      setIsSearch(false);
+      setConversation({
+        ...conversation,
+        status: StatusType.Done
+      });
+
+      setSearchRes((_prevChat: any) => {
+        const p = {
+          ...(streamDataRef.current || initMessageData.current),
+          status: StatusType.Done
+        };
+        streamDataRef.current = undefined;
+        return { ...p };
+      });
+      message.error("请求失败!");
+      throw e;
+    },
+    [conversation]
+  );
+
+  const onCloseCallback = useCallback(() => {
+    setIsSearch(false);
+    // console.log("onCloseCallback sse")
+    // console.log("这里已经关闭了，不应该有数据")
+    conversation?.sseController.abort();
+  }, [conversation]);
+
+  const resetAll = () => {
+    setIsSearch(true);
+    setSearchRes({});
+    setFilesObj({});
+    clearSelect();
+  };
+
+  const clearSelect = () => {
+    setSelectBlock("");
+    setSelectFile("");
+  };
+
+  const selectFileHandler = (fileId: string) => {
+    setSelectFile(fileId);
+    setSelectBlock("");
+  };
+
+  const selectBlockHandler = (blockId: string) => {
+    setSelectBlock(blockId);
+  };
+
+  const historyHideHandler = (sta: boolean) => {
+    if (sta !== isHistoryHide) {
+      setIsHistoryHide(sta);
+      setTimeout(() => {
+        setIsHistoryHide(!sta);
+      }, 10);
+    }
+  };
+
+  const containerClickHandler = (e: any) => {
+    // e.preventDefault()
+    // e.stopPropagation()
+    if (!isHasSearch) {
+      const { clientX, clientY } = e;
+      // console.log(e.target, clientX, clientY)
+      setClickPosition({
+        x: clientX,
+        y: clientY
+      });
+    }
+  };
+
+  const resetClickPosition = (data: any) => {
+    setClickPosition({ ...data });
+  };
+
+  useEffect(() => {
+    const asyncEffect = async () => {
+    if (
+      conversation &&
+      conversation.status === StatusType.Process &&
+      conversation?.question &&
+      keyWord
+    ) {
+      resetAll();
+      const dialogId = `${uid(32)}_${assistId}`;
+      const res = await api_createDialogue({
+        data: {
+          label: keyWord,
+          sessionId: dialogId,
+          assist_id: assistId!,
+          sysType: ChatSystemType.TEMPORARY as any
+        },
+        config: getConfig()
+      });
+
+      if (res && conversation.status === StatusType.Process) {
+        conversation.sseController = new AbortController();
+        const chat_id = uid(32);
+        const serverInfo = getConfig();
+        conversation?.sseController.abort();
+        api_start_kb_search({
+          data: {
+            sessionId: res.sessionId,
+            queryId: chat_id,
+            name: res.name,
+            lastDate: new Date().getTime().toString(),
+            type: "text",
+            content: keyWord,
+            configId: res.configId,
+            audioUrl: "",
+            onMessage: onMessageCallback,
+            onError: onErrorCallback,
+            onClose: onCloseCallback,
+            signal: conversation.sseController.signal
+          },
+          config: {
+            url: serverInfo.url,
+            token: serverInfo.token,
+            enableMock: false
+          }
+        });
+      }
+      const p: QAChatItem = {
+        id: res ? res.sessionId : dialogId!,
+        query: {
+          content: keyWord!,
+          type: "text",
+          audioUrl: "",
+          queryId: uid(32)
+        },
+        answer: {
+          content: ""
+        },
+        status: StatusType.Pending,
+        searchConfigDTO: res ? res.searchConfigDTO : undefined // 添加此行以解决错误
+      };
+      initMessageData.current = p;
+      if (!isHasSearch) {
+        setIsHasSearch(true);
+      }
+      setCptKey(uid(32));
+      setSearchRes((_prevChat: any) => {
+        return { ..._prevChat, ...p };
+      });
+    }
+    };
+    asyncEffect();
+  }, [conversation]);
+
+  useEffect(() => {
+    fetchAssisList();
+    fetchHistoryList();
+  }, []);
+
+  return (
+    <div
+      className="knowledge-search-wrap p-5 mb-10 pr-0"
+      onClick={containerClickHandler}
+    >
+      <Spin spinning={loading}>
+        <div className="flex h-12 pr-5">
+          {isHasSearch ? (
+            <div className="flex-1 pr-5 search-wrap">
+              <SearchInput
+                loading={false}
+                keyWord={keyWord}
+                historyList={historyList}
+                historyLoading={historyLoading}
+                isSearch={isSearch}
+                isHistoryHide={isHistoryHide}
+                keyOnChange={keyOnChange}
+                keyOnSearch={keyOnSearch}
+                deleteHistory={deleteHistory}
+              />
+            </div>
+          ) : null}
+          <div className="min-w-[448px] w-1/3">
+            {isHasSearch ? (
+              <AssisSelect
+                disabled={false}
+                assistList={assistList}
+                value={assistId || ""}
+                loading={cfgLoading}
+                onChange={handleAssistChanged}
+              />
+            ) : (
+              <div
+                className={`show-search-select-wrap`}
+                onFocus={showAssisText}
+              >
+                <div className="select-wrap">
+                  <AssisSelect
+                    disabled={false}
+                    assistList={assistList}
+                    value={assistId || ""}
+                    loading={cfgLoading}
+                    onChange={handleAssistChanged}
+                    onBlurHandler={onBlurHandler}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+        {!isHasSearch ? (
+          <SearchLanding
+            keyWord={keyWord}
+            historyList={historyList}
+            historyLoading={historyLoading}
+            isSearch={isSearch}
+            isHistoryHide={isHistoryHide}
+            clickPosition={clickPosition}
+            keyOnChange={keyOnChange}
+            keyOnSearch={keyOnSearch}
+            setKeyWord={setKeyWord}
+            deleteHistory={deleteHistory}
+            resetClickPosition={resetClickPosition}
+          />
+        ) : (
+          <div className="result-wrap">
+            <ResultContent
+              answer={searchRes.answer}
+              status={conversation.status}
+              selectFile={selectFile}
+              selectBlock={selectBlock}
+              isHistoryHide={isHistoryHide}
+              fileList={fileList}
+              historyHideHandler={historyHideHandler}
+              clearSelect={clearSelect}
+            />
+            <FileList
+              key={`file-list-${cptKey}`}
+              fileList={fileList}
+              selectFile={selectFile}
+              selectBlock={selectBlock}
+              selectFileHandler={selectFileHandler}
+              selectBlockHandler={selectBlockHandler}
+            />
+          </div>
+        )}
+      </Spin>
+    </div>
+  );
+};
+
+export default KnowledgeSearch;

package/src/modules/search/components/SimpleEditor.tsx

@@ -0,0 +1,158 @@
+import React, { useState, useRef, useEffect } from 'react';
+import styled from 'styled-components';
+
+const EditorContainer = styled.div`
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  padding: 8px 12px;
+  min-height: 100px;
+  background: #fff;
+  transition: border-color 0.3s;
+
+  &:focus-within {
+    border-color: #1890ff;
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  }
+`;
+
+const EditorContent = styled.div`
+  outline: none;
+  min-height: 80px;
+  line-height: 1.5;
+  color: #262626;
+  font-size: 14px;
+
+  &[contenteditable="true"]:empty:before {
+    content: attr(data-placeholder);
+    color: #bfbfbf;
+    pointer-events: none;
+  }
+`;
+
+const Toolbar = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding: 4px 0;
+  border-bottom: 1px solid #f0f0f0;
+`;
+
+const ToolbarButton = styled.button<{ active?: boolean }>`
+  padding: 4px 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: ${props => props.active ? '#1890ff' : '#fff'};
+  color: ${props => props.active ? '#fff' : '#262626'};
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.3s;
+
+  &:hover {
+    border-color: #1890ff;
+    color: #1890ff;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+interface SimpleEditorProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  readOnly?: boolean;
+  className?: string;
+}
+
+const SimpleEditor: React.FC<SimpleEditorProps> = ({
+  value = '',
+  onChange,
+  placeholder = '请输入内容...',
+  readOnly = false,
+  className
+}) => {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+
+  useEffect(() => {
+    if (editorRef.current && editorRef.current.innerHTML !== value) {
+      editorRef.current.innerHTML = value;
+    }
+  }, [value]);
+
+  const handleInput = () => {
+    if (editorRef.current && onChange) {
+      onChange(editorRef.current.innerHTML);
+    }
+  };
+
+  const execCommand = (command: string, value?: string) => {
+    document.execCommand(command, false, value);
+    editorRef.current?.focus();
+    handleInput();
+  };
+
+  const toggleBold = () => {
+    execCommand('bold');
+    setIsBold(!isBold);
+  };
+
+  const toggleItalic = () => {
+    execCommand('italic');
+    setIsItalic(!isItalic);
+  };
+
+  const insertLink = () => {
+    const url = prompt('请输入链接地址:');
+    if (url) {
+      execCommand('createLink', url);
+    }
+  };
+
+  const insertList = () => {
+    execCommand('insertUnorderedList');
+  };
+
+  return (
+    <div className={className}>
+      {!readOnly && (
+        <Toolbar>
+          <ToolbarButton
+            active={isBold}
+            onClick={toggleBold}
+            onMouseDown={(e) => e.preventDefault()}
+          >
+            粗体
+          </ToolbarButton>
+          <ToolbarButton
+            active={isItalic}
+            onClick={toggleItalic}
+            onMouseDown={(e) => e.preventDefault()}
+          >
+            斜体
+          </ToolbarButton>
+          <ToolbarButton onClick={insertLink} onMouseDown={(e) => e.preventDefault()}>
+            链接
+          </ToolbarButton>
+          <ToolbarButton onClick={insertList} onMouseDown={(e) => e.preventDefault()}>
+            列表
+          </ToolbarButton>
+        </Toolbar>
+      )}
+      <EditorContainer>
+        <EditorContent
+          ref={editorRef}
+          contentEditable={!readOnly}
+          onInput={handleInput}
+          data-placeholder={placeholder}
+          dangerouslySetInnerHTML={{ __html: value }}
+        />
+      </EditorContainer>
+    </div>
+  );
+};
+
+export default SimpleEditor;