@ant-design/agentic-ui 2.0.0

package/dist/Workspace/HtmlPreview/index.js

@@ -0,0 +1,153 @@
+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/HtmlPreview/index.tsx
+import { ConfigProvider, Empty, Segmented, Spin } from "antd";
+import classNames from "classnames";
+import DOMPurify from "dompurify";
+import React, { useContext, useMemo, useState } from "react";
+import { I18nContext } from "../../i18n";
+import { MarkdownEditor } from "../../MarkdownEditor";
+import { useHtmlPreviewStyle } from "./style";
+var HtmlPreview = (props) => {
+  const {
+    html,
+    status: inputStatus,
+    viewMode,
+    defaultViewMode = "preview",
+    onViewModeChange,
+    markdownEditorProps,
+    iframeProps,
+    labels,
+    loadingRender,
+    errorRender,
+    className,
+    style,
+    showSegmented = true,
+    segmentedItems,
+    emptyRender
+  } = props;
+  const status = inputStatus === "generating" ? "loading" : inputStatus;
+  const isControlled = viewMode !== void 0;
+  const [innerMode, setInnerMode] = useState(defaultViewMode);
+  const mode = isControlled ? viewMode : innerMode;
+  const { locale } = useContext(I18nContext);
+  const handleModeChange = (m) => {
+    if (!isControlled)
+      setInnerMode(m);
+    onViewModeChange == null ? void 0 : onViewModeChange(m);
+  };
+  const iframeHtml = useMemo(() => DOMPurify.sanitize(html || ""), [html]);
+  const labelsMap = {
+    preview: (labels == null ? void 0 : labels.preview) || (locale == null ? void 0 : locale["htmlPreview.preview"]) || "预览",
+    code: (labels == null ? void 0 : labels.code) || (locale == null ? void 0 : locale["htmlPreview.code"]) || "代码"
+  };
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("workspace-html-preview");
+  const overlayNode = (() => {
+    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(`${prefixCls}-overlay`, {
+          [`${prefixCls}-overlay--loading`]: status === "loading",
+          [`${prefixCls}-overlay--error`]: status === "error"
+        })
+      },
+      status === "loading" ? loadingNode || /* @__PURE__ */ React.createElement(Spin, null) : errorNode || /* @__PURE__ */ React.createElement("span", null, (locale == null ? void 0 : locale["htmlPreview.renderFailed"]) || "页面渲染失败")
+    );
+  })();
+  const getMergedMdConfig = () => {
+    const defaultMdConfig = {
+      width: "100%",
+      height: "100%",
+      contentStyle: {
+        width: "100%",
+        padding: 0,
+        marginTop: -10
+      },
+      codeProps: {
+        showGutter: true,
+        showLineNumbers: true,
+        hideToolBar: true
+      }
+    };
+    return __spreadValues(__spreadValues({}, defaultMdConfig), markdownEditorProps);
+  };
+  const { wrapSSR, hashId } = useHtmlPreviewStyle(prefixCls);
+  const isEmpty = (html != null ? html : "").trim() === "";
+  const shouldShowEmpty = isEmpty && status !== "loading" && status !== "error";
+  const emptyNode = typeof emptyRender === "function" ? emptyRender() : emptyRender;
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement("div", { className: classNames(prefixCls, className, hashId), style }, showSegmented && /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-actions`, hashId) }, segmentedItems && segmentedItems.length > 0 ? /* @__PURE__ */ React.createElement(
+      Segmented,
+      {
+        options: segmentedItems,
+        value: mode,
+        onChange: (v) => handleModeChange(String(v))
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      Segmented,
+      {
+        size: "small",
+        options: [
+          { label: labelsMap.preview, value: "preview" },
+          { label: labelsMap.code, value: "code" }
+        ],
+        value: mode,
+        onChange: (v) => handleModeChange(v)
+      }
+    )), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames(`${prefixCls}-content`, hashId),
+        style: { minHeight: 240 }
+      },
+      overlayNode,
+      shouldShowEmpty ? /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-empty`, hashId) }, emptyNode || /* @__PURE__ */ React.createElement(Empty, { description: (locale == null ? void 0 : locale["workspace.empty"]) || "No data" })) : mode === "code" ? /* @__PURE__ */ React.createElement(
+        MarkdownEditor,
+        __spreadProps(__spreadValues({}, getMergedMdConfig()), {
+          readonly: true,
+          toc: false,
+          initValue: `\`\`\`html
+${html || ""}
+\`\`\``
+        })
+      ) : /* @__PURE__ */ React.createElement(
+        "iframe",
+        __spreadValues({
+          title: "html-preview",
+          className: classNames(`${prefixCls}-iframe`, hashId),
+          sandbox: (iframeProps == null ? void 0 : iframeProps.sandbox) || "allow-scripts",
+          srcDoc: iframeHtml,
+          key: iframeHtml
+        }, iframeProps)
+      )
+    ))
+  );
+};
+var HtmlPreview_default = HtmlPreview;
+export {
+  HtmlPreview,
+  HtmlPreview_default as default
+};

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

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

package/dist/Workspace/HtmlPreview/style.js

@@ -0,0 +1,83 @@
+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/HtmlPreview/style.ts
+import { useEditorStyleRegister } from "../../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [`${token.componentCls}`]: {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      [`${token.componentCls}-actions`]: {
+        display: "flex",
+        justifyContent: "flex-end",
+        padding: "8px 0"
+      },
+      [`${token.componentCls}-content`]: {
+        position: "relative",
+        width: "100%",
+        height: "100%"
+      },
+      [`${token.componentCls}-iframe`]: {
+        width: "100%",
+        height: "100%",
+        minHeight: "240px",
+        border: "none",
+        background: "#fff"
+      },
+      [`${token.componentCls}-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"
+        }
+      },
+      [`${token.componentCls}-empty`]: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        minHeight: "240px",
+        padding: "24px",
+        textAlign: "center"
+      }
+    }
+  };
+};
+function useHtmlPreviewStyle(prefixCls) {
+  return useEditorStyleRegister("WorkspaceHtmlPreview", (token) => {
+    const htmlPreviewToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(htmlPreviewToken)];
+  });
+}
+export {
+  useHtmlPreviewStyle
+};

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { MarkdownEditorProps } from '../../MarkdownEditor';
+export type RealtimeFollowMode = 'shell' | 'html' | 'markdown' | 'md' | 'default';
+export interface DiffContent {
+    original: string;
+    modified: string;
+}
+export interface RealtimeFollowData {
+    type: RealtimeFollowMode;
+    content?: string | DiffContent;
+    markdownEditorProps?: Partial<MarkdownEditorProps>;
+    title?: string;
+    subTitle?: string;
+    icon?: React.ComponentType;
+    typewriter?: boolean;
+    rightContent?: React.ReactNode;
+    loadingRender?: React.ReactNode | (() => React.ReactNode);
+    className?: string;
+    style?: React.CSSProperties;
+    errorRender?: React.ReactNode | (() => React.ReactNode);
+    emptyRender?: React.ReactNode | (() => React.ReactNode);
+    status?: 'loading' | 'done' | 'error';
+    onBack?: () => void;
+    /** 自定义渲染内容，传入后将直接渲染该内容，忽略其他渲染逻辑 */
+    customContent?: React.ReactNode | (() => React.ReactNode);
+    viewMode?: 'preview' | 'code';
+    defaultViewMode?: 'preview' | 'code';
+    onViewModeChange?: (mode: 'preview' | 'code') => void;
+    iframeProps?: React.IframeHTMLAttributes<HTMLIFrameElement>;
+    labels?: {
+        preview?: string;
+        code?: string;
+    };
+    segmentedItems?: Array<{
+        label: React.ReactNode;
+        value: string;
+    }>;
+    segmentedExtra?: React.ReactNode;
+}
+/**
+ * 实时跟随组件 - 支持 HTML、Markdown、Shell 等类型，或自定义内容
+ * @example
+ * <RealtimeFollow data={{ type: 'shell', customContent: <div>自定义内容</div> }} />
+ */
+export declare const RealtimeFollow: React.FC<{
+    data: RealtimeFollowData;
+    htmlViewMode?: 'preview' | 'code';
+    prefixCls?: string;
+    hashId?: string;
+}>;
+/**
+ * 实时跟随列表组件 - RealtimeFollow 的包装组件，管理视图模式状态
+ */
+export declare const RealtimeFollowList: React.FC<{
+    data: RealtimeFollowData;
+}>;