@ant-design/agentic-ui 2.0.0

package/dist/Workspace/RealtimeFollow/style.js

@@ -0,0 +1,325 @@
+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/RealtimeFollow/style.ts
+import { useEditorStyleRegister } from "../../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [`${token.componentCls}`]: {
+      [`&-container`]: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      },
+      [`&-header`]: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "8px 12px",
+        marginLeft: -16,
+        marginRight: -16,
+        borderBottom: "1px solid var(--color-gray-border-light)",
+        // 返回按钮
+        [`&-back-button`]: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "32px",
+          height: "32px",
+          border: "none",
+          background: "none",
+          cursor: "pointer",
+          color: "#767e8b",
+          transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
+          borderRadius: "var(--radius-control-base)",
+          backdropFilter: "blur(20px)",
+          "&:hover": {
+            background: "#f0f0f0"
+          }
+        },
+        // 返回图标
+        [`&-back-icon`]: {
+          fontSize: "16px"
+        },
+        [`&-with-border`]: {
+          borderBottom: "1px solid rgba(20, 22, 28, 0.07)"
+        },
+        [`&-with-back`]: {
+          [`${token.componentCls}-header-icon`]: {
+            [`&--html`]: {
+              width: "16px",
+              height: "16px",
+              background: "transparent"
+            },
+            [`&--default`]: {
+              width: "16px",
+              height: "16px",
+              background: "transparent"
+            }
+          }
+        },
+        [`&-left`]: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px"
+        },
+        [`&-icon`]: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "6px",
+          [`&--html`]: {
+            width: "40px",
+            height: "40px",
+            color: "#00B5FD",
+            background: "linear-gradient(180deg, rgba(0, 181, 253, 0.15), rgba(0, 181, 253, 0.08))"
+          },
+          [`&--md`]: {
+            width: "40px",
+            height: "40px",
+            color: "#FF7A00",
+            background: "linear-gradient(180deg, rgba(35, 214, 220, 0.15), rgba(35, 214, 220, 0.08))"
+          },
+          [`&--default`]: {
+            width: "40px",
+            height: "40px",
+            background: "linear-gradient(180deg, #EAEEF4, #F4F6F9)"
+          }
+        },
+        [`&-content`]: {
+          display: "flex",
+          alignItems: "center",
+          gap: "12px"
+        },
+        [`&-title-wrapper`]: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "-4px"
+        },
+        [`&-title`]: {
+          display: "flex",
+          alignItems: "center",
+          gap: "4px",
+          fontFamily: "AlibabaPuHuiTi",
+          fontSize: "14px",
+          fontWeight: "500",
+          lineHeight: "22px",
+          letterSpacing: "normal",
+          color: "var(--color-gray-text-default)"
+        },
+        [`&-subtitle`]: {
+          fontSize: "var(--font-size-sm)",
+          fontWeight: "normal",
+          color: "var(--color-gray-text-secondary)",
+          font: "var(--font-text-body-sm)",
+          letterSpacing: "var(--letter-spacing-body-sm, normal)",
+          gridColumn: "1 / span 2"
+          // 下一行并与图标左对齐，横跨两列
+        },
+        [`&-right`]: {
+          display: "flex",
+          alignItems: "center",
+          ".ant-segmented": {
+            borderRadius: "var(--radius-control-base)"
+          },
+          ".ant-segmented-item-selected ": {
+            borderRadius: "var(--radius-control-base)"
+          }
+        },
+        // Segmented 右侧额外内容容器
+        [`&-segmented-right`]: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "8px",
+          [`&-extra`]: {
+            "*": {
+              color: "rgba(80, 92, 113, 0.42)"
+            }
+          }
+        }
+      },
+      [`&--shell`]: {
+        height: "calc(100% + 16px)",
+        paddingTop: 0,
+        paddingBottom: 0,
+        margin: "0 -16px -16px",
+        [`${token.componentCls}-header`]: {
+          marginBottom: 0,
+          marginLeft: 0,
+          marginRight: 0
+        },
+        [`${token.componentCls}-content`]: {
+          width: "unset",
+          margin: 0,
+          flex: 1,
+          background: "var(--color-gray-text-default)",
+          ".ace-container": {
+            borderRadius: "unset"
+          },
+          ".ace-tm": {
+            color: "rgba(255, 255, 255, 0.27)",
+            background: "transparent"
+          },
+          ".ace_gutter": {
+            color: "rgba(255, 255, 255, 0.45)",
+            font: "var(--font-text-code-base)",
+            letterSpacing: "var(--letter-spacing-code-base, normal)",
+            background: "transparent"
+          },
+          ".ace_gutter-cell": {
+            paddingLeft: 12
+          },
+          ".ace-tm .ace_gutter": {
+            background: "transparent"
+          },
+          ".ace-tm .ace_gutter-active-line": {
+            color: "#FFFFFF",
+            background: "transparent"
+          },
+          ".ace-tm .ace_comment": {
+            color: "rgba(255, 255, 255, 0.27)"
+          },
+          ".ace-tm .ace_keyword": {
+            color: "#E873BB"
+          },
+          ".ace_identifier, .ace_paren": {
+            color: "#FFFFFF"
+          },
+          ".ace-tm .ace_constant.ace_numeric": {
+            color: "#84DC18"
+          },
+          ".code-editor-container": {
+            marginTop: 0,
+            marginBottom: 0,
+            maxHeight: "100%",
+            background: "transparent !important",
+            border: "none",
+            boxShadow: "none"
+          },
+          ".code-editor-content": {
+            padding: 0,
+            background: "transparent"
+          },
+          ".ant-empty-description": {
+            color: "#d9d9d9"
+          }
+        }
+      },
+      [`&--markdown`]: {
+        '.ant-md-editor-content div[data-be="paragraph"]:last-child': {
+          paddingBottom: "16px",
+          color: "var(--color-gray-text-light)",
+          font: "var(--font-text-code-base)",
+          letterSpacing: "var(--letter-spacing-code-base, normal)"
+        }
+      },
+      [`&-content`]: {
+        position: "relative",
+        width: "auto",
+        height: "calc(100% - 72px)",
+        overflow: "auto",
+        margin: "0 -16px",
+        ".ant-workspace-html-preview-content": {
+          ".ace-container": {
+            border: "unset",
+            borderRadius: "unset",
+            boxShadow: "unset"
+          },
+          ".ace_gutter-cell": {
+            paddingLeft: 12
+          },
+          ".code-editor-container": {
+            maxHeight: "100%",
+            borderRadius: "var(--radius-card-base)",
+            ".code-editor-content": {
+              padding: "0!important",
+              ".ace_gutter": {
+                color: "var(--color-gray-text-light)",
+                font: "var(--font-text-code-base)",
+                letterSpacing: "var(--letter-spacing-code-base, normal)",
+                background: "var(--color-gray-bg-card-white)"
+              },
+              ".ace-tm .ace_scroller .ace_content": {
+                fontFamily: "Roboto Mono"
+              },
+              ".ace-tm .ace_gutter-active-line": {
+                color: "var(--color-gray-text-default)",
+                background: "var(--color-gray-control-fill-hover)"
+              },
+              ".ace-tm .ace_marker-layer .ace_active-line": {
+                background: "var(--color-gray-control-fill-hover)"
+              },
+              ".ace_cursor": {
+                display: "none !important"
+              }
+            }
+          }
+        },
+        ".code-editor-container": {
+          position: "relative",
+          borderRadius: "var(--radius-card-base)",
+          background: "var(--color-gray-bg-card-white)",
+          transition: "border-color 0.2s ease-in-out",
+          boxSizing: "border-box",
+          overflow: "hidden",
+          ".ace-github": {
+            background: "transparent"
+          }
+        }
+      },
+      [`&-overlay`]: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1,
+        [`&--loading`]: {
+          background: "rgba(255, 255, 255, 0.6)"
+        },
+        [`&--error`]: {
+          background: "rgba(255, 245, 245, 0.6)",
+          color: "#cb1e1e"
+        }
+      },
+      [`&-empty`]: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        minHeight: "240px",
+        padding: "24px",
+        textAlign: "center"
+      }
+    }
+  };
+};
+function useRealtimeFollowStyle(prefixCls) {
+  return useEditorStyleRegister("WorkspaceRealtimeFollow", (token) => {
+    const realtimeToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(realtimeToken)];
+  });
+}
+export {
+  useRealtimeFollowStyle
+};

package/dist/Workspace/Task/index.d.ts

@@ -0,0 +1,12 @@
+import React, { type FC } from 'react';
+export interface TaskItemInput {
+    items: {
+        key: string;
+        title?: string;
+        content?: React.ReactNode | React.ReactNode[];
+        status: 'success' | 'pending' | 'loading' | 'error';
+    }[];
+}
+export declare const TaskList: FC<{
+    data: TaskItemInput;
+}>;

package/dist/Workspace/Task/index.js

@@ -0,0 +1,43 @@
+// src/Workspace/Task/index.tsx
+import LoadingLottie from "../../TaskList/LoadingLottie";
+import { Check, CircleDashed, OctagonX } from "@sofa-design/icons";
+import { ConfigProvider } from "antd";
+import classNames from "classnames";
+import React, { useContext } from "react";
+import { useTaskStyle } from "./style";
+var StatusIcon = ({ status }) => {
+  switch (status) {
+    case "success":
+      return /* @__PURE__ */ React.createElement(Check, { style: { color: "var(--color-green-control-fill-primary)" } });
+    case "error":
+      return /* @__PURE__ */ React.createElement(OctagonX, { style: { color: "var(--color-red-control-fill-primary)" } });
+    case "loading":
+      return /* @__PURE__ */ React.createElement(LoadingLottie, { style: { color: "var(--color-gray-text-disabled)" } });
+    case "pending":
+    default:
+      return /* @__PURE__ */ React.createElement(CircleDashed, { style: { color: "var(--color-gray-text-disabled)" } });
+  }
+};
+var TaskList = ({ data }) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("workspace-task");
+  const { wrapSSR, hashId } = useTaskStyle(prefixCls);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement("div", { className: classNames(prefixCls, hashId), "data-testid": "task-list" }, data.items.map((item) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: item.key,
+        className: classNames(
+          `${prefixCls}-item`,
+          `${prefixCls}-item-${item.status}`,
+          hashId
+        )
+      },
+      /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-status`, hashId) }, /* @__PURE__ */ React.createElement(StatusIcon, { status: item.status })),
+      /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-content`, hashId) }, /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-title`, hashId) }, item.title), item.content && /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-description`, hashId) }, item.content))
+    )))
+  );
+};
+export {
+  TaskList
+};

package/dist/Workspace/Task/style.d.ts

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

package/dist/Workspace/Task/style.js

@@ -0,0 +1,79 @@
+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/Task/style.ts
+import { useEditorStyleRegister } from "../../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [`${token.componentCls}`]: {
+      padding: "0",
+      "&-item": {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "8px",
+        margin: "12px 0",
+        font: "var(--font-text-h6-base)",
+        color: "var(--color-gray-text-default)"
+      },
+      "&-status": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        marginTop: "2px"
+      },
+      "&-content": {
+        flex: 1,
+        minWidth: 0
+      },
+      "&-title": {
+        fontSize: "14px",
+        fontWeight: 400,
+        lineHeight: "20px",
+        color: "var(--color-gray-text-default)",
+        margin: 0,
+        wordBreak: "break-word"
+      },
+      "&-description": {
+        font: "var(--font-text-body-xs)",
+        color: "var(--color-gray-text-secondary)",
+        marginTop: "4px",
+        wordBreak: "break-word"
+      },
+      // 为 error 和 pending 状态添加灰色字体
+      "&-item-error, &-item-pending": {
+        [`${token.componentCls}-title`]: {
+          color: "var(--color-gray-text-secondary)"
+        }
+      }
+    }
+  };
+};
+function useTaskStyle(prefixCls) {
+  return useEditorStyleRegister("WorkspaceTask", (token) => {
+    const taskToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(taskToken)];
+  });
+}
+export {
+  useTaskStyle
+};

package/dist/Workspace/index.d.ts

@@ -0,0 +1,63 @@
+import { FC } from 'react';
+import type { BrowserProps, CustomProps, FileProps, RealtimeProps, TaskProps, WorkspaceProps } from './types';
+export type { FileActionRef } from './types';
+declare const RealtimeComponent: FC<RealtimeProps>;
+declare const BrowserComponent: FC<BrowserProps>;
+declare const TaskComponent: FC<TaskProps>;
+declare const FileComponent: FC<FileProps>;
+declare const CustomComponent: FC<CustomProps>;
+/**
+ * Workspace 组件 - 工作空间组件
+ *
+ * 该组件提供一个多标签页的工作空间界面，支持实时跟随、浏览器、任务、文件等多种功能模块。
+ * 每个标签页可以独立配置，支持自定义图标、标题、计数等功能。
+ *
+ * @component
+ * @description 工作空间组件，提供多标签页功能模块管理
+ * @param {WorkspaceProps} props - 组件属性
+ * @param {string} [props.activeTabKey] - 当前激活的标签页key
+ * @param {(key: string) => void} [props.onTabChange] - 标签页切换回调
+ * @param {React.CSSProperties} [props.style] - 自定义样式
+ * @param {string} [props.className] - 自定义CSS类名
+ * @param {string} [props.title] - 工作空间标题
+ * @param {() => void} [props.onClose] - 关闭回调
+ * @param {boolean} [props.pure] - 纯净模式，关闭阴影和边框
+ * @param {React.ReactNode} [props.children] - 子组件，支持Workspace.Realtime、Workspace.Browser等
+ *
+ * @example
+ * ```tsx
+ * <Workspace
+ *   title="我的工作空间"
+ *   activeTabKey="realtime"
+ *   onTabChange={(key) => console.log('切换到:', key)}
+ *   onClose={() => console.log('关闭工作空间')}
+ * >
+ *   <Workspace.Realtime data={realtimeData} />
+ *   <Workspace.Browser data={browserData} />
+ *   <Workspace.Task data={taskData} />
+ *   <Workspace.File {...fileProps} />
+ * </Workspace>
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的工作空间组件
+ *
+ * @remarks
+ * - 支持多种功能模块标签页
+ * - 自动根据子组件生成标签页
+ * - 支持标签页的展开/折叠状态管理
+ * - 提供响应式布局适配
+ * - 支持自定义标签页配置
+ * - 集成国际化支持
+ * - 提供关闭功能
+ */
+declare const Workspace: FC<WorkspaceProps> & {
+    Realtime: typeof RealtimeComponent;
+    Browser: typeof BrowserComponent;
+    Task: typeof TaskComponent;
+    File: typeof FileComponent;
+    Custom: typeof CustomComponent;
+};
+export * from './File';
+export type { HtmlPreviewProps } from './HtmlPreview';
+export type { BrowserProps, CustomProps, FileProps, RealtimeProps, TabConfiguration, TabItem, TaskProps, WorkspaceProps, } from './types';
+export default Workspace;