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

package/dist/components/AI/HomeDialog/PromptTextarea/index.js

@@ -20,10 +20,12 @@ import { AIMode, FileIcons } from "../../constant";
 import { ChooseLib } from "./ChooseLib";
 import { useSiteData } from 'dumi';
 import { ic } from "../../../../slots/hooks";
+import { useTypewriter } from "../../../../hooks/useTypewriter";
 var PLACEHOLDER = {
   implement: '今天，你想可视化什么？',
   solve: '今天，你想解决什么可视化问题？'
 };
+var uploadFileTooltip = '仅支持csv,json,tsv,txt文件，为了性能和成本，只会使用您数据的前几行作为样本';
 function PromptTextarea(props) {
   var value = props.value,
     size = props.size,
@@ -48,6 +50,9 @@ function PromptTextarea(props) {
   var isCompact = size === 'compact';
   var _useSiteData = useSiteData(),
     themeConfig = _useSiteData.themeConfig;
+  var typedPlaceholder = useTypewriter({
+    texts: ["".concat(themeConfig.title, "\u662F\u4EC0\u4E48\uFF1F"), ic(themeConfig.metas.description)]
+  });
   function renderDatasourceCard() {
     if (((fileMeta === null || fileMeta === void 0 ? void 0 : fileMeta.type) === 'FILE' || (fileMeta === null || fileMeta === void 0 ? void 0 : fileMeta.type) === 'IMAGE') && fileMeta !== null && fileMeta !== void 0 && fileMeta.fileName) {
       return /*#__PURE__*/React.createElement(DatasourceCard, {
@@ -92,7 +97,9 @@ function PromptTextarea(props) {
     },
     id: "prompt-textarea",
     className: classnames(styles.promptTextarea),
-    placeholder: !isCompact && !themeConfig.isAntVSite && ic(themeConfig.metas.description) || _.get(PLACEHOLDER, mode, '今天，你想可视化什么？'),
+    placeholder:
+    // (!isCompact && !themeConfig.isAntVSite && ic(themeConfig.metas.description)) ||
+    !isCompact && !themeConfig.isAntVSite ? typedPlaceholder : _.get(PLACEHOLDER, mode, '今天，你想可视化什么？'),
     value: value,
     onChange: function onChange(evt) {
       _onChange(evt.target.value);
@@ -106,7 +113,7 @@ function PromptTextarea(props) {
     onChange: onLibChange,
     size: size
   }), mode === AIMode.implement && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: isCompact && '上传数据'
+    title: isCompact ? "\u4E0A\u4F20\u6570\u636E\u3002".concat(uploadFileTooltip) : uploadFileTooltip
   }, /*#__PURE__*/React.createElement(Upload, null, /*#__PURE__*/React.createElement("button", {
     type: "button"
   }, /*#__PURE__*/React.createElement("img", {

package/dist/components/AI/HomeDialog/RecommendCase/index.js

@@ -12,7 +12,7 @@ import { Spin } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Card } from "./Card";
 import styles from "./index.module.less";
-import { RedoOutlined } from "@ant-design/icons";
+import { ReloadOutlined } from "@ant-design/icons";
 import RecommendJson from "./recommend.json";
 import classnames from "classnames";
 export var RecommendCase = function RecommendCase(props) {
@@ -61,7 +61,7 @@ export var RecommendCase = function RecommendCase(props) {
     onClick: function onClick() {
       return fetchList();
     }
-  }, /*#__PURE__*/React.createElement(RedoOutlined, null), "\u6362\u4E00\u6279")), /*#__PURE__*/React.createElement(Spin, {
+  }, /*#__PURE__*/React.createElement(ReloadOutlined, null), "\u6362\u4E00\u6279")), /*#__PURE__*/React.createElement(Spin, {
     spinning: loading,
     wrapperClassName: classnames(styles.listContainer, props.className)
   }, /*#__PURE__*/React.createElement("div", {

package/dist/components/AI/HomeDialog/index.js

@@ -55,7 +55,8 @@ export function HomeDialog(props) {
       createNewSession({
         promptText: promptText,
         mode: mode,
-        lib: lib
+        lib: lib,
+        jump: true
       });
     },
     style: props.promptTextareaStyle

package/dist/hooks/useStreamingText.js

@@ -61,49 +61,69 @@ export var useStreamingText = function useStreamingText(_ref) {
               }
               throw new Error('Response body is null');
             case 8:
+              if (!(response.headers.get("content-type") === "application/json")) {
+                _context.next = 19;
+                break;
+              }
+              _context.t0 = onFinish === null || onFinish === void 0;
+              if (_context.t0) {
+                _context.next = 18;
+                break;
+              }
+              _context.t1 = onFinish;
+              _context.t2 = JSON;
+              _context.next = 15;
+              return response.json();
+            case 15:
+              _context.t3 = _context.sent;
+              _context.t4 = _context.t2.stringify.call(_context.t2, _context.t3);
+              (0, _context.t1)(_context.t4);
+            case 18:
+              return _context.abrupt("return");
+            case 19:
               reader = response.body.getReader();
               decoder = new TextDecoder();
               accumulatedText = '';
-            case 11:
+            case 22:
               if (!true) {
-                _context.next = 25;
+                _context.next = 36;
                 break;
               }
-              _context.next = 14;
+              _context.next = 25;
               return reader.read();
-            case 14:
+            case 25:
               _yield$reader$read = _context.sent;
               done = _yield$reader$read.done;
               value = _yield$reader$read.value;
               if (!done) {
-                _context.next = 20;
+                _context.next = 31;
                 break;
               }
               onFinish === null || onFinish === void 0 || onFinish(accumulatedText); // 流结束时调用 onFinish
-              return _context.abrupt("break", 25);
-            case 20:
+              return _context.abrupt("break", 36);
+            case 31:
               chunk = decoder.decode(value, {
                 stream: true
               });
               accumulatedText += chunk;
               setText(accumulatedText);
-              _context.next = 11;
+              _context.next = 22;
               break;
-            case 25:
-              _context.next = 30;
+            case 36:
+              _context.next = 41;
               break;
-            case 27:
-              _context.prev = 27;
-              _context.t0 = _context["catch"](0);
-              if (_context.t0.name !== 'AbortError') {
-                console.error('Streaming fetch error:', _context.t0);
-                onError === null || onError === void 0 || onError(_context.t0);
+            case 38:
+              _context.prev = 38;
+              _context.t5 = _context["catch"](0);
+              if (_context.t5.name !== 'AbortError') {
+                console.error('Streaming fetch error:', _context.t5);
+                onError === null || onError === void 0 || onError(_context.t5);
               }
-            case 30:
+            case 41:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[0, 27]]);
+        }, _callee, null, [[0, 38]]);
       }));
       return function fetchData() {
         return _ref2.apply(this, arguments);

package/dist/hooks/useTypewriter.js

@@ -0,0 +1,69 @@
+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 { useState, useEffect } from 'react';
+
+// Hook的参数类型定义
+
+/**
+ * 一个自定义React Hook，用于实现打字机效果。
+ * @param {TypewriterOptions} options - 配置选项
+ * @returns {string} 当前应显示的文本
+ */
+export var useTypewriter = function useTypewriter(_ref) {
+  var texts = _ref.texts,
+    _ref$typingSpeed = _ref.typingSpeed,
+    typingSpeed = _ref$typingSpeed === void 0 ? 150 : _ref$typingSpeed,
+    _ref$pauseDelay = _ref.pauseDelay,
+    pauseDelay = _ref$pauseDelay === void 0 ? 2000 : _ref$pauseDelay;
+  // 当前显示第几个字符串
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    textIndex = _useState2[0],
+    setTextIndex = _useState2[1];
+  // 当前字符串显示到第几个字符
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    charIndex = _useState4[0],
+    setCharIndex = _useState4[1];
+  useEffect(function () {
+    // 获取当前要处理的完整字符串
+    var currentText = texts[textIndex];
+
+    // 如果当前字符索引小于字符串长度，说明还在打字过程中
+    if (charIndex < currentText.length) {
+      var typingTimeout = setTimeout(function () {
+        setCharIndex(function (prev) {
+          return prev + 1;
+        });
+      }, typingSpeed);
+
+      // 清除定时器，防止内存泄漏
+      return function () {
+        return clearTimeout(typingTimeout);
+      };
+    }
+    // 如果字已经打完
+    else {
+      var pauseTimeout = setTimeout(function () {
+        // 切换到下一个字符串
+        setTextIndex(function (prev) {
+          return (prev + 1) % texts.length;
+        });
+        // 重置字符索引，从头开始
+        setCharIndex(0);
+      }, pauseDelay);
+
+      // 清除定时器
+      return function () {
+        return clearTimeout(pauseTimeout);
+      };
+    }
+  }, [charIndex, textIndex, texts, typingSpeed, pauseDelay]);
+
+  // 根据当前状态截取并返回应该显示的字符串
+  return texts[textIndex].substring(0, charIndex);
+};

package/dist/model/AIChat.js

@@ -48,6 +48,11 @@ subscribe(AIChatStore, function () {
   // 异步保存，不阻塞UI
   localforage.setItem(STORAGE_KEY, stateToPersist);
 });
+export var clearEmptySession = function clearEmptySession() {
+  AIChatStore.sessions = AIChatStore.sessions.filter(function (s) {
+    return s.messages.length > 0;
+  });
+};
 
 // --- 初始化逻辑 ---
 export var initializeStore = /*#__PURE__*/function () {
@@ -113,11 +118,12 @@ export var initializeStore = /*#__PURE__*/function () {
           })) {
             AIChatStore.activeSessionId = ((_AIChatStore$sessions = AIChatStore.sessions[0]) === null || _AIChatStore$sessions === void 0 ? void 0 : _AIChatStore$sessions.id) || null;
           }
+          clearEmptySession();
 
           // 4. 标记初始化完成，这将触发持久化订阅
           AIChatStore.isInitialized = true;
           // console.log('Valtio store initialized:', snapshot(AIChatStore));
-        case 21:
+        case 22:
         case "end":
           return _context.stop();
       }
@@ -188,18 +194,20 @@ export var handlePinSession = function handlePinSession(sessionId) {
 subscribeKey(AIChatStore, 'activeSessionId', function () {
   AIChatStore.codeBlock = null;
 });
-export var createNewSession = function createNewSession(config) {
-  // todo  埋点
-  // 1. 创建一个新的会话
+export var createPureNewSession = function createPureNewSession(title) {
   var newSessionId = crypto.randomUUID();
   AIChatStore.sessions.unshift({
     id: newSessionId,
-    title: config.promptText.substring(0, 20),
-    // 使用输入内容作为初始标题
+    title: title !== null && title !== void 0 ? title : 'New Conversation',
     createdAt: Date.now(),
     messages: []
   });
   AIChatStore.activeSessionId = newSessionId;
+};
+export var createNewSession = function createNewSession(config) {
+  // todo  埋点
+  // 1. 创建一个新的会话
+  createPureNewSession();
 
   // 2. 创建临时消息并存入 store
   AIChatStore.tempMessage = {
@@ -210,5 +218,7 @@ export var createNewSession = function createNewSession(config) {
     mode: config.mode,
     lib: config.lib
   };
-  history.push("/zh/ai-playground/2");
+  if (config.jump) {
+    history.push("/zh/ai-playground/2");
+  }
 };

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

@@ -132,6 +132,9 @@ export var ConversationsMenu = function ConversationsMenu() {
       return setState({
         open: false
       });
+    },
+    okButtonProps: {
+      disabled: !state.rename
     }
   }, /*#__PURE__*/React.createElement(Input, {
     showCount: true,

package/dist/pages/AIPlayground/components/MarkdownComponent/MarkdownCodeBlock.js

@@ -1,7 +1,17 @@
+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 React from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { a11yLight } from "react-syntax-highlighter/dist/cjs/styles/hljs";
 import { AIChatStore } from "../../../../model/AIChat";
+import { useCopyToClipboard } from "react-use";
+import { CheckOutlined, CopyOutlined, PlaySquareOutlined } from "@ant-design/icons";
+import { Space, Tooltip } from "antd";
+import styles from "./MarkdownCodeBlock.module.less";
 
 // 定义 props 类型，它将接收 react-markdown 传递的所有属性
 
@@ -9,6 +19,10 @@ export var MarkdownCodeBlock = function MarkdownCodeBlock(_ref) {
   var inline = _ref.inline,
     className = _ref.className,
     children = _ref.children;
+  var _useCopyToClipboard = useCopyToClipboard(),
+    _useCopyToClipboard2 = _slicedToArray(_useCopyToClipboard, 2),
+    copyState = _useCopyToClipboard2[0],
+    copyToClipboard = _useCopyToClipboard2[1];
   // 1. 处理行内代码：如果是行内代码，不做特殊处理，直接返回一个 <code> 标签
   if (inline || typeof children === 'string' && !children.includes("\n")) {
     return /*#__PURE__*/React.createElement("code", {
@@ -23,8 +37,8 @@ export var MarkdownCodeBlock = function MarkdownCodeBlock(_ref) {
   // 3. 将 children 转换为字符串，并移除末尾的换行符
   var codeString = String(children).replace(/\n$/, '');
 
-  // 4. 实现核心逻辑：判断是否显示“运行”按钮
-  var showRunButton = codeString.trim().startsWith('import');
+  // 4. 判断是否显示“运行”按钮
+  var showRunButton = /\bimport\b/.test(codeString);
 
   // 5. 定义运行代码的逻辑
   var handleRunCode = function handleRunCode() {
@@ -38,24 +52,23 @@ export var MarkdownCodeBlock = function MarkdownCodeBlock(_ref) {
       position: 'relative',
       margin: '1em 0'
     }
-  }, showRunButton && /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement(Space, {
+    className: styles.button
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u590D\u5236"
+  }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    onClick: handleRunCode,
-    style: {
-      position: 'absolute',
-      top: '0.5em',
-      right: '0.5em',
-      zIndex: 1,
-      padding: '5px 10px',
-      border: 'none',
-      borderRadius: '5px',
-      backgroundColor: '#4a4a4a',
-      color: 'white',
-      cursor: 'pointer',
-      fontSize: '0.8em'
+    onClick: function onClick() {
+      return copyToClipboard(codeString);
     },
+    title: "\u590D\u5236"
+  }, copyState.value === codeString ? /*#__PURE__*/React.createElement(CheckOutlined, null) : /*#__PURE__*/React.createElement(CopyOutlined, null))), showRunButton && /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u8FD0\u884C\u6B64\u4EE3\u7801\u7247\u6BB5"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: handleRunCode,
     title: "\u8FD0\u884C\u6B64\u4EE3\u7801\u7247\u6BB5"
-  }, "\u8FD0\u884C"), /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+  }, /*#__PURE__*/React.createElement(PlaySquareOutlined, null)))), /*#__PURE__*/React.createElement(SyntaxHighlighter, {
     style: a11yLight,
     language: language,
     PreTag: "div" // 使用 div 作为外层标签，避免 pre 标签的默认样式冲突

package/dist/pages/AIPlayground/components/MarkdownComponent/MarkdownCodeBlock.module.less

@@ -0,0 +1,14 @@
+.button {
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+  z-index: 1;
+  button {
+    background-color: #4a4a4a;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 0.8em;
+  }
+}

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

@@ -20,7 +20,7 @@ export var MarkdownComponent = function MarkdownComponent(_ref) {
           rest = _objectWithoutProperties(props, _excluded);
         return /*#__PURE__*/React.createElement("p", _extends({
           style: {
-            marginBottom: '1em',
+            marginBottom: 'unset',
             lineHeight: '1.6'
           }
         }, rest));

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

@@ -1,21 +1,27 @@
+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 { Flex, Space } from 'antd';
-import { Bubble } from '@ant-design/x';
-import { history } from 'dumi';
 import { useStreamingText } from "../../../../hooks/useStreamingText";
-import { PlusSquareOutlined } from "@ant-design/icons";
-import styles from "./index.module.less";
-import { useSnapshot } from 'valtio';
-import { AIChatStore, createNewSession, derivedState } from "../../../../model/AIChat";
-import { findLast } from "lodash-es";
+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,
@@ -24,47 +30,72 @@ var avatar = {
   }),
   style: {
     borderRadius: 0,
-    backgroundColor: "transparent"
+    backgroundColor: 'transparent'
   }
 };
 var chatScrollIntoView = function chatScrollIntoView() {
   setTimeout(function () {
-    var nodeList = document.querySelectorAll(".ant-bubble");
+    var nodeList = document.querySelectorAll('.ant-bubble');
     nodeList[nodeList.length - 1].scrollIntoView({
-      behavior: "smooth",
-      block: "center"
+      behavior: 'smooth'
     });
   });
 };
 function MsgBox(props) {
-  var _derivedSnap$activeSe, _findLast, _derivedSnap$activeSe2, _ref, _props$messages, _derivedSnap$activeSe3;
-  var _useState = useState(''),
+  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),
-    promptText = _useState2[0],
-    setPromptText = _useState2[1];
-  var _useState3 = useState(false),
+    lib = _useState2[0],
+    setLib = _useState2[1];
+  var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    isStreaming = _useState4[0],
-    setIsStreaming = _useState4[1]; // trigger
+    promptText = _useState4[0],
+    setPromptText = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    loading = _useState6[0],
-    setLoading = _useState6[1];
+    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: 'http://127.0.0.1:7001/ai/chat',
+    url: 'https://webgw-pre.alipay.com/visqaservice/external/chat',
     method: 'POST',
     body: {
-      "gptConversationId": (_derivedSnap$activeSe = derivedSnap.activeSession) === null || _derivedSnap$activeSe === void 0 ? void 0 : _derivedSnap$activeSe.id,
-      "query": (_findLast = findLast((_derivedSnap$activeSe2 = derivedSnap.activeSession) === null || _derivedSnap$activeSe2 === void 0 ? void 0 : _derivedSnap$activeSe2.messages, function (msg) {
-        return msg.role === 'user';
-      })) === null || _findLast === void 0 ? void 0 : _findLast.content
+      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'
+      'Content-Type': 'application/json',
+      'x-webgw-version': '2.0',
+      'x-webgw-appid': '180020010001210065'
     },
     beforeStart: function beforeStart() {
       setLoading(true);
@@ -81,6 +112,11 @@ function MsgBox(props) {
           // 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 {
@@ -91,34 +127,33 @@ function MsgBox(props) {
       }
     },
     onError: function onError(error) {
+      var _derivedState$activeS2;
+      console.log('回答失败', error);
       // 处理错误
-      console.error("AI stream failed:", error);
-      // setMessages(prev => [
-      //   ...prev,
-      //   { id: Date.now(), role: 'assistant', content: `Sorry, an error occurred: ${error.message}` }
-      // ]);
-      setIsStreaming(false); // **关键：出错后，也要关闭 trigger**
+      (_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$activeS2;
-    if (props.simple) {
-      createNewSession({
-        promptText: promptText
-      });
-      return;
-    }
+    var _derivedState$activeS3;
     if (!promptText.trim() || isStreaming) return; // 如果正在流式输出，则不允许发送
     setPromptText('');
-    (_derivedState$activeS2 = derivedState.activeSession) === null || _derivedState$activeS2 === void 0 || (_derivedState$activeS2 = _derivedState$activeS2.messages) === null || _derivedState$activeS2 === void 0 || _derivedState$activeS2.push({
+    (_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()
-      // mode,
-      // lib,
+      createdAt: Date.now(),
+      lib: lib
     });
     // **关键：开启 trigger，开始请求**
     setIsStreaming(true);
@@ -135,6 +170,12 @@ function MsgBox(props) {
         AIChatStore.tempMessage = null;
       }
     }
+    if (simple) {
+      createPureNewSession(title);
+    }
+    return function () {
+      clearEmptySession();
+    };
   }, []);
   useEffect(function () {
     if (derivedState.activeSession && Date.now() - derivedState.activeSession.createdAt > 5000) {
@@ -142,17 +183,56 @@ function MsgBox(props) {
       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
-  }, (_ref = (_props$messages = props.messages) !== null && _props$messages !== void 0 ? _props$messages : (_derivedSnap$activeSe3 = derivedSnap.activeSession) === null || _derivedSnap$activeSe3 === void 0 ? void 0 : _derivedSnap$activeSe3.messages) === null || _ref === void 0 ? void 0 : _ref.map(function (msg, index) {
+  }, 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, {
@@ -181,7 +261,9 @@ function MsgBox(props) {
     style: {
       marginBottom: 0
     },
-    onConfirm: handleSubmit
+    onConfirm: handleSubmit,
+    lib: lib,
+    onLibChange: setLib
   })));
 }
 export default MsgBox;

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

@@ -97,14 +97,13 @@ export function wrap2Sandpack() {
   // if (match) {
   return {
     "/package.json": {
-      code: "{\n      \"name\": \"AntV-AI-Code\",\n      \"version\": \"1.0.0\",\n      \"main\": \"/index.js\",\n      \"dependencies\": ".concat(JSON.stringify(generateDependencies(codeBlock), null, 2), "\n    }")
+      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.js": {
-      // 入口文件是纯 JS
+    "/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.js\"></script>\n</body>\n</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

@@ -46,6 +46,7 @@ function TaskBox() {
     theme: "light" // 主题：dark, light, auto
     ,
     customSetup: {
+      entry: "/index.tsx",
       npmRegistries: [{
         limitToScopes: false,
         // 设为 false 使所有包都从自定义 registry 获取

package/dist/slots/CodeEditor/Toolbar.js

@@ -10,7 +10,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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); }
 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); }
-import { CodeSandboxOutlined, PlayCircleOutlined, ThunderboltOutlined } from '@ant-design/icons';
+import { CodeSandboxOutlined, PlayCircleOutlined, ReloadOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import stackblitzSdk from '@stackblitz/sdk';
 import { Tooltip, Typography } from 'antd';
 import { getParameters } from 'codesandbox/lib/api/define';
@@ -43,7 +43,8 @@ export var Toolbar = function Toolbar(_ref) {
     _ref$onToggleFullscre = _ref.onToggleFullscreen,
     onToggleFullscreen = _ref$onToggleFullscre === void 0 ? null : _ref$onToggleFullscre,
     onExecuteCode = _ref.onExecuteCode,
-    onClickAI = _ref.onClickAI;
+    onClickAI = _ref.onClickAI,
+    onReload = _ref.onReload;
   var locale = useLocale();
   var exampleTitle = _typeof(title) === 'object' ? title[locale.id] : title;
 
@@ -82,7 +83,12 @@ export var Toolbar = function Toolbar(_ref) {
   })), /*#__PURE__*/React.createElement("a", {
     className: styles.ai,
     onClick: onClickAI
-  }, "AI \u52A9\u624B"), riddleVisible ? /*#__PURE__*/React.createElement("form", {
+  }, "AI \u52A9\u624B"), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u8FD8\u539F"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.ai,
+    onClick: onReload
+  }, /*#__PURE__*/React.createElement(ReloadOutlined, null))), riddleVisible ? /*#__PURE__*/React.createElement("form", {
     action: "//riddle.alibaba-inc.com/riddles/define",
     method: "POST",
     target: "_blank"

package/dist/slots/CodeEditor/Toolbar.module.less

@@ -83,6 +83,7 @@
 
 
 .ai {
+  cursor: pointer;
   margin-right: 10px;
   font-size: 12px;
 }

package/dist/slots/CodeEditor/index.js

@@ -280,6 +280,7 @@ var CodeEditor = function CodeEditor(_ref) {
   // 用于更新当前 example 的 spec 和 data
   useEffect(function () {
     setCurrentEditorTab(EDITOR_TABS.JAVASCRIPT);
+    setShowAI(false);
   }, [exampleId]);
 
   // hook 用户的数据
@@ -385,6 +386,9 @@ var CodeEditor = function CodeEditor(_ref) {
   var onClickAI = function onClickAI() {
     setShowAI(true);
   };
+  var onReload = function onReload() {
+    setCode(source);
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: styles.editor
   }, /*#__PURE__*/React.createElement(Toolbar, {
@@ -402,6 +406,7 @@ var CodeEditor = function CodeEditor(_ref) {
     onEditorTabChange: onTabChange,
     onToggleFullscreen: onFullscreen,
     onClickAI: onClickAI,
+    onReload: onReload,
     slots: {
       Spec: /*#__PURE__*/React.createElement("span", {
         style: {
@@ -461,7 +466,8 @@ var CodeEditor = function CodeEditor(_ref) {
       onClose: function onClose() {
         return setShowAI(false);
       },
-      rootClassName: styles.drawer
+      rootClassName: styles.drawer,
+      width: '90%'
     }, /*#__PURE__*/React.createElement(MsgBox, {
       simple: true,
       messages: [{
@@ -469,7 +475,12 @@ var CodeEditor = function CodeEditor(_ref) {
         role: 'assistant',
         content: "\u6211\u662FAntV AI\u52A9\u624B\u3002\u60A8\u53EF\u4EE5\u968F\u65F6\u5411\u6211\u63D0\u95EE\uFF0C\u8BA9\u6211\u4E3A\u60A8\uFF1A\n              \n1\u3001\u89E3\u8BFB\u5F53\u524D\u56FE\u8868\u7684\u4EE3\u7801\u914D\u7F6E\u3002\n              \n2\u3001\u901A\u8FC7\u81EA\u7136\u8BED\u8A00\u5BF9\u8BDD\uFF0C\u57FA\u4E8E\u5F53\u524D\u6848\u4F8B\u751F\u6210\u65B0\u4EE3\u7801\u4EE5\u5B9A\u5236\u56FE\u8868\u3002",
         createdAt: Date.now()
-      }]
+      }],
+      context: valueOf(tab),
+      onCodegen: function onCodegen(codeBlock) {
+        setCode(codeBlock);
+      },
+      title: title
     })));
   }));
 };

package/dist/slots/CodeRunner/index.js

@@ -79,7 +79,8 @@ var CodeRunner = function CodeRunner(_ref) {
     onFullscreen: setFullscreen,
     onDestroy: noop,
     onReady: noop,
-    playground: playground
+    playground: playground,
+    title: ic(title)
   }))));
 };
 export default CodeRunner;

package/dist/slots/Header/Search/SearchResult.js

@@ -38,7 +38,8 @@ export var SearchResult = function SearchResult(_ref) {
       createNewSession({
         promptText: keywords,
         mode: "solve",
-        lib: !themeConfig.isAntVSite ? themeConfig.title : undefined
+        lib: !themeConfig.isAntVSite ? themeConfig.title : undefined,
+        jump: true
       });
     }
   }, /*#__PURE__*/React.createElement("div", {

package/dist/utils/code.js

@@ -0,0 +1,35 @@
+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 _wrapRegExp() { _wrapRegExp = function _wrapRegExp(e, r) { return new BabelRegExp(e, void 0, r); }; var e = RegExp.prototype, r = new WeakMap(); function BabelRegExp(e, t, p) { var o = new RegExp(e, t); return r.set(o, p || r.get(e)), _setPrototypeOf(o, BabelRegExp.prototype); } function buildGroups(e, t) { var p = r.get(t); return Object.keys(p).reduce(function (r, t) { var o = p[t]; if ("number" == typeof o) r[t] = e[o];else { for (var i = 0; void 0 === e[o[i]] && i + 1 < o.length;) i++; r[t] = e[o[i]]; } return r; }, Object.create(null)); } return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (r) { var t = e.exec.call(this, r); if (t) { t.groups = buildGroups(t, this); var p = t.indices; p && (p.groups = buildGroups(p, this)); } return t; }, BabelRegExp.prototype[Symbol.replace] = function (t, p) { if ("string" == typeof p) { var o = r.get(this); return e[Symbol.replace].call(this, t, p.replace(/\$<([^>]+)>/g, function (e, r) { var t = o[r]; return "$" + (Array.isArray(t) ? t.join("$") : t); })); } if ("function" == typeof p) { var i = this; return e[Symbol.replace].call(this, t, function () { var e = arguments; return "object" != _typeof(e[e.length - 1]) && (e = [].slice.call(e)).push(buildGroups(e, i)), p.apply(this, e); }); } return e[Symbol.replace].call(this, t, p); }, _wrapRegExp.apply(this, arguments); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+export function isPreviewable(str) {
+  if (typeof str !== 'string') {
+    return false;
+  }
+  var trimmedStr = str.trim();
+
+  // \b 是一个“单词边界”，确保我们匹配的是完整的 "import" 单词
+  // 而不是 "important" 的一部分
+  var hasImportStatement = /\bimport\b/.test(trimmedStr);
+  if (trimmedStr.startsWith('```') && trimmedStr.endsWith('```') && hasImportStatement) {
+    return true;
+  }
+  return false;
+}
+export function getCodeFromMarkdown() {
+  var md = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var regex = /*#__PURE__*/_wrapRegExp(/```(\w*)\n?([\s\S]*?)```/, {
+    lang: 1,
+    code: 2
+  });
+  var match = md.match(regex);
+  if (match) {
+    return {
+      lang: match.groups.lang || 'plaintext',
+      code: match.groups.code.trim()
+    };
+  }
+  return {
+    code: ''
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/dumi-theme-antv",
-  "version": "0.8.0-beta.0",
+  "version": "0.8.0-beta.1",
   "description": "AntV website theme based on dumi2.",
   "keywords": [
     "dumi",