@ant-design/agentic-ui 2.0.0

package/dist/Workspace/File/FileComponent.js

@@ -0,0 +1,769 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/Workspace/File/FileComponent.tsx
+import { ConfigProvider, Image, Input, Spin, Typography, message } from "antd";
+import {
+  Check,
+  ChevronDown as DownIcon,
+  Download as DownloadIcon,
+  Eye as EyeIcon,
+  ChevronRight as RightIcon,
+  Search,
+  SquareArrowOutUpRight as ShareIcon
+} from "@sofa-design/icons";
+import { Empty } from "antd";
+import classNames from "classnames";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { ActionIconBox } from "../../components/ActionIconBox";
+import { I18nContext } from "../../i18n";
+import { formatFileSize, formatLastModified } from "../utils";
+import { fileTypeProcessor, isImageFile } from "./FileTypeProcessor";
+import { PreviewComponent } from "./PreviewComponent";
+import { useFileStyle } from "./style";
+import { generateUniqueId, getFileTypeIcon, getGroupIcon } from "./utils";
+var handleKeyboardEvent = (e, callback) => {
+  if (e.key === "Enter" || e.key === " ") {
+    callback(e);
+  }
+};
+var handleFileDownload = (file) => {
+  let blobUrl = null;
+  try {
+    const link = document.createElement("a");
+    if (file.url) {
+      link.href = file.url;
+    } else if (file.content) {
+      const blob = new Blob([file.content], { type: "text/plain" });
+      blobUrl = URL.createObjectURL(blob);
+      link.href = blobUrl;
+    } else if (file.file instanceof File || file.file instanceof Blob) {
+      blobUrl = URL.createObjectURL(file.file);
+      link.href = blobUrl;
+    } else {
+      return;
+    }
+    link.download = file.name || (file.file instanceof File ? file.file.name : "");
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  } finally {
+    if (blobUrl) {
+      URL.revokeObjectURL(blobUrl);
+    }
+  }
+};
+var handleDefaultShare = (file, locale) => __async(void 0, null, function* () {
+  try {
+    const shareUrl = file.url || file.previewUrl || window.location.href;
+    yield navigator.clipboard.writeText(shareUrl);
+    message.success({
+      icon: /* @__PURE__ */ React.createElement(
+        Check,
+        {
+          style: {
+            fontSize: 16,
+            marginRight: 8,
+            color: "var(--color-green-control-fill-primary)"
+          }
+        }
+      ),
+      content: /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          style: {
+            font: "var(--font-text-body-emphasized-base)",
+            color: "var(--color-gray-text-default)"
+          }
+        },
+        (locale == null ? void 0 : locale["workspace.file.linkCopied"]) || "已复制链接"
+      )
+    });
+  } catch (error) {
+    message.error((locale == null ? void 0 : locale["workspace.file.copyFailed"]) || "复制失败");
+  }
+});
+var ensureNodeWithId = (node) => __spreadProps(__spreadValues({}, node), {
+  id: node.id || generateUniqueId(node)
+});
+var getPreviewSource = (file) => {
+  return file.previewUrl || file.url || "";
+};
+var AccessibleButton = ({
+  icon,
+  onClick,
+  className,
+  ariaLabel
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className,
+    onClick,
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: (e) => handleKeyboardEvent(e, onClick),
+    "aria-label": ariaLabel
+  },
+  icon
+);
+var SearchInput = React.memo(
+  ({ keyword, onChange, searchPlaceholder, prefixCls, hashId, locale }) => {
+    const inputRef = useRef(null);
+    return /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-search`, hashId) }, /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        ref: inputRef,
+        key: "file-search-input",
+        style: { marginBottom: 8 },
+        allowClear: true,
+        placeholder: searchPlaceholder || (locale == null ? void 0 : locale["workspace.searchPlaceholder"]) || "搜索文件名",
+        prefix: /* @__PURE__ */ React.createElement(
+          Search,
+          {
+            style: {
+              color: "var(--color-gray-text-secondary)",
+              fontSize: 16
+            }
+          }
+        ),
+        value: keyword != null ? keyword : "",
+        onChange: (e) => onChange == null ? void 0 : onChange(e.target.value)
+      }
+    ));
+  }
+);
+SearchInput.displayName = "SearchInput";
+var FileItemComponent = ({ file, onClick, onDownload, onPreview, onShare, prefixCls, hashId }) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const { locale } = useContext(I18nContext);
+  const finalPrefixCls = prefixCls || getPrefixCls("workspace-file");
+  const fileWithId = ensureNodeWithId(file);
+  const fileTypeInfo = fileTypeProcessor.inferFileType(fileWithId);
+  const handleClick = () => {
+    if (onClick) {
+      onClick(fileWithId);
+      return;
+    }
+    if (onPreview) {
+      onPreview(fileWithId);
+    }
+  };
+  const showDownloadButton = (() => {
+    if (fileWithId.canDownload !== void 0) {
+      return fileWithId.canDownload;
+    }
+    return Boolean(
+      onDownload || fileWithId.url || fileWithId.content || fileWithId.file
+    );
+  })();
+  const handleDownload = (e) => {
+    e.stopPropagation();
+    if (onDownload) {
+      onDownload(fileWithId);
+      return;
+    }
+    handleFileDownload(fileWithId);
+  };
+  const handlePreview = (e) => {
+    e.stopPropagation();
+    onPreview == null ? void 0 : onPreview(fileWithId);
+  };
+  const handleShare = (e) => {
+    e.stopPropagation();
+    if (onShare) {
+      onShare(fileWithId, {
+        anchorEl: e.currentTarget,
+        origin: "list"
+      });
+      return;
+    }
+    handleDefaultShare(fileWithId, locale);
+  };
+  const showPreviewButton = (() => {
+    if (fileWithId.canPreview !== void 0) {
+      return fileWithId.canPreview;
+    }
+    return onPreview && (isImageFile(fileWithId) ? !!(fileWithId.url || fileWithId.previewUrl) : fileTypeProcessor.processFile(fileWithId).canPreview);
+  })();
+  const showShareButton = fileWithId.canShare === true;
+  return /* @__PURE__ */ React.createElement(
+    AccessibleButton,
+    {
+      icon: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classNames(`${finalPrefixCls}-item-icon`, hashId) }, getFileTypeIcon(
+        fileTypeInfo.fileType,
+        fileWithId.icon,
+        fileWithId.name
+      )), /* @__PURE__ */ React.createElement("div", { className: classNames(`${finalPrefixCls}-item-info`, hashId) }, /* @__PURE__ */ React.createElement("div", { className: classNames(`${finalPrefixCls}-item-name`, hashId) }, /* @__PURE__ */ React.createElement(Typography.Text, { ellipsis: { tooltip: fileWithId.name } }, fileWithId.name)), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${finalPrefixCls}-item-details`, hashId)
+        },
+        /* @__PURE__ */ React.createElement(Typography.Text, { type: "secondary", ellipsis: true }, /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: classNames(`${finalPrefixCls}-item-type`, hashId)
+          },
+          fileTypeInfo.displayType || fileTypeInfo.fileType
+        ), fileWithId.size && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: classNames(
+              `${finalPrefixCls}-item-separator`,
+              hashId
+            )
+          },
+          "|"
+        ), /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: classNames(
+              `${finalPrefixCls}-item-size`,
+              hashId
+            )
+          },
+          formatFileSize(fileWithId.size)
+        )), fileWithId.lastModified && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: classNames(
+              `${finalPrefixCls}-item-separator`,
+              hashId
+            )
+          },
+          "|"
+        ), /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: classNames(
+              `${finalPrefixCls}-item-time`,
+              hashId
+            )
+          },
+          formatLastModified(fileWithId.lastModified)
+        )))
+      )), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${finalPrefixCls}-item-actions`, hashId),
+          onClick: (e) => e.stopPropagation()
+        },
+        showPreviewButton && /* @__PURE__ */ React.createElement(
+          ActionIconBox,
+          {
+            title: (locale == null ? void 0 : locale["workspace.file.preview"]) || "预览",
+            onClick: handlePreview,
+            tooltipProps: { mouseEnterDelay: 0.3 },
+            className: classNames(
+              `${finalPrefixCls}-item-action-btn`,
+              hashId
+            )
+          },
+          /* @__PURE__ */ React.createElement(EyeIcon, null)
+        ),
+        showShareButton && /* @__PURE__ */ React.createElement(
+          ActionIconBox,
+          {
+            title: (locale == null ? void 0 : locale["workspace.file.share"]) || "分享",
+            onClick: handleShare,
+            tooltipProps: { mouseEnterDelay: 0.3 },
+            className: classNames(
+              `${finalPrefixCls}-item-action-btn`,
+              hashId
+            )
+          },
+          /* @__PURE__ */ React.createElement(ShareIcon, null)
+        ),
+        showDownloadButton && /* @__PURE__ */ React.createElement(
+          ActionIconBox,
+          {
+            title: (locale == null ? void 0 : locale["workspace.file.download"]) || "下载",
+            onClick: handleDownload,
+            tooltipProps: { mouseEnterDelay: 0.3 },
+            className: classNames(
+              `${finalPrefixCls}-item-action-btn`,
+              hashId
+            )
+          },
+          /* @__PURE__ */ React.createElement(DownloadIcon, null)
+        )
+      )),
+      onClick: handleClick,
+      className: classNames(`${finalPrefixCls}-item`, hashId),
+      ariaLabel: `${(locale == null ? void 0 : locale["workspace.file"]) || "文件"}：${fileWithId.name}`
+    }
+  );
+};
+var GroupHeader = ({ group, onToggle, onGroupDownload, prefixCls, hashId }) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const { locale } = useContext(I18nContext);
+  const finalPrefixCls = prefixCls || getPrefixCls("workspace-file");
+  const groupTypeInfo = fileTypeProcessor.inferFileType(group);
+  const groupType = group.type || groupTypeInfo.fileType;
+  const handleToggle = () => {
+    onToggle == null ? void 0 : onToggle(group.id, groupType, !group.collapsed);
+  };
+  const handleDownload = (e) => {
+    e.stopPropagation();
+    onGroupDownload == null ? void 0 : onGroupDownload(group.children, groupType);
+  };
+  const CollapseIcon = group.collapsed ? RightIcon : DownIcon;
+  const groupIcon = getGroupIcon(group, groupType, group.icon);
+  const showDownloadButton = (() => {
+    if (group.canDownload !== void 0) {
+      return group.canDownload;
+    }
+    return Boolean(onGroupDownload);
+  })();
+  return /* @__PURE__ */ React.createElement(
+    AccessibleButton,
+    {
+      icon: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(
+            `${finalPrefixCls}-group-header-left`,
+            hashId
+          )
+        },
+        /* @__PURE__ */ React.createElement(
+          CollapseIcon,
+          {
+            className: classNames(
+              `${finalPrefixCls}-group-toggle-icon`,
+              hashId
+            )
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames(
+              `${finalPrefixCls}-group-type-icon`,
+              hashId
+            )
+          },
+          groupIcon
+        ),
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: classNames(
+              `${finalPrefixCls}-group-type-name`,
+              hashId
+            )
+          },
+          group.name
+        )
+      ), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(
+            `${finalPrefixCls}-group-header-right`,
+            hashId
+          )
+        },
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: classNames(`${finalPrefixCls}-group-count`, hashId)
+          },
+          group.children.length
+        ),
+        showDownloadButton && /* @__PURE__ */ React.createElement(
+          ActionIconBox,
+          {
+            title: (locale == null ? void 0 : locale["workspace.file.download"]) || "下载",
+            onClick: handleDownload,
+            tooltipProps: { mouseEnterDelay: 0.3 },
+            className: classNames(
+              `${finalPrefixCls}-group-action-btn`,
+              hashId
+            )
+          },
+          /* @__PURE__ */ React.createElement(DownloadIcon, null)
+        )
+      )),
+      onClick: handleToggle,
+      className: classNames(`${finalPrefixCls}-group-header`, hashId),
+      ariaLabel: `${group.collapsed ? (locale == null ? void 0 : locale["workspace.expand"]) || "展开" : (locale == null ? void 0 : locale["workspace.collapse"]) || "收起"}${group.name}${(locale == null ? void 0 : locale["workspace.group"]) || "分组"}`
+    }
+  );
+};
+var FileGroupComponent = ({
+  group,
+  onToggle,
+  onGroupDownload,
+  onDownload,
+  onFileClick,
+  onPreview,
+  onShare,
+  prefixCls,
+  hashId
+}) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const finalPrefixCls = prefixCls || getPrefixCls("workspace-file");
+  return /* @__PURE__ */ React.createElement("div", { className: classNames(`${finalPrefixCls}-container--group`, hashId) }, /* @__PURE__ */ React.createElement(
+    GroupHeader,
+    {
+      group,
+      onToggle,
+      onGroupDownload,
+      prefixCls: finalPrefixCls,
+      hashId
+    }
+  ), !group.collapsed && /* @__PURE__ */ React.createElement("div", { className: classNames(`${finalPrefixCls}-group-content`, hashId) }, group.children.map((file) => /* @__PURE__ */ React.createElement(
+    FileItemComponent,
+    {
+      key: file.id,
+      file,
+      onClick: onFileClick,
+      onDownload,
+      onPreview,
+      onShare,
+      prefixCls: finalPrefixCls,
+      hashId
+    }
+  ))));
+};
+var FileComponent = ({
+  nodes,
+  onGroupDownload,
+  onDownload,
+  onShare,
+  onFileClick,
+  onToggleGroup,
+  onPreview,
+  onBack,
+  resetKey,
+  markdownEditorProps,
+  customActions,
+  actionRef,
+  loading,
+  loadingRender,
+  emptyRender,
+  keyword,
+  onChange,
+  showSearch = false,
+  searchPlaceholder
+}) => {
+  const [previewFile, setPreviewFile] = useState(null);
+  const [customPreviewContent, setCustomPreviewContent] = useState(null);
+  const [customPreviewHeader, setCustomPreviewHeader] = useState(null);
+  const [headerFileOverride, setHeaderFileOverride] = useState(null);
+  const [imagePreview, setImagePreview] = useState({ visible: false, src: "" });
+  const [collapsedGroups, setCollapsedGroups] = useState({});
+  const previewRequestIdRef = useRef(0);
+  const nodeIdCacheRef = useRef(
+    /* @__PURE__ */ new WeakMap()
+  );
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const { locale } = useContext(I18nContext);
+  const prefixCls = getPrefixCls("workspace-file");
+  const { wrapSSR, hashId } = useFileStyle(prefixCls);
+  const ensureNodeWithStableId = (node) => {
+    if (node.id)
+      return __spreadValues({}, node);
+    let cachedId = nodeIdCacheRef.current.get(node);
+    if (!cachedId) {
+      cachedId = generateUniqueId(node);
+      nodeIdCacheRef.current.set(node, cachedId);
+    }
+    return __spreadProps(__spreadValues({}, node), {
+      id: cachedId
+    });
+  };
+  const handleBackToList = () => {
+    previewRequestIdRef.current++;
+    setPreviewFile(null);
+    setCustomPreviewContent(null);
+    setCustomPreviewHeader(null);
+    setHeaderFileOverride(null);
+  };
+  useEffect(() => {
+    if (resetKey !== void 0 && previewFile) {
+      handleBackToList();
+    }
+  }, [resetKey]);
+  const handleToggleGroup = (groupId, type, collapsed) => {
+    setCollapsedGroups((prev) => __spreadProps(__spreadValues({}, prev), {
+      [groupId]: collapsed
+    }));
+    onToggleGroup == null ? void 0 : onToggleGroup(type, collapsed);
+  };
+  const handleBack = () => __async(void 0, null, function* () {
+    if (previewFile) {
+      try {
+        const result = yield onBack == null ? void 0 : onBack(previewFile);
+        if (result === false)
+          return;
+      } catch (_) {
+      }
+    }
+    handleBackToList();
+  });
+  const handleDownloadInPreview = (file) => {
+    if (onDownload) {
+      onDownload(file);
+      return;
+    }
+    handleFileDownload(file);
+  };
+  const handlePreview = (file) => __async(void 0, null, function* () {
+    if (onPreview) {
+      const currentCallId = ++previewRequestIdRef.current;
+      setPreviewFile(file);
+      try {
+        const previewData = yield onPreview(file);
+        if (previewRequestIdRef.current !== currentCallId)
+          return;
+        if (previewData === false) {
+          setCustomPreviewContent(null);
+          setCustomPreviewHeader(null);
+          setPreviewFile(null);
+          return;
+        }
+        if (previewData) {
+          if (React.isValidElement(previewData) || typeof previewData === "string" || typeof previewData === "number" || typeof previewData === "boolean") {
+            const content = React.isValidElement(previewData) ? React.cloneElement(previewData, {
+              setPreviewHeader: (header) => setCustomPreviewHeader(header),
+              back: handleBackToList,
+              download: () => handleDownloadInPreview(file),
+              share: () => {
+                if (onShare) {
+                  onShare(file);
+                } else {
+                  handleDefaultShare(file, locale);
+                }
+              }
+            }) : previewData;
+            setCustomPreviewHeader(null);
+            setCustomPreviewContent(content);
+          } else if (typeof previewData === "object" && previewData !== null && "name" in previewData) {
+            setCustomPreviewContent(null);
+            setCustomPreviewHeader(null);
+            setPreviewFile(previewData);
+          } else {
+            setCustomPreviewContent(null);
+            setCustomPreviewHeader(null);
+            setPreviewFile(file);
+          }
+          return;
+        }
+        setCustomPreviewContent(null);
+        setPreviewFile(file);
+        return;
+      } catch (err) {
+        if (previewRequestIdRef.current !== currentCallId)
+          return;
+        setCustomPreviewContent(null);
+        setPreviewFile(file);
+        return;
+      }
+    }
+    if (isImageFile(file)) {
+      const previewSrc = getPreviewSource(file);
+      setImagePreview({
+        visible: true,
+        src: previewSrc
+      });
+      return;
+    }
+    setCustomPreviewContent(null);
+    setPreviewFile(file);
+  });
+  React.useEffect(() => {
+    if (!actionRef)
+      return;
+    actionRef.current = {
+      openPreview: (file) => {
+        const fileWithId = ensureNodeWithStableId(file);
+        void handlePreview(fileWithId);
+      },
+      backToList: () => {
+        handleBackToList();
+      },
+      updatePreviewHeader: (partial) => {
+        setHeaderFileOverride((prev) => __spreadValues(__spreadValues({}, prev || {}), partial));
+      }
+    };
+    return () => {
+      actionRef.current = null;
+    };
+  }, [actionRef, handlePreview, handleBackToList]);
+  const safeNodes = nodes || [];
+  const hasKeyword = Boolean((keyword != null ? keyword : "").trim());
+  const renderSearchInput = () => {
+    if (!showSearch)
+      return null;
+    return /* @__PURE__ */ React.createElement(
+      SearchInput,
+      {
+        keyword,
+        onChange,
+        searchPlaceholder,
+        prefixCls,
+        hashId,
+        locale
+      }
+    );
+  };
+  const renderEmptyContent = () => {
+    if (hasKeyword) {
+      return /* @__PURE__ */ React.createElement(Typography.Text, { type: "secondary" }, ((locale == null ? void 0 : locale["workspace.noResultsFor"]) || `未找到与「${keyword}」匹配的结果`).replace("${keyword}", String(keyword)));
+    }
+    if (typeof emptyRender === "function") {
+      return emptyRender();
+    }
+    return emptyRender != null ? emptyRender : /* @__PURE__ */ React.createElement(Empty, { description: (locale == null ? void 0 : locale["workspace.empty"]) || "No data" });
+  };
+  const ImagePreviewComponent = /* @__PURE__ */ React.createElement(
+    Image,
+    {
+      style: { display: "none" },
+      src: imagePreview.src,
+      preview: {
+        visible: imagePreview.visible,
+        onVisibleChange: (visible) => {
+          setImagePreview((prev) => __spreadProps(__spreadValues({}, prev), { visible }));
+        }
+      }
+    }
+  );
+  if (previewFile) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      PreviewComponent,
+      {
+        file: previewFile,
+        onBack: handleBack,
+        onDownload: handleDownloadInPreview,
+        onShare: (file, options) => {
+          if (onShare) {
+            onShare(file, {
+              anchorEl: options == null ? void 0 : options.anchorEl,
+              origin: "preview"
+            });
+          } else {
+            handleDefaultShare(file, locale);
+          }
+        },
+        customContent: customPreviewContent || void 0,
+        customHeader: customPreviewHeader || void 0,
+        customActions: typeof customActions === "function" ? customActions(previewFile) : customActions,
+        headerFileOverride: headerFileOverride || void 0,
+        markdownEditorProps
+      }
+    ), ImagePreviewComponent);
+  }
+  const renderFileContent = () => {
+    if ((!nodes || nodes.length === 0) && !loading) {
+      return /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-empty`, hashId) }, renderEmptyContent());
+    }
+    if (safeNodes.length === 0) {
+      return /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-empty`, hashId) }, renderEmptyContent());
+    }
+    return safeNodes.map((node) => {
+      var _a;
+      const nodeWithId = ensureNodeWithStableId(node);
+      if ("children" in nodeWithId) {
+        const groupNode = __spreadProps(__spreadValues({}, nodeWithId), {
+          collapsed: (_a = collapsedGroups[nodeWithId.id]) != null ? _a : nodeWithId.collapsed,
+          // 确保子节点也有唯一ID
+          children: nodeWithId.children.map(ensureNodeWithStableId)
+        });
+        return /* @__PURE__ */ React.createElement(
+          FileGroupComponent,
+          {
+            key: nodeWithId.id,
+            group: groupNode,
+            onToggle: handleToggleGroup,
+            onGroupDownload,
+            onDownload,
+            onFileClick,
+            onPreview: handlePreview,
+            onShare,
+            prefixCls,
+            hashId
+          }
+        );
+      }
+      return /* @__PURE__ */ React.createElement(
+        FileItemComponent,
+        {
+          key: nodeWithId.id,
+          file: nodeWithId,
+          onClick: onFileClick,
+          onDownload,
+          onShare,
+          onPreview: handlePreview,
+          prefixCls,
+          hashId
+        }
+      );
+    });
+  };
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(React.Fragment, null, loading && loadingRender ? (
+      // 使用自定义loading渲染函数
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${prefixCls}-container`, hashId),
+          "data-testid": "file-component"
+        },
+        renderSearchInput(),
+        loadingRender()
+      )
+    ) : (
+      // 使用默认的Spin组件
+      /* @__PURE__ */ React.createElement(Spin, { spinning: !!loading }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${prefixCls}-container`, hashId),
+          "data-testid": "file-component"
+        },
+        renderSearchInput(),
+        renderFileContent()
+      ))
+    ), ImagePreviewComponent)
+  );
+};
+export {
+  FileComponent
+};