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

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

@@ -1,27 +1,26 @@
-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 } from 'dumi';
+import { useChat } from '@ai-sdk/react';
+import { TextStreamChatTransport } from 'ai';
+import { useIntl, useSiteData } from 'dumi';
 import { findLast } from 'lodash-es';
-import React, { useEffect, useState } from 'react';
+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 { AIChatStore, 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,24 +34,46 @@ 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$activeSe2, _derivedSnap$activeSe4, _derivedSnap$activeSe7, _derivedSnap$activeSe8, _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,
-    context = _props$context === void 0 ? '' : _props$context,
     onCodegen = props.onCodegen,
     title = props.title;
   var _useSiteData = useSiteData(),
     themeConfig = _useSiteData.themeConfig;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var _useState = useState(!themeConfig.isAntVSite ? themeConfig.title : undefined),
     _useState2 = _slicedToArray(_useState, 2),
     lib = _useState2[0],
@@ -61,14 +82,10 @@ 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(),
@@ -78,192 +95,237 @@ function MsgBox(props) {
   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({
+  // 使用 ref 存储动态值，避免重新创建 transport
+  var anonymousUserIdRef = useRef(snap.anonymousUserId);
+  var activeSessionIdRef = useRef((_derivedSnap$activeSe2 = derivedSnap.activeSession) === null || _derivedSnap$activeSe2 === void 0 ? void 0 : _derivedSnap$activeSe2.id);
+  useEffect(function () {
+    var _derivedSnap$activeSe3;
+    anonymousUserIdRef.current = snap.anonymousUserId;
+    activeSessionIdRef.current = (_derivedSnap$activeSe3 = derivedSnap.activeSession) === null || _derivedSnap$activeSe3 === void 0 ? void 0 : _derivedSnap$activeSe3.id;
+  }, [snap.anonymousUserId, (_derivedSnap$activeSe4 = derivedSnap.activeSession) === null || _derivedSnap$activeSe4 === void 0 ? void 0 : _derivedSnap$activeSe4.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: {
+          gptConversationId: activeSessionIdRef.current,
+          anonymousUserId: anonymousUserIdRef.current,
+          mountId: 'container',
+          antvContext: (latestUserMessage === null || latestUserMessage === void 0 ? void 0 : latestUserMessage.context) || props.context,
+          library: (latestUserMessage === null || latestUserMessage === void 0 ? void 0 : latestUserMessage.lib) || lib,
+          mode: latestUserMessage === null || latestUserMessage === void 0 ? void 0 : latestUserMessage.mode
+        }
+      }),
+      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: "\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);
-    }
-  });
+    }),
+    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; // 如果正在流式输出，则不允许发送
+    var _derivedSnap$activeSe5, _derivedState$activeS3;
+    var trimmedPrompt = promptText.trim();
+    if (!trimmedPrompt || status === 'streaming' || status === 'submitted') return;
+    if (derivedSnap.activeSession && ((_derivedSnap$activeSe5 = derivedSnap.activeSession.messages) === null || _derivedSnap$activeSe5 === void 0 ? void 0 : _derivedSnap$activeSe5.length) === 0) {
+      derivedState.activeSession.title = trimmedPrompt;
+    }
+    // 使用 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(),
       role: 'user',
       content: promptText,
       createdAt: Date.now(),
+      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$activeSe6;
+      var sessionMessages = (_derivedSnap$activeSe6 = derivedSnap.activeSession) === null || _derivedSnap$activeSe6 === void 0 ? void 0 : _derivedSnap$activeSe6.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);
+        }
+      } else {
+        setMessages([]);
       }
+    });
+  }, [(_derivedSnap$activeSe7 = derivedSnap.activeSession) === null || _derivedSnap$activeSe7 === void 0 ? void 0 : _derivedSnap$activeSe7.id, (_derivedSnap$activeSe8 = derivedSnap.activeSession) === null || _derivedSnap$activeSe8 === void 0 || (_derivedSnap$activeSe8 = _derivedSnap$activeSe8.messages) === null || _derivedSnap$activeSe8 === void 0 ? void 0 : _derivedSnap$activeSe8.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);
     }
-    return function () {
-      clearEmptySession();
-    };
   }, []);
   useEffect(function () {
-    if (derivedState.activeSession && Date.now() - derivedState.activeSession.createdAt > 5000) {
-      setLoading(false);
-      setIsStreaming(false);
-    }
+    chatScrollIntoView();
+    stop();
   }, [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;
   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,
+        showRunButton: !props.simple
       }),
       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: "\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"
+        title: formatMessage({
+          id: 'ai.msgbox.retry'
+        })
       }, /*#__PURE__*/React.createElement(Button, {
         onClick: function onClick() {
+          regenerate();
           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"
+        title: formatMessage({
+          id: 'ai.msgbox.copy'
+        })
       }, /*#__PURE__*/React.createElement(Button, {
         color: "default",
         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('/');
+      return createPureNewSession();
     },
     className: styles.newButton
-  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(PlusSquareOutlined, null), "\u5F00\u59CB\u65B0\u5BF9\u8BDD"))), /*#__PURE__*/React.createElement(PromptTextarea, {
+  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(PlusSquareOutlined, null), formatMessage({
+    id: 'ai.msgbox.start.new.chat'
+  }))))), /*#__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
     },
     onConfirm: handleSubmit,
     lib: lib,
-    onLibChange: setLib
+    onLibChange: setLib,
+    onDataSummaryChange: setFileSummary
   })));
 }
 export default MsgBox;

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.js

@@ -1,13 +1,10 @@
-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";
+import { useSnapshot } from 'valtio';
+import classnames from 'classnames';
+import SplitPane from 'react-split-pane';
 function SessionLayout(props) {
   var children = props.children;
   var snap = useSnapshot(AIChatStore);
@@ -16,10 +13,21 @@ function SessionLayout(props) {
   }
   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", {
+  }, /*#__PURE__*/React.createElement(ConversationsMenu, null),
+  // @ts-ignore
+  snap.codeBlock ? /*#__PURE__*/React.createElement(SplitPane, {
+    split: "vertical",
+    defaultSize: "50vw",
+    primary: "second",
+    style: {
+      position: "unset"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.msgBox)
+  }, children[0]), /*#__PURE__*/React.createElement("div", {
     className: styles.taskBox
-  }, children[1]));
+  }, children[1])) : /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.msgBox, styles.msgBoxFull)
+  }, children[0]));
 }
 export { SessionLayout };

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

@@ -14,6 +14,7 @@
 }
 
 .msgBox {
+  height: 100%;
   padding: 16px;
   min-width: 400px;
   justify-content: space-between;
@@ -28,7 +29,8 @@
 }
 
 .taskBox {
+  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
       }
     }