@antv/dumi-theme-antv 0.7.10 → 0.8.0-beta.1

package/dist/pages/AIPlayground/components/MsgBox/index.js

@@ -0,0 +1,269 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { CheckOutlined, CopyOutlined, DislikeOutlined, LikeOutlined, PlusSquareOutlined, SyncOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import { Button, Flex, Space, Tooltip } from 'antd';
+import { history, useSiteData } from 'dumi';
+import { findLast } from 'lodash-es';
+import React, { useEffect, useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import { useSnapshot } from 'valtio';
+import { PromptTextarea } from "../../../../components/AI/HomeDialog/PromptTextarea";
+import { useStreamingText } from "../../../../hooks/useStreamingText";
+import { AIChatStore, clearEmptySession, createPureNewSession, derivedState } from "../../../../model/AIChat";
+import { getCodeFromMarkdown, isPreviewable } from "../../../../utils/code";
+import { MarkdownComponent } from "../MarkdownComponent";
+import styles from "./index.module.less";
+var avatar = {
+  icon: /*#__PURE__*/React.createElement("img", {
+    draggable: false,
+    src: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7svFR6wkPMoAAAAAAAAAAAAADmJ7AQ/original',
+    alt: "AntV"
+  }),
+  style: {
+    borderRadius: 0,
+    backgroundColor: 'transparent'
+  }
+};
+var chatScrollIntoView = function chatScrollIntoView() {
+  setTimeout(function () {
+    var nodeList = document.querySelectorAll('.ant-bubble');
+    nodeList[nodeList.length - 1].scrollIntoView({
+      behavior: 'smooth'
+    });
+  });
+};
+function MsgBox(props) {
+  var _derivedSnap$activeSe, _derivedSnap$activeSe2, _derivedSnap$activeSe3;
+  var _props$messages = props.messages,
+    messages = _props$messages === void 0 ? [] : _props$messages,
+    _props$simple = props.simple,
+    simple = _props$simple === void 0 ? false : _props$simple,
+    _props$context = props.context,
+    context = _props$context === void 0 ? '' : _props$context,
+    onCodegen = props.onCodegen,
+    title = props.title;
+  var _useSiteData = useSiteData(),
+    themeConfig = _useSiteData.themeConfig;
+  var _useState = useState(!themeConfig.isAntVSite ? themeConfig.title : undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    lib = _useState2[0],
+    setLib = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    promptText = _useState4[0],
+    setPromptText = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isStreaming = _useState6[0],
+    setIsStreaming = _useState6[1]; // trigger
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    loading = _useState8[0],
+    setLoading = _useState8[1];
+  var snap = useSnapshot(AIChatStore);
+  var derivedSnap = useSnapshot(derivedState);
+  var _useCopyToClipboard = useCopyToClipboard(),
+    _useCopyToClipboard2 = _slicedToArray(_useCopyToClipboard, 2),
+    copyState = _useCopyToClipboard2[0],
+    copyToClipboard = _useCopyToClipboard2[1];
+  var latestUserMessage = findLast((_derivedSnap$activeSe = derivedSnap.activeSession) === null || _derivedSnap$activeSe === void 0 ? void 0 : _derivedSnap$activeSe.messages, function (msg) {
+    return msg.role === 'user';
+  });
+  var streamingText = useStreamingText({
+    url: 'https://webgw-pre.alipay.com/visqaservice/external/chat',
+    method: 'POST',
+    body: {
+      gptConversationId: (_derivedSnap$activeSe2 = derivedSnap.activeSession) === null || _derivedSnap$activeSe2 === void 0 ? void 0 : _derivedSnap$activeSe2.id,
+      query: latestUserMessage === null || latestUserMessage === void 0 ? void 0 : latestUserMessage.content,
+      library: (latestUserMessage === null || latestUserMessage === void 0 ? void 0 : latestUserMessage.lib) || lib,
+      mode: latestUserMessage === null || latestUserMessage === void 0 ? void 0 : latestUserMessage.mode,
+      anonymousUserId: snap.anonymousUserId,
+      context: (latestUserMessage === null || latestUserMessage === void 0 ? void 0 : latestUserMessage.context) || context,
+      mountId: "container"
+    },
+    trigger: isStreaming,
+    // 将 isStreaming 状态作为 trigger
+    headers: {
+      'Content-Type': 'application/json',
+      'x-webgw-version': '2.0',
+      'x-webgw-appid': '180020010001210065'
+    },
+    beforeStart: function beforeStart() {
+      setLoading(true);
+    },
+    onFinish: function onFinish(finalText) {
+      try {
+        var _derivedState$activeS;
+        var finalJSON = JSON.parse(finalText);
+        (_derivedState$activeS = derivedState.activeSession) === null || _derivedState$activeS === void 0 || (_derivedState$activeS = _derivedState$activeS.messages) === null || _derivedState$activeS === void 0 || _derivedState$activeS.push({
+          id: crypto.randomUUID(),
+          role: 'assistant',
+          content: finalJSON.content,
+          createdAt: Date.now()
+          // mode,
+          // lib,
+        });
+        if (isPreviewable(finalJSON.content)) {
+          var codeBlock = getCodeFromMarkdown(finalJSON.content).code;
+          AIChatStore.codeBlock = codeBlock;
+          onCodegen === null || onCodegen === void 0 || onCodegen(codeBlock);
+        }
+      } catch (e) {
+        // 说明不是JSON格式
+      } finally {
+        // 当流结束时，更新最后一条消息并重置 trigger
+        setIsStreaming(false); // **关键：流结束后，关闭 trigger**
+        setLoading(false);
+        chatScrollIntoView();
+      }
+    },
+    onError: function onError(error) {
+      var _derivedState$activeS2;
+      console.log('回答失败', error);
+      // 处理错误
+      (_derivedState$activeS2 = derivedState.activeSession) === null || _derivedState$activeS2 === void 0 || (_derivedState$activeS2 = _derivedState$activeS2.messages) === null || _derivedState$activeS2 === void 0 || _derivedState$activeS2.push({
+        id: crypto.randomUUID(),
+        role: 'assistant',
+        content: "\u62B1\u6B49\uFF0C\u6211\u6CA1\u80FD\u6210\u529F\u5904\u7406\u60A8\u7684\u8BF7\u6C42\uFF0C\u8BF7\u7A0D\u540E\u518D\u6B21\u63D0\u95EE",
+        createdAt: Date.now()
+        // mode,
+        // lib,
+      });
+      setIsStreaming(false);
+      setLoading(false);
+    }
+  });
+
+  // 3. 处理用户提交
+  var handleSubmit = function handleSubmit() {
+    var _derivedState$activeS3;
+    if (!promptText.trim() || isStreaming) return; // 如果正在流式输出，则不允许发送
+    setPromptText('');
+    (_derivedState$activeS3 = derivedState.activeSession) === null || _derivedState$activeS3 === void 0 || (_derivedState$activeS3 = _derivedState$activeS3.messages) === null || _derivedState$activeS3 === void 0 || _derivedState$activeS3.push({
+      id: crypto.randomUUID(),
+      role: 'user',
+      content: promptText,
+      createdAt: Date.now(),
+      lib: lib
+    });
+    // **关键：开启 trigger，开始请求**
+    setIsStreaming(true);
+    chatScrollIntoView();
+  };
+  useEffect(function () {
+    // 检查是否存在临时消息
+    if (snap.tempMessage) {
+      var activeSession = derivedState.activeSession;
+      if (activeSession) {
+        // 1. 将临时消息正式添加到当前会话中
+        activeSession.messages.push(snap.tempMessage);
+        setIsStreaming(true);
+        AIChatStore.tempMessage = null;
+      }
+    }
+    if (simple) {
+      createPureNewSession(title);
+    }
+    return function () {
+      clearEmptySession();
+    };
+  }, []);
+  useEffect(function () {
+    if (derivedState.activeSession && Date.now() - derivedState.activeSession.createdAt > 5000) {
+      setLoading(false);
+      setIsStreaming(false);
+    }
+  }, [snap.activeSessionId]);
+  var showMessages = [].concat(_toConsumableArray(messages), _toConsumableArray((_derivedSnap$activeSe3 = derivedSnap.activeSession) === null || _derivedSnap$activeSe3 === void 0 ? void 0 : _derivedSnap$activeSe3.messages));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, {
+    gap: "middle",
+    vertical: true,
+    className: styles.chatContainer
+  }, showMessages === null || showMessages === void 0 ? void 0 : showMessages.map(function (msg, index) {
+    return /*#__PURE__*/React.createElement(Bubble, {
+      key: index,
+      content: /*#__PURE__*/React.createElement(MarkdownComponent, {
+        content: msg.content
+      }),
+      avatar: msg.role === 'assistant' ? avatar : null,
+      footer: msg.role === 'assistant' && index > 0 ? /*#__PURE__*/React.createElement(Space, {
+        size: "small"
+      }, /*#__PURE__*/React.createElement(Tooltip, {
+        title: "\u70B9\u8D5E"
+      }, /*#__PURE__*/React.createElement(Button, {
+        color: "default",
+        variant: "text",
+        size: "small",
+        icon: /*#__PURE__*/React.createElement(LikeOutlined, null)
+      })), /*#__PURE__*/React.createElement(Tooltip, {
+        title: "\u70B9\u8E29"
+      }, /*#__PURE__*/React.createElement(Button, {
+        color: "default",
+        variant: "text",
+        size: "small",
+        icon: /*#__PURE__*/React.createElement(DislikeOutlined, null)
+      })), index === showMessages.length - 1 && /*#__PURE__*/React.createElement(Tooltip, {
+        title: "\u518D\u6765\u4E00\u6B21"
+      }, /*#__PURE__*/React.createElement(Button, {
+        onClick: function onClick() {
+          derivedState.activeSession.messages.pop();
+          setIsStreaming(true);
+        },
+        color: "default",
+        variant: "text",
+        size: "small",
+        icon: /*#__PURE__*/React.createElement(SyncOutlined, null)
+      })), /*#__PURE__*/React.createElement(Tooltip, {
+        title: "\u590D\u5236"
+      }, /*#__PURE__*/React.createElement(Button, {
+        color: "default",
+        variant: "text",
+        size: "small",
+        onClick: function onClick() {
+          return copyToClipboard(msg.content);
+        },
+        icon: copyState.value === msg.content ? /*#__PURE__*/React.createElement(CheckOutlined, null) : /*#__PURE__*/React.createElement(CopyOutlined, null)
+      }))) : null,
+      placement: msg.role === 'user' ? 'end' : 'start'
+    });
+  }), loading && /*#__PURE__*/React.createElement(Bubble, {
+    placement: "start",
+    avatar: avatar,
+    loading: loading
+  })), /*#__PURE__*/React.createElement("div", null, !props.simple && /*#__PURE__*/React.createElement("div", {
+    className: styles.newButtonContainer
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return history.push('/');
+    },
+    className: styles.newButton
+  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(PlusSquareOutlined, null), "\u5F00\u59CB\u65B0\u5BF9\u8BDD"))), /*#__PURE__*/React.createElement(PromptTextarea, {
+    size: "compact",
+    mode: "implement",
+    value: promptText,
+    onChange: setPromptText,
+    loading: loading,
+    onCancel: function onCancel() {
+      setIsStreaming(false);
+      setLoading(false);
+    },
+    showAction: !props.simple,
+    style: {
+      marginBottom: 0
+    },
+    onConfirm: handleSubmit,
+    lib: lib,
+    onLibChange: setLib
+  })));
+}
+export default MsgBox;

package/dist/pages/AIPlayground/components/MsgBox/index.module.less

@@ -0,0 +1,42 @@
+.msg {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.query {
+  background: #c9dfff;
+  box-shadow: 0 4px 10px rgba(51, 113, 242, .1);
+  border-radius: 8px;
+  padding: 8px 16px;
+  max-width: calc(100% - 100px);
+  word-break: break-all;
+  font-size: 14px;
+  line-height: 26px;
+  font-weight: 400;
+  color: #1d2129;
+}
+
+.newButton {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  height: 30px;
+  padding: 0 8px;
+  color: var(--primary-color);
+  font-size: 14px;
+  background: rgba(135, 59, 244, .145);
+  border-radius: 6px;
+  line-height: 22px;
+  margin: 12px auto;
+}
+
+.newButtonContainer {
+  display: flex;
+}
+
+.chatContainer {
+  height: 100%;
+  overflow: auto;
+}

package/dist/pages/AIPlayground/components/SessionLayout/index.js

@@ -0,0 +1,25 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import styles from "./index.module.less";
+import { ConversationsMenu } from "../ConversationsMenu";
+import { AIChatStore } from "../../../../model/AIChat";
+import { useSnapshot } from "valtio";
+import classnames from "classnames";
+function SessionLayout(props) {
+  var children = props.children;
+  var snap = useSnapshot(AIChatStore);
+  if (!Array.isArray(children)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement(ConversationsMenu, null), /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.msgBox, _defineProperty(_defineProperty({}, styles.msgBoxHalf, snap.codeBlock), styles.msgBoxFull, !snap.codeBlock))
+  }, children[0]), snap.codeBlock && /*#__PURE__*/React.createElement("div", {
+    className: styles.taskBox
+  }, children[1]));
+}
+export { SessionLayout };

package/dist/pages/AIPlayground/components/SessionLayout/index.module.less

@@ -0,0 +1,34 @@
+.container {
+  display: flex;
+  gap: 12px;
+  background: #f6f7fb;
+  height: calc(100vh - 64px);
+  padding: 0;
+}
+
+.msgBox, .taskBox{
+  box-shadow: 0 2px 7px #e0e0e080;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+}
+
+.msgBox {
+  padding: 16px;
+  min-width: 400px;
+  justify-content: space-between;
+}
+
+.msgBoxHalf {
+  max-width: 30vw;
+}
+
+.msgBoxFull {
+  width: 100%;
+}
+
+.taskBox {
+  margin: 16px;
+  flex-grow: 1;
+  background: #ffffff;
+}

package/dist/pages/AIPlayground/components/TaskBox/generateCode.js

@@ -0,0 +1,109 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+/**
+ * 从代码字符串中提取依赖，并生成 package.json 的 dependencies 对象。
+ *
+ * @param {string} codeString 包含代码的字符串。
+ * @returns {object} 一个符合 package.json dependencies 格式的对象。
+ */
+export function generateDependencies(codeString) {
+  // 1. 初始化固定的依赖
+  var dependencies = {};
+
+  // 2. 定义正则表达式来匹配 import 语句的来源
+  // 这个正则表达式可以处理以下情况:
+  // - import defaultExport from 'package-name';
+  // - import { namedExport } from 'package-name';
+  // - import * as name from 'package-name';
+  // - import 'package-name'; (用于副作用)
+  // - import defaultExport from '@scoped/package-name/sub-path';
+  //
+  // 解析:
+  // - `import(?:.*from)?` : 匹配 "import" 关键字，以及可选的 "... from" 部分。
+  // - `\s+` : 匹配一个或多个空格。
+  // - `['"]` : 匹配单引号或双引号。
+  // - `([^'"]+)` : 核心捕获组。匹配引号内的所有字符，这就是我们需要的包路径。
+  // - `['"]` : 匹配结束的引号。
+  // - `/g` : 全局匹配，查找所有符合条件的导入。
+  var importRegex = /import(?:.*from)?\s+['"]([^'"]+)['"]/g;
+
+  // 使用 Set 来存储找到的包，可以自动去重
+  var foundPackages = new Set();
+
+  // 3. 遍历所有匹配项
+  var match;
+  while ((match = importRegex.exec(codeString)) !== null) {
+    // 捕获组 match[1] 包含了完整的导入路径，例如 '@antv/g2' 或 'react-dom/client'
+    var importPath = match[1];
+
+    // 4. 过滤掉相对路径和绝对路径
+    if (importPath.startsWith('.') || importPath.startsWith('/')) {
+      continue;
+    }
+
+    // 5. 提取根包名
+    // 这可以处理像 'react-dom/client' 这样的深层导入，我们只需要 'react-dom'
+    // 或者像 '@antv/g2/es/chart'，我们只需要 '@antv/g2'
+    var rootPackage = void 0;
+    var pathParts = importPath.split('/');
+    if (importPath.startsWith('@')) {
+      // 对于作用域包 (scoped package)，例如 @antv/g2，根包名是前两部分
+      rootPackage = "".concat(pathParts[0], "/").concat(pathParts[1]);
+    } else {
+      // 对于普通包，根包名是第一部分
+      rootPackage = pathParts[0];
+    }
+    foundPackages.add(rootPackage);
+  }
+
+  // 6. 将找到的包添加到最终的依赖对象中
+  var _iterator = _createForOfIteratorHelper(foundPackages),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var pkg = _step.value;
+      // 如果不是固定的依赖，就添加并设置为 'latest'
+      if (!Object.prototype.hasOwnProperty.call(dependencies, pkg)) {
+        dependencies[pkg] = "latest";
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return dependencies;
+}
+export function wrap2VisionSnap() {
+  var codeBlock = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return {
+    modules: {
+      '/package.json': {
+        fpath: '/package.json',
+        code: "{\n  \"name\": \"AntV-master\",\n  \"version\": \"1.0.0\",\n  \"main\": \"/src/index.jsx\",\n  \"dependencies\": ".concat(JSON.stringify(generateDependencies(codeBlock), null, 2), "\n}")
+      },
+      '/src/index.jsx': {
+        fpath: '/src/index.jsx',
+        code: codeBlock
+      }
+    }
+  };
+}
+export function wrap2Sandpack() {
+  var codeBlock = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  // const regex = /^```[\w-]*\n([\s\S]*?)\n?```$/m;
+  // const match = codeBlock.match(regex);
+  // if (match) {
+  return {
+    "/package.json": {
+      code: "{\n      \"name\": \"AntV-AI-Code\",\n      \"version\": \"1.0.0\",\n      \"main\": \"/index.tsx\",\n      \"dependencies\": ".concat(JSON.stringify(generateDependencies(codeBlock), null, 2), "\n    }")
+    },
+    "/index.tsx": {
+      code: codeBlock
+    },
+    "/index.html": {
+      code: "<!DOCTYPE html>\n<html>\n<head>\n  <title>Vanilla JS Example</title>\n</head>\n<body>\n  <div id=\"root\"></div>\n  <div id=\"container\"></div>\n  <script src=\"index.tsx\"></script>\n</body>\n</html>"
+    }
+  };
+}

package/dist/pages/AIPlayground/components/TaskBox/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Sandpack } from "@codesandbox/sandpack-react";
+import styles from "./index.module.less";
+import { AIChatStore } from "../../../../model/AIChat";
+import { useSnapshot } from "valtio";
+import { wrap2Sandpack } from "./generateCode";
+// import {code} from "../../demo";
+// import {requestProxy, useVisionsnapSdk} from "../../../../hooks/useVisionsnapSdk";
+
+function TaskBox() {
+  var snap = useSnapshot(AIChatStore);
+
+  // const { sdk, loading } = useVisionsnapSdk('3.2.4');
+  //
+  // if (loading) {
+  //   return <div>Loading...</div>;
+  // }
+  //
+  // return (
+  //     <sdk.VisionPreview id="visionIframe"
+  //                        bizCode="vision-preview-demo"
+  //                        style={{ height: '100vh' }}
+  //                        userId="263347"
+  //                        displayMode="preview-only"
+  //                        editable={false}
+  //                        code={code}
+  //                        // requestProxy={requestProxy}
+  //                        isStreaming={false} />
+  // );
+
+  return /*#__PURE__*/React.createElement(Sandpack, {
+    template: "vanilla" // 指定项目模板，Sandpack 会据此配置环境
+    ,
+    files: wrap2Sandpack(snap.codeBlock),
+    options: {
+      showLineNumbers: true,
+      // 显示行号
+      showTabs: true,
+      closableTabs: false,
+      editorHeight: 'calc(100vh - 150px)',
+      rtl: true,
+      classes: {
+        'sp-layout': styles['antv-sp-layout']
+      }
+    },
+    theme: "light" // 主题：dark, light, auto
+    ,
+    customSetup: {
+      entry: "/index.tsx",
+      npmRegistries: [{
+        limitToScopes: false,
+        // 设为 false 使所有包都从自定义 registry 获取
+        registryUrl: 'https://registry.npmmirror.com',
+        // 使用淘宝镜像
+        enabledScopes: [],
+        proxyEnabled: false
+      }]
+    }
+  });
+}
+export default TaskBox;

package/dist/pages/AIPlayground/components/TaskBox/index.module.less

@@ -0,0 +1,8 @@
+div.antv-sp-layout {
+  border: unset;
+  :global {
+    .sp-c-hluGOI:has(button:focus) {
+      outline: none !important;
+    }
+  }
+}

package/dist/pages/AIPlayground/demo.js

@@ -0,0 +1,34 @@
+export var projectFiles = {
+  "/package.json": {
+    code: "{\n      \"name\": \"antv-g2-example\",\n      \"version\": \"1.0.0\",\n      \"main\": \"/index.js\",\n      \"dependencies\": {\n        \"@antv/g2\": \"^5\"\n      }\n    }"
+  },
+  "/index.js": {
+    // 入口文件是纯 JS
+    code: "import { Chart } from '@antv/g2';\n\n    const chart = new Chart({\n      container: 'root',\n    });\n\n    chart.options({\n      type: 'interval',\n      autoFit: true,\n      data: [\n        { grade: '\u4E00\u5E74\u7EA7', count: 200 },\n        { grade: '\u4E8C\u5E74\u7EA7', count: 250 },\n        { grade: '\u4E09\u5E74\u7EA7', count: 300 },\n        { grade: '\u56DB\u5E74\u7EA7', count: 350 },\n      ],\n      encode: { x: 'grade', y: 'count' },\n    });\n\n    chart.render();\n    "
+  },
+  "/index.html": {
+    code: "<!DOCTYPE html>\n<html>\n<head>\n  <title>Vanilla JS Example</title>\n</head>\n<body>\n  <div id=\"root\"></div>\n  <div id=\"container\"></div>\n  <script src=\"index.js\"></script>\n</body>\n</html>"
+  }
+};
+export var code = {
+  modules: {
+    // package.json 文件是必须要的，其中 name, version, main, dependencies 必填
+    '/package.json': {
+      fpath: '/package.json',
+      code: "{\n  \"name\": \"dark-card-app\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@ant-design/icons\": \"^5.2.6\",\n    \"@alipay/bigfish\": \"^4.3.0\"\n  },\n\"main\": \"src/index.jsx\"\n}\n"
+    },
+    // 入口文件默认是 /src/index.tsx，也可以配合 package.json main 字段指定其他入口
+    '/src/index.jsx': {
+      fpath: '/src/index.jsx',
+      code: "import React from '@alipay/bigfish/react';\n      import ReactDOM from '@alipay/bigfish/react-dom';\nimport { ConfigProvider, theme } from '@alipay/bigfish/antd';\nimport App from './App';\nReactDOM.createRoot(document.getElementById('root')).render(\n  <React.StrictMode>\n    <ConfigProvider\n      theme={{\n        algorithm: theme.darkAlgorithm,\n        token: {\n          colorBgContainer: '#141414',\n          colorBorderSecondary: '#303030',\n        }\n      }}\n    >\n      <App />\n    </ConfigProvider>\n  </React.StrictMode>\n);\n"
+    },
+    '/src/App.jsx': {
+      fpath: '/src/App.jsx',
+      code: "import React from '@alipay/bigfish/react';\nimport { Card, Avatar, Typography, Space } from '@alipay/bigfish/antd';\nimport { UserOutlined, ClockCircleOutlined, HeartOutlined, MessageOutlined } from '@ant-design/icons';\nimport './App.less';\nimport {styled} from '@alipay/bigfish';\nconst Title = styled.div`\n  color: palevioletred;\n`;\n\nconst { Text } = Typography;\n\nconst DarkCard = () => {\n  return (\n    <div className=\"dark-card-container\">\n      <Card\n        className=\"dark-card\"\n        cover={\n          <div className=\"card-cover\">\n            <div className=\"cover-image-placeholder\" />\n          </div>\n        }\n        actions={[\n          <Space key=\"time\">\n            <ClockCircleOutlined />\n            <Text className=\"action-text\">2 hours ago</Text>\n          </Space>,\n          <Space key=\"likes\">\n            <HeartOutlined />\n            <Text className=\"action-text\">128</Text>\n          </Space>,\n          <Space key=\"comments\">\n            <MessageOutlined />\n            <Text className=\"action-text\">24</Text>\n          </Space>\n        ]}\n      >\n        <Card.Meta\n          avatar={<Avatar size={40} icon={<UserOutlined />} />}\n          title={<Title>Dark Theme Card</Title>}\n          description={\n            <Text className=\"card-description\">\n              This is a dark themed card with modern design elements.\n              Perfect for displaying content in low-light interfaces.\n            </Text>\n          }\n        />\n      </Card>\n    </div>\n  );\n};\n\nexport default DarkCard;\n"
+    },
+    '/src/App.less': {
+      fpath: '/src/App.less',
+      code: ".dark-card-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  background-color: #0a0a0a;\n  padding: 20px;\n}\n\n.dark-card {\n  width: 100%;\n  max-width: 400px;\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\n\n  .ant-card-head {\n    border-bottom: 1px solid #303030;\n  }\n\n  .ant-card-actions {\n    background: #1a1a1a;\n    border-top: 1px solid #303030;\n\n    > li {\n      border-right: 1px solid #303030 !important;\n    }\n  }\n}\n\n.card-cover {\n  height: 200px;\n  background: linear-gradient(135deg, #2c2c2c, #1a1a1a);\n  position: relative;\n  overflow: hidden;\n\n  .cover-image-placeholder {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background:\n      radial-gradient(circle at center, #3a3a3a 0%, #1f1f1f 100%);\n  }\n}\n\n.card-description {\n  color: rgba(255, 255, 255, 0.65) !important;\n}\n\n.action-text {\n  color: rgba(255, 255, 255, 0.45) !important;\n  font-size: 12px;\n}\n"
+    }
+  }
+};

package/dist/pages/AIPlayground/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SessionLayout } from "./components/SessionLayout";
+import MsgBox from "./components/MsgBox";
+import TaskBox from "./components/TaskBox";
+import Header from "dumi/theme/slots/Header";
+function AIPlayground() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(SessionLayout, null, /*#__PURE__*/React.createElement(MsgBox, null), /*#__PURE__*/React.createElement(TaskBox, null)));
+}
+export default AIPlayground;

package/dist/pages/Index/index.js

@@ -11,7 +11,7 @@ import CommonHelmet from "../../common/CommonHelmet";
 import { ic } from "../../slots/hooks";
 import { Cases } from "./components/Cases";
 import { Companies } from "./components/Companies";
-import { Detail } from "./components/Detail";
+import { Detail } from "dumi/theme/slots/Detail";
 import { Features } from "./components/Features";
 var Index = function Index() {
   var _useSiteData = useSiteData(),

package/dist/plugin/index.js

@@ -47,12 +47,14 @@ var MOCK_META = { frontmatter: { title: "mock-meta" }, texts: [], toc: [] };
 var plugin_default = (api) => {
   api.describe({ key: `dumi-theme:${require("../../package.json").name}` });
   api.chainWebpack((config) => {
-    config.plugin("critters").use(import_critters_webpack_plugin.default, [
-      {
-        preload: "js-lazy",
-        inlineThreshold: 10240
-      }
-    ]);
+    if (api.env === "production") {
+      config.plugin("critters").use(import_critters_webpack_plugin.default, [
+        {
+          preload: "js-lazy",
+          inlineThreshold: 10240
+        }
+      ]);
+    }
   });
   api.modifyDefaultConfig((memo) => {
     memo.resolve.codeBlockMode = "passive";
@@ -163,6 +165,12 @@ export default function ThemeAntVContextWrapper() {
         absPath: "/:language/examples/:topic/:example",
         path: ":language/examples/:topic/:example",
         file: `${PAGES_DIR}/Example`
+      },
+      {
+        id: "dumi-theme-antv-ai-playground-lang",
+        absPath: "/:language/ai-playground/:id",
+        path: ":language/ai-playground/:id",
+        file: `${PAGES_DIR}/AIPlayground`
       }
     ];
     extraRoutesList.forEach((itemRoute) => {