@ant-design/agentic-ui 2.0.0

package/dist/Workspace/RealtimeFollow/index.js

@@ -0,0 +1,433 @@
+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/index.tsx
+import useAutoScroll from "../../hooks/useAutoScroll";
+import {
+  FileMarkdown,
+  FileXml,
+  ArrowLeft as LeftIcon,
+  SquareTerminal
+} from "@sofa-design/icons";
+import { ConfigProvider, Empty, Segmented, Spin } from "antd";
+import classNames from "classnames";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { I18nContext } from "../../i18n";
+import {
+  MarkdownEditor
+} from "../../MarkdownEditor";
+import { parserMdToSchema } from "../../MarkdownEditor/editor/parser/parserMdToSchema";
+import { HtmlPreview } from "../HtmlPreview";
+import { useRealtimeFollowStyle } from "./style";
+var getTypeConfig = (type, locale) => {
+  switch (type) {
+    case "shell":
+      return {
+        icon: SquareTerminal,
+        title: (locale == null ? void 0 : locale["workspace.terminalExecution"]) || "终端执行"
+      };
+    case "html":
+      return {
+        icon: FileXml,
+        title: (locale == null ? void 0 : locale["workspace.createHtmlFile"]) || "创建 HTML 文件"
+      };
+    case "markdown":
+    case "md":
+      return {
+        icon: FileMarkdown,
+        title: (locale == null ? void 0 : locale["workspace.markdownContent"]) || "Markdown 内容"
+      };
+    default:
+      return {
+        icon: SquareTerminal,
+        title: (locale == null ? void 0 : locale["workspace.terminalExecution"]) || "终端执行"
+      };
+  }
+};
+var getIconTypeClass = (type, prefixCls) => {
+  switch (type) {
+    case "html":
+      return `${prefixCls}-header-icon--html`;
+    case "markdown":
+    case "md":
+      return `${prefixCls}-header-icon--md`;
+    default:
+      return `${prefixCls}-header-icon--default`;
+  }
+};
+var RealtimeHeader = ({ data, hasBorder, prefixCls, hashId }) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const { locale } = useContext(I18nContext);
+  const finalPrefixCls = prefixCls || getPrefixCls("workspace-realtime");
+  const config = getTypeConfig(data.type, locale);
+  const IconComponent = data.icon || config.icon;
+  const headerTitle = data.title || config.title;
+  const headerSubTitle = data.subTitle;
+  const iconNode = /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(
+        `${finalPrefixCls}-header-icon`,
+        getIconTypeClass(data == null ? void 0 : data.type, finalPrefixCls),
+        hashId
+      )
+    },
+    /* @__PURE__ */ React.createElement(IconComponent, { fontSize: 24 })
+  );
+  return /* @__PURE__ */ React.createElement(
+    "header",
+    {
+      className: classNames(
+        `${finalPrefixCls}-header`,
+        {
+          [`${finalPrefixCls}-header-with-border`]: hasBorder,
+          [`${finalPrefixCls}-header-with-back`]: data == null ? void 0 : data.onBack
+        },
+        hashId
+      )
+    },
+    /* @__PURE__ */ React.createElement("div", { className: classNames(`${finalPrefixCls}-header-left`, hashId) }, (data == null ? void 0 : data.onBack) && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: classNames(
+          `${finalPrefixCls}-header-back-button`,
+          hashId
+        ),
+        onClick: data.onBack
+      },
+      /* @__PURE__ */ React.createElement(
+        LeftIcon,
+        {
+          className: classNames(
+            `${finalPrefixCls}-header-back-icon`,
+            hashId
+          )
+        }
+      )
+    ), /* @__PURE__ */ React.createElement("div", { className: classNames(`${finalPrefixCls}-header-content`, hashId) }, !(data == null ? void 0 : data.onBack) && iconNode, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames(
+          `${finalPrefixCls}-header-title-wrapper`,
+          hashId
+        )
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${finalPrefixCls}-header-title`, hashId)
+        },
+        (data == null ? void 0 : data.onBack) && iconNode,
+        headerTitle
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(
+            `${finalPrefixCls}-header-subtitle`,
+            hashId
+          )
+        },
+        headerSubTitle
+      )
+    ))),
+    /* @__PURE__ */ React.createElement("div", { className: classNames(`${finalPrefixCls}-header-right`, hashId) }, data.rightContent)
+  );
+};
+var getEditorConfig = (type) => {
+  const baseConfig = {
+    readonly: true,
+    toc: false,
+    style: { width: "100%" },
+    typewriter: true
+  };
+  switch (type) {
+    case "shell":
+      return __spreadProps(__spreadValues({}, baseConfig), {
+        contentStyle: {
+          padding: 0,
+          overflow: "visible"
+          // 禁用内部滚动，使用外层容器滚动
+        },
+        codeProps: {
+          theme: "chaos",
+          showGutter: true,
+          showLineNumbers: true,
+          hideToolBar: true
+        }
+      });
+    case "markdown":
+    case "md":
+      return __spreadProps(__spreadValues({}, baseConfig), {
+        contentStyle: {
+          padding: 16,
+          overflow: "visible"
+          // 禁用内部滚动，使用外层容器滚动
+        },
+        height: "100%"
+      });
+    default:
+      return baseConfig;
+  }
+};
+var Overlay = ({ status, loadingRender, errorRender, prefixCls, hashId }) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const { locale } = useContext(I18nContext);
+  const finalPrefixCls = prefixCls || getPrefixCls("workspace-realtime");
+  if (status !== "loading" && status !== "error")
+    return null;
+  const loadingNode = typeof loadingRender === "function" ? loadingRender() : loadingRender;
+  const errorNode = typeof errorRender === "function" ? errorRender() : errorRender;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(
+        `${finalPrefixCls}-overlay`,
+        {
+          [`${finalPrefixCls}-overlay--loading`]: status === "loading",
+          [`${finalPrefixCls}-overlay--error`]: status === "error"
+        },
+        hashId
+      )
+    },
+    status === "loading" ? loadingNode || /* @__PURE__ */ React.createElement(Spin, null) : errorNode || /* @__PURE__ */ React.createElement("span", null, (locale == null ? void 0 : locale["htmlPreview.renderFailed"]) || "页面渲染失败")
+  );
+};
+var RealtimeFollow = ({ data, htmlViewMode = "preview", prefixCls, hashId }) => {
+  var _a, _b, _c;
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const finalPrefixCls = prefixCls || getPrefixCls("workspace-realtime");
+  const mdInstance = useRef();
+  const isTestEnv = false;
+  const { containerRef: autoScrollRef, scrollToBottom } = useAutoScroll({
+    SCROLL_TOLERANCE: 30,
+    timeout: 100,
+    deps: [isTestEnv]
+  });
+  useEffect(() => {
+    var _a2;
+    if (isTestEnv)
+      return;
+    if (((_a2 = mdInstance.current) == null ? void 0 : _a2.store) && (data.type === "shell" || ["markdown", "md"].includes(data.type) || data.type === "html" && htmlViewMode === "code")) {
+      const content = (() => {
+        if (data.type === "html") {
+          const html = typeof data.content === "string" ? data.content : "";
+          return "```html\n" + html + "\n```";
+        }
+        return String(data.content);
+      })();
+      const { schema } = parserMdToSchema(
+        content,
+        mdInstance.current.store.plugins
+      );
+      mdInstance.current.store.updateNodeList(schema);
+      if (data.typewriter && !isTestEnv) {
+        setTimeout(() => scrollToBottom(), 50);
+      }
+    }
+  }, [
+    data.content,
+    data.type,
+    htmlViewMode,
+    isTestEnv,
+    data.typewriter,
+    scrollToBottom
+  ]);
+  if (data.customContent) {
+    const customNode = typeof data.customContent === "function" ? data.customContent() : data.customContent;
+    return /* @__PURE__ */ React.createElement("div", { className: classNames(`${finalPrefixCls}-content`, hashId) }, customNode || null);
+  }
+  if (data.type === "html") {
+    const html = typeof data.content === "string" ? data.content : "";
+    return /* @__PURE__ */ React.createElement("div", { className: classNames(`${finalPrefixCls}-content`, hashId) }, /* @__PURE__ */ React.createElement(
+      HtmlPreview,
+      {
+        html,
+        status: isTestEnv ? "done" : data.status,
+        viewMode: htmlViewMode,
+        onViewModeChange: (m) => {
+          var _a2;
+          return (_a2 = data.onViewModeChange) == null ? void 0 : _a2.call(data, m);
+        },
+        markdownEditorProps: data.markdownEditorProps,
+        iframeProps: data.iframeProps,
+        labels: data.labels,
+        loadingRender: isTestEnv ? void 0 : data.loadingRender,
+        errorRender: isTestEnv ? void 0 : data.errorRender,
+        showSegmented: false,
+        emptyRender: isTestEnv ? void 0 : data.emptyRender
+      }
+    ));
+  }
+  if (!["shell", "markdown", "md", "default"].includes(data.type)) {
+    return null;
+  }
+  const defaultProps = getEditorConfig(data.type);
+  const mergedProps = __spreadProps(__spreadValues(__spreadValues({}, defaultProps), data.markdownEditorProps), {
+    typewriter: isTestEnv ? false : (_a = data.typewriter) != null ? _a : defaultProps.typewriter,
+    style: __spreadValues(__spreadValues({
+      maxHeight: "auto"
+    }, defaultProps.style), (_b = data.markdownEditorProps) == null ? void 0 : _b.style)
+  });
+  const contentStr = String((_c = data.content) != null ? _c : "");
+  const isEmpty = contentStr.trim() === "";
+  const shouldShowEmpty = !isTestEnv && isEmpty && data.status !== "loading" && data.status !== "error";
+  const emptyNode = typeof data.emptyRender === "function" ? data.emptyRender() : data.emptyRender;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(`${finalPrefixCls}-content`, hashId),
+      ref: isTestEnv ? void 0 : autoScrollRef
+    },
+    !isTestEnv && /* @__PURE__ */ React.createElement(
+      Overlay,
+      {
+        status: data.status,
+        loadingRender: data.loadingRender,
+        errorRender: data.errorRender,
+        prefixCls,
+        hashId
+      }
+    ),
+    shouldShowEmpty ? /* @__PURE__ */ React.createElement("div", { className: classNames(`${finalPrefixCls}-empty`, hashId) }, emptyNode || /* @__PURE__ */ React.createElement(Empty, null)) : /* @__PURE__ */ React.createElement(
+      MarkdownEditor,
+      __spreadProps(__spreadValues({}, mergedProps), {
+        editorRef: mdInstance,
+        initValue: String(data.content)
+      })
+    )
+  );
+};
+var RealtimeFollowList = ({ data }) => {
+  var _a, _b;
+  const isControlled = data.type === "html" && data.viewMode !== void 0;
+  const [innerViewMode, setInnerViewMode] = useState(
+    data.defaultViewMode || "preview"
+  );
+  const htmlViewMode = data.type === "html" ? isControlled ? data.viewMode : innerViewMode : "preview";
+  const handleSetMode = (mode) => {
+    var _a2;
+    if (!isControlled)
+      setInnerViewMode(mode);
+    (_a2 = data.onViewModeChange) == null ? void 0 : _a2.call(data, mode);
+  };
+  const { locale } = useContext(I18nContext);
+  const labels = {
+    preview: ((_a = data.labels) == null ? void 0 : _a.preview) || (locale == null ? void 0 : locale["htmlPreview.preview"]) || "预览",
+    code: ((_b = data.labels) == null ? void 0 : _b.code) || (locale == null ? void 0 : locale["htmlPreview.code"]) || "代码"
+  };
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("workspace-realtime");
+  const styleResult = useRealtimeFollowStyle(prefixCls);
+  const { wrapSSR, hashId } = styleResult || {
+    wrapSSR: (node) => node,
+    hashId: ""
+  };
+  const rightContent = (() => {
+    if (data.rightContent)
+      return data.rightContent;
+    if (data.type !== "html")
+      return null;
+    const segmentedNode = data.segmentedItems && data.segmentedItems.length > 0 ? /* @__PURE__ */ React.createElement(
+      Segmented,
+      {
+        options: data.segmentedItems,
+        onChange: (val) => {
+          var _a2;
+          return (_a2 = data.onViewModeChange) == null ? void 0 : _a2.call(data, String(val));
+        }
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      Segmented,
+      {
+        options: [
+          {
+            label: /* @__PURE__ */ React.createElement("div", { className: "ant-segmented-item-title" }, labels.preview),
+            value: "preview"
+          },
+          {
+            label: /* @__PURE__ */ React.createElement("div", { className: "ant-segmented-item-title" }, labels.code),
+            value: "code"
+          }
+        ],
+        value: htmlViewMode,
+        onChange: (val) => handleSetMode(val)
+      }
+    );
+    if (!data.segmentedExtra)
+      return segmentedNode;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames(`${prefixCls}-header-segmented-right`, hashId)
+      },
+      segmentedNode,
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(
+            `${prefixCls}-header-segmented-right-extra`,
+            hashId
+          )
+        },
+        data.segmentedExtra
+      )
+    );
+  })();
+  const headerData = __spreadProps(__spreadValues({}, data), { rightContent });
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames(
+          `${prefixCls}-container`,
+          `${prefixCls}--${data.type}`,
+          data.className,
+          hashId
+        ),
+        style: data.style,
+        "data-testid": "realtime-follow"
+      },
+      /* @__PURE__ */ React.createElement(
+        RealtimeHeader,
+        {
+          data: headerData,
+          hasBorder: ["html", "markdown"].includes(data.type),
+          prefixCls,
+          hashId
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        RealtimeFollow,
+        {
+          data,
+          htmlViewMode,
+          prefixCls,
+          hashId
+        }
+      )
+    )
+  );
+};
+export {
+  RealtimeFollow,
+  RealtimeFollowList
+};

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

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