@antv/dumi-theme-antv 0.7.9 → 0.8.0-alpha.3

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

@@ -0,0 +1,407 @@
+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 _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 { BranchesOutlined, CheckOutlined, CopyOutlined, DeleteOutlined, PlusSquareOutlined, SyncOutlined, ToolOutlined } from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import { Button, Flex, Space, Tooltip } from 'antd';
+import { useChat } from '@ai-sdk/react';
+import { TextStreamChatTransport } from 'ai';
+import { useIntl, useSiteData } from 'dumi';
+import { findLast } from 'lodash-es';
+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 { AIChatStore, branchMessage, clearEmptySession, createPureNewSession, deleteMessage, 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";
+import { AIMode } from "../../../../components/AI/constant";
+import { trackEvent } from "../../../../utils/analytics";
+var avatar = {
+  icon: /*#__PURE__*/React.createElement("img", {
+    draggable: false,
+    src: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7svFR6wkPMoAAAAAAAAAAAAADmJ7AQ/original',
+    alt: "AntV"
+  }),
+  style: {
+    borderRadius: 0,
+    backgroundColor: 'transparent'
+  }
+};
+var chatScrollIntoView = function chatScrollIntoView() {
+  setTimeout(function () {
+    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$activeSe4, _derivedSnap$activeSe7, _derivedSnap$activeSe8, _messages;
+  var _props$messages = props.messages,
+    initialMessages = _props$messages === void 0 ? [] : _props$messages,
+    _props$simple = props.simple,
+    simple = _props$simple === void 0 ? false : _props$simple,
+    onCodegen = props.onCodegen,
+    title = props.title;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    promptText = _useState2[0],
+    setPromptText = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fileSummary = _useState4[0],
+    setFileSummary = _useState4[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';
+  });
+  // 使用 ref 存储动态值，避免重新创建 transport
+  var anonymousUserIdRef = useRef(snap.anonymousUserId);
+  var activeSessionIdRef = useRef((_derivedSnap$activeSe2 = derivedSnap.activeSession) === null || _derivedSnap$activeSe2 === void 0 ? void 0 : _derivedSnap$activeSe2.id);
+  var _useSiteData = useSiteData(),
+    themeConfig = _useSiteData.themeConfig;
+  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: function body() {
+          return {
+            gptConversationId: activeSessionIdRef.current,
+            anonymousUserId: anonymousUserIdRef.current,
+            mountId: 'container',
+            antvContext: (latestUserMessage === null || latestUserMessage === void 0 ? void 0 : latestUserMessage.context) || props.context,
+            library: AIChatStore.lib,
+            mode: AIChatStore.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);
+          } else {
+            AIChatStore.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: formatMessage({
+            id: 'ai.msgbox.error.response'
+          }),
+          createdAt: Date.now()
+          // mode,
+          // lib,
+        });
+      },
+      experimental_throttle: 500
+    }),
+    messages = _useChat.messages,
+    setMessages = _useChat.setMessages,
+    sendMessage = _useChat.sendMessage,
+    regenerate = _useChat.regenerate,
+    status = _useChat.status,
+    stop = _useChat.stop;
+
+  // 处理用户提交
+  var handleSubmit = function handleSubmit() {
+    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: snap.lib,
+        // mode: snap.mode,
+      }
+    });
+    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: snap.lib
+    });
+    chatScrollIntoView();
+    // 埋点
+    if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === 'object') {
+      trackEvent('start_ai_chat', {
+        entry_point: simple ? 'Drawer' : 'MsgBox',
+        mode: AIChatStore.mode,
+        lib: AIChatStore.lib,
+        page_title: document.title,
+        location: location.href
+      });
+    }
+  };
+
+  // 同步 Valtio store -> useChat state
+  useEffect(function () {
+    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);
+      AIChatStore.mode = AIMode.implement;
+      if (!themeConfig.isAntVSite && themeConfig.title) {
+        AIChatStore.lib = themeConfig.title;
+      }
+    }
+    return function () {
+      if (simple) {
+        clearEmptySession();
+      }
+    };
+  }, []);
+  useEffect(function () {
+    chatScrollIntoView();
+    stop();
+    AIChatStore.errorMsg = null;
+  }, [snap.activeSessionId]);
+
+  // 将 messages 数组作为依赖项。当它变化时，Hook 会运行。
+  var _useAutoScroll = useAutoScroll(messages),
+    containerRef = _useAutoScroll.containerRef,
+    anchorRef = _useAutoScroll.anchorRef;
+  var autofix = function autofix() {
+    var _derivedState$activeS6;
+    var autoFixPromptText = "".concat(formatMessage({
+      id: 'ai.msgbox.auto.fix.prompt'
+    }), " [").concat(snap.errorMsg, "]");
+    sendMessage({
+      text: autoFixPromptText
+    }, {
+      body: {
+        antvContext: snap.codeBlock
+      }
+    });
+    AIChatStore.errorMsg = null;
+    (_derivedState$activeS6 = derivedState.activeSession) === null || _derivedState$activeS6 === void 0 || (_derivedState$activeS6 = _derivedState$activeS6.messages) === null || _derivedState$activeS6 === void 0 || _derivedState$activeS6.push({
+      id: crypto.randomUUID(),
+      role: 'user',
+      content: autoFixPromptText,
+      createdAt: Date.now(),
+      context: snap.codeBlock,
+      lib: snap.lib
+    });
+    chatScrollIntoView();
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, {
+    gap: "middle",
+    vertical: true,
+    className: styles.chatContainer,
+    ref: containerRef
+  }, messages.map(function (msg, index) {
+    var textContent = getTextContent(msg);
+    return /*#__PURE__*/React.createElement(Bubble, {
+      key: msg.id || index,
+      content: /*#__PURE__*/React.createElement(MarkdownComponent, {
+        content: textContent,
+        showRunButton: !props.simple
+      }),
+      avatar: msg.role === 'assistant' ? avatar : null,
+      footer: status === 'ready' && /*#__PURE__*/React.createElement(Space, {
+        size: "small"
+      }, msg.role === 'assistant' && index === messages.length - 1 && /*#__PURE__*/React.createElement(Tooltip, {
+        title: formatMessage({
+          id: 'ai.msgbox.retry'
+        })
+      }, /*#__PURE__*/React.createElement(Button, {
+        onClick: function onClick() {
+          regenerate();
+          derivedState.activeSession.messages.pop();
+        },
+        color: "default",
+        variant: "text",
+        size: "small",
+        icon: /*#__PURE__*/React.createElement(SyncOutlined, null)
+      })), /*#__PURE__*/React.createElement(Tooltip, {
+        title: formatMessage({
+          id: 'ai.msgbox.copy'
+        })
+      }, /*#__PURE__*/React.createElement(Button, {
+        color: "default",
+        variant: "text",
+        size: "small",
+        onClick: function onClick() {
+          return copyToClipboard(textContent);
+        },
+        icon: copyState.value === textContent ? /*#__PURE__*/React.createElement(CheckOutlined, null) : /*#__PURE__*/React.createElement(CopyOutlined, null)
+      })), /*#__PURE__*/React.createElement(Tooltip, {
+        title: formatMessage({
+          id: 'ai.msgbox.continue.from.here'
+        })
+      }, /*#__PURE__*/React.createElement(Button, {
+        color: "default",
+        variant: "text",
+        size: "small",
+        onClick: function onClick() {
+          return branchMessage(index);
+        },
+        icon: /*#__PURE__*/React.createElement(BranchesOutlined, null)
+      })), msg.role === 'assistant' && /*#__PURE__*/React.createElement(Tooltip, {
+        title: formatMessage({
+          id: 'ai.msgbox.delete'
+        })
+      }, /*#__PURE__*/React.createElement(Button, {
+        color: "default",
+        variant: "text",
+        size: "small",
+        onClick: function onClick() {
+          return deleteMessage(msg.id);
+        },
+        icon: /*#__PURE__*/React.createElement(DeleteOutlined, null)
+      }))),
+      placement: msg.role === 'user' ? 'end' : 'start'
+    });
+  }), (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: 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(Space, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return createPureNewSession();
+    },
+    className: styles.newButton
+  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(PlusSquareOutlined, null), formatMessage({
+    id: 'ai.msgbox.start.new.chat'
+  }))), snap.errorMsg && status === 'ready' && /*#__PURE__*/React.createElement(Button, {
+    onClick: autofix,
+    color: "danger",
+    variant: "filled",
+    icon: /*#__PURE__*/React.createElement(ToolOutlined, null)
+  }, formatMessage({
+    id: 'ai.msgbox.auto.fix'
+  })))), /*#__PURE__*/React.createElement(PromptTextarea, {
+    size: "compact",
+    value: promptText,
+    onChange: setPromptText,
+    loading: status === 'streaming' || status === 'submitted',
+    onCancel: stop,
+    showAction: !props.simple,
+    style: {
+      marginBottom: 0
+    },
+    onConfirm: handleSubmit,
+    onDataSummaryChange: setFileSummary,
+    showModeSelector: true
+  })));
+}
+export default MsgBox;

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

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

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

@@ -0,0 +1,62 @@
+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 classnames from 'classnames';
+import React, { useState } from 'react';
+import SplitPane from 'react-split-pane';
+import { useSnapshot } from 'valtio';
+import { AIChatStore } from "../../../../model/AIChat";
+import { ConversationsMenu } from "../ConversationsMenu";
+import styles from "./index.module.less";
+function SessionLayout(props) {
+  var children = props.children;
+  var snap = useSnapshot(AIChatStore);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  if (!Array.isArray(children)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement(ConversationsMenu, null), snap.codeBlock ?
+  /*#__PURE__*/
+  // @ts-ignore
+  React.createElement(SplitPane, {
+    split: "vertical",
+    defaultSize: '50vw',
+    onDragStarted: function onDragStarted() {
+      return setIsDragging(true);
+    },
+    onDragFinished: function onDragFinished() {
+      return setIsDragging(false);
+    },
+    primary: "second",
+    style: {
+      position: 'unset'
+    },
+    minSize: 100
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.msgBox)
+  }, children[0]), /*#__PURE__*/React.createElement("div", {
+    className: styles.taskBox
+  }, children[1])) : /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.msgBox, styles.msgBoxFull),
+    key: snap.codeBlock
+  }, children[0]), isDragging && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 9999,
+      cursor: 'col-resize' // 或 'row-resize' 用于水平分割
+    }
+  }));
+}
+export { SessionLayout };

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

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