@gientech/modual 1.2.8 → 1.2.9-fix

package/src/modules/chat/referenceCom/DeleteModal.tsx

@@ -0,0 +1,75 @@
+import { Button, ConfigProvider, Form, Input, Modal } from "antd";
+import { useForm } from "antd/es/form/Form";
+import { useEffect } from "react";
+
+export const DeleteModal = ({
+  isModalOpen,
+  handleOk,
+  handleCancel,
+  data
+}: any) => {
+  const modalStyles = {
+    header: {
+      height: "60px",
+      borderBottom: "1px solid #F0F0F0",
+      display: "flex",
+      paddingLeft: "24px",
+      alignItems: "center",
+      marginBottom: "16px"
+    },
+    title: { fontSize: "16px" },
+    body: { padding: "0 24px" },
+    mask: {},
+    footer: { marginTop: "0px", padding: "0 24px 16px 24px" },
+    content: { padding: 0 }
+  };
+  const [rename_form] = useForm();
+  useEffect(() => {
+    if (!isModalOpen) {
+      rename_form.resetFields();
+      return;
+    }
+    rename_form.setFieldValue("new_name", data?.label);
+  }, [data, isModalOpen]);
+  return (
+    <ConfigProvider
+      modal={{
+        styles: modalStyles
+      }}
+    >
+      <Modal
+        title={<div className="text-[16px]">删除会话</div>}
+        closeIcon={null}
+        open={isModalOpen}
+        width={520}
+        centered
+        className="[&:[.ant-modal-content]]:bg-red"
+        footer={
+          <div className="mt-[16px] flex justify-end">
+            <Button
+              children="取消"
+              onClick={handleCancel}
+              className="mr-[8px]"
+            />
+            <Button
+              children="确认"
+              onClick={async () => {
+                try {
+                  const data = await rename_form.validateFields();
+                  handleOk("ok_remove", data);
+                } catch (e) {
+                  console.log(e);
+                  return;
+                }
+              }}
+              type="primary"
+              className="border-none"
+            />
+          </div>
+        }
+      >
+        <div>{`确定要删除会话「${data.label}」吗？删除后无法恢复。`}</div>
+      </Modal>
+    </ConfigProvider>
+  );
+};

package/src/modules/chat/referenceCom/DrawerContent.tsx

@@ -0,0 +1,136 @@
+import { uid } from 'uid';
+import { useMemo } from 'react';
+import { dealMinioUrl, getFileName, getFilePath, getFileType, getInitialZoom } from '../utils';
+import { GientechStreamReader } from '../../streamFilesReader';
+export const DrawerContent = ({
+  content,
+  onClose,
+  token,
+}: {
+  content: {
+    file_source: string;
+    contents: any[];
+    curMark: string;
+    file_type: string;
+    title: string;
+    metadata: any;
+    pdfPages: number | undefined;
+    url: string;
+    parse_url: string;
+  } | null;
+  onClose: any;
+  token: string;
+}) => {
+  const getAnnotations: any = (content: any) => {
+    if (!content?.metadata) return;
+    const fileType = getFileType(content, '');
+    const { page_number, page_size, position, offset, chunk_type } = content.metadata;
+    if (fileType === 'markdown_table') {
+      if (offset?.length) {
+        return {
+          annotations: [{ id: uid(), offsets: offset }],
+          initialPage: 1,
+        };
+      } else {
+        return {};
+      }
+    } else {
+      if (!page_size || !position) {
+        console.log('%c缺少文件size或者文件坐标', 'color: red');
+        return {};
+      }
+      const pageSizes = Array.isArray(page_size) ? page_size : JSON.parse(page_size);
+      if (!pageSizes.length) {
+        console.log('%c缺少文件size', 'color: red');
+        return {};
+      }
+      const positions = Array.isArray(position) ? position : JSON.parse(position);
+      if (!positions.length || !page_number) {
+        console.log('%c缺少文件坐标或者文件页数', 'color: red');
+        return {};
+      }
+      const anno = positions.map((item: any, index: number) => {
+        return {
+          id: uid(),
+          pageNumber: page_number[index],
+          x: +(item[0][0] / pageSizes[0][0]).toFixed(4),
+          y: +(item[0][1] / pageSizes[0][1]).toFixed(4),
+          width: +((item[1][0] - item[0][0]) / pageSizes[0][0]).toFixed(4),
+          height: +((item[2][1] - item[0][1]) / pageSizes[0][1]).toFixed(4),
+          content: '',
+          color: chunk_type === 'image' ? '#60f74f' : '#4FC3F7',
+        };
+      });
+      return { annotations: anno, initialPage: page_number[0] };
+    }
+  };
+
+  const curData = useMemo(() => {
+    console.log('content88888888888', content);
+    if (content && token) {
+      console.log('content999', content);
+      const { annotations, initialPage } = getAnnotations(content);
+      const curContent = {
+        ...content,
+        metadata: {
+          source: content?.metadata?.source || content.parse_url || content.url,
+          page_size: content?.metadata?.page_size,
+        },
+      };
+
+      const filePath = dealMinioUrl(getFilePath(curContent));
+      return {
+        filePath,
+        fileName: getFileName(curContent),
+        fileType: getFileType(curContent, filePath),
+        totalPages: curContent.pdfPages || 0,
+        token,
+        annotations,
+        initialPage,
+        initialZoom: getInitialZoom(598, curContent),
+      };
+    } else {
+      return {};
+    }
+  }, [content]);
+
+  const renderFileCom = useMemo(() => {
+    if (!curData.filePath) return <></>;
+    console.log('curData', curData);
+    return (
+      <GientechStreamReader
+        initialZoom={curData.initialZoom || 100}
+        convertedFilePath={curData.filePath}
+        fileName={curData.fileName}
+        fileType={curData.fileType}
+        initialPage={curData.initialPage}
+        totalPages={curData.totalPages}
+        authorization={curData.token}
+        annotations={curData.annotations}
+        streamApiUrl="/proxy/index/knowledgeBase/file/stream"
+        eventsEmit={name => {
+          switch (name) {
+            case 'viewer:close':
+              onClose();
+              break;
+          }
+        }}
+        tools={{
+          close: true,
+        }}
+      />
+    );
+  }, [curData]);
+
+  return (
+    <div
+      style={{
+        fontFamily: 'Source Han Sans CN',
+        fontSize: '12px',
+      }}
+      className="h-full w-full"
+    >
+      {renderFileCom}
+    </div>
+  );
+};

package/src/modules/chat/referenceCom/DrawerDatabase.tsx

@@ -0,0 +1,110 @@
+import { getUrlPrefix } from '../utils';
+import { Empty, Table, Pagination } from 'antd';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+
+const DrawerDatabase = ({ curFileInfo }: any) => {
+  const [pageNo, setPageNo] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [columns, setColumn] = useState([]);
+  const [dataList, setDataList] = useState([]);
+  const [totalData, setTotalData] = useState(0);
+
+  useEffect(() => {
+    const url = curFileInfo?.metadata?.fetchUrl || curFileInfo?.fetchUrl;
+    if (url) {
+      toGetDataBaseData(url);
+    }
+  }, [curFileInfo, pageNo, pageSize]);
+
+  const getDataBaseData = async ({ url, params }: any) => {
+    try {
+      const res = await axios.get(
+        `${getUrlPrefix()}${url}?${new URLSearchParams(params).toString()}`
+      );
+      const data = res?.data;
+      if (data) {
+        const { columns, dataList, totalData } = data;
+        setColumn(
+          (columns?.slice(1) || []).map((col: any) => ({
+            title: col.businessName,
+            dataIndex: col.physicalName,
+            key: col.physicalName,
+          }))
+        );
+        setDataList(dataList || []);
+        setTotalData(totalData || []);
+      }
+    } catch (error) {
+      console.log('error', error);
+    }
+  };
+
+  const toGetDataBaseData = async (url: string) => {
+    getDataBaseData({
+      url: `${url}`,
+      params: {
+        pageNo,
+        pageSize,
+      },
+    });
+  };
+
+  const renderTitle = () => {
+    const { file, metadata } = curFileInfo;
+    const { dataSourceType, databaseName, tableName, businessTableName } = metadata;
+    if (dataSourceType == 'DataTable') {
+      return `${databaseName} - ${businessTableName}`;
+    }
+
+    if (dataSourceType == 'DirectDB') {
+      return `${databaseName} - ${tableName}`;
+    }
+
+    return file;
+  };
+
+  return (
+    <div>
+      <div className="h-[52px] leading-[52px] font-bold text-[16px] px-[15px] overflow-hidden border-t-none border-l-none border-b-[1px] border-solid border-[rgb(222,226,230)]">
+        {renderTitle()}
+      </div>
+
+      {columns?.length > 0 ? (
+        <div>
+          <div className="p-4 overflow-auto h-[calc(100vh-120px)]">
+            <Table
+              columns={columns}
+              dataSource={dataList}
+              pagination={false}
+              scroll={{ x: 'max-content' }}
+            />
+          </div>
+          <div className="flex justify-end px-[18px]">
+            <Pagination
+              current={pageNo}
+              pageSize={pageSize}
+              responsive
+              simple
+              total={totalData}
+              showSizeChanger
+              showQuickJumper
+              onChange={(page, size) => {
+                setPageNo(page);
+                setPageSize(size || 10);
+              }}
+              onShowSizeChange={(current, size) => {
+                setPageNo(1);
+                setPageSize(size);
+              }}
+            />
+          </div>
+        </div>
+      ) : (
+        <Empty />
+      )}
+    </div>
+  );
+};
+
+export default DrawerDatabase;

package/src/modules/chat/referenceCom/DrawerGraphPreview.tsx

@@ -0,0 +1,86 @@
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { KnowledgeGraphPreview, registerPreviewViewer } from '@mxmweb/nodegraph';
+import DrawerTitle from './DrawerTitle';
+registerPreviewViewer();
+
+const DrawerGraphPreview = ({
+  curFileInfo,
+  onClose,
+  token,
+}: {
+  curFileInfo: any;
+  onClose: any;
+  token: string;
+}) => {
+  const config = {
+    title: '',
+    subtitle: '',
+    backgroundColor: '#f8f9fa',
+    showGrid: true,
+    showLegend: false,
+    showTooltip: true,
+    showFullscreen: false,
+    showMinimap: false,
+  };
+  const [graphList, setGraphList] = useState<any>({
+    nodeList: [],
+    edgeList: [],
+  });
+
+  useEffect(() => {
+    console.log('curFileInfo', curFileInfo);
+  }, [curFileInfo]);
+
+  const getGraphData = async (curFileInfo: any) => {
+    if (!curFileInfo?.id || !curFileInfo?.cyphers || !curFileInfo?.fetchUrl) return;
+    try {
+      const { cyphers, fetchUrl, id } = curFileInfo || {};
+      console.log('getGraphData params', cyphers, fetchUrl, id);
+
+      const res = await axios.post(
+        fetchUrl,
+        { cyphers, ontologyId: id },
+        {
+          headers: { Authorization: token },
+        }
+      );
+      console.log('getGraphData res', res);
+      setGraphList(res?.data || {});
+    } catch (error) {
+      console.log('error', error);
+    }
+  };
+  useEffect(() => {
+    getGraphData(curFileInfo);
+  }, [curFileInfo]);
+
+  return (
+    <div>
+      <DrawerTitle title={curFileInfo?.graphName} setOpen={onClose} />
+      <div style={{ width: '100%', height: 'calc(100vh - 60px)' }}>
+        <KnowledgeGraphPreview
+          centerNode={{
+            vid: curFileInfo?.traceNode?.vid,
+          }}
+          data={graphList}
+          layout={{ type: 'force', linkDistance: 190 }}
+          title={config.title}
+          subtitle={config.subtitle}
+          backgroundColor={config.backgroundColor}
+          showGrid={config.showGrid}
+          showLegend={config.showLegend}
+          showTooltip={config.showTooltip}
+          showFullscreen={config.showFullscreen}
+          showMinimap={config.showMinimap}
+          customPlugins={{}}
+          onReady={(graph: any) => {
+            console.log('KnowledgeGraphPreview ready:', graph);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DrawerGraphPreview;

package/src/modules/chat/referenceCom/DrawerPreview.tsx

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import { dealMinioUrl, getFileName, getFilePath, getFileType, getInitialZoom } from '../utils';
+import { GientechStreamReader } from '../../streamFilesReader';
+
+const DrawerPreview = ({
+  curFileInfo,
+  onClose,
+  token,
+}: {
+  curFileInfo: any;
+  onClose: any;
+  token: string;
+}) => {
+  const curData = useMemo(() => {
+    if (curFileInfo && token) {
+      console.log('content999', curFileInfo);
+      const content = {
+        file_source: curFileInfo.url || curFileInfo.parse_url || curFileInfo.parsedFilePath,
+        file_type: curFileInfo.file_type,
+        metadata: {
+          source: curFileInfo.filePath || curFileInfo.url || curFileInfo?.metadata?.source || '',
+          page_size: curFileInfo?.metadata?.page_size,
+        },
+        pdfPages: curFileInfo.pdfPages,
+      };
+      const filePath = dealMinioUrl(getFilePath(content));
+      return {
+        filePath,
+        fileName: getFileName(content),
+        fileType: getFileType(content, filePath),
+        totalPages: content.pdfPages || 0,
+        token,
+        initialZoom: getInitialZoom(document.getElementById('pdfBox')?.clientWidth || 0, content),
+      };
+    } else {
+      return {};
+    }
+  }, [curFileInfo]);
+
+  const renderFileCom = useMemo(() => {
+    console.log('curData', curData);
+    if (!curData.filePath) return <></>;
+    return (
+      <GientechStreamReader
+        initialZoom={curData.initialZoom || 100}
+        convertedFilePath={curData.filePath}
+        fileName={curData.fileName}
+        fileType={curData.fileType}
+        initialPage={1}
+        totalPages={curData.totalPages}
+        authorization={curData.token}
+        streamApiUrl="/proxy/index/knowledgeBase/file/stream"
+        eventsEmit={type => {
+          switch (type) {
+            case 'viewer:close':
+              onClose();
+              break;
+          }
+        }}
+        tools={{
+          close: true,
+        }}
+      />
+    );
+  }, [curData]);
+  return (
+    <div id="pdfBox" className="h-full overflow-y-auto">
+      {renderFileCom}
+    </div>
+  );
+};
+
+export default DrawerPreview;

package/src/modules/chat/referenceCom/DrawerTitle.tsx

@@ -0,0 +1,26 @@
+import Close from '../../../assets/img/close.png';
+const DrawerTitle = ({ title, setOpen }: { title: string; setOpen: (arg: boolean) => void }) => {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '60px',
+        borderBottom: '1px solid #EBEBEB',
+        padding: '20px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        fontSize: '16px',
+        fontWeight: 600,
+      }}
+    >
+      <div>{title}</div>
+      <img
+        src={Close}
+        style={{ width: '16px', height: '16px', cursor: 'pointer' }}
+        onClick={() => setOpen(false)}
+      />
+    </div>
+  );
+};
+export default DrawerTitle;

package/src/modules/chat/referenceCom/RenameModal.tsx

@@ -0,0 +1,86 @@
+import { BorderBottomOutlined } from "@ant-design/icons";
+import { Button, ConfigProvider, Form, Input, Modal } from "antd";
+import { useForm } from "antd/es/form/Form";
+import { useEffect } from "react";
+
+export const RenameModal = ({
+  isModalOpen,
+  handleOk,
+  handleCancel,
+  data
+}: any) => {
+  const modalStyles = {
+    header: {
+      height: "60px",
+      borderBottom: "1px solid #F0F0F0",
+      display: "flex",
+      paddingLeft: "24px",
+      alignItems: "center",
+      marginBottom: "16px"
+    },
+    title: { fontSize: "16px" },
+    body: { padding: "0 24px" },
+    mask: {},
+    footer: { marginTop: "0px", padding: "0 24px 16px 24px" },
+    content: { padding: 0 }
+  };
+  const [rename_form] = useForm();
+  useEffect(() => {
+    if (!isModalOpen) {
+      rename_form.resetFields();
+      return;
+    }
+    rename_form.setFieldValue("new_name", data?.label);
+  }, [data, isModalOpen]);
+  return (
+    <ConfigProvider
+      modal={{
+        styles: modalStyles
+      }}
+    >
+      <Modal
+        title={<div className="text-[16px]">编辑会话名称</div>}
+        closeIcon={null}
+        open={isModalOpen}
+        width={520}
+        centered
+        className="[&:[.ant-modal-content]]:bg-red"
+        footer={
+          <div className="mt-[16px] flex justify-end">
+            <Button
+              children="取消"
+              onClick={handleCancel}
+              className="mr-[8px]"
+            />
+            <Button
+              children="确认"
+              onClick={async () => {
+                try {
+                  const data = await rename_form.validateFields();
+                  handleOk("ok_rename", data);
+                } catch (e) {
+                  console.log(e);
+                  return;
+                }
+              }}
+              type="primary"
+              className="border-none"
+            />
+          </div>
+        }
+      >
+        <Form form={rename_form}>
+          <Form.Item
+            name="new_name"
+            rules={[
+              { required: true, message: "请输入" },
+              { max: 100, message: "最大字数限制100" }
+            ]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </ConfigProvider>
+  );
+};

package/src/modules/chat/referenceCom/TagCom.tsx

@@ -0,0 +1,30 @@
+import { bgColor, textColor } from '../ReferenceBar';
+
+const TagCom = ({ i, item, j, clickTag }: any) => {
+  console.log('j in tag', j);
+  console.log('i in tag', i);
+  console.log('item in tag', item);
+
+  return (
+    <div
+      key={j.id}
+      style={{
+        minWidth: '16px',
+        height: '16px',
+        backgroundColor: bgColor[item.key],
+        margin: '0 4px',
+        color: textColor[item.key],
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: '2px',
+        fontSize: '12px',
+        cursor: 'pointer',
+      }}
+      onClick={() => clickTag && clickTag(i, j, item)}
+    >
+      {j.index}
+    </div>
+  );
+};
+export default TagCom;

package/src/modules/chat/style.less

@@ -0,0 +1,3 @@
+.listWrap .listBox .listItemBox:hover {
+  background-color: #eaf4fd;
+}