@zero-library/chat-copilot 3.1.5 → 3.1.6

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { CloudUploadOutlined, PaperClipOutlined, createFromIconfontCN, LoadingOutlined, EnterOutlined, DownloadOutlined, CloseOutlined, PlayCircleOutlined, CopyOutlined, DotChartOutlined, LikeOutlined, DislikeOutlined, ToolOutlined, SearchOutlined, UpOutlined, DownOutlined, PlusOutlined, CommentOutlined, RedoOutlined, DeleteOutlined, ClockCircleOutlined, CheckCircleOutlined, FileImageOutlined, FilePdfOutlined, FileWordOutlined, FileExcelOutlined, FilePptOutlined, FileZipOutlined, FileTextOutlined, FileUnknownOutlined } from '@ant-design/icons';
 import { Attachments, Sender, FileCard, Bubble, Think, XProvider, Mermaid, CodeHighlighter, Welcome, Prompts, Conversations } from '@ant-design/x-v2';
-import { useRefState, useDebounce, useSyncInput, createTokenManager, isEmptyObj, markdownToText, RenderWrapper, shouldRender, isFunction, downloadFile, LuyaFilePreview, MarkdownEditor, useDeepEffect, isObject, useWebSocket, isNullOrUnDef, isNumber, getFileSuffixName, FileIcon, copyText, LazyComponent, isBoolean, UserAvatar, htmlToMarkdown, buildUrlParams, isExternal, deepCopy, transforms, deepMerge, createRequest, HttpStatus, isArray, isString, transform, emit, getWebSocketUrl, safeParseJson } from '@zero-library/common';
-import { App, Badge, Button, Flex, Typography, Tooltip, Layout, Tag, Spin, Splitter, Cascader, Image as Image$1, Popover, Skeleton, Alert, theme, Collapse, Divider as Divider$1, Select as Select$1, Avatar, Space, Drawer, Empty, Modal, Checkbox, Input, message, List, Card, Table, Progress as Progress$1, Switch as Switch$1 } from 'antd';
+import { useRefState, useDebounce, createTokenManager, useSyncInput, isEmptyObj, markdownToText, RenderWrapper, shouldRender, isFunction, downloadFile, LuyaFilePreview, MarkdownEditor, useDeepEffect, isObject, useWebSocket, isNullOrUnDef, isNumber, getFileSuffixName, FileIcon, copyText, LazyComponent, isBoolean, UserAvatar, htmlToMarkdown, buildUrlParams, isExternal, deepCopy, transforms, deepMerge, createRequest, HttpStatus, isArray, isString, transform, emit, getWebSocketUrl, safeParseJson } from '@zero-library/common';
+import { App, Badge, Button, Flex, Typography, Tooltip, Layout, Tag, Spin, Splitter, Image as Image$1, Popover, Skeleton, Alert, theme, Collapse, Divider as Divider$1, Select as Select$1, Avatar, Space, Drawer, Empty, Modal, Checkbox, Input, message, List, Card, Table, Progress as Progress$1, Switch as Switch$1 } from 'antd';
 import * as React10 from 'react';
 import React10__default, { createContext, forwardRef, useRef, useEffect, useImperativeHandle, useMemo, useCallback, memo, useState, useContext, useLayoutEffect } from 'react';
 import { useSnapshot, proxy } from 'valtio';
@@ -129,7 +129,10 @@ var Attachments_default = forwardRef(({ fileUpload, fileUploadConfig, fileList =
       const uploadedFile = data[0];
       let previewUrl = uploadedFile.id;
       if (uploadedFile.conversationId && uploadedFile.path) {
-        previewUrl = chatStore.config.services.request.getPreviewUrl(uploadedFile.conversationId, uploadedFile.path);
+        previewUrl = chatStore.config.services.request.getPreviewUrl({
+          path: uploadedFile.path,
+          workspaceId: uploadedFile.conversationId
+        });
       }
       setAttachedFiles(
         getAttachedFiles().map((f) => {
@@ -222,8 +225,12 @@ var index_module_default = {
   promptEditorPlaceholder: "index_module_promptEditorPlaceholder",
   resourceSelect: "index_module_resourceSelect",
   fileMenu: "index_module_fileMenu",
+  fileMenuGroup: "index_module_fileMenuGroup",
+  fileMenuGroupTitle: "index_module_fileMenuGroupTitle",
+  fileMenuEmpty: "index_module_fileMenuEmpty",
   fileMenuItem: "index_module_fileMenuItem",
   fileMenuItemActive: "index_module_fileMenuItemActive",
+  fileIcon: "index_module_fileIcon",
   fileName: "index_module_fileName",
   resourceTag: "index_module_resourceTag"
 };
@@ -231,6 +238,16 @@ var index_module_default = {
 // src/core/constants.ts
 var CONV_MODE = {
   PROD: 1};
+var TOKEN_KEY = "NS-TOKEN";
+var tokenManager = createTokenManager({
+  key: TOKEN_KEY
+});
+var redirectUrl = () => {
+  const path = localStorage.getItem("SIGNPATH");
+  emit("jumpLink", { url: `/uc${path || "/sign-in"}` });
+};
+
+// src/core/utils.ts
 var classifyTime = (timestamp) => {
   const now = dayjs();
   const target = dayjs(timestamp);
@@ -277,27 +294,52 @@ var getFileIcon = (extension, fontSize = 24) => {
   }
   return createIcon(FileUnknownOutlined, "#94a3b8");
 };
-function FilePickerMenu({
-  options,
+var getFileUrl = (params, baseUrl, url) => {
+  const data = {
+    [TOKEN_KEY]: tokenManager.get(),
+    workspaceType: "conversation" /* CONVERSATION */,
+    ...params
+  };
+  return buildUrlParams(data, url || `${baseUrl}/files/access`);
+};
+function GroupPicker({
+  groups,
   selectedIndex,
   onSelect,
   onHover
 }) {
-  return /* @__PURE__ */ jsx("div", { className: index_module_default.fileMenu, role: "listbox", children: options.map((option, index) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "option",
-      "aria-selected": index === selectedIndex,
-      className: `${index_module_default.fileMenuItem} ${index === selectedIndex ? index_module_default.fileMenuItemActive : ""}`,
-      onMouseEnter: () => onHover(index),
-      onClick: () => onSelect(option),
-      children: [
-        /* @__PURE__ */ jsx("span", { children: getFileIcon(option.ext || getFileSuffixName(option.label), 14) }),
-        /* @__PURE__ */ jsx("span", { className: index_module_default.fileName, children: option.label })
-      ]
-    },
-    option.value
-  )) });
+  const itemRefs = useRef([]);
+  let currentIndex = -1;
+  useEffect(() => {
+    itemRefs.current[selectedIndex]?.scrollIntoView({
+      block: "nearest"
+    });
+  }, [groups, selectedIndex]);
+  return /* @__PURE__ */ jsx("div", { className: index_module_default.fileMenu, role: "listbox", children: groups.map(({ group, options }) => /* @__PURE__ */ jsxs("div", { className: index_module_default.fileMenuGroup, children: [
+    /* @__PURE__ */ jsx("div", { className: index_module_default.fileMenuGroupTitle, children: group.label }),
+    options.length ? options.map((option) => {
+      currentIndex += 1;
+      const optionIndex = currentIndex;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: (element) => {
+            itemRefs.current[optionIndex] = element;
+          },
+          role: "option",
+          "aria-selected": optionIndex === selectedIndex,
+          className: `${index_module_default.fileMenuItem} ${optionIndex === selectedIndex ? index_module_default.fileMenuItemActive : ""}`,
+          onMouseEnter: () => onHover(optionIndex),
+          onClick: () => onSelect(group, option),
+          children: [
+            option.ext && /* @__PURE__ */ jsx("span", { className: index_module_default.fileIcon, children: getFileIcon(option.ext, 14) }),
+            /* @__PURE__ */ jsx("span", { className: index_module_default.fileName, children: option.label })
+          ]
+        },
+        `${group.value}-${option.value}`
+      );
+    }) : /* @__PURE__ */ jsx("div", { className: index_module_default.fileMenuEmpty, children: "\u6682\u65E0\u6570\u636E" })
+  ] }, group.value)) });
 }
 function ResourcePickerMenu({
   anchorElementRef,
@@ -346,7 +388,6 @@ function ResourceTag({ resource }) {
     formatResourceName(resource.resourceName)
   ] }) });
 }
-var EMPTY_CASCADE_OPTION_VALUE = "__empty__";
 var VariableNode = class _VariableNode extends DecoratorNode {
   __resourceLabel;
   __resourceType;
@@ -437,34 +478,25 @@ var VariableNode = class _VariableNode extends DecoratorNode {
 function $createVariableNode(resourceLabel, resourceName, resourceType, resourceId) {
   return new VariableNode(resourceLabel, resourceName, resourceType, resourceId);
 }
-var CascadeOption = class extends MenuOption {
-  category;
+var ResourceOption = class extends MenuOption {
+  group;
   item;
   /**
-   * 将级联菜单中的父子节点包装成 Lexical 菜单选项对象。
+   * 将分组列表中的资源节点包装成 Lexical 菜单选项对象。
    */
-  constructor(category, item) {
-    super(`${category.value}:${item.value}`);
-    this.category = category;
+  constructor(group, item) {
+    super(`${group.value}:${item.value}`);
+    this.group = group;
     this.item = item;
   }
 };
-var FileOption = class extends MenuOption {
-  file;
-  /**
-   * 将文件列表项包装成 Lexical 菜单选项对象。
-   */
-  constructor(file) {
-    super(file.value);
-    this.file = file;
-  }
-};
 function VariablePickerPlugin({ commandConfig = {} }) {
   const [editor] = useLexicalComposerContext();
   const chatStore = useChatStore();
   const [commandDataSource, setCommandDataSource] = useState(commandConfig);
   const [queryString, setQueryString] = useState(null);
   const [isEditorFocused, setIsEditorFocused] = useState(false);
+  const [menuResetKey, setMenuResetKey] = useState(0);
   const blurTimerRef = useRef(null);
   useEffect(() => {
     const unregister = mergeRegister(
@@ -481,6 +513,7 @@ function VariablePickerPlugin({ commandConfig = {} }) {
         BLUR_COMMAND,
         () => {
           setIsEditorFocused(false);
+          setMenuResetKey((current) => current + 1);
           return false;
         },
         COMMAND_PRIORITY_LOW
@@ -495,6 +528,7 @@ function VariablePickerPlugin({ commandConfig = {} }) {
     setCommandDataSource(commandConfig);
   }, [commandConfig]);
   const commandKey = queryString?.[0] || "";
+  const searchKeyword = queryString?.slice(commandKey.length).trim().toLocaleLowerCase() || "";
   const categoryConfig = useMemo(
     () => ({
       skill: {
@@ -512,58 +546,82 @@ function VariablePickerPlugin({ commandConfig = {} }) {
     }),
     [chatStore]
   );
-  const commandOptions = useMemo(() => {
-    if (!isEditorFocused) return [];
-    return (commandDataSource[commandKey]?.dataSource || []).flatMap(
-      (category) => category.children?.filter((item) => !item.disabled).map((item) => new CascadeOption(category, item)) || []
-    );
-  }, [commandDataSource, commandKey, isEditorFocused]);
   const formatDataSource = useCallback(
     (items, category) => {
       const currentCategoryConfig = categoryConfig[category.value];
-      if (!items.length) {
-        return [
-          {
-            value: EMPTY_CASCADE_OPTION_VALUE,
-            label: "\u6682\u65E0\u6570\u636E",
-            isLeaf: true,
-            disabled: true
-          }
-        ];
-      }
+      if (!items.length) return [];
       return items.map((item) => ({
         value: item.id,
-        label: currentCategoryConfig?.getLabel(item) || item.name
+        label: currentCategoryConfig?.getLabel(item) || item.name,
+        children: []
       }));
     },
     [categoryConfig]
   );
-  const loadData = useCallback(
-    (selectedOptions) => {
-      const category = selectedOptions[selectedOptions.length - 1];
-      if (!category || category.children?.length || category.isLeaf) return;
-      const currentCategoryConfig = categoryConfig[category.value];
-      if (!currentCategoryConfig) return;
-      currentCategoryConfig.load().then((response) => {
-        const items = response.data || [];
-        setCommandDataSource((current) => ({
-          ...current,
-          [commandKey]: {
-            ...current[commandKey],
-            dataSource: current[commandKey]?.dataSource?.map(
-              (item) => item.value === category.value ? { ...item, children: formatDataSource(items, category) } : item
-            ) || []
-          }
-        }));
-      });
-    },
-    [categoryConfig, commandKey, formatDataSource]
+  useEffect(() => {
+    let isUnmounted = false;
+    const initializeCommandDataSource = async () => {
+      const nextEntries = await Promise.all(
+        Object.entries(commandConfig).map(async ([trigger, currentCommandConfig]) => {
+          const nextDataSource = await Promise.all(
+            (currentCommandConfig.dataSource || []).map(async (category) => {
+              const normalizedChildren = category.children || [];
+              const nextCategory = {
+                ...category,
+                children: normalizedChildren
+              };
+              const currentCategoryConfig = categoryConfig[category.value];
+              if (!currentCategoryConfig) {
+                return nextCategory;
+              }
+              if (normalizedChildren.length) {
+                return nextCategory;
+              }
+              const response = await currentCategoryConfig.load();
+              const items = response.data || [];
+              return {
+                ...nextCategory,
+                children: formatDataSource(items, category)
+              };
+            })
+          );
+          return [
+            trigger,
+            {
+              ...currentCommandConfig,
+              dataSource: nextDataSource
+            }
+          ];
+        })
+      );
+      if (isUnmounted) return;
+      setCommandDataSource(Object.fromEntries(nextEntries));
+    };
+    initializeCommandDataSource();
+    return () => {
+      isUnmounted = true;
+    };
+  }, [categoryConfig, commandConfig, formatDataSource]);
+  const commandGroups = useMemo(() => {
+    if (!isEditorFocused) return [];
+    return (commandDataSource[commandKey]?.dataSource || []).map((group) => {
+      const options = group.children || [];
+      if (!searchKeyword) return { group, options };
+      return {
+        group,
+        options: options.filter((option) => option.label.toLocaleLowerCase().includes(searchKeyword))
+      };
+    }).filter(({ options }) => !searchKeyword || options.length);
+  }, [commandDataSource, commandKey, isEditorFocused, searchKeyword]);
+  const commandOptions = useMemo(
+    () => commandGroups.flatMap(({ group, options }) => options.map((item) => new ResourceOption(group, item))),
+    [commandGroups]
   );
   const onSelectOption = useCallback(
     (selectedOption, nodeToReplace, closeMenu, matchingString) => {
-      const resource = selectedOption instanceof FileOption ? selectedOption.file : selectedOption.item;
-      const resourceLabel = selectedOption instanceof FileOption ? "\u6587\u4EF6" : selectedOption.category.label;
-      const resourceType = selectedOption instanceof FileOption ? "file" : selectedOption.category.value;
+      const resource = selectedOption.item;
+      const resourceLabel = selectedOption.group.label;
+      const resourceType = selectedOption.group.value;
       editor.update(() => {
         const variableNode = $createVariableNode(resourceLabel, resource.label, resourceType, resource.value);
         if (nodeToReplace) {
@@ -573,7 +631,7 @@ function VariablePickerPlugin({ commandConfig = {} }) {
       });
       closeMenu();
     },
-    [commandDataSource, editor]
+    [editor]
   );
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     LexicalTypeaheadMenuPlugin,
@@ -587,40 +645,24 @@ function VariablePickerPlugin({ commandConfig = {} }) {
         if (!match) return null;
         return { leadOffset: match.index, matchingString: match[0], replaceableString: match[0] };
       },
-      options: commandOptions.map((option) => new CascadeOption(option.category, option.item)),
-      menuRenderFn: (anchorElementRef, { selectedIndex, setHighlightedIndex, selectOptionAndCleanUp }, matchingString) => {
-        if (!anchorElementRef.current) return null;
+      options: commandOptions,
+      menuRenderFn: (anchorElementRef, { selectedIndex, setHighlightedIndex, selectOptionAndCleanUp }) => {
+        if (!isEditorFocused || !anchorElementRef.current || searchKeyword && !commandGroups.length) return null;
         return ReactDOM.createPortal(
-          /* @__PURE__ */ jsxs(ResourcePickerMenu, { anchorElementRef, children: [
-            commandDataSource[matchingString]?.component === "cascade" && /* @__PURE__ */ jsx(
-              Cascader.Panel,
-              {
-                options: commandDataSource[matchingString]?.dataSource,
-                expandTrigger: "hover",
-                loadData,
-                onChange: (value) => {
-                  const [categoryValue, itemValue] = value;
-                  const option = commandOptions.find(
-                    (currentOption) => currentOption.category.value === categoryValue && currentOption.item.value === itemValue
-                  );
-                  if (option) selectOptionAndCleanUp(option);
-                }
-              }
-            ),
-            commandDataSource[matchingString]?.component === "list" && /* @__PURE__ */ jsx(
-              FilePickerMenu,
-              {
-                options: commandDataSource[matchingString]?.dataSource || [],
-                selectedIndex: selectedIndex ?? 0,
-                onHover: setHighlightedIndex,
-                onSelect: (option) => selectOptionAndCleanUp(new FileOption(option))
-              }
-            )
-          ] }),
+          /* @__PURE__ */ jsx(ResourcePickerMenu, { anchorElementRef, children: /* @__PURE__ */ jsx(
+            GroupPicker,
+            {
+              groups: commandGroups,
+              selectedIndex: selectedIndex ?? 0,
+              onHover: setHighlightedIndex,
+              onSelect: (group, option) => selectOptionAndCleanUp(new ResourceOption(group, option))
+            }
+          ) }),
           anchorElementRef.current
         );
       }
-    }
+    },
+    menuResetKey
   ) });
 }
 function InitialStatePlugin({ value }) {
@@ -843,14 +885,6 @@ var ChatSender_default = forwardRef(
     );
   }
 );
-var TOKEN_KEY = "NS-TOKEN";
-var tokenManager = createTokenManager({
-  key: TOKEN_KEY
-});
-var redirectUrl = () => {
-  const path = localStorage.getItem("SIGNPATH");
-  emit("jumpLink", { url: `/uc${path || "/sign-in"}` });
-};
 var createChatService = (request, config) => {
   const fetchModelList = () => {
     return request.get(`/providers/models/type/llm`);
@@ -891,14 +925,8 @@ var createChatService = (request, config) => {
       signal
     });
   };
-  const getPreviewUrl = (conversationId, path) => {
-    const params = {
-      path,
-      [TOKEN_KEY]: tokenManager.get(),
-      workspaceId: conversationId,
-      workspaceType: "conversation" /* CONVERSATION */
-    };
-    return buildUrlParams(params, `${config?.baseURL}/files/access`);
+  const getPreviewUrl = (params) => {
+    return getFileUrl(params, config?.baseURL);
   };
   const docQuery = (params) => {
     return request.get(`/library/cloud/document?${params}`);
@@ -2707,7 +2735,10 @@ var PreviewLink_default = ({ data, loading, message: message2, ...rest }) => {
     const fileName = getLinkFileName(href);
     const suffix = getFileSuffixName(fileName);
     chatStore.setPreview({
-      fileUrl: chatStore.config.services.request.getPreviewUrl(message2.conversationId, href),
+      fileUrl: chatStore.config.services.request.getPreviewUrl({
+        path: href,
+        workspaceId: message2.conversationId
+      }),
       fileName,
       suffix
     });
@@ -4270,11 +4301,13 @@ function A2uiRenderer(props) {
 var FilesNode = React10__default.memo(({ item }) => {
   const chatStore = useChatStore();
   const configState = useSnapshot(chatStore.config);
-  useSnapshot(chatStore.agent);
   const conversationState = useSnapshot(chatStore.conversation);
   const fileItems = useMemo(() => {
     return (item.files || []).map((file) => {
-      const previewUrl = configState.services.request.getPreviewUrl(conversationState.active.id, file.path);
+      const previewUrl = configState.services.request.getPreviewUrl({
+        path: file.path,
+        workspaceId: conversationState.active.id
+      });
       let fileType = "file";
       const ext = file.ext?.toLowerCase() || "";
       if (["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg", "webp"].includes(ext)) {
@@ -5555,6 +5588,6 @@ var layouts_default = forwardRef(({ theme: theme4, params, hooks, layout, config
   ] }) }) }) });
 });
 
-export { Attachments_default as Attachments, layouts_default as ChatCopilot, ChatSender_default as ChatSender };
+export { Attachments_default as Attachments, layouts_default as ChatCopilot, ChatSender_default as ChatSender, getFileIcon, getFileUrl };
 //# sourceMappingURL=index.esm.js.map
 //# sourceMappingURL=index.esm.js.map