@king-design/vue 3.6.2 → 3.8.0-beta.0

package/components/bubble/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/bubble/styles.js

@@ -0,0 +1,53 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults, setAlpha } from '../../styles/utils';
+import '../../styles/global';
+import { cache } from '../utils';
+var defaults = {
+  gap: '12px',
+  padding: '12px',
+  avatarSize: '32px',
+  avatarFontSize: '12px',
+  avatarBg: '#dce6ee',
+  avatarColor: theme.color.text,
+  roundBorderRadius: '30px',
+  borderRadius: '8px',
+  border: "1px solid " + theme.color.border,
+  filledBg: '#ECF4FF',
+  filledColor: theme.color.text,
+  filledBorder: '1px solid transparent',
+  outlinedBg: '#fff',
+  outlinedColor: theme.color.text,
+  outlinedBorder: "1px solid #E5E8EE",
+  plainBg: 'transparent',
+  plainColor: theme.color.text,
+  plainBorder: '1px solid transparent',
+  roleNameColor: theme.color.title,
+  extraColor: theme.color.placeholder,
+  loadingTextColor: theme.color.lightBlack,
+  get loadingDotColor() {
+    return theme.color.primary;
+  },
+  loadingDotSize: '8px',
+  markdownCodeBg: '#eef2f6',
+  markdownCodeColor: '#2f4554',
+  markdownPreBg: '#10161c',
+  markdownPreColor: '#f5f7fa',
+  markdownBorderColor: '#dde4ea',
+  markdownTableHeadBg: '#f7f9fb',
+  markdownHeadingColor: '#18212a',
+  get markdownLinkColor() {
+    return theme.color.primary;
+  },
+  markdownBlockquoteBg: '#f6f8fa'
+};
+var bubble;
+setDefault(function () {
+  bubble = deepDefaults(theme, {
+    bubble: defaults
+  }).bubble;
+  makeStyles == null || makeStyles.clearCache();
+});
+export var makeStyles = cache(function makeStyles(k) {
+  return /*#__PURE__*/css("display:flex;flex-direction:column;align-items:flex-start;width:100%;.", k, "-bubble-main{display:flex;flex-direction:column;gap:8px;min-width:0;align-items:flex-start;}.", k, "-bubble-meta{display:flex;align-items:center;gap:8px;min-width:0;}.", k, "-bubble-header{color:", bubble.roleNameColor, ";font-size:14px;font-weight:500;min-width:0;text-align:left;}.", k, "-bubble-content{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:100%;padding:", bubble.padding, ";box-sizing:border-box;line-height:1.6;word-break:break-word;overflow-wrap:anywhere;transition:background ", theme.transition.small, ",border-color ", theme.transition.small, ";}.", k, "-bubble-content>*{min-width:0;max-width:100%;}.", k, "-bubble-attachments{display:flex;flex-direction:column;gap:12px;min-width:0;max-width:100%;}.", k, "-bubble-before-content{min-width:0;width:100%;}.", k, "-bubble-text{white-space:pre-wrap;}.", k, "-bubble-loading{display:inline-flex;align-items:center;gap:8px;color:", bubble.loadingTextColor, ";min-height:20px;}.", k, "-bubble-loading-dot{width:", bubble.loadingDotSize, ";height:", bubble.loadingDotSize, ";border-radius:50%;background:", bubble.loadingDotColor, ";display:inline-block;animation:", k, "-bubble-loading-bounce 1s ease-in-out infinite;box-shadow:0 0 0 1px ", setAlpha(theme.color.primary, 0.04), ";}.", k, "-bubble-loading-dot:nth-of-type(2){animation-delay:0.14s;}.", k, "-bubble-loading-dot:nth-of-type(3){animation-delay:0.28s;}.", k, "-bubble-footer{display:flex;align-items:center;gap:4px;}.", k, "-bubble-extra{color:", bubble.extraColor, ";font-size:12px;line-height:1.5;}.", k, "-bubble-avatar{width:", bubble.avatarSize, ";height:", bubble.avatarSize, ";flex:0 0 ", bubble.avatarSize, ";border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:", bubble.avatarBg, ";color:", bubble.avatarColor, ";font-size:", bubble.avatarFontSize, ";font-weight:600;}.", k, "-bubble-avatar-image{width:100%;height:100%;object-fit:cover;display:block;}.", k, "-bubble-markdown{color:inherit;overflow-x:auto;}.", k, "-bubble-markdown>:first-child{margin-top:0;}.", k, "-bubble-markdown>:last-child{margin-bottom:0;}.", k, "-bubble-markdown [data-kpc-bubble-markdown-tail]{display:inline;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;}.", k, "-bubble-markdown p,.", k, "-bubble-markdown ul,.", k, "-bubble-markdown ol,.", k, "-bubble-markdown blockquote,.", k, "-bubble-markdown pre,.", k, "-bubble-markdown table,.", k, "-bubble-markdown hr,.", k, "-bubble-markdown h1,.", k, "-bubble-markdown h2,.", k, "-bubble-markdown h3,.", k, "-bubble-markdown h4,.", k, "-bubble-markdown h5,.", k, "-bubble-markdown h6{margin:0 0 10px;}.", k, "-bubble-markdown ul,.", k, "-bubble-markdown ol{padding-left:20px;list-style-position:outside;}.", k, "-bubble-markdown ul{list-style-type:disc;}.", k, "-bubble-markdown ul ul{list-style-type:circle;}.", k, "-bubble-markdown ul ul ul{list-style-type:square;}.", k, "-bubble-markdown ol{list-style-type:decimal;}.", k, "-bubble-markdown ol ol{list-style-type:lower-alpha;}.", k, "-bubble-markdown li{margin:6px 0;}.", k, "-bubble-markdown li>p{margin:6px 0 0;}.", k, "-bubble-markdown h1,.", k, "-bubble-markdown h2,.", k, "-bubble-markdown h3,.", k, "-bubble-markdown h4,.", k, "-bubble-markdown h5,.", k, "-bubble-markdown h6{color:", bubble.markdownHeadingColor, ";font-weight:600;line-height:1.35;}.", k, "-bubble-markdown h1{font-size:22px;}.", k, "-bubble-markdown h2{font-size:18px;}.", k, "-bubble-markdown h3{font-size:16px;}.", k, "-bubble-markdown h4{font-size:14px;}.", k, "-bubble-markdown h5,.", k, "-bubble-markdown h6{font-size:13px;}.", k, "-bubble-markdown a{color:", bubble.markdownLinkColor, ";text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;}.", k, "-bubble-markdown a:hover{opacity:0.88;}.", k, "-bubble-markdown code{display:inline-block;padding:0 6px;border-radius:4px;background:", bubble.markdownCodeBg, ";color:", bubble.markdownCodeColor, ";font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:12px;white-space:break-spaces;}.", k, "-bubble-markdown strong,.", k, "-bubble-markdown b{font-weight:600;}.", k, "-bubble-markdown img{display:block;max-width:100%;height:auto;margin:12px 0;border-radius:12px;}.", k, "-bubble-markdown hr{height:1px;border:0;background:", bubble.markdownBorderColor, ";}.", k, "-bubble-markdown pre{padding:0px;overflow:auto;background:", bubble.markdownPreBg, ";color:", bubble.markdownPreColor, ";border:1px solid ", setAlpha('#ffffff', 0.06), ";}.", k, "-bubble-markdown pre code{display:block;padding:4px;background:transparent;color:inherit;white-space:pre;word-break:normal;overflow-wrap:normal;}.", k, "-bubble-markdown .hljs{background:transparent;color:inherit;}.", k, "-bubble-markdown .hljs-comment,.", k, "-bubble-markdown .hljs-quote{color:#8fa1b3;}.", k, "-bubble-markdown .hljs-keyword,.", k, "-bubble-markdown .hljs-selector-tag,.", k, "-bubble-markdown .hljs-literal,.", k, "-bubble-markdown .hljs-section,.", k, "-bubble-markdown .hljs-link{color:#ffb86c;}.", k, "-bubble-markdown .hljs-string,.", k, "-bubble-markdown .hljs-title,.", k, "-bubble-markdown .hljs-name,.", k, "-bubble-markdown .hljs-type,.", k, "-bubble-markdown .hljs-attribute,.", k, "-bubble-markdown .hljs-symbol,.", k, "-bubble-markdown .hljs-bullet,.", k, "-bubble-markdown .hljs-addition{color:#7ee787;}.", k, "-bubble-markdown .hljs-number,.", k, "-bubble-markdown .hljs-built_in,.", k, "-bubble-markdown .hljs-builtin-name,.", k, "-bubble-markdown .hljs-variable,.", k, "-bubble-markdown .hljs-template-variable{color:#79c0ff;}.", k, "-bubble-markdown .hljs-deletion{color:#ff7b72;}.", k, "-bubble-markdown table{width:100%;border-collapse:collapse;border-spacing:0;border:1px solid ", bubble.markdownBorderColor, ";border-radius:10px;overflow:hidden;font-size:12px;background:transparent;}.", k, "-bubble-markdown th,.", k, "-bubble-markdown td{padding:8px 12px;border:1px solid ", bubble.markdownBorderColor, ";text-align:left;vertical-align:top;}.", k, "-bubble-markdown th{font-weight:600;background:", bubble.markdownTableHeadBg, ";}.", k, "-bubble-markdown blockquote{padding-left:12px;border-left:3px solid ", setAlpha(theme.color.text, 0.16), ";background:", bubble.markdownBlockquoteBg, ";border-radius:0 10px 10px 0;padding:8px 12px;opacity:0.96;}.", k, "-bubble-markdown blockquote>:last-child{margin-bottom:0;}&.", k, "-bubble-start{align-items:flex-start;}&.", k, "-bubble-start .", k, "-bubble-main{align-items:flex-start;}&.", k, "-bubble-end{align-items:flex-end;}&.", k, "-bubble-end .", k, "-bubble-main{align-items:flex-end;}&.", k, "-bubble-end .", k, "-bubble-meta{flex-direction:row-reverse;justify-content:flex-end;}&.", k, "-bubble-end .", k, "-bubble-header{text-align:right;}&.", k, "-bubble-middle{align-items:center;}&.", k, "-bubble-middle .", k, "-bubble-main{align-items:center;}&.", k, "-bubble-middle .", k, "-bubble-meta{justify-content:center;}&.", k, "-bubble-middle .", k, "-bubble-header{text-align:center;}&.", k, "-bubble-filled .", k, "-bubble-content{background:", bubble.filledBg, ";color:", bubble.filledColor, ";border:", bubble.filledBorder, ";}&.", k, "-bubble-outlined .", k, "-bubble-content{background:", bubble.outlinedBg, ";color:", bubble.outlinedColor, ";border:", bubble.outlinedBorder, ";}&.", k, "-bubble-plain .", k, "-bubble-content{background:", bubble.plainBg, ";color:", bubble.plainColor, ";border:", bubble.plainBorder, ";padding:0;}&.", k, "-bubble-round .", k, "-bubble-content{border-radius:", bubble.roundBorderRadius, ";}&.", k, "-bubble-corner.", k, "-bubble-start .", k, "-bubble-content{border-radius:", bubble.borderRadius, " ", bubble.borderRadius, " ", bubble.borderRadius, " 0;}&.", k, "-bubble-corner.", k, "-bubble-end .", k, "-bubble-content{border-radius:", bubble.borderRadius, " ", bubble.borderRadius, " 0 ", bubble.borderRadius, ";}&.", k, "-bubble-corner.", k, "-bubble-middle .", k, "-bubble-content{border-radius:", bubble.borderRadius, ";}&.", k, "-bubble-square .", k, "-bubble-content{border-radius:", bubble.borderRadius, ";}@keyframes ", k, "-bubble-loading-bounce{0%,80%,100%{transform:translateY(0) scale(0.9);opacity:0.45;}40%{transform:translateY(-5px) scale(1);opacity:1;}}");
+});

package/components/bubble/useBubbleDisplay.d.ts

@@ -0,0 +1,18 @@
+export declare function useBubbleDisplay(): {
+    onMounted: () => void;
+    onBeforeUnmount: () => void;
+    hasContentProp: () => boolean;
+    hasNonEmptyContentProp: () => boolean;
+    hasVisibleContent: () => boolean;
+    shouldShowContentBlock: () => boolean;
+    shouldShowLoadingShell: () => boolean;
+    getDisplayedContent: () => string;
+    isTypingActive: () => boolean;
+    getBubbleStyle: () => {
+        maxWidth: string;
+    } | undefined;
+    getRoleNameText: () => string;
+    hasRoleName: () => boolean;
+    shouldShowAvatar: () => boolean;
+    getAvatarText: () => string;
+};

package/components/bubble/useBubbleDisplay.js

@@ -0,0 +1,300 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import { useInstance } from 'intact-vue-next';
+// 维护 Bubble 的可见内容：loading 清空、typing 推进、streaming 完成事件都在这里收口。
+export function useBubbleDisplay() {
+  var instance = useInstance();
+  var typingTimer = null;
+  var lastCompletedContent = null;
+  var previousContent = instance.get('content');
+  var previousLoading = !!instance.get('loading');
+  var previousStreaming = !!instance.get('streaming');
+  var hasPendingCompletion = previousLoading || previousStreaming;
+  function setDisplayContent(value) {
+    if (instance.get('$displayContent') === value) return false;
+    instance.set('$displayContent', value);
+    return true;
+  }
+  function setTypingActive(value) {
+    if (instance.get('$typingActive') === value) return;
+    instance.set('$typingActive', value);
+  }
+  function getTypingOptions() {
+    var typing = instance.get('typing');
+    if (typing && typeof typing === 'object') {
+      return {
+        interval: Math.max(typing.interval || 24, 16),
+        step: Math.max(typing.step || 2, 1)
+      };
+    }
+    return {
+      interval: 24,
+      step: 2
+    };
+  }
+  function stopTyping() {
+    if (typingTimer) {
+      clearTimeout(typingTimer);
+      typingTimer = null;
+    }
+    setTypingActive(false);
+  }
+  function resetTypingComplete() {
+    lastCompletedContent = null;
+  }
+  // 同一轮内容只触发一次完成事件，避免 streaming 结束和 typing 追平重复通知。
+  function triggerTypingComplete(content) {
+    if (lastCompletedContent === content) return;
+    lastCompletedContent = content;
+    hasPendingCompletion = false;
+    instance.trigger('typingComplete', content);
+  }
+  function finishTyping(content) {
+    stopTyping();
+    triggerTypingComplete(content);
+  }
+  // 同步完成状态，检测状态变化以判断是否需要触发typingComplete事件
+  function syncCompletionState() {
+    var content = instance.get('content');
+    var loading = !!instance.get('loading');
+    var streaming = !!instance.get('streaming');
+    if (content !== previousContent || loading && !previousLoading || streaming && !previousStreaming) {
+      hasPendingCompletion = true;
+    }
+    previousContent = content;
+    previousLoading = loading;
+    previousStreaming = streaming;
+  }
+  function shouldEmitTypingComplete(content) {
+    return content.length > 0 || hasPendingCompletion;
+  }
+  function getDisplayedContent() {
+    return instance.get('$displayContent') || '';
+  }
+  // 获取共享前缀
+  function getSharedPrefix(content) {
+    var displayedContent = getDisplayedContent();
+    // 避免 startsWith 依赖，兼容旧运行环境。
+    if (!displayedContent || _sliceInstanceProperty(content).call(content, 0, displayedContent.length) === displayedContent) {
+      return displayedContent;
+    }
+    var i = 0;
+    while (i < displayedContent.length && i < content.length && displayedContent[i] === content[i]) {
+      i++;
+    }
+    return _sliceInstanceProperty(displayedContent).call(displayedContent, 0, i);
+  }
+  // 开始打字动画
+  function startTyping(immediate) {
+    if (immediate === void 0) {
+      immediate = false;
+    }
+    if (typingTimer) return;
+    if (immediate) {
+      setTypingActive(true);
+      runTyping();
+      return;
+    }
+    var _getTypingOptions = getTypingOptions(),
+      interval = _getTypingOptions.interval;
+    setTypingActive(true);
+    typingTimer = window.setTimeout(function () {
+      typingTimer = null;
+      runTyping();
+    }, interval);
+  }
+  // 运行打字动画
+  function runTyping() {
+    syncCompletionState();
+    var content = instance.get('content');
+    var nextValue = content === undefined || content === null ? '' : String(content);
+    if (instance.get('loading')) {
+      stopTyping();
+      resetTypingComplete();
+      setDisplayContent('');
+      return;
+    }
+    if (!instance.get('typing') || !nextValue) {
+      stopTyping();
+      setDisplayContent(nextValue);
+      if (!instance.get('streaming') && shouldEmitTypingComplete(nextValue)) {
+        triggerTypingComplete(nextValue);
+      }
+      return;
+    }
+    var sharedPrefix = getSharedPrefix(nextValue);
+    if (sharedPrefix !== getDisplayedContent()) {
+      resetTypingComplete();
+      setDisplayContent(sharedPrefix);
+    }
+    var currentValue = getDisplayedContent();
+    var _getTypingOptions2 = getTypingOptions(),
+      interval = _getTypingOptions2.interval,
+      step = _getTypingOptions2.step;
+    if (currentValue !== nextValue) {
+      var nextLength = Math.min(currentValue.length + step, nextValue.length);
+      var renderedContent = _sliceInstanceProperty(nextValue).call(nextValue, 0, nextLength);
+      setDisplayContent(renderedContent);
+      instance.trigger('typing', renderedContent, nextValue);
+    }
+    if (getDisplayedContent() === nextValue) {
+      if (instance.get('streaming')) {
+        stopTyping();
+        return;
+      }
+      finishTyping(nextValue);
+      return;
+    }
+    setTypingActive(true);
+    typingTimer = window.setTimeout(function () {
+      typingTimer = null;
+      runTyping();
+    }, interval);
+  }
+  // 同步显示内容，处理打字动画、流式输出、加载状态等
+  function syncDisplayContent() {
+    syncCompletionState();
+    if (instance.get('loading')) {
+      stopTyping();
+      resetTypingComplete();
+      setDisplayContent('');
+      return;
+    }
+    var content = instance.get('content');
+    var nextValue = content === undefined || content === null ? '' : String(content);
+    var typing = instance.get('typing');
+    var streaming = instance.get('streaming');
+    if (!nextValue) {
+      stopTyping();
+      setDisplayContent(nextValue);
+      if (!streaming && shouldEmitTypingComplete(nextValue)) {
+        triggerTypingComplete(nextValue);
+      }
+      return;
+    }
+    if (!typing) {
+      stopTyping();
+      setDisplayContent(nextValue);
+      if (!streaming && shouldEmitTypingComplete(nextValue)) {
+        triggerTypingComplete(nextValue);
+      }
+      return;
+    }
+    var sharedPrefix = getSharedPrefix(nextValue);
+    if (sharedPrefix !== getDisplayedContent()) {
+      // 内容被修订时保留共享前缀，避免流式修正时整段闪烁。
+      stopTyping();
+      resetTypingComplete();
+      setDisplayContent(sharedPrefix);
+    }
+    if (getDisplayedContent() === nextValue) {
+      if (!streaming) {
+        finishTyping(nextValue);
+      } else {
+        stopTyping();
+      }
+      return;
+    }
+    startTyping(!getDisplayedContent());
+  }
+  // 初始化状态和绑定监听器
+  function bootstrap() {
+    var content = instance.get('content');
+    setTypingActive(false);
+    setDisplayContent(!instance.get('loading') && !instance.get('typing') && content !== undefined && content !== null ? String(content) : '');
+    instance.watch('content', function () {
+      return syncDisplayContent();
+    }, {
+      inited: true
+    });
+    instance.watch('loading', function () {
+      return syncDisplayContent();
+    }, {
+      inited: true
+    });
+    instance.watch('streaming', function () {
+      return syncDisplayContent();
+    }, {
+      inited: true
+    });
+    instance.watch('typing', function () {
+      return syncDisplayContent();
+    }, {
+      inited: true
+    });
+  }
+  bootstrap();
+  function hasContentProp() {
+    var content = instance.get('content');
+    return content !== undefined && content !== null;
+  }
+  function hasNonEmptyContentProp() {
+    var content = instance.get('content');
+    if (content === undefined || content === null) return false;
+    return String(content).length > 0;
+  }
+  function hasVisibleContent() {
+    return !!getDisplayedContent();
+  }
+  function shouldShowContentBlock() {
+    return instance.get('loading') || instance.get('streaming') || hasVisibleContent() || hasNonEmptyContentProp();
+  }
+  function shouldShowLoadingShell() {
+    var loading = instance.get('loading');
+    if (loading) return true;
+    var visible = hasVisibleContent();
+    if (visible) return false;
+    if (instance.get('streaming')) {
+      return true;
+    }
+    return !!instance.get('typing') && hasNonEmptyContentProp();
+  }
+  function isTypingActive() {
+    return !!instance.get('$typingActive');
+  }
+  function getBubbleStyle() {
+    var maxWidthString = instance.get('maxWidthString');
+    if (!maxWidthString) return;
+    return {
+      maxWidth: maxWidthString
+    };
+  }
+  function getRoleNameText() {
+    return instance.get('roleName') || '';
+  }
+  function hasRoleName() {
+    return !!getRoleNameText();
+  }
+  function shouldShowAvatar() {
+    var avatar = instance.get('avatar');
+    return avatar !== false;
+  }
+  function getAvatarText() {
+    var _context;
+    var roleName = _trimInstanceProperty(_context = getRoleNameText()).call(_context);
+    if (roleName) {
+      return roleName.charAt(0).toUpperCase();
+    }
+    return '';
+  }
+  return {
+    onMounted: function onMounted() {
+      return syncDisplayContent();
+    },
+    onBeforeUnmount: function onBeforeUnmount() {
+      stopTyping();
+    },
+    hasContentProp: hasContentProp,
+    hasNonEmptyContentProp: hasNonEmptyContentProp,
+    hasVisibleContent: hasVisibleContent,
+    shouldShowContentBlock: shouldShowContentBlock,
+    shouldShowLoadingShell: shouldShowLoadingShell,
+    getDisplayedContent: getDisplayedContent,
+    isTypingActive: isTypingActive,
+    getBubbleStyle: getBubbleStyle,
+    getRoleNameText: getRoleNameText,
+    hasRoleName: hasRoleName,
+    shouldShowAvatar: shouldShowAvatar,
+    getAvatarText: getAvatarText
+  };
+}

package/components/bubbleList/bubbleList.d.ts

@@ -0,0 +1,87 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import type { Events } from '../types';
+import type { BubbleProps } from '../bubble';
+export type BubbleListKey = string | number;
+export interface BubbleListRoleConfig extends Partial<BubbleProps> {
+    className?: string;
+    style?: any;
+    onTyping?: (renderedContent: string, currentContent: string, item: BubbleListItem, index: number) => void;
+    onTypingComplete?: (content: string, item: BubbleListItem, index: number) => void;
+}
+export interface BubbleListItem extends Partial<BubbleProps> {
+    key?: BubbleListKey;
+    role?: string;
+    className?: string;
+    style?: any;
+    onTyping?: BubbleListRoleConfig['onTyping'];
+    onTypingComplete?: BubbleListRoleConfig['onTypingComplete'];
+    [key: string]: any;
+}
+export type BubbleListRoleMap = Record<string, BubbleListRoleConfig | ((item: BubbleListItem, index: number) => BubbleListRoleConfig)>;
+export interface BubbleListProps {
+    items?: BubbleListItem[];
+    itemKey?: string | ((item: BubbleListItem, index: number) => BubbleListKey);
+    autoScroll?: boolean;
+    autoScrollThreshold?: number;
+    maxHeight?: number | string;
+    historyTriggerOffset?: number;
+    hasMoreHistory?: boolean;
+    loadingHistory?: boolean;
+    roles?: BubbleListRoleMap;
+    scrollBehavior?: 'auto' | 'smooth';
+    showScrollToBottom?: boolean;
+}
+export interface BubbleListSlotParams {
+    item: BubbleListItem;
+    mergedItem: BubbleListItem;
+    index: number;
+    key: BubbleListKey;
+    isFirst: boolean;
+    isLast: boolean;
+    isAtBottom: boolean;
+}
+export interface HistoryLoadingSlotParams {
+    loadingHistory: boolean;
+    hasMoreHistory: boolean;
+}
+export interface ScrollToBottomSlotParams {
+    isAtBottom: boolean;
+    scrollToBottom: () => void;
+}
+export interface BubbleListEvents {
+    loadHistory: [];
+    scroll: [Event];
+    scrollBottomChange: [boolean];
+    autoScrollChange: [boolean];
+    typing: [BubbleListItem, string, string, number];
+    typingComplete: [BubbleListItem, string, number];
+}
+export interface BubbleListBlocks {
+    header: null;
+    listFooter: null;
+    empty: null;
+    historyLoading: HistoryLoadingSlotParams;
+    scrollToBottom: ScrollToBottomSlotParams;
+    item: BubbleListSlotParams;
+    avatar: BubbleListSlotParams;
+    roleName: BubbleListSlotParams;
+    beforeContent: BubbleListSlotParams;
+    attachments: BubbleListSlotParams;
+    content: BubbleListSlotParams;
+    bottom: BubbleListSlotParams;
+    loading: BubbleListSlotParams;
+    footer: BubbleListSlotParams;
+    extra: BubbleListSlotParams;
+}
+export declare class BubbleList extends Component<BubbleListProps, BubbleListEvents, BubbleListBlocks> {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<BubbleListProps>>;
+    static defaults: () => Partial<BubbleListProps>;
+    static events: Events<BubbleListEvents>;
+    private config;
+    private bubbleList;
+    scrollToBottom(behavior?: ScrollBehavior): void;
+    scrollToTop(behavior?: ScrollBehavior): void;
+    scrollToKey(key: BubbleListKey, behavior?: ScrollBehavior): void;
+    isAtBottom(): boolean;
+}

package/components/bubbleList/bubbleList.js

@@ -0,0 +1,75 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-vue-next';
+import template from './bubbleList.vdt';
+import { useConfigContext } from '../config';
+import { useBubbleList } from './useBubbleList';
+var typeDefs = {
+  items: Array,
+  itemKey: [String, Function],
+  autoScroll: Boolean,
+  autoScrollThreshold: Number,
+  maxHeight: [Number, String],
+  historyTriggerOffset: Number,
+  hasMoreHistory: Boolean,
+  loadingHistory: Boolean,
+  roles: Object,
+  scrollBehavior: ['auto', 'smooth'],
+  showScrollToBottom: Boolean
+};
+var defaults = function defaults() {
+  return {
+    items: [],
+    itemKey: undefined,
+    autoScroll: true,
+    autoScrollThreshold: 80,
+    maxHeight: undefined,
+    historyTriggerOffset: 24,
+    hasMoreHistory: false,
+    loadingHistory: false,
+    roles: undefined,
+    scrollBehavior: 'auto',
+    showScrollToBottom: true
+  };
+};
+var events = {
+  loadHistory: true,
+  scroll: true,
+  scrollBottomChange: true,
+  autoScrollChange: true,
+  typing: true,
+  typingComplete: true
+};
+export var BubbleList = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(BubbleList, _Component);
+  function BubbleList() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    _this.bubbleList = useBubbleList();
+    return _this;
+  }
+  var _proto = BubbleList.prototype;
+  // 对外只暴露滚动能力，具体 DOM 和贴底状态由 useBubbleList 维护。
+  _proto.scrollToBottom = function scrollToBottom(behavior) {
+    this.bubbleList.scrollToBottom(behavior);
+  };
+  _proto.scrollToTop = function scrollToTop(behavior) {
+    this.bubbleList.scrollToTop(behavior);
+  };
+  _proto.scrollToKey = function scrollToKey(key, behavior) {
+    this.bubbleList.scrollToKey(key, behavior);
+  };
+  _proto.isAtBottom = function isAtBottom() {
+    return this.bubbleList.isAtBottom();
+  };
+  return BubbleList;
+}(Component);
+BubbleList.template = template;
+BubbleList.typeDefs = typeDefs;
+BubbleList.defaults = defaults;
+BubbleList.events = events;