@gientech/modual 2.0.3 → 2.0.5

package/src/modules/search/components/Editor/ui/turn-into-dropdown-menu.tsx

@@ -0,0 +1,160 @@
+import React from "react";
+
+import type { DropdownMenuProps } from "@radix-ui/react-dropdown-menu";
+
+import { BlockquotePlugin } from "@udecode/plate-block-quote/react";
+import {
+  collapseSelection,
+  getNodeEntries,
+  isBlock
+} from "@udecode/plate-common";
+import {
+  focusEditor,
+  useEditorRef,
+  useEditorSelector,
+  ParagraphPlugin
+} from "@udecode/plate-common/react";
+import { HEADING_KEYS } from "@udecode/plate-heading";
+
+import { Icons } from "./icons";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  useOpenState
+} from "./dropdown-menu";
+import { ToolbarButton } from "./toolbar";
+
+const items = [
+  {
+    description: "Paragraph",
+    icon: Icons.paragraph,
+    label: "Paragraph",
+    value: ParagraphPlugin.key
+  },
+  {
+    description: "Heading 1",
+    icon: Icons.h1,
+    label: "Heading 1",
+    value: HEADING_KEYS.h1
+  },
+  {
+    description: "Heading 2",
+    icon: Icons.h2,
+    label: "Heading 2",
+    value: HEADING_KEYS.h2
+  },
+  {
+    description: "Heading 3",
+    icon: Icons.h3,
+    label: "Heading 3",
+    value: HEADING_KEYS.h3
+  },
+  {
+    description: "Quote (⌘+⇧+.)",
+    icon: Icons.blockquote,
+    label: "Quote",
+    value: BlockquotePlugin.key
+  }
+  // {
+  //   value: 'ul',
+  //   label: 'Bulleted list',
+  //   description: 'Bulleted list',
+  //   icon: Icons.ul,
+  // },
+  // {
+  //   value: 'ol',
+  //   label: 'Numbered list',
+  //   description: 'Numbered list',
+  //   icon: Icons.ol,
+  // },
+];
+
+const defaultItem = items.find((item) => item.value === ParagraphPlugin.key)!;
+
+export function TurnIntoDropdownMenu(props: DropdownMenuProps) {
+  const value: string = useEditorSelector((editor) => {
+    let initialNodeType: string = ParagraphPlugin.key;
+    let allNodesMatchInitialNodeType = false;
+    const codeBlockEntries = getNodeEntries(editor, {
+      match: (n) => isBlock(editor, n),
+      mode: "highest"
+    });
+    const nodes = Array.from(codeBlockEntries);
+
+    if (nodes.length > 0) {
+      initialNodeType = nodes[0][0].type as string;
+      allNodesMatchInitialNodeType = nodes.every(([node]) => {
+        const type: string = (node?.type as string) || ParagraphPlugin.key;
+
+        return type === initialNodeType;
+      });
+    }
+
+    return allNodesMatchInitialNodeType ? initialNodeType : ParagraphPlugin.key;
+  }, []);
+
+  const editor = useEditorRef();
+  const openState = useOpenState();
+
+  const selectedItem =
+    items.find((item) => item.value === value) ?? defaultItem;
+  const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton
+          className="lg:min-w-[130px]"
+          isDropdown
+          pressed={openState.open}
+          tooltip="Turn into"
+        >
+          <SelectedItemIcon className="size-5 lg:hidden" />
+          <span className="max-lg:hidden">{selectedItemLabel}</span>
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" className="min-w-0">
+        <DropdownMenuLabel>Turn into</DropdownMenuLabel>
+
+        <DropdownMenuRadioGroup
+          className="flex flex-col gap-0.5"
+          onValueChange={(type) => {
+            // if (type === 'ul' || type === 'ol') {
+            //   if (settingsStore.get.checkedId(IndentListPlugin.key)) {
+            //     toggleIndentList(editor, {
+            //       listStyleType: type === 'ul' ? 'disc' : 'decimal',
+            //     });
+            //   } else if (settingsStore.get.checkedId('list')) {
+            //     toggleList(editor, { type });
+            //   }
+            // } else {
+            //   unwrapList(editor);
+            editor.tf.toggle.block({ type });
+            // }
+
+            collapseSelection(editor);
+            focusEditor(editor);
+          }}
+          value={value}
+        >
+          {items.map(({ icon: Icon, label, value: itemValue }) => (
+            <DropdownMenuRadioItem
+              className="min-w-[180px]"
+              key={itemValue}
+              value={itemValue}
+            >
+              <Icon className="mr-2 size-5" />
+              {label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/modules/search/components/Editor/ui/with-draggables.tsx

@@ -0,0 +1,175 @@
+import type { FC } from 'react';
+
+import { BlockquotePlugin } from '@udecode/plate-block-quote/react';
+import { CodeBlockPlugin } from '@udecode/plate-code-block/react';
+import {
+  ParagraphPlugin,
+  createNodesWithHOC,
+} from '@udecode/plate-common/react';
+import {
+  type WithDraggableOptions,
+  withDraggable as withDraggablePrimitive,
+} from '@udecode/plate-dnd';
+import { ExcalidrawPlugin } from '@udecode/plate-excalidraw';
+import { HEADING_KEYS } from '@udecode/plate-heading';
+import { ColumnPlugin } from '@udecode/plate-layout';
+import {
+  BulletedListPlugin,
+  NumberedListPlugin,
+} from '@udecode/plate-list/react';
+import {
+  ImagePlugin,
+  MediaEmbedPlugin,
+  PlaceholderPlugin,
+} from '@udecode/plate-media';
+import { TablePlugin } from '@udecode/plate-table';
+import { TogglePlugin } from '@udecode/plate-toggle';
+
+import { Draggable, type DraggableProps } from './draggable';
+
+export const withDraggable = (
+  Component: FC,
+  options?: WithDraggableOptions<
+    Partial<Omit<DraggableProps, 'children' | 'editor' | 'element'>>
+  >
+) =>
+  withDraggablePrimitive<DraggableProps>(Draggable, Component, options as any);
+
+export const withDraggablesPrimitive = createNodesWithHOC(withDraggable);
+
+export const withDraggables = (components: any) => {
+  return withDraggablesPrimitive(components, [
+    {
+      keys: [
+        ParagraphPlugin.key,
+        BulletedListPlugin.key,
+        NumberedListPlugin.key,
+      ],
+      level: 0,
+    },
+    {
+      draggableProps: {
+        classNames: {
+          blockToolbarWrapper: 'h-[1.3em]',
+          gutterLeft: 'px-0 pb-1 text-[1.875em]',
+        },
+      },
+      key: HEADING_KEYS.h1,
+    },
+    {
+      draggableProps: {
+        classNames: {
+          blockToolbarWrapper: 'h-[1.3em]',
+          gutterLeft: 'px-0 pb-1 text-[1.5em]',
+        },
+      },
+      key: HEADING_KEYS.h2,
+    },
+    {
+      draggableProps: {
+        classNames: {
+          blockToolbarWrapper: 'h-[1.3em]',
+          gutterLeft: 'pt-[2px] px-0 pb-1 text-[1.25em]',
+        },
+      },
+      key: HEADING_KEYS.h3,
+    },
+    {
+      draggableProps: {
+        classNames: {
+          blockToolbarWrapper: 'h-[1.3em]',
+          gutterLeft: 'pt-[3px] px-0 pb-0 text-[1.1em]',
+        },
+      },
+      keys: [HEADING_KEYS.h4, HEADING_KEYS.h5],
+    },
+    {
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-[3px] px-0 pb-0',
+        },
+      },
+      keys: [ParagraphPlugin.key],
+    },
+    {
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'px-0 pb-0',
+        },
+      },
+      keys: [HEADING_KEYS.h6, BulletedListPlugin.key, NumberedListPlugin.key],
+    },
+    {
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'px-0 pb-0',
+        },
+      },
+      key: BlockquotePlugin.key,
+    },
+    {
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-6 px-0 pb-0',
+        },
+      },
+      key: CodeBlockPlugin.key,
+    },
+    {
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-0 px-0 pb-0',
+        },
+      },
+      key: ImagePlugin.key,
+    },
+    {
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-0 px-0 pb-0',
+        },
+      },
+      key: MediaEmbedPlugin.key,
+    },
+    {
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-0 px-0 pb-0',
+        },
+      },
+      key: ExcalidrawPlugin.key,
+    },
+    {
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-0 px-0 pb-0',
+        },
+      },
+      key: TogglePlugin.key,
+    },
+    {
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-0 px-0 pb-0',
+        },
+      },
+      key: ColumnPlugin.key,
+    },
+    {
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-3 px-0 pb-0',
+        },
+      },
+      key: PlaceholderPlugin.key,
+    },
+    {
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-3 px-0 pb-0',
+        },
+      },
+      key: TablePlugin.key,
+    },
+  ]);
+};

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

@@ -0,0 +1,287 @@
+import React, { useState, useMemo, useEffect } from "react";
+import { uid } from "uid";
+import { Image, Checkbox, Pagination } from "antd";
+
+import { CaretRightOutlined, CaretDownOutlined } from "@ant-design/icons";
+import { createPlateEditor, Plate } from "@udecode/plate-common/react";
+import { deserializeMd } from "@udecode/plate-markdown";
+
+import { displayerEditor } from "./Editor/plugins/displayer.ts";
+import { validateAndFixNodes } from "./Editor/ChatViewEditor";
+import { isMarkdownTableData, tableValue } from "./Editor/ui/tableValue";
+import { Editor } from "./Editor";
+
+import ImageGroupView from "./ImageGroupView";
+
+import xls from "../assets/xls.png";
+import txt from "../assets/txt.png";
+import doc from "../assets/doc.png";
+import pdf from "../assets/pdf.png";
+import ppt from "../assets/ppt.png";
+import "../style.less";
+
+export const FILEIMG: any = {
+  docx: doc,
+  doc: doc,
+  pdf: pdf,
+  xls: xls,
+  xlsx: xls,
+  ppt: ppt,
+  pptx: ppt,
+  pub: ppt,
+  txt: txt
+};
+interface FileListProps {
+  selectFile: string;
+  selectBlock: string;
+  fileList: Array<any>;
+  selectFileHandler: (fileId: string) => void;
+  selectBlockHandler: (blockId: string) => void;
+}
+const pageSize = 10;
+const FileListNew: React.FC<FileListProps> = ({
+  fileList,
+  selectFile,
+  selectBlock,
+  selectFileHandler,
+  selectBlockHandler
+}) => {
+  const [isOpenList, setIsOpenList] = useState<boolean>(false);
+  const [checkedFileList, setCheckedFileList] = useState<Array<string>>([]);
+  const [pageNo, setPageNo] = useState<number>(1);
+  const [total, setTotal] = useState<number>(0);
+
+  const totalChunkList = useMemo(() => {
+    if (fileList && fileList.length) {
+      setCheckedFileList(fileList.map((i: any) => i.url));
+
+      const list = fileList.map((i: any) => {
+        const { fileExtension, fileName, list, url } = i;
+        return (list || []).map((l: any) =>
+          Object.assign({}, l, {
+            fileExtension,
+            fileName,
+            url
+          })
+        );
+      });
+      console.log("list:", list);
+      return [...list.flat(Infinity)];
+    }
+    return [];
+  }, [fileList]);
+
+  const chundList = useMemo(() => {
+    const list = totalChunkList.filter((i: any) =>
+      checkedFileList.includes(i.url)
+    );
+    if (list.length) {
+      setTotal(list.length);
+      let _pageNo = pageNo;
+      if (_pageNo > 1 && (_pageNo - 1) * pageSize > list.length) {
+        _pageNo = 1;
+      }
+      const curList = list.slice(pageSize * (_pageNo - 1), _pageNo * pageSize);
+      return curList.length ? [...curList] : [];
+    }
+    return [];
+  }, [totalChunkList, pageNo, checkedFileList]);
+
+  const selectThisFile = (fileId: string) => () => {
+    if (selectFile !== fileId) {
+      selectFileHandler(fileId);
+    }
+  };
+
+  const selectThisBlock = (fileId: string, blockId: string) => () => {
+    if (selectBlock !== blockId) {
+      fileId !== selectFile && selectFileHandler(fileId);
+      selectBlockHandler(blockId);
+    }
+  };
+  const changeOpenSta = () => {
+    setIsOpenList(!isOpenList);
+  };
+
+  const checkedFileListOnChange = (url: string) => (e: any) => {
+    const _checkedFileList = [...checkedFileList];
+    if (e.target.checked) {
+      setCheckedFileList(Array.from(new Set([..._checkedFileList, url])));
+    } else {
+      setCheckedFileList(_checkedFileList.filter((i) => i !== url));
+    }
+  };
+
+  const pageNoOnChangeHandler = (pageNo: number) => {
+    setPageNo(pageNo);
+  };
+
+  const traverseTree = (tree: any[]) => {
+    function traverseTreeNode(node: any) {
+      if (node.children && node.children.length > 0) {
+        node.children.forEach((child: any, index: any) => {
+          if (child.text) {
+            if (isMarkdownTableData(child.text)) {
+              node.children[index] = tableValue(node.children[0].text)[0];
+            }
+          }
+          traverseTreeNode(child); // 递归遍历子节点
+        });
+      }
+    }
+
+    // 从根节点开始遍历整个树
+    tree.forEach((node, index) => {
+      traverseTreeNode(node);
+    });
+  };
+
+  const WithPlate = ({ id, data, className = "", type }: any) => {
+    const tempEditor = createPlateEditor({
+      plugins: [...displayerEditor({}).plugins]
+    });
+
+    let deserializedData = deserializeMd(tempEditor, data || "");
+    if (type === "table") {
+      deserializedData = validateAndFixNodes(deserializedData);
+      traverseTree(deserializedData);
+    }
+
+    const editor = createPlateEditor({
+      ...displayerEditor({}),
+      id: id,
+      shouldNormalizeEditor: true,
+      value: deserializedData
+    });
+
+    return (
+      <Plate editor={editor}>
+        <Editor readOnly className={className} />
+      </Plate>
+    );
+  };
+
+  return (
+    <div className="refrence-list-wrap text-[#2a2a2a] text-sm">
+      <div className="bg-white rounded-lg mb-3 overflow-hidden select-none">
+        <div
+          className={`px-5 py-3 min-h-8 flex list-title-wrap justify-between ${isOpenList ? "open-list" : ""}`}
+        >
+          <div className="text-[#2a2a2a]">
+            已筛选：<span className="mx-1">{checkedFileList.length}</span>个文件
+          </div>
+          <div
+            className={`${isOpenList ? "open-btn" : "close-btn"} opener-btn`}
+          >
+            <span onClick={changeOpenSta}>
+              {isOpenList ? "收起" : "展开"}
+              {isOpenList ? <CaretDownOutlined /> : <CaretRightOutlined />}
+            </span>
+          </div>
+        </div>
+        {isOpenList ? (
+          <div className="list-wrap px-5 py-4">
+            {fileList.length === 0 ? (
+              <div className="text-center text-[#555] text-xs">暂无文件</div>
+            ) : (
+              (fileList || []).map((i: any, idx: number) => {
+                const { fileExtension, fileName, list, url } = i;
+                return (
+                  <div key={`file-name-row-${idx}`}>
+                    <Checkbox
+                      onChange={checkedFileListOnChange(url)}
+                      checked={checkedFileList.includes(url)}
+                    >
+                      <div className="text-ellipsis break-words line-clamp-1 overflow-hidden">
+                        {fileName}.{fileExtension}
+                      </div>
+                    </Checkbox>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        ) : null}
+      </div>
+      {(chundList || []).map((i: any) => {
+        const {
+          fileExtension,
+          fileName,
+          url,
+          page_content,
+          id,
+          pic_url_list,
+          metadata
+        } = i;
+        const { chunk_type, image_path } = metadata;
+        return (
+          <div
+            key={`chunk-row-${id}`}
+            className={`rounded-lg bg-white mb-3 overflow-hidden text-sm chunk-wrap ${selectBlock === id ? "select-chunk" : ""}`}
+          >
+            <div
+              className="px-5 py-4 chatView"
+              style={{ borderBottom: "1px solid #EFF5FF" }}
+              onClick={selectThisBlock(url, id)}
+            >
+              {chunk_type === "text" ? (
+                <span>{page_content}</span>
+              ) : (
+                <div className={`${image_path ? "flex" : ""}`}>
+                  {image_path ? (
+                    <Image
+                      src={image_path}
+                      className="object-contain max-w-[126px] max-h-[126px]"
+                    />
+                  ) : null}
+
+                  <div
+                    className={`text-sm ${image_path ? "w-[calc(100%-150px)] ml-[10px]" : ""}`}
+                  >
+                    <WithPlate
+                      id={uid(32)}
+                      className="px-0 py-0 text-[14px] text-[#2a2a2a] overflow-x-hidden bg-transparent"
+                      data={page_content}
+                      type={chunk_type}
+                    />
+                  </div>
+                  {pic_url_list && pic_url_list.length ? (
+                    <div className="flex flex-wrap mt-[10px]">
+                      <ImageGroupView imageList={pic_url_list} />
+                    </div>
+                  ) : null}
+                </div>
+              )}
+            </div>
+            <div className="relative pl-11 pt-3 pr-5 pb-4 text-xs text-[#555] bg-[#fafcff]">
+              <img
+                src={FILEIMG[fileExtension] || FILEIMG["doc"]}
+                width={16}
+                height={16}
+                className="absolute left-5 top-[10px]"
+              />
+              <div
+                className={`text-ellipsis break-words line-clamp-1 overflow-hidden file-name-link ${selectFile === url ? "select-file" : ""}`}
+                onClick={selectThisFile(url)}
+              >
+                {fileName}.{fileExtension}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+      {chundList.length ? (
+        <div className="bg-white px-5 py-4 mb-1 rounded-lg overflow-hidden">
+          <Pagination
+            defaultCurrent={pageNo}
+            total={total}
+            pageSize={pageSize}
+            align="end"
+            onChange={pageNoOnChangeHandler}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+};
+export default FileListNew;

package/src/modules/search/components/ImageGroupView/index.tsx

@@ -0,0 +1,85 @@
+import { Space, Image } from "antd";
+import { useState } from "react";
+import {
+  DownloadOutlined,
+  LeftOutlined,
+  RightOutlined,
+  RotateLeftOutlined,
+  RotateRightOutlined,
+  SwapOutlined,
+  UndoOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined
+} from "@ant-design/icons";
+import { dealMinioUrl } from "../../utils.ts";
+
+const ImageGroupView = ({ imageList, h }: any) => {
+  const [current, setCurrent] = useState(0);
+
+  const onDownload = () => {
+    const url = imageList[current];
+    const suffix = url.slice(url.lastIndexOf("."));
+    const filename = Date.now() + suffix;
+    fetch(url)
+      .then((response) => response.blob())
+      .then((blob) => {
+        const blobUrl = URL.createObjectURL(new Blob([blob]));
+        const link = document.createElement("a");
+        link.href = blobUrl;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        URL.revokeObjectURL(blobUrl);
+        link.remove();
+      });
+  };
+  return (
+    <Image.PreviewGroup
+      preview={{
+        toolbarRender: (
+          _,
+          {
+            transform: { scale },
+            actions: {
+              onActive,
+              onFlipY,
+              onFlipX,
+              onRotateLeft,
+              onRotateRight,
+              onZoomOut,
+              onZoomIn,
+              onReset
+            }
+          }
+        ) => (
+          <Space size={12} className="toolbar-wrapper">
+            <LeftOutlined onClick={() => onActive?.(-1)} />
+            <RightOutlined onClick={() => onActive?.(1)} />
+            <DownloadOutlined onClick={onDownload} />
+            <SwapOutlined rotate={90} onClick={onFlipY} />
+            <SwapOutlined onClick={onFlipX} />
+            <RotateLeftOutlined onClick={onRotateLeft} />
+            <RotateRightOutlined onClick={onRotateRight} />
+            <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
+            <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
+            <UndoOutlined onClick={onReset} />
+          </Space>
+        ),
+        onChange: (index) => {
+          setCurrent(index);
+        }
+      }}
+    >
+      {(imageList || []).map((item: any, index: number) => (
+        <Image
+          key={index}
+          src={dealMinioUrl(item)}
+          height={h || 60}
+          className="object-contain mr-[10px]"
+        />
+      ))}
+    </Image.PreviewGroup>
+  );
+};
+
+export default ImageGroupView;