@antv/dumi-theme-antv 0.8.0-beta.3 → 0.8.0-beta.4

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

@@ -1,27 +1,25 @@
-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 { CheckOutlined, CopyOutlined, PlusSquareOutlined, SyncOutlined } from '@ant-design/icons';
 import { Bubble } from '@ant-design/x';
 import { Button, Flex, Space, Tooltip } from 'antd';
-import { history, useSiteData, useIntl } from 'dumi';
-import { findLast } from 'lodash-es';
-import React, { useEffect, useState } from 'react';
+import { useChat } from '@ai-sdk/react';
+import { TextStreamChatTransport } from 'ai';
+import { history, useIntl, useSiteData } from 'dumi';
+import React, { useEffect, useState, useMemo, useRef } 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";
+import { useAutoScroll } from "./useAutoScroll";
+import { getBaseURL } from "../../../../utils/env";
 var avatar = {
   icon: /*#__PURE__*/React.createElement("img", {
     draggable: false,
@@ -35,16 +33,38 @@ var avatar = {
 };
 var chatScrollIntoView = function chatScrollIntoView() {
   setTimeout(function () {
-    var nodeList = document.querySelectorAll('.ant-bubble');
-    nodeList[nodeList.length - 1].scrollIntoView({
-      behavior: 'smooth'
+    document.getElementById('msgBoxAnchor').scrollIntoView({
+      block: 'end'
     });
+  }, 100);
+};
+
+// 辅助函数：将旧的 Message 格式转换为新的 UIMessage 格式
+var convertToUIMessages = function convertToUIMessages(messages) {
+  return messages.map(function (msg) {
+    return {
+      id: msg.id,
+      role: msg.role,
+      parts: [{
+        type: 'text',
+        text: msg.content
+      }]
+    };
   });
 };
+
+// 辅助函数：从 UIMessage 提取文本内容
+var getTextContent = function getTextContent(message) {
+  return message.parts.filter(function (part) {
+    return part.type === 'text';
+  }).map(function (part) {
+    return part.text;
+  }).join('');
+};
 function MsgBox(props) {
-  var _derivedSnap$activeSe, _derivedSnap$activeSe2, _derivedSnap$activeSe3;
+  var _derivedSnap$activeSe, _derivedSnap$activeSe3, _derivedSnap$activeSe5, _derivedSnap$activeSe6, _messages;
   var _props$messages = props.messages,
-    messages = _props$messages === void 0 ? [] : _props$messages,
+    initialMessages = _props$messages === void 0 ? [] : _props$messages,
     _props$simple = props.simple,
     simple = _props$simple === void 0 ? false : _props$simple,
     _props$context = props.context,
@@ -63,98 +83,113 @@ function MsgBox(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     promptText = _useState4[0],
     setPromptText = _useState4[1];
-  var _useState5 = useState(false),
+  var _useState5 = useState(''),
     _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];
+    fileSummary = _useState6[0],
+    setFileSummary = _useState6[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 _useState9 = useState(''),
-    _useState10 = _slicedToArray(_useState9, 2),
-    fileSummary = _useState10[0],
-    setFileSummary = _useState10[1];
-  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({
+
+  // 使用 ref 存储动态值，避免重新创建 transport
+  var anonymousUserIdRef = useRef(snap.anonymousUserId);
+  var contextRef = useRef(props.context);
+  var activeSessionIdRef = useRef((_derivedSnap$activeSe = derivedSnap.activeSession) === null || _derivedSnap$activeSe === void 0 ? void 0 : _derivedSnap$activeSe.id);
+  useEffect(function () {
+    var _derivedSnap$activeSe2;
+    anonymousUserIdRef.current = snap.anonymousUserId;
+    activeSessionIdRef.current = (_derivedSnap$activeSe2 = derivedSnap.activeSession) === null || _derivedSnap$activeSe2 === void 0 ? void 0 : _derivedSnap$activeSe2.id;
+  }, [snap.anonymousUserId, (_derivedSnap$activeSe3 = derivedSnap.activeSession) === null || _derivedSnap$activeSe3 === void 0 ? void 0 : _derivedSnap$activeSe3.id]);
+
+  // 转换初始消息为新格式
+  var convertedInitialMessages = useMemo(function () {
+    return convertToUIMessages(initialMessages);
+  }, [initialMessages]);
+
+  // 核心：使用 useChat hook，配置 DefaultChatTransport
+  var _useChat = useChat({
+      transport: new TextStreamChatTransport({
+        api: getBaseURL() + '/api/modules/antv/ai/chat',
+        credentials: 'include',
+        headers: {
+          // xxx
+        },
+        // body 可以是函数，用于获取最新的动态值
+        body: function body() {
+          return {
+            gptConversationId: activeSessionIdRef.current,
+            anonymousUserId: anonymousUserIdRef.current,
+            mountId: 'container',
+            antvContext: props.context,
+            library: lib
+          };
+        }
+      }),
+      messages: convertedInitialMessages,
+      // 当AI响应结束时触发
+      onFinish: function onFinish(_ref) {
+        var message = _ref.message,
+          isAbort = _ref.isAbort,
+          isDisconnect = _ref.isDisconnect,
+          isError = _ref.isError;
+        if (!isAbort && !isDisconnect && !isError) {
+          var _derivedState$activeS;
+          var messageContent = getTextContent(message);
+          if (isPreviewable(messageContent)) {
+            var codeBlock = getCodeFromMarkdown(messageContent).code;
+            AIChatStore.codeBlock = codeBlock;
+            onCodegen === null || onCodegen === void 0 || onCodegen(codeBlock);
+          }
+          (_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: messageContent,
+            createdAt: Date.now()
+          });
+        }
+      },
+      onError: function onError(error) {
+        var _derivedState$activeS2;
+        console.error('回答失败', error);
+        // 同步错误消息到 valtio
+        (_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: finalJSON.content,
+          content: formatMessage({
+            id: 'ai.msgbox.error.response'
+          }),
           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: formatMessage({
-          id: 'ai.msgbox.error.response'
-        }),
-        createdAt: Date.now()
-        // mode,
-        // lib,
-      });
-      setIsStreaming(false);
-      setLoading(false);
-    }
-  });
+    }),
+    messages = _useChat.messages,
+    setMessages = _useChat.setMessages,
+    sendMessage = _useChat.sendMessage,
+    regenerate = _useChat.regenerate,
+    status = _useChat.status,
+    stop = _useChat.stop;
 
-  // 3. 处理用户提交
+  // 处理用户提交
   var handleSubmit = function handleSubmit() {
     var _derivedState$activeS3;
-    if (!promptText.trim() || isStreaming) return; // 如果正在流式输出，则不允许发送
+    if (!promptText.trim() || status === 'streaming' || status === 'submitted') return;
+
+    // 使用 sendMessage 函数发送新消息
+    // 第二个参数传递每次请求特定的额外数据
+    sendMessage({
+      text: promptText
+    }, {
+      body: {
+        context: fileSummary,
+        lib: lib,
+        mode: 'implement'
+      }
+    });
     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(),
@@ -164,21 +199,40 @@ function MsgBox(props) {
       context: fileSummary,
       lib: lib
     });
-    // **关键：开启 trigger，开始请求**
-    setIsStreaming(true);
     chatScrollIntoView();
   };
+
+  // 同步 Valtio store -> useChat state
   useEffect(function () {
-    // 检查是否存在临时消息
-    if (snap.tempMessage) {
-      var activeSession = derivedState.activeSession;
-      if (activeSession) {
-        // 1. 将临时消息正式添加到当前会话中
-        activeSession.messages.push(snap.tempMessage);
-        setIsStreaming(true);
-        AIChatStore.tempMessage = null;
+    if (simple) {
+      return;
+    }
+    setTimeout(function () {
+      var _derivedSnap$activeSe4;
+      var sessionMessages = (_derivedSnap$activeSe4 = derivedSnap.activeSession) === null || _derivedSnap$activeSe4 === void 0 ? void 0 : _derivedSnap$activeSe4.messages;
+      if ((sessionMessages === null || sessionMessages === void 0 ? void 0 : sessionMessages.length) > 0) {
+        var converted = convertToUIMessages(sessionMessages);
+        // 避免无限循环，仅当消息数量或内容不同时更新
+        if (messages.length !== converted.length || JSON.stringify(messages) !== JSON.stringify(converted)) {
+          setMessages(converted);
+        }
       }
+    });
+  }, [(_derivedSnap$activeSe5 = derivedSnap.activeSession) === null || _derivedSnap$activeSe5 === void 0 ? void 0 : _derivedSnap$activeSe5.id, (_derivedSnap$activeSe6 = derivedSnap.activeSession) === null || _derivedSnap$activeSe6 === void 0 || (_derivedSnap$activeSe6 = _derivedSnap$activeSe6.messages) === null || _derivedSnap$activeSe6 === void 0 ? void 0 : _derivedSnap$activeSe6.length]);
+
+  // 处理从外部（如demo页）发起的对话
+  useEffect(function () {
+    if (snap.tempMessage) {
+      var _derivedState$activeS4, _derivedState$activeS5;
+      sendMessage({
+        text: snap.tempMessage.content
+      });
+      (_derivedState$activeS4 = derivedState.activeSession) === null || _derivedState$activeS4 === void 0 || (_derivedState$activeS4 = _derivedState$activeS4.messages) === null || _derivedState$activeS4 === void 0 || (_derivedState$activeS5 = _derivedState$activeS4.push) === null || _derivedState$activeS5 === void 0 || _derivedState$activeS5.call(_derivedState$activeS4, snap.tempMessage);
+      AIChatStore.tempMessage = null;
     }
+  }, [snap.tempMessage]);
+  useEffect(function () {
+    chatScrollIntoView();
     if (simple) {
       createPureNewSession(title);
     }
@@ -187,51 +241,36 @@ function MsgBox(props) {
     };
   }, []);
   useEffect(function () {
-    if (derivedState.activeSession && Date.now() - derivedState.activeSession.createdAt > 5000) {
-      setLoading(false);
-      setIsStreaming(false);
-    }
+    chatScrollIntoView();
   }, [snap.activeSessionId]);
-  var showMessages = [].concat(_toConsumableArray(messages), _toConsumableArray(((_derivedSnap$activeSe3 = derivedSnap.activeSession) === null || _derivedSnap$activeSe3 === void 0 ? void 0 : _derivedSnap$activeSe3.messages) || []));
+
+  // 将 messages 数组作为依赖项。当它变化时，Hook 会运行。
+  var _useAutoScroll = useAutoScroll(messages),
+    containerRef = _useAutoScroll.containerRef,
+    anchorRef = _useAutoScroll.anchorRef,
+    showScrollDownButton = _useAutoScroll.showScrollDownButton;
   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) {
+    className: styles.chatContainer,
+    ref: containerRef
+  }, messages.map(function (msg, index) {
+    var textContent = getTextContent(msg);
     return /*#__PURE__*/React.createElement(Bubble, {
-      key: index,
+      key: msg.id || index,
       content: /*#__PURE__*/React.createElement(MarkdownComponent, {
-        content: msg.content
+        content: textContent
       }),
       avatar: msg.role === 'assistant' ? avatar : null,
-      footer: msg.role === 'assistant' && index > 0 ? /*#__PURE__*/React.createElement(Space, {
+      footer: msg.role === 'assistant' && index > 0 && index === messages.length - 1 && status === 'ready' ? /*#__PURE__*/React.createElement(Space, {
         size: "small"
       }, /*#__PURE__*/React.createElement(Tooltip, {
-        title: formatMessage({
-          id: 'ai.msgbox.like'
-        })
-      }, /*#__PURE__*/React.createElement(Button, {
-        color: "default",
-        variant: "text",
-        size: "small",
-        icon: /*#__PURE__*/React.createElement(LikeOutlined, null)
-      })), /*#__PURE__*/React.createElement(Tooltip, {
-        title: formatMessage({
-          id: 'ai.msgbox.dislike'
-        })
-      }, /*#__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: formatMessage({
           id: 'ai.msgbox.retry'
         })
       }, /*#__PURE__*/React.createElement(Button, {
         onClick: function onClick() {
-          derivedState.activeSession.messages.pop();
-          setIsStreaming(true);
+          return regenerate();
         },
         color: "default",
         variant: "text",
@@ -246,19 +285,22 @@ function MsgBox(props) {
         variant: "text",
         size: "small",
         onClick: function onClick() {
-          return copyToClipboard(msg.content);
+          return copyToClipboard(textContent);
         },
-        icon: copyState.value === msg.content ? /*#__PURE__*/React.createElement(CheckOutlined, null) : /*#__PURE__*/React.createElement(CopyOutlined, null)
+        icon: copyState.value === textContent ? /*#__PURE__*/React.createElement(CheckOutlined, null) : /*#__PURE__*/React.createElement(CopyOutlined, null)
       }))) : null,
       placement: msg.role === 'user' ? 'end' : 'start'
     });
-  }), loading && /*#__PURE__*/React.createElement(Bubble, {
+  }), (status === 'streaming' || status === 'submitted') && ((_messages = messages[messages.length - 1]) === null || _messages === void 0 ? void 0 : _messages.role) === 'user' && /*#__PURE__*/React.createElement(Bubble, {
     placement: "start",
     avatar: avatar,
-    loading: loading
+    loading: true
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: anchorRef,
+    id: "msgBoxAnchor"
   })), /*#__PURE__*/React.createElement("div", null, !props.simple && /*#__PURE__*/React.createElement("div", {
     className: styles.newButtonContainer
-  }, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: function onClick() {
       return history.push('/');
@@ -266,16 +308,13 @@ function MsgBox(props) {
     className: styles.newButton
   }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(PlusSquareOutlined, null), formatMessage({
     id: 'ai.msgbox.start.new.chat'
-  })))), /*#__PURE__*/React.createElement(PromptTextarea, {
+  }))))), /*#__PURE__*/React.createElement(PromptTextarea, {
     size: "compact",
     mode: "implement",
     value: promptText,
     onChange: setPromptText,
-    loading: loading,
-    onCancel: function onCancel() {
-      setIsStreaming(false);
-      setLoading(false);
-    },
+    loading: status === 'streaming' || status === 'submitted',
+    onCancel: stop,
     showAction: !props.simple,
     style: {
       marginBottom: 0

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

@@ -5,7 +5,7 @@
 
 .query {
   background: #c9dfff;
-  box-shadow: 0 4px 10px rgba(51, 113, 242, .1);
+  box-shadow: 0 4px 10px rgba(51, 113, 242, 10%);
   border-radius: 8px;
   padding: 8px 16px;
   max-width: calc(100% - 100px);
@@ -26,7 +26,7 @@
   padding: 0 8px;
   color: var(--primary-color);
   font-size: 14px;
-  background: rgba(135, 59, 244, .145);
+  background: rgba(135, 59, 244, 14.5%);
   border-radius: 6px;
   line-height: 22px;
   margin: 12px auto;
@@ -34,6 +34,7 @@
 
 .newButtonContainer {
   display: flex;
+  justify-content: center;
 }
 
 .chatContainer {

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

@@ -0,0 +1,46 @@
+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 { useRef, useLayoutEffect, useState } from 'react';
+
+// threshold: 容差值，表示离底部多远以内都算“在底部”
+export var useAutoScroll = function useAutoScroll(dependencies) {
+  var threshold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
+  // 指向滚动容器
+  var containerRef = useRef(null);
+  // 指向一个永远在列表末尾的空div，作为滚动的目标
+  var anchorRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showScrollDownButton = _useState2[0],
+    setShowScrollDownButton = _useState2[1];
+  useLayoutEffect(function () {
+    var container = containerRef.current;
+    if (!container) return;
+
+    // scrollTop: 滚动条距离顶部的距离
+    // scrollHeight: 整个可滚动内容的总高度
+    // clientHeight: 容器可视区域的高度
+    var isAtBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + threshold + 200;
+
+    // 只有当用户已经在底部时，才执行自动滚动
+    if (isAtBottom) {
+      var _anchorRef$current;
+      (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 || _anchorRef$current.scrollIntoView({
+        block: 'end' // 滚动到元素的末尾
+      });
+      setShowScrollDownButton(false);
+    } else {
+      setShowScrollDownButton(true);
+    }
+  }, [dependencies, threshold]); // 依赖项改变时（比如新消息来了），触发此 effect
+
+  return {
+    containerRef: containerRef,
+    anchorRef: anchorRef,
+    showScrollDownButton: showScrollDownButton
+  };
+};

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

@@ -32,5 +32,5 @@
   height: calc(100% - 32px);
   margin: 16px;
   flex-grow: 1;
-  background: #ffffff;
+  background: #fff;
 }

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

@@ -77,14 +77,20 @@ export function generateDependencies(codeString) {
 }
 export function wrap2VisionSnap() {
   var codeBlock = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var dependencies = generateDependencies(codeBlock);
+  var rootElementType = dependencies['@antv/f2'] ? 'canvas' : 'div';
   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}")
+        code: "{\n  \"name\": \"AntV-adapted-project\",\n  \"version\": \"1.0.0\",\n  \"main\": \"/src/index.jsx\",\n  \"dependencies\": ".concat(JSON.stringify(dependencies, null, 2), "\n}")
       },
       '/src/index.jsx': {
         fpath: '/src/index.jsx',
+        code: "\n// --- Adapter Script ---\n\n// 1. \u627E\u5230\u7F16\u8F91\u5668\u73AF\u5883\u63D0\u4F9B\u7684\u6839\u8282\u70B9 #root\nconst rootElement = document.getElementById('root');\n\nif (rootElement) {\n  // 2. \u5728 #root \u5185\u90E8\u521B\u5EFA\u4E00\u4E2A ".concat(rootElementType, "\n  const containerElement = document.createElement('").concat(rootElementType, "');\n\n  // 3. \u5C06\u8FD9\u4E2A div \u7684 id \u8BBE\u7F6E\u4E3A 'container'\uFF0C\u4EE5\u6EE1\u8DB3\u7528\u6237\u4EE3\u7801\u7684\u9700\u6C42\n  containerElement.id = 'container';\n\n  // 4. \u5C06\u5B83\u6DFB\u52A0\u5230 #root \u4E2D\n  rootElement.appendChild(containerElement);\n\n  // 5. \u73B0\u5728 DOM \u4E2D\u5DF2\u7ECF\u5B58\u5728 #container\uFF0C\u5B89\u5168\u5730\u5BFC\u5165\u5E76\u6267\u884C\u7528\u6237\u7684\u4EE3\u7801\n  import('./App.jsx');\n\n}\n      ")
+      },
+      '/src/App.jsx': {
+        fpath: '/src/App.jsx',
         code: codeBlock
       }
     }

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

@@ -1,15 +1,15 @@
-import { Sandpack } from '@codesandbox/sandpack-react';
 import { useSiteData } from 'dumi';
 import React, { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { AIChatStore } from "../../../../model/AIChat";
 import CodeRunner from "dumi/theme/slots/CodeRunner";
-import { wrap2Sandpack } from "./generateCode";
-import styles from "./index.module.less";
-// import {code} from "../../demo";
-// import {requestProxy, useVisionsnapSdk} from "../../../../hooks/useVisionsnapSdk";
-
+import { wrap2VisionSnap } from "./generateCode";
+import { requestProxy, useVisionsnapSdk } from "../../../../hooks/useVisionsnapSdk";
+import { ErrorBoundary } from 'react-error-boundary';
+import Loading from "dumi/theme/slots/Loading";
+import { ErrorFallback } from "../../../../builtins/Playground";
 function TaskBox() {
+  var _themeConfig$ai, _themeConfig$ai2;
   var snap = useSnapshot(AIChatStore);
   var _useSiteData = useSiteData(),
     themeConfig = _useSiteData.themeConfig;
@@ -42,54 +42,33 @@ function TaskBox() {
       }]
     }];
   }, [demoId, snap.activeSessionId, snap.anonymousUserId, snap.codeBlock]);
-
-  // 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} />
-  // );
-  if (themeConfig.isAntVSite) {
-    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']
-        }
+  var _useVisionsnapSdk = useVisionsnapSdk('3.2.15'),
+    sdk = _useVisionsnapSdk.sdk,
+    loading = _useVisionsnapSdk.loading;
+  if (loading) {
+    return /*#__PURE__*/React.createElement(Loading, null);
+  }
+  if (themeConfig.isAntVSite || ((_themeConfig$ai = themeConfig.ai) === null || _themeConfig$ai === void 0 ? void 0 : _themeConfig$ai.codeRunner) === "VisionSnap" || !((_themeConfig$ai2 = themeConfig.ai) !== null && _themeConfig$ai2 !== void 0 && _themeConfig$ai2.codeRunner)) {
+    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+      FallbackComponent: ErrorFallback
+    }, /*#__PURE__*/React.createElement(sdk.VisionPreview, {
+      id: "visionIframe",
+      bizCode: "vision-preview-demo",
+      style: {
+        height: '100vh'
       },
-      theme: "light" // 主题：dark, light, auto
-      ,
-      customSetup: {
-        entry: '/index.tsx',
-        npmRegistries: [{
-          limitToScopes: false,
-          // 设为 false 使所有包都从自定义 registry 获取
-          registryUrl: 'https://registry.npmmirror.com',
-          // 使用淘宝镜像
-          enabledScopes: [],
-          proxyEnabled: false
-        }]
+      userId: "263347",
+      displayMode: "code-and-preview",
+      initialView: "preview",
+      theme: "light",
+      editable: true,
+      code: wrap2VisionSnap(snap.codeBlock),
+      requestProxy: requestProxy,
+      isStreaming: false,
+      proxyOptions: {
+        isWAN: true
       }
-    });
+    }));
   } else {
     return /*#__PURE__*/React.createElement(CodeRunner, {
       isPlayground: true,

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

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