@gientech/modual 2.0.4 → 2.0.5

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

@@ -0,0 +1,232 @@
+import React, { useState, useMemo, useEffect } from "react";
+import { ConfigProvider, Drawer } from "antd";
+import { CaretRightOutlined, CaretDownOutlined } from "@ant-design/icons";
+import { uid } from "uid";
+
+import { WithPlate } from "./Editor/ChatViewEditor";
+
+import { FILEIMG } from "./FileList";
+import IconRobot from "../assets/icon-robot.svg";
+import IconSubTitle from "../assets/icon-sub-title.svg";
+import Genera from "../assets/genera.gif";
+import { dealMinioUrl, fileViewTypes } from "../utils.ts";
+import { StatusType } from "../type.ts";
+import "../style.less";
+
+import FileViewer from "@mxmweb/file-viewer";
+// 注意：Worker 应该由最终调用方在应用入口处注册，不要在此处注册
+
+interface ResultContentProps {
+  answer: any;
+  status: StatusType;
+  selectFile: string;
+  selectBlock: string;
+  isHistoryHide: boolean;
+  fileList: Array<any>;
+  historyHideHandler: (sta: boolean) => void;
+  clearSelect: () => void;
+}
+
+const ResultContentNew: React.FC<ResultContentProps> = ({
+  answer = {},
+  status,
+  selectFile,
+  selectBlock,
+  isHistoryHide,
+  fileList,
+  historyHideHandler,
+  clearSelect
+}) => {
+  const [isShowFile, setIsShowFile] = useState<boolean>(false);
+  const [isOpenAnswer, setIsOpenAnswer] = useState<boolean>(false);
+  const curFile = useMemo(() => {
+    const _item =
+      selectFile && fileList.length
+        ? fileList.find((f: any) => f.url === selectFile)
+        : {};
+    const { list, fileName, fileExtension, url } = _item;
+    return fileName
+      ? Object.assign({}, _item, {
+          hide_toolbar: true,
+          fileSuffix: fileExtension,
+          fileName: fileName,
+          file_source: url,
+          fullWidth: true,
+          pdfPages:
+            list && list.length && list[0].pdfPages ? list[0].pdfPages : 0
+        })
+      : {};
+  }, [fileList, selectFile]);
+
+  const fileName = useMemo(() => {
+    if (!curFile) {
+      return "";
+    }
+    if (curFile.fileName) return curFile.fileName;
+    const source = curFile?.file_source;
+    if (source) {
+      const arr = source.split("/");
+      if (!arr.length) return "";
+      return arr[arr.length - 1];
+    } else {
+      return "";
+    }
+  }, [curFile]);
+
+  const curChunk = useMemo(() => {
+    const { list } = curFile;
+    if (list && list.length) {
+      const item = curFile.list.find((i: any) => i.id === selectBlock);
+      return item || {};
+    }
+    return {};
+  }, [selectBlock, curFile]);
+
+  const [total, setTotal] = useState(0);
+  const [origin_paper_size, setOriginPaperSize] = useState({
+    width: 1191,
+    height: 1684
+  });
+
+  const hideHistoryHandler = () => {
+    if (!isHistoryHide) {
+      historyHideHandler(true);
+    }
+  };
+
+  const closeFileView = () => {
+    setIsShowFile(false);
+    clearSelect();
+  };
+
+  const fixFileViewData = () => {
+    // console.log(curFile)
+    const { list, pdfPages } = curFile;
+    setTotal(pdfPages);
+    if (list && list.length) {
+      const item = list[0].metadata || {};
+      const { page_size } = item;
+      let _page_size = page_size as any;
+      if (Object.prototype.toString.call(_page_size) === "[object String]") {
+        _page_size = JSON.parse(_page_size);
+      }
+      if (_page_size && _page_size.length) {
+        setOriginPaperSize({
+          width: _page_size[0][0],
+          height: _page_size[0][1]
+        });
+      }
+    }
+  };
+
+  const changeOpenSta = () => {
+    setIsOpenAnswer(!isOpenAnswer);
+  };
+
+  useEffect(() => {
+    if (selectFile || selectBlock) {
+      setIsShowFile(true);
+      if (curFile.fileName) {
+        fixFileViewData();
+      }
+    }
+  }, [selectFile, selectBlock, curFile]);
+
+  return (
+    <div className={`result-content-wrap`} onClick={hideHistoryHandler}>
+      <div className={`content-wrap`}>
+        <div className="assist-name-wrap relative flex h-5">
+          <img src={IconRobot} className="icon-robot" />
+          <img src={IconSubTitle} className="icon-title" />
+        </div>
+        <div
+          className={`${isOpenAnswer ? "open-btn" : "close-btn"} opener-btn`}
+        >
+          <span onClick={changeOpenSta}>
+            {isOpenAnswer ? "收起" : "展开更多"}
+          </span>
+          {isOpenAnswer ? <CaretDownOutlined /> : <CaretRightOutlined />}
+        </div>
+        {status === StatusType.Process ? (
+          <div className="flex bg-[#F2F6FF] rounded-1 h-8 items-center px-2 text-xs text-[#555] mb-1">
+            <img src={Genera} width={20} height={20} className="mx-2" />
+            <div className="text-[#0C5FFF]">生成中</div>
+          </div>
+        ) : null}
+        <div
+          style={{
+            height: isOpenAnswer ? "auto" : "96px",
+            overflow: "hidden",
+            minHeight: "90px"
+          }}
+        >
+          <WithPlate
+            id={uid(32)}
+            className="px-0 py-0 text-[14px] text-[#2a2a2a] bg-transparent overflow-x-hidden"
+            data={answer}
+            status={status}
+            imgClassName="!w-[472px] mt-[10px]"
+          />
+        </div>
+      </div>
+      <ConfigProvider
+        drawer={{
+          styles: {
+            body: { padding: 0 },
+            header: { display: "none" }
+          }
+        }}
+      >
+        <Drawer
+          title={
+            <div className="file-title-wrap select-none">
+              <img
+                src={FILEIMG[curFile.fileExtension] || FILEIMG["doc"]}
+                width={16}
+                height={16}
+                className="absolute -left-2 top-[3px]"
+              />
+              <b className="text-ellipsis break-words line-clamp-1 mr-10">
+                {curFile.fileName}.{curFile.fileExtension}
+              </b>
+              <i onClick={closeFileView} title="关闭"></i>
+            </div>
+          }
+          closable={false}
+          onClose={closeFileView}
+          open={isShowFile}
+          size="large"
+          // width="50%"
+          styles={{
+            body: { padding: "8px" }
+          }}
+          footer={null}
+        >
+          <div className="pb-10 overflow-y-auto">
+            {isShowFile && curFile ? (
+              <FileViewer
+                fileName={fileName}
+                content={
+                  !curFile?.fileSuffix ||
+                  fileViewTypes.includes(curFile.fileSuffix)
+                    ? dealMinioUrl(curFile?.url)
+                    : (dealMinioUrl(curFile?.url) as any)
+                }
+                onClose={closeFileView}
+                tools={{
+                  annotation: false,
+                  download: false,
+                  close: true
+                }}
+                headerClass="bg-white"
+                contentClass="bg-gray-50 p-[12px] md:p-[12px]"
+              />
+            ) : null}
+          </div>
+        </Drawer>
+      </ConfigProvider>
+    </div>
+  );
+};
+
+export default ResultContentNew;

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

@@ -0,0 +1,232 @@
+import React, {
+  useState,
+  useMemo,
+  useCallback,
+  useEffect,
+  useRef
+} from "react";
+import { Input, Spin } from "antd";
+
+import IconHistory from "../assets/Icon-history.svg";
+import IconSearch from "../assets/icon-zoomOut.svg";
+import IconStar from "../assets/icon-search-bar.svg";
+import { DeleteOutlined, SearchOutlined } from "@ant-design/icons";
+import "../style.less";
+
+export enum searchInputype {
+  NORMAL = "normal",
+  LARGE = "large"
+}
+
+interface SearchInputProps {
+  type?: searchInputype;
+  placeholder?: string;
+  loading: boolean;
+  keyWord: string;
+  historyList: Array<any>;
+  historyLoading: boolean;
+  isSearch: boolean;
+  isHistoryHide: boolean;
+  clickPosition?: any;
+  keyOnChange: (val: string, isSearch?: boolean) => void;
+  keyOnSearch: () => void;
+  deleteHistory: (content: string) => void;
+  resetClickPosition?: (data: any) => void;
+}
+
+const SearchInput: React.FC<SearchInputProps> = ({
+  type = searchInputype.NORMAL,
+  placeholder = "智能提问，AI高效搜索",
+  loading,
+  keyWord,
+  historyList,
+  historyLoading,
+  isSearch,
+  isHistoryHide,
+  clickPosition,
+  keyOnChange,
+  keyOnSearch,
+  deleteHistory,
+  resetClickPosition
+}) => {
+  const [isFocus, setIsFocus] = useState<boolean>(false);
+  const iptRef = useRef<any>(null);
+
+  const historyFilterList = useMemo(() => {
+    return keyWord
+      ? (historyList || []).filter((i: any) => i.includes(keyWord))
+      : historyList;
+  }, [historyList, keyWord]);
+
+  const keyWordOnChange = (e: any) => {
+    const { target } = e;
+    keyOnChange(target.value.trim());
+  };
+
+  const keyWordOnKeyDown = (e: any) => {
+    const { key, keyCode } = e;
+    if (key === "Enter" || keyCode === 13) {
+      searchHandler();
+    }
+  };
+
+  const searchHandler = () => {
+    if (keyWord) {
+      keyOnSearch();
+      console.log(iptRef.current);
+      iptRef.current && iptRef.current.blur && iptRef.current.blur();
+    }
+  };
+
+  const onFocusHandler = () => {
+    !isFocus && setIsFocus(true);
+  };
+
+  const onblurHandler = () => {
+    // setIsFocus(false);
+  };
+
+  const maskOnClick = () => {
+    setIsFocus(false);
+  };
+
+  const deleteAllHistory = () => {
+    deleteHistory("");
+  };
+
+  const deleteRowHandler = useCallback(
+    (item: any) => (e: any) => {
+      e.stopPropagation();
+      console.log(item);
+      deleteHistory(item);
+    },
+    [deleteHistory]
+  );
+
+  const selectRowHandler = useCallback(
+    (item: any) => () => {
+      keyOnChange(item, true);
+      setIsFocus(false);
+    },
+    [keyOnChange, setIsFocus]
+  );
+
+  const checkIfCloseHistory = () => {
+    const defaultPosition = { x: 0, y: 0, width: 0, height: 0 };
+    const searchIptEl = document.querySelector(".select-input-large");
+    const historyEl = document.querySelector(".history-wrap");
+    const searchIptClientRect = searchIptEl
+      ? searchIptEl.getBoundingClientRect()
+      : { ...defaultPosition };
+    const historyClientRect = historyEl
+      ? historyEl.getBoundingClientRect()
+      : { ...defaultPosition };
+
+    const xList = [
+      searchIptClientRect.x,
+      searchIptClientRect.x + searchIptClientRect.width
+    ];
+    const yList = [
+      searchIptClientRect.y,
+      searchIptClientRect.y +
+        searchIptClientRect.height +
+        15 +
+        historyClientRect.height
+    ];
+    if (
+      !(
+        clickPosition.x > xList[0] &&
+        clickPosition.x < xList[1] &&
+        clickPosition.y > yList[0] &&
+        clickPosition.y < yList[1]
+      )
+    ) {
+      isFocus && setIsFocus(false);
+    } else {
+      !isFocus && setIsFocus(true);
+    }
+  };
+
+  const renewClickPosition = (e: any) => {
+    console.log(e.clientX, e.clientY);
+    // e.preventDefault()
+    // e.stopPropagation()
+    resetClickPosition && resetClickPosition({ x: e.clientX, y: e.clientY });
+  };
+
+  useEffect(() => {
+    if (isSearch || isHistoryHide) {
+      setIsFocus(false);
+    }
+  }, [isSearch, isHistoryHide]);
+
+  useEffect(() => {
+    if (clickPosition && (clickPosition.x || clickPosition.y)) {
+      checkIfCloseHistory();
+    }
+  }, [clickPosition]);
+
+  return (
+    <div
+      className={`w-full relative select-input-${type === searchInputype.NORMAL ? "normal" : "large"} ${isFocus ? "select-input-focus" : ""} bg-white z-50`}
+      onClick={renewClickPosition}
+    >
+      <i className="icon-start">
+        <img src={IconStar} />
+      </i>
+      <Input
+        ref={iptRef}
+        placeholder={placeholder}
+        disabled={loading}
+        value={keyWord}
+        onChange={keyWordOnChange}
+        onKeyDown={keyWordOnKeyDown}
+        onFocus={onFocusHandler}
+        onBlur={onblurHandler}
+      />
+      <b>
+        <img src={IconSearch} onClick={searchHandler} />
+      </b>
+      <div className="mask-line"></div>
+      <div className={`${isFocus ? "block" : "hidden"} history-wrap`}>
+        {/* <div className={`history-wrap`}> */}
+        <div className="history-list-wrap">
+          <div className="flex mb-3 justify-between">
+            <div className="">搜索历史</div>
+            <div
+              className={`clear-wrap ${historyFilterList.length === 0 ? "cursor-not-allowed" : "cursor-pointer"}`}
+              onClick={deleteAllHistory}
+            >
+              <DeleteOutlined className={`mr-1 text-[#888]`} />
+              清空
+            </div>
+          </div>
+          <Spin spinning={historyLoading}>
+            {historyFilterList.map((i: any, idx: number) => {
+              return (
+                <div
+                  key={`history-row-${idx}`}
+                  className="history-row"
+                  onClick={selectRowHandler(i)}
+                >
+                  {!keyWord ? (
+                    <img src={IconHistory} className="history-icon" />
+                  ) : (
+                    <SearchOutlined className="search-icon" />
+                  )}
+                  <span>{i}</span>
+                  <b onClick={deleteRowHandler(i)}></b>
+                </div>
+              );
+            })}
+            {historyFilterList.length == 0 ? (
+              <div className="text-center">暂无结果</div>
+            ) : null}
+          </Spin>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchInput;

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

@@ -0,0 +1,74 @@
+import SearchInput, { searchInputype } from "./SearchInput";
+import IconTitle from "../assets/icon-title.svg";
+
+const SearchLanding = ({
+  keyWord,
+  historyList,
+  isSearch,
+  isHistoryHide,
+  historyLoading,
+  clickPosition,
+  setKeyWord,
+  keyOnChange,
+  keyOnSearch,
+  deleteHistory,
+  resetClickPosition
+}: any) => {
+  return (
+    <div className="w-full h-[calc(100vh-130px)] min-h-96 flex justify-center mt-12">
+      <div className="w-2/3 search-wrap max-w-[1000px]">
+        <div className=" text-center mb-3">
+          <img src={IconTitle} className="inline-block" />
+        </div>
+        <div className="text-center text-sm text-[#888] mb-6">
+          智能检索，多元信源，精准解答
+        </div>
+        <SearchInput
+          type={searchInputype.LARGE}
+          loading={false}
+          keyWord={keyWord}
+          historyList={historyList}
+          historyLoading={historyLoading}
+          isSearch={isSearch}
+          isHistoryHide={isHistoryHide}
+          clickPosition={clickPosition}
+          keyOnChange={keyOnChange}
+          keyOnSearch={keyOnSearch}
+          deleteHistory={deleteHistory}
+          resetClickPosition={resetClickPosition}
+        />
+        <div className="flex justify-center items-center mb-4"></div>
+        <div className="flex flex-wrap text-sm  text-gray-500  gap-2 mt-4">
+          <div
+            onClick={() => {
+              setKeyWord("你好，你是谁");
+              keyOnSearch("你好，你是谁");
+            }}
+            className="px-5 py-2 rounded border border-gray-300 bg-white  text-sm cursor-pointer hover:border-gray-500 transition-all mr-2 mb-2 select-none"
+          >
+            你好，你是谁
+          </div>
+          <div
+            onClick={() => {
+              setKeyWord("地下钱庄身份信息的识别点的团伙特征是什么");
+              keyOnSearch("地下钱庄身份信息的识别点的团伙特征是什么");
+            }}
+            className="px-5 py-2 rounded border border-gray-300 bg-white  text-sm cursor-pointer hover:border-gray-500 transition-all mr-2 mb-2 select-none"
+          >
+            地下钱庄身份信息的识别点的团伙特征是什么
+          </div>
+          <div
+            onClick={() => {
+              setKeyWord("如何取消原先预订的酒店再重新定");
+              keyOnSearch("如何取消原先预订的酒店再重新定");
+            }}
+            className="px-5 py-2 rounded border border-gray-300 bg-white  text-sm cursor-pointer hover:border-gray-500 transition-all mr-2 mb-2 select-none"
+          >
+            如何取消原先预订的酒店再重新定
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default SearchLanding;