@ant-design/agentic-ui 2.0.10 → 2.0.12

package/dist/Plugins/code/components/CodeToolbar.js

@@ -0,0 +1,206 @@
+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/Plugins/code/components/CodeToolbar.tsx
+import { CloseCircleOutlined } from "@ant-design/icons";
+import { ChevronsUpDown, Copy, Moon } from "@sofa-design/icons";
+import { message, Segmented } from "antd";
+import copy from "copy-to-clipboard";
+import React, { useContext } from "react";
+import { ActionIconBox } from "../../../Components/ActionIconBox";
+import { I18nContext } from "../../../I18n";
+import { langIconMap } from "../langIconMap";
+import { LanguageSelector } from "./LanguageSelector";
+import { LoadImage } from "./LoadImage";
+var CodeToolbar = (props) => {
+  var _a, _b, _c, _d;
+  const i18n = useContext(I18nContext);
+  const {
+    element,
+    readonly,
+    onCloseClick,
+    languageSelectorProps,
+    onViewModeToggle,
+    theme,
+    isExpanded,
+    onExpandToggle,
+    setTheme,
+    viewMode = "code"
+  } = props;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-testid": "code-toolbar",
+      contentEditable: false,
+      style: {
+        borderTopLeftRadius: "inherit",
+        borderTopRightRadius: "inherit",
+        backgroundColor: "transparent",
+        paddingLeft: "0.25em",
+        paddingRight: "0.25em",
+        width: "100%",
+        position: "sticky",
+        left: 0,
+        top: 0,
+        fontSize: "1em",
+        font: "var(--font-text-h6-base)",
+        color: "inherit",
+        justifyContent: "space-between",
+        zIndex: 50,
+        height: "38px",
+        display: "flex",
+        alignItems: "center",
+        padding: "9px 12px",
+        gap: "16px",
+        alignSelf: "stretch",
+        boxSizing: "border-box",
+        userSelect: "none",
+        borderBottom: isExpanded ? theme === "chaos" ? "1px solid #161616" : "1px solid var(--color-gray-border-light)" : "none"
+      }
+    },
+    readonly ? (
+      // 只读模式：仅显示当前语言信息
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            cursor: "pointer",
+            gap: 4,
+            font: "inherit",
+            color: "inherit",
+            userSelect: "none"
+          },
+          contentEditable: false
+        },
+        langIconMap.get(((_a = element.language) == null ? void 0 : _a.toLowerCase()) || "") && !element.katex && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              height: "1em",
+              width: "1em",
+              fontSize: "16px",
+              display: "flex"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            LoadImage,
+            {
+              style: {
+                height: "1em",
+                width: "1em"
+              },
+              src: langIconMap.get(((_b = element.language) == null ? void 0 : _b.toLowerCase()) || "")
+            }
+          )
+        ),
+        /* @__PURE__ */ React.createElement("div", null, element.language ? /* @__PURE__ */ React.createElement("span", null, element.katex ? "Formula" : element.language === "html" && element.render ? "Html Renderer" : element.language) : /* @__PURE__ */ React.createElement("span", null, "plain text"))
+      )
+    ) : (
+      // 非只读模式：显示语言选择器
+      /* @__PURE__ */ React.createElement(LanguageSelector, __spreadValues({}, languageSelectorProps))
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: 5,
+          alignItems: "center"
+        }
+      },
+      element.katex || element.language === "mermaid" ? /* @__PURE__ */ React.createElement(
+        ActionIconBox,
+        {
+          title: ((_c = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _c.close) || "关闭",
+          onClick: onCloseClick,
+          theme: theme === "chaos" ? "dark" : "light"
+        },
+        /* @__PURE__ */ React.createElement(CloseCircleOutlined, null)
+      ) : null,
+      (element == null ? void 0 : element.language) === "html" || (element == null ? void 0 : element.language) === "markdown" ? /* @__PURE__ */ React.createElement(
+        Segmented,
+        {
+          className: theme === "chaos" ? "chaos-segmented" : "",
+          "data-testid": "preview",
+          options: [
+            {
+              label: "预览",
+              value: "preview"
+            },
+            {
+              label: "代码",
+              value: "code"
+            }
+          ],
+          value: viewMode,
+          onChange: (value) => onViewModeToggle == null ? void 0 : onViewModeToggle(value)
+        }
+      ) : null,
+      /* @__PURE__ */ React.createElement(
+        ActionIconBox,
+        {
+          title: "主题",
+          theme: theme === "chaos" ? "dark" : "light",
+          onClick: () => {
+            setTheme(theme === "github" ? "chaos" : "github");
+          }
+        },
+        /* @__PURE__ */ React.createElement(Moon, null)
+      ),
+      /* @__PURE__ */ React.createElement(
+        ActionIconBox,
+        {
+          theme: theme === "chaos" ? "dark" : "light",
+          title: ((_d = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _d.copy) || "复制",
+          style: {
+            fontSize: "1em",
+            lineHeight: "1.75em",
+            marginLeft: "0.125em"
+          },
+          onClick: (e) => {
+            var _a2;
+            e.stopPropagation();
+            try {
+              const code = element.value || "";
+              copy(code);
+              message.success(((_a2 = i18n.locale) == null ? void 0 : _a2.copySuccess) || "复制成功");
+            } catch (error) {
+              console.error("复制失败:", error);
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(Copy, null)
+      ),
+      /* @__PURE__ */ React.createElement(
+        ActionIconBox,
+        {
+          title: "展开/收起",
+          theme: theme === "chaos" ? "dark" : "light",
+          onClick: () => {
+            onExpandToggle == null ? void 0 : onExpandToggle();
+          }
+        },
+        /* @__PURE__ */ React.createElement(ChevronsUpDown, null)
+      )
+    )
+  );
+};
+export {
+  CodeToolbar
+};

package/dist/Plugins/code/components/HtmlPreview.js

@@ -0,0 +1,23 @@
+// src/Plugins/code/components/HtmlPreview.tsx
+import React from "react";
+function HtmlPreview({ htmlStr }) {
+  return /* @__PURE__ */ React.createElement(
+    "iframe",
+    {
+      "data-testid": "html-preview-iframe",
+      style: {
+        outline: 0,
+        borderRadius: "inherit",
+        border: "none",
+        height: "100%",
+        minHeight: 400,
+        width: "100%"
+      },
+      width: "100%",
+      srcDoc: htmlStr
+    }
+  );
+}
+export {
+  HtmlPreview
+};

package/dist/Plugins/code/components/LanguageSelector.js

@@ -0,0 +1,110 @@
+// src/Plugins/code/components/LanguageSelector.tsx
+import { SearchOutlined } from "@ant-design/icons";
+import { AutoComplete, Button, Input, Popover } from "antd";
+import React, { useContext, useState } from "react";
+import { I18nContext } from "../../../I18n";
+import { langIconMap } from "../langIconMap";
+import { langOptions } from "../utils/langOptions";
+import { LoadImage } from "./LoadImage";
+var LanguageSelector = (props) => {
+  var _a, _b, _c;
+  const i18n = useContext(I18nContext);
+  const [keyword, setKeyword] = useState("");
+  const safeElement = props.element || { language: void 0, katex: false };
+  return /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      arrow: false,
+      styles: {
+        body: {
+          padding: 8
+        }
+      },
+      trigger: ["click"],
+      placement: "bottomLeft",
+      onOpenChange: (visible) => {
+        if (visible) {
+          setTimeout(() => {
+            var _a2, _b2, _c2;
+            (_c2 = (_b2 = (_a2 = props == null ? void 0 : props.containerRef) == null ? void 0 : _a2.current) == null ? void 0 : _b2.querySelector(
+              ".lang-select input"
+            )) == null ? void 0 : _c2.focus();
+          });
+        } else {
+          setKeyword("");
+        }
+      },
+      content: /* @__PURE__ */ React.createElement(
+        AutoComplete,
+        {
+          value: keyword,
+          options: langOptions,
+          autoFocus: true,
+          style: { width: 200 },
+          filterOption: (text, item) => {
+            return (item == null ? void 0 : item.value.includes(text)) || false;
+          },
+          onSelect: (selectedLanguage) => {
+            var _a2;
+            (_a2 = props.setLanguage) == null ? void 0 : _a2.call(props, selectedLanguage);
+          },
+          onChange: (inputValue) => {
+            setKeyword(inputValue);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          },
+          className: "lang-select"
+        },
+        /* @__PURE__ */ React.createElement(Input, { prefix: /* @__PURE__ */ React.createElement(SearchOutlined, null), placeholder: "Search" })
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "text",
+        title: ((_a = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _a.switchLanguage) || "切换语言",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          cursor: "pointer",
+          boxSizing: "border-box",
+          gap: 2,
+          color: "inherit"
+        },
+        size: "small",
+        icon: (
+          // 如果有语言图标且不是公式，则显示图标
+          langIconMap.get(((_b = safeElement.language) == null ? void 0 : _b.toLowerCase()) || "") && !safeElement.katex && /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                height: "1em",
+                width: "1em",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                marginRight: "0.25em"
+              }
+            },
+            /* @__PURE__ */ React.createElement(
+              LoadImage,
+              {
+                src: langIconMap.get(
+                  ((_c = safeElement.language) == null ? void 0 : _c.toLowerCase()) || "html"
+                )
+              }
+            )
+          )
+        )
+      },
+      /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", null, safeElement.language ? /* @__PURE__ */ React.createElement("span", null, safeElement.katex ? "Formula" : safeElement.language) : /* @__PURE__ */ React.createElement("span", null, "")))
+    )
+  );
+};
+export {
+  LanguageSelector
+};

package/dist/Plugins/code/components/LoadImage.js

@@ -0,0 +1,49 @@
+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/Plugins/code/components/LoadImage.tsx
+import React, { useState } from "react";
+var LoadImage = (props) => {
+  var _a;
+  const [show, setShow] = useState(false);
+  if (typeof props.src !== "string" && props.src) {
+    const C = props.src;
+    return /* @__PURE__ */ React.createElement(C, { size: props.size || "1em" });
+  }
+  return /* @__PURE__ */ React.createElement(
+    "img",
+    __spreadProps(__spreadValues({}, props), {
+      src: ((_a = props.src) == null ? void 0 : _a.src) || props.src,
+      style: __spreadProps(__spreadValues({}, props.style), {
+        // 只有加载成功后才显示图片
+        display: show ? "block" : "none"
+      }),
+      onLoad: () => {
+        setShow(true);
+      },
+      onError: () => {
+        setShow(false);
+      }
+    })
+  );
+};
+export {
+  LoadImage
+};

package/dist/Plugins/code/components/ThinkBlock.js

@@ -0,0 +1,47 @@
+// src/Plugins/code/components/ThinkBlock.tsx
+import React, { useContext } from "react";
+import { I18nContext } from "../../../I18n";
+import { EditorStoreContext } from "../../../MarkdownEditor/editor/store";
+import { ToolUseBarThink } from "../../../ToolUseBar";
+var restoreCodeBlocks = (content) => {
+  const marker = "​";
+  return content.replace(
+    new RegExp(
+      `${marker}【CODE_BLOCK:([\\w]*)】\\n?([\\s\\S]*?)\\n?【/CODE_BLOCK】${marker}`,
+      "g"
+    ),
+    (_, lang, code) => {
+      return `\`\`\`${lang}
+${code}
+\`\`\``;
+    }
+  );
+};
+function ThinkBlock({ element }) {
+  var _a;
+  const { locale } = useContext(I18nContext);
+  const { editorProps } = useContext(EditorStoreContext) || {};
+  const rawContent = (element == null ? void 0 : element.value) !== null && (element == null ? void 0 : element.value) !== void 0 ? String(element.value).trim() : "";
+  const content = restoreCodeBlocks(rawContent);
+  const isLoading = content.endsWith("...");
+  const toolNameText = isLoading ? (locale == null ? void 0 : locale["think.deepThinkingInProgress"]) || "深度思考..." : (locale == null ? void 0 : locale["think.deepThinking"]) || "深度思考";
+  return /* @__PURE__ */ React.createElement(
+    ToolUseBarThink,
+    {
+      testId: "think-block",
+      styles: {
+        root: {
+          boxSizing: "border-box",
+          maxWidth: "680px"
+        }
+      },
+      expanded: ((_a = editorProps == null ? void 0 : editorProps.codeProps) == null ? void 0 : _a.alwaysExpandedDeepThink) ? true : void 0,
+      toolName: toolNameText,
+      thinkContent: content,
+      status: isLoading ? "loading" : "success"
+    }
+  );
+}
+export {
+  ThinkBlock
+};

package/dist/Plugins/code/components/index.js

@@ -0,0 +1,23 @@
+// src/Plugins/code/components/index.ts
+import { AceEditor } from "./AceEditor";
+import { AceEditorContainer } from "./AceEditorContainer";
+import { CodeContainer } from "./CodeContainer";
+import { CodeRenderer } from "./CodeRenderer";
+import { CodeToolbar } from "./CodeToolbar";
+import { HtmlPreview } from "./HtmlPreview";
+import {
+  LanguageSelector
+} from "./LanguageSelector";
+import { LoadImage } from "./LoadImage";
+import { ThinkBlock } from "./ThinkBlock";
+export {
+  AceEditor,
+  AceEditorContainer,
+  CodeContainer,
+  CodeRenderer,
+  CodeToolbar,
+  HtmlPreview,
+  LanguageSelector,
+  LoadImage,
+  ThinkBlock
+};

package/dist/Plugins/code/hooks/index.js

@@ -0,0 +1,9 @@
+// src/Plugins/code/hooks/index.ts
+import { useCodeEditorState } from "./useCodeEditorState";
+import { useRenderConditions } from "./useRenderConditions";
+import { useToolbarConfig } from "./useToolbarConfig";
+export {
+  useCodeEditorState,
+  useRenderConditions,
+  useToolbarConfig
+};

package/dist/Plugins/code/hooks/useCodeEditorState.js

@@ -0,0 +1,69 @@
+// src/Plugins/code/hooks/useCodeEditorState.ts
+import { useCallback, useEffect } from "react";
+import { useGetSetState } from "react-use";
+import { Transforms } from "slate";
+import { ReactEditor } from "slate-react";
+import { useEditorStore } from "../../../MarkdownEditor/editor/store";
+import { useSelStatus } from "../../../MarkdownEditor/hooks/editor";
+function useCodeEditorState(element) {
+  const { store, markdownEditorRef } = useEditorStore();
+  const [selected, path] = useSelStatus(element);
+  const [state, setState] = useGetSetState({
+    showBorder: false,
+    htmlStr: "",
+    hide: false,
+    lang: element.language || ""
+  });
+  const update = useCallback(
+    (data) => {
+      Transforms.setNodes(store.editor, data, { at: path });
+    },
+    [path, store.editor]
+  );
+  useEffect(() => {
+    if (selected && ReactEditor.isFocused(markdownEditorRef.current)) {
+      setState({ showBorder: true });
+    } else if (state().showBorder) {
+      setState({ showBorder: false });
+    }
+  }, [selected, path, setState, state, markdownEditorRef]);
+  const handleCloseClick = useCallback(() => {
+    setState({ hide: false });
+  }, [setState]);
+  const handleRunHtml = useCallback(() => {
+    try {
+      setState({ htmlStr: (element == null ? void 0 : element.value) || "" });
+    } catch (error) {
+    }
+  }, [element == null ? void 0 : element.value, setState]);
+  const handleHtmlPreviewClose = useCallback(() => {
+    setState({ htmlStr: "" });
+  }, [setState]);
+  const handleShowBorderChange = useCallback(
+    (show) => {
+      setState({ showBorder: show });
+    },
+    [setState]
+  );
+  const handleHideChange = useCallback(
+    (hide) => {
+      setState({ hide });
+    },
+    [setState]
+  );
+  return {
+    state: state(),
+    setState,
+    update,
+    selected,
+    path,
+    handleCloseClick,
+    handleRunHtml,
+    handleHtmlPreviewClose,
+    handleShowBorderChange,
+    handleHideChange
+  };
+}
+export {
+  useCodeEditorState
+};

package/dist/Plugins/code/hooks/useRenderConditions.js

@@ -0,0 +1,24 @@
+// src/Plugins/code/hooks/useRenderConditions.ts
+import { useMemo } from "react";
+function useRenderConditions(element, readonly) {
+  const shouldHideConfigHtml = useMemo(
+    () => element.language === "html" && (element == null ? void 0 : element.isConfig),
+    [element.language, element == null ? void 0 : element.isConfig]
+  );
+  const shouldRenderAsThinkBlock = useMemo(
+    () => element.language === "think" && readonly,
+    [element.language, readonly]
+  );
+  const shouldRenderAsCodeEditor = useMemo(
+    () => !shouldHideConfigHtml && !shouldRenderAsThinkBlock,
+    [shouldHideConfigHtml, shouldRenderAsThinkBlock]
+  );
+  return {
+    shouldHideConfigHtml,
+    shouldRenderAsThinkBlock,
+    shouldRenderAsCodeEditor
+  };
+}
+export {
+  useRenderConditions
+};

package/dist/Plugins/code/hooks/useToolbarConfig.js

@@ -0,0 +1,47 @@
+// src/Plugins/code/hooks/useToolbarConfig.ts
+import { useCallback } from "react";
+function useToolbarConfig({
+  element,
+  readonly,
+  onCloseClick,
+  setLanguage,
+  isSelected,
+  onSelectionChange,
+  onViewModeToggle,
+  viewMode
+}) {
+  const languageSelectorProps = useCallback(
+    () => ({
+      element,
+      containerRef: { current: null },
+      setLanguage
+    }),
+    [element, setLanguage]
+  )();
+  const toolbarProps = useCallback(
+    () => ({
+      element,
+      readonly,
+      onCloseClick,
+      languageSelectorProps,
+      isSelected,
+      onSelectionChange,
+      onViewModeToggle,
+      viewMode
+    }),
+    [
+      element,
+      readonly,
+      onCloseClick,
+      languageSelectorProps,
+      isSelected,
+      onSelectionChange,
+      onViewModeToggle,
+      viewMode
+    ]
+  )();
+  return { toolbarProps };
+}
+export {
+  useToolbarConfig
+};