@ant-design/agentic-ui 2.0.0

package/dist/plugins/code/components/CodeToolbar.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @fileoverview 代码编辑器工具栏组件
+ * 提供代码块的各种操作功能，包括语言切换、复制、运行等
+ * @author Code Plugin Team
+ */
+import React from 'react';
+import { CodeNode } from '../../../MarkdownEditor/el';
+import { LanguageSelectorProps } from './LanguageSelector';
+/**
+ * 代码工具栏组件的属性接口
+ */
+export interface CodeToolbarProps {
+    theme: string;
+    setTheme: (theme: string) => void;
+    isExpanded: boolean;
+    /** 代码块元素数据 */
+    element: CodeNode;
+    /** 是否为只读模式 */
+    readonly: boolean;
+    /** 关闭按钮点击回调（用于公式和 mermaid） */
+    onCloseClick: () => void;
+    /** 语言选择器的属性 */
+    languageSelectorProps: LanguageSelectorProps;
+    /** 代码块是否被选中 */
+    isSelected?: boolean;
+    /** 代码块选中状态变化回调 */
+    onSelectionChange?: (selected: boolean) => void;
+    /** 视图模式切换回调（用于HTML和Markdown） */
+    onViewModeToggle?: (value: 'preview' | 'code') => void;
+    /** 当前视图模式（'preview' | 'code'） */
+    viewMode?: 'preview' | 'code';
+    /** 展开/收起回调 */
+    onExpandToggle?: () => void;
+}
+/**
+ * 代码编辑器工具栏组件
+ *
+ * 功能：
+ * - 语言选择器（非只读模式）
+ * - 只读模式下的语言显示
+ * - 复制代码功能
+ * - 全屏切换功能
+ * - HTML 代码运行功能（仅限 HTML 语言）
+ * - 关闭功能（仅限公式和 mermaid）
+ *
+ * 布局：
+ * - 左侧：语言选择器或语言显示
+ * - 右侧：操作按钮组（关闭、运行、复制、全屏）
+ *
+ * @param props - 组件属性
+ * @returns React 工具栏元素
+ *
+ * @example
+ * ```tsx
+ * <CodeToolbar
+ *   element={codeElement}
+ *   readonly={false}
+ *   onCloseClick={() => setHidden(true)}
+ *   languageSelectorProps={langProps}
+ * />
+ * ```
+ */
+export declare const CodeToolbar: (props: CodeToolbarProps) => React.JSX.Element;

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.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @fileoverview HTML预览模态框组件
+ * 负责显示HTML代码的执行结果
+ */
+import React from 'react';
+interface HtmlPreviewProps {
+    htmlStr: string;
+}
+export declare function HtmlPreview({ htmlStr }: HtmlPreviewProps): React.JSX.Element;
+export {};

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.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @fileoverview 语言选择器组件
+ * 提供搜索和选择编程语言的交互界面
+ * @author Code Plugin Team
+ */
+import React from 'react';
+/**
+ * 语言选择器组件的属性接口
+ */
+export interface LanguageSelectorProps {
+    /** 代码块元素信息 */
+    element?: {
+        /** 当前选择的编程语言 */
+        language?: string;
+        /** 是否为数学公式（katex） */
+        katex?: any;
+    };
+    /** 容器引用，用于焦点管理 */
+    containerRef?: React.RefObject<HTMLDivElement>;
+    /** 语言变更回调函数 */
+    setLanguage?: (language: string) => void;
+}
+/**
+ * 语言选择器组件
+ *
+ * 功能：
+ * - 显示当前选择的编程语言
+ * - 提供搜索功能快速查找语言
+ * - 支持点击切换语言
+ * - 显示语言对应的图标
+ *
+ * 交互：
+ * - 点击按钮打开语言选择弹层
+ * - 在搜索框中输入关键字过滤语言
+ * - 选择语言后自动关闭弹层
+ * - 支持键盘导航（Enter 键确认）
+ *
+ * @param props - 组件属性
+ * @returns React 语言选择器元素
+ *
+ * @example
+ * ```tsx
+ * <LanguageSelector
+ *   element={{ language: 'javascript', katex: false }}
+ *   containerRef={containerRef}
+ *   setLanguage={(lang) => console.log('Selected:', lang)}
+ * />
+ * ```
+ */
+export declare const LanguageSelector: (props: LanguageSelectorProps) => React.JSX.Element;

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.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @fileoverview 图片加载组件，提供图片加载状态管理
+ * @author Code Plugin Team
+ */
+import React from 'react';
+/**
+ * 图片加载组件
+ *
+ * 功能：
+ * - 在图片加载成功前隐藏图片
+ * - 图片加载失败时也隐藏图片
+ * - 提供平滑的加载体验
+ *
+ * @param props - 图片元素的属性，支持标准的 img 元素所有属性
+ * @returns React 图片元素
+ *
+ * @example
+ * ```tsx
+ * <LoadImage
+ *   src="https://example.com/icon.png"
+ *   alt="Language Icon"
+ *   style={{ width: '1em', height: '1em' }}
+ * />
+ * ```
+ */
+export declare const LoadImage: (props: Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> & {
+    src?: React.ComponentType<any> | string;
+    size?: number | string;
+}) => React.JSX.Element;

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.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @fileoverview 思考块组件
+ * 只读模式下渲染思考类型的代码块
+ */
+import React from 'react';
+import { CodeNode } from '../../../MarkdownEditor/el';
+interface ThinkBlockProps {
+    element: CodeNode;
+}
+export declare function ThinkBlock({ element }: ThinkBlockProps): React.JSX.Element;
+export {};

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.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @fileoverview 代码插件组件统一导出文件
+ * 提供所有组件和类型的集中导出，便于其他模块引用
+ * @author Code Plugin Team
+ */
+export { AceEditor } from './AceEditor';
+export { AceEditorContainer } from './AceEditorContainer';
+export { CodeContainer } from './CodeContainer';
+export { CodeRenderer } from './CodeRenderer';
+export { CodeToolbar, type CodeToolbarProps } from './CodeToolbar';
+export { HtmlPreview } from './HtmlPreview';
+export { LanguageSelector, type LanguageSelectorProps, } from './LanguageSelector';
+export { LoadImage } from './LoadImage';
+export { ThinkBlock } from './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.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @fileoverview 代码插件Hook统一导出文件
+ * 提供所有Hook的集中导出，便于其他模块引用
+ * @author Code Plugin Team
+ */
+export { useCodeEditorState } from './useCodeEditorState';
+export { useRenderConditions } from './useRenderConditions';
+export { useToolbarConfig } from './useToolbarConfig';

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
+};