@ant-design/agentic-ui 2.0.0

package/dist/Workspace/index.js

@@ -0,0 +1,279 @@
+var __defProp = Object.defineProperty;
+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;
+};
+
+// src/Workspace/index.tsx
+import { CloseOutlined } from "@ant-design/icons";
+import {
+  FileStack,
+  Language,
+  ListTodo,
+  MousePointerClick
+} from "@sofa-design/icons";
+import { ConfigProvider, Segmented } from "antd";
+import classNames from "classnames";
+import React, {
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { I18nContext } from "../i18n";
+import { BrowserList } from "./Browser";
+import { File } from "./File";
+import { RealtimeFollowList } from "./RealtimeFollow";
+import { useWorkspaceStyle } from "./style";
+import { TaskList } from "./Task";
+export * from "./File";
+var DEFAULT_CONFIG = (locale) => ({
+  ["realtime" /* REALTIME */]: {
+    key: "realtime" /* REALTIME */,
+    icon: /* @__PURE__ */ React.createElement(MousePointerClick, null),
+    title: (locale == null ? void 0 : locale["workspace.realtimeFollow"]) || "实时跟随",
+    label: (locale == null ? void 0 : locale["workspace.realtimeFollow"]) || "实时跟随"
+  },
+  ["browser" /* BROWSER */]: {
+    key: "browser" /* BROWSER */,
+    icon: /* @__PURE__ */ React.createElement(Language, null),
+    title: (locale == null ? void 0 : locale["workspace.browser"]) || "浏览器",
+    label: (locale == null ? void 0 : locale["workspace.browser"]) || "浏览器"
+  },
+  ["task" /* TASK */]: {
+    key: "task" /* TASK */,
+    icon: /* @__PURE__ */ React.createElement(ListTodo, null),
+    title: (locale == null ? void 0 : locale["workspace.task"]) || "任务",
+    label: (locale == null ? void 0 : locale["workspace.task"]) || "任务"
+  },
+  ["file" /* FILE */]: {
+    key: "file" /* FILE */,
+    icon: /* @__PURE__ */ React.createElement(FileStack, null),
+    title: (locale == null ? void 0 : locale["workspace.file"]) || "文件",
+    label: (locale == null ? void 0 : locale["workspace.file"]) || "文件"
+  },
+  ["custom" /* CUSTOM */]: {
+    key: "custom" /* CUSTOM */,
+    icon: null,
+    title: (locale == null ? void 0 : locale["workspace.custom"]) || "自定义",
+    label: (locale == null ? void 0 : locale["workspace.custom"]) || "自定义"
+  }
+});
+var resolveTabConfig = (tab, defaultConfig, index) => {
+  var _a;
+  return {
+    key: (tab == null ? void 0 : tab.key) || defaultConfig.key + (index !== void 0 ? `-${index}` : ""),
+    icon: (_a = tab == null ? void 0 : tab.icon) != null ? _a : defaultConfig.icon,
+    title: (tab == null ? void 0 : tab.title) || defaultConfig.label,
+    count: tab == null ? void 0 : tab.count
+  };
+};
+var RealtimeComponent = ({ data }) => data ? /* @__PURE__ */ React.createElement(RealtimeFollowList, { data }) : null;
+var BrowserComponent = ({ data }) => data ? /* @__PURE__ */ React.createElement(BrowserList, { data }) : null;
+var TaskComponent = ({ data }) => data ? /* @__PURE__ */ React.createElement(TaskList, { data }) : null;
+var FileComponent = (props) => /* @__PURE__ */ React.createElement(File, __spreadValues({}, props));
+var CustomComponent = ({ children }) => children || null;
+var COMPONENT_MAP = /* @__PURE__ */ new Map([
+  [RealtimeComponent, "realtime" /* REALTIME */],
+  [BrowserComponent, "browser" /* BROWSER */],
+  [TaskComponent, "task" /* TASK */],
+  [FileComponent, "file" /* FILE */],
+  [CustomComponent, "custom" /* CUSTOM */]
+]);
+var Workspace = ({
+  activeTabKey,
+  onTabChange,
+  style,
+  className,
+  title,
+  onClose,
+  children,
+  pure = false
+}) => {
+  var _a, _b, _c, _d, _e;
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const { locale } = useContext(I18nContext);
+  const prefixCls = getPrefixCls("workspace");
+  const { wrapSSR, hashId } = useWorkspaceStyle(prefixCls);
+  const containerRef = useRef(null);
+  const [segmentedKey, setSegmentedKey] = useState(0);
+  const [resetKey, setResetKey] = useState(0);
+  const displayTitle = title != null ? title : (locale == null ? void 0 : locale["workspace.title"]) || "Workspace";
+  const defaultConfig = DEFAULT_CONFIG(locale);
+  const [internalActiveTab, setInternalActiveTab] = useState("");
+  const availableTabs = useMemo(() => {
+    const tabs = [];
+    React.Children.forEach(children, (child, index) => {
+      if (!React.isValidElement(child))
+        return;
+      const componentType = COMPONENT_MAP.get(
+        child.type
+      );
+      if (!componentType)
+        return;
+      const tabConfig = resolveTabConfig(
+        child.props.tab,
+        defaultConfig[componentType],
+        componentType === "custom" /* CUSTOM */ ? index : void 0
+      );
+      tabs.push({
+        key: tabConfig.key,
+        icon: tabConfig.icon,
+        componentType,
+        // 保存组件类型
+        label: /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-tab-item`, hashId) }, /* @__PURE__ */ React.createElement("span", { className: classNames(`${prefixCls}-tab-title`, hashId) }, tabConfig.title), tabConfig.count !== void 0 && /* @__PURE__ */ React.createElement("span", { className: classNames(`${prefixCls}-tab-count`, hashId) }, tabConfig.count)),
+        content: React.createElement(child.type, __spreadValues(__spreadValues({}, child.props), componentType === "file" /* FILE */ && {
+          resetKey
+        }))
+      });
+    });
+    return tabs;
+  }, [children, defaultConfig, hashId, prefixCls]);
+  useEffect(() => {
+    if (!availableTabs.length)
+      return;
+    const isControlled = activeTabKey !== void 0;
+    const currentKey = isControlled ? activeTabKey : internalActiveTab;
+    if (!availableTabs.some((tab) => tab.key === currentKey)) {
+      const firstKey = availableTabs[0].key;
+      if (!isControlled)
+        setInternalActiveTab(firstKey);
+      onTabChange == null ? void 0 : onTabChange(firstKey);
+    } else if (isControlled) {
+      setInternalActiveTab(currentKey);
+    }
+  }, [availableTabs, activeTabKey, internalActiveTab, onTabChange]);
+  useEffect(() => {
+    if (!containerRef.current)
+      return;
+    const el = containerRef.current;
+    let lastWidth = el.getBoundingClientRect().width;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const width = entry.contentRect.width;
+        if (width > 0 && lastWidth === 0) {
+          setSegmentedKey((k) => k + 1);
+        }
+        lastWidth = width;
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const currentActiveTab = (_d = (_c = (_a = availableTabs.find((tab) => tab.key === (activeTabKey != null ? activeTabKey : internalActiveTab))) == null ? void 0 : _a.key) != null ? _c : (_b = availableTabs[0]) == null ? void 0 : _b.key) != null ? _d : "";
+  const handleTabChange = (key) => {
+    const tabKey = String(key);
+    if (activeTabKey === void 0)
+      setInternalActiveTab(tabKey);
+    setResetKey((prev) => prev + 1);
+    onTabChange == null ? void 0 : onTabChange(tabKey);
+  };
+  if (!availableTabs.length)
+    return null;
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: containerRef,
+        className: classNames(
+          prefixCls,
+          {
+            [`${prefixCls}-pure`]: pure
+          },
+          className,
+          hashId
+        ),
+        style,
+        "data-testid": "workspace"
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${prefixCls}-header`, hashId),
+          "data-testid": "workspace-header"
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames(`${prefixCls}-title`, hashId),
+            "data-testid": "workspace-title"
+          },
+          displayTitle
+        ),
+        onClose && /* @__PURE__ */ React.createElement(
+          CloseOutlined,
+          {
+            className: classNames(`${prefixCls}-close`, hashId),
+            onClick: onClose,
+            "aria-label": (locale == null ? void 0 : locale["workspace.closeWorkspace"]) || "关闭工作空间",
+            "data-testid": "workspace-close"
+          }
+        )
+      ),
+      availableTabs.length > 1 && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${prefixCls}-tabs`, hashId),
+          "data-testid": "workspace-tabs"
+        },
+        /* @__PURE__ */ React.createElement(
+          Segmented,
+          {
+            key: segmentedKey,
+            className: classNames(`${prefixCls}-segmented`, hashId),
+            options: availableTabs.reduce(
+              (acc, { label, key, icon, componentType }, index) => {
+                acc.push({ label, value: key, icon });
+                const isFirstRealtime = componentType === "realtime" /* REALTIME */ && availableTabs.findIndex(
+                  (tab) => tab.componentType === "realtime" /* REALTIME */
+                ) === index;
+                if (isFirstRealtime && availableTabs.length > 1) {
+                  acc.push({
+                    label: "",
+                    value: "__divider__",
+                    disabled: true
+                  });
+                }
+                return acc;
+              },
+              []
+            ),
+            value: currentActiveTab,
+            onChange: handleTabChange,
+            block: true,
+            "data-testid": "workspace-segmented"
+          }
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${prefixCls}-content`, hashId),
+          "data-testid": "workspace-content"
+        },
+        (_e = availableTabs.find((tab) => tab.key === currentActiveTab)) == null ? void 0 : _e.content
+      )
+    )
+  );
+};
+Workspace.Realtime = RealtimeComponent;
+Workspace.Browser = BrowserComponent;
+Workspace.Task = TaskComponent;
+Workspace.File = FileComponent;
+Workspace.Custom = CustomComponent;
+var Workspace_default = Workspace;
+export {
+  Workspace_default as default
+};

package/dist/Workspace/style.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function useWorkspaceStyle(prefixCls?: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/dist/Workspace/style.js

@@ -0,0 +1,159 @@
+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));
+
+// src/Workspace/style.ts
+import { useEditorStyleRegister } from "../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      height: "100%",
+      borderRadius: "var(--radius-modal-base)",
+      background: "var(--color-gray-bg-card-white)",
+      border: "1px solid rgba(140, 171, 255, 0.12)",
+      boxShadow: "var(--shadow-card-base)",
+      "svg.sofa-icons-icon > g": {
+        clipPath: "none!important"
+      },
+      // 纯净模式样式
+      [`&${token.componentCls}-pure`]: {
+        borderRadius: "0",
+        background: "transparent",
+        border: "none",
+        boxShadow: "none",
+        height: "100%"
+      },
+      [`${token.componentCls}-header`]: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        margin: "var(--margin-3x) var(--margin-4x)"
+      },
+      [`${token.componentCls}-title`]: {
+        font: "var(--font-text-h5-base)",
+        color: "var(--color-gray-text-default)",
+        letterSpacing: "var(--letter-spacing-h5-base, normal)"
+      },
+      [`${token.componentCls}-close`]: {
+        padding: "var(--padding-1x)",
+        borderRadius: "6px",
+        color: "var(--color-gray-text-secondary)",
+        cursor: "pointer",
+        transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
+        "&:hover": {
+          color: "var(--color-gray-text-default)",
+          backgroundColor: "var(--color-gray-control-fill-hover)"
+        },
+        "&:focus": {
+          outline: "2px solid var(--color-primary-control-fill-primary)",
+          outlineOffset: "2px"
+        }
+      },
+      [`${token.componentCls}-tabs`]: {
+        margin: "var(--margin-3x) var(--margin-4x)"
+      },
+      // 分割线样式
+      [`${token.componentCls}-segmented`]: {
+        ".ant-segmented-group": {
+          height: "32px"
+        },
+        "&.ant-segmented:not(.chaos-segmented) .ant-segmented-item .ant-segmented-item-label": {
+          height: "100%",
+          display: "flex",
+          alignItems: "center"
+        },
+        ".ant-segmented-item": {
+          "&:has(.ant-segmented-item-label:empty)": {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: "0 0 auto !important",
+            height: "100%",
+            width: "8px",
+            padding: "4px 0",
+            margin: "0 2px",
+            cursor: "default",
+            pointerEvents: "none",
+            backgroundColor: "transparent !important",
+            ".ant-segmented-item-label": {
+              padding: "0",
+              height: "100%",
+              width: "1px",
+              backgroundColor: "var(--color-gray-border-light)"
+            },
+            "&:hover": {
+              backgroundColor: "transparent !important"
+            }
+          }
+        },
+        ".ant-segmented-item-disabled": {
+          "&:has(.ant-segmented-item-label:empty)": {
+            opacity: "1 !important"
+          }
+        }
+      },
+      [`${token.componentCls}-tab-item`]: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "4px"
+      },
+      [`${token.componentCls}-tab-title`]: {
+        fontSize: "var(--font-size-base)",
+        fontWeight: 500
+      },
+      [`${token.componentCls}-tab-count`]: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minWidth: "20px",
+        height: "20px",
+        padding: "4px 6px",
+        marginLeft: "4px",
+        color: "var(--color-gray-text-secondary)",
+        font: "var(--font-text-number-xs)",
+        letterSpacing: "var(--letter-spacing-number-xs, normal)",
+        backgroundColor: "var(--color-gray-control-fill-active)",
+        borderRadius: "200px",
+        boxSizing: "border-box"
+      },
+      [`${token.componentCls}-content`]: {
+        height: "calc(100% - 95px)",
+        padding: "0 16px 16px",
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0,
+        overflowX: "hidden",
+        overflowY: "auto",
+        borderRadius: "var(--radius-card-base)"
+      }
+    }
+  };
+};
+function useWorkspaceStyle(prefixCls) {
+  return useEditorStyleRegister("Workspace", (token) => {
+    const workspaceToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(workspaceToken)];
+  });
+}
+export {
+  useWorkspaceStyle
+};

package/dist/Workspace/types.d.ts

@@ -0,0 +1,165 @@
+import React, { type ReactNode } from 'react';
+import type { MarkdownEditorProps } from '../MarkdownEditor';
+import type { BrowserItemInput } from './Browser';
+import type { RealtimeFollowData } from './RealtimeFollow';
+import type { TaskItemInput } from './Task';
+export interface TabConfiguration {
+    key?: string;
+    icon?: ReactNode;
+    title?: ReactNode;
+    count?: number;
+}
+export interface TabItem {
+    key: string;
+    label: ReactNode;
+    title?: ReactNode;
+    icon?: ReactNode;
+    content?: ReactNode;
+    componentType?: string;
+}
+export interface WorkspaceProps {
+    activeTabKey?: string;
+    onTabChange?: (tabKey: string) => void;
+    style?: React.CSSProperties;
+    className?: string;
+    title?: ReactNode;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    /** 纯净模式，关闭阴影和边框 */
+    pure?: boolean;
+}
+export interface BaseChildProps {
+    tab?: TabConfiguration;
+}
+export interface RealtimeProps extends BaseChildProps {
+    data?: RealtimeFollowData;
+}
+export interface BrowserProps extends BaseChildProps {
+    data?: BrowserItemInput;
+}
+export interface TaskProps extends BaseChildProps {
+    data?: TaskItemInput;
+}
+export declare enum FileCategory {
+    Text = "text",
+    Code = "code",
+    Image = "image",
+    Video = "video",
+    Audio = "audio",
+    PDF = "pdf",
+    Word = "word",
+    Excel = "excel",
+    Archive = "archive",
+    Other = "other"
+}
+export interface FileTypeDefinition {
+    category: FileCategory;
+    extensions: string[];
+    mimeTypes: string[];
+    name: string;
+}
+export declare const FILE_TYPES: Record<string, FileTypeDefinition>;
+export type FileType = keyof typeof FILE_TYPES;
+export interface BaseNode {
+    id?: string;
+    name: string;
+    icon?: ReactNode;
+}
+export interface FileNode extends BaseNode {
+    displayType?: string;
+    type?: FileType;
+    size?: string | number;
+    lastModified?: string | number | Date;
+    url?: string;
+    file?: File | Blob;
+    previewUrl?: string;
+    content?: string;
+    metadata?: Record<string, unknown>;
+    canPreview?: boolean;
+    canDownload?: boolean;
+    /** 用户自定义是否可以分享（默认隐藏，设置为 true 显示） */
+    canShare?: boolean;
+    loading?: boolean;
+}
+export interface GroupNode extends BaseNode {
+    collapsed?: boolean;
+    children: FileNode[];
+    type: FileType;
+    /** 用户自定义是否可以下载分组（默认显示，设置为 false 隐藏） */
+    canDownload?: boolean;
+}
+export interface FileActionRef {
+    openPreview: (file: FileNode) => void;
+    backToList: () => void;
+    /**
+     * 跨页更新预览标题区域的文件信息（仅影响标题展示，不改变实际预览内容）
+     */
+    updatePreviewHeader?: (partial: Partial<FileNode>) => void;
+}
+export interface FileProps extends BaseChildProps {
+    nodes: (GroupNode | FileNode)[];
+    onGroupDownload?: (files: FileNode[], groupType: FileType) => void;
+    onDownload?: (file: FileNode) => void;
+    onFileClick?: (file: FileNode) => void;
+    onToggleGroup?: (groupType: FileType, collapsed: boolean) => void;
+    /** 重置标识，用于重置预览状态（内部使用） */
+    resetKey?: number;
+    onPreview?: (file: FileNode) => void | false | FileNode | ReactNode | Promise<void | false | FileNode | ReactNode>;
+    /**
+     * 自定义预览页返回行为
+     * @description 返回 false 可阻止组件默认的返回列表行为
+     */
+    onBack?: (file: FileNode) => void | boolean | Promise<void | boolean>;
+    /**
+     * 分享回调（文件列表与预览页均会调用）
+     * @param file 当前文件
+     * @param ctx  上下文，包含 anchorEl（分享按钮元素）与来源
+     */
+    onShare?: (file: FileNode, ctx?: {
+        anchorEl?: HTMLElement;
+        origin: 'list' | 'preview';
+    }) => void;
+    /**
+     * MarkdownEditor 的配置项，用于自定义预览效果
+     * @description 这里的配置会覆盖默认的预览配置
+     */
+    markdownEditorProps?: Partial<Omit<MarkdownEditorProps, 'editorRef' | 'initValue' | 'readonly'>>;
+    /**
+     * 自定义预览页面右侧操作区域
+     * @description 可以是 ReactNode 或者根据文件返回 ReactNode 的函数
+     */
+    customActions?: React.ReactNode | ((file: FileNode) => React.ReactNode);
+    /**
+     * 对外暴露的操作引用，允许外部主动打开预览或返回列表
+     */
+    actionRef?: React.MutableRefObject<FileActionRef | null>;
+    /**
+     * 是否显示加载状态
+     * @description 当为true时，显示加载动画，通常在文件列表数据加载过程中使用
+     */
+    loading?: boolean;
+    /**
+     * 自定义加载渲染函数
+     * @description 当loading为true时，如果提供了此函数则使用自定义渲染，否则使用默认的Spin组件
+     */
+    loadingRender?: () => React.ReactNode;
+    /**
+     * 自定义空状态渲染
+     * @description 当文件列表为空且非loading状态时，优先使用该渲染；未提供时使用默认的 Empty
+     */
+    emptyRender?: React.ReactNode | (() => React.ReactNode);
+    /** 搜索关键字（受控） */
+    keyword?: string;
+    /** 搜索关键字变化回调（外部自行过滤） */
+    onChange?: (keyword: string) => void;
+    /** 是否显示搜索框（默认不显示） */
+    showSearch?: boolean;
+    /** 搜索框占位符 */
+    searchPlaceholder?: string;
+}
+export interface CustomProps extends BaseChildProps {
+    children?: ReactNode;
+}
+export declare const getFileType: (filename: string) => FileType;
+export declare const getMimeType: (fileType: FileType) => string;
+export declare const getFileCategory: (fileType: FileType) => FileCategory;