@foundbyte/uni-agent 1.0.0-alpha.0

package/components/bubble-list/index.vue

@@ -0,0 +1,505 @@
+<template>
+  <scroll-view
+    :class="p('list')"
+    scroll-y
+    :scroll-top="scrollTop"
+    :scroll-with-animation="true"
+    :scroll-into-view="scrollIntoView"
+    enhanced
+    :bounces="false"
+    :throttle="false"
+    :style="rootStyle"
+    @scroll="onScroll"
+    @scrolltolower="$emit('reach-bottom')"
+  >
+    <view :class="p('list-content')">
+      <!-- 列表顶部插槽 -->
+      <slot name="before" />
+
+      <view
+        v-for="(message, index) in messages"
+        :id="`bubble-${message.id}`"
+        :key="message.id || index"
+        :class="[
+          p('item'),
+          p('item', getPlacement(message)),
+          { [p('item', 'last')]: index === messages.length - 1 },
+          getAnimationClass(message),
+        ]"
+        :style="getAnimationStyle(message)"
+      >
+        <!-- 头像 - 左侧(对方) -->
+        <view
+          v-if="getPlacement(message) === BubblePlacement.Start && isShowAvatar(message)"
+          :class="[p('avatar'), p('avatar', 'left')]"
+        >
+          <slot name="avatar-left" :message="message" :index="index">
+            <image
+              v-if="getAvatar(message)"
+              :class="p(['avatar', 'image'])"
+              :src="getAvatar(message)"
+              mode="aspectFill"
+            />
+            <view v-else :class="[p(['avatar', 'default']), p(['avatar', 'default'], 'ai')]">
+              <text :class="p(['avatar', 'icon'])"> 🤖 </text>
+            </view>
+          </slot>
+        </view>
+
+        <!-- 消息内容区域 -->
+        <view :class="[p('content'), p('content', getPlacement(message))]">
+          <!-- 角色名称 -->
+          <view v-if="getRoleName(message)" :class="p('role-name')">
+            {{ getRoleName(message) }}
+          </view>
+
+          <!-- 消息气泡 -->
+          <view
+            :class="[
+              p('message'),
+              p('message', getPlacement(message)),
+              p('message', message.role),
+              { [p('message', 'loading')]: message.loading },
+            ]"
+          >
+            <!-- 加载状态 -->
+            <view v-if="message.loading" :class="p('loading')">
+              <view :class="p(['loading', 'dot'])" />
+              <view :class="p(['loading', 'dot'])" />
+              <view :class="p(['loading', 'dot'])" />
+            </view>
+
+            <slot v-if="!message.loading" name="content" :message="message" :index="index"></slot>
+
+            <!-- 内容底部插槽 -->
+            <slot name="content-footer" :message="message" :index="index" />
+          </view>
+
+          <!-- 消息底部（时间等） -->
+          <view v-if="message.time || $slots['message-footer']" :class="p('message-footer')">
+            <!-- <text v-if="message.time" :class="p('time')">
+              {{ message.time }}
+            </text> -->
+            <slot name="message-footer" :message="message" :index="index" />
+          </view>
+        </view>
+
+        <!-- 头像 - 右侧(自己) -->
+        <view
+          v-if="getPlacement(message) === BubblePlacement.End && isShowAvatar(message)"
+          :class="[p('avatar'), p('avatar', 'right')]"
+        >
+          <slot name="avatar-right" :message="message" :index="index">
+            <image
+              v-if="getAvatar(message)"
+              :class="p(['avatar', 'image'])"
+              :src="getAvatar(message)"
+              mode="aspectFill"
+            />
+            <view v-else :class="[p(['avatar', 'default']), p(['avatar', 'default'], 'user')]">
+              <text :class="p(['avatar', 'icon'])"> 👤 </text>
+            </view>
+          </slot>
+        </view>
+      </view>
+
+      <!-- 列表底部插槽 -->
+      <slot name="after" />
+
+      <!-- 底部锚点，用于滚动到底部 -->
+      <view :id="listBottomAnchorId" :class="p('list-bottom-anchor')" />
+    </view>
+  </scroll-view>
+</template>
+
+<script setup lang="ts">
+// eslint-disable-next-line no-restricted-imports
+import { computed, nextTick, ref, watch } from 'vue'
+import { parse as parseRichText } from 'marked'
+import {
+  type BubbleListProps,
+  type BubbleMessage,
+  BubblePlacement,
+  MessageAnimation,
+  type MessageAnimationConfig,
+  MessageRole,
+} from './types'
+import { useTypewriterManager } from './use-typewriter'
+import { usePrefix } from '../../composables'
+
+defineOptions({
+  options: {
+    styleIsolation: 'shared',
+    virtualHost: true,
+  },
+})
+
+const props = withDefaults(defineProps<BubbleListProps>(), {
+  messages: () => [],
+  roleConfigs: () => ({}),
+  defaultPlacement: 'start',
+  autoScroll: true,
+  defaultTypingSpeed: 30,
+  showRole: true,
+  showAvatar: true,
+  animation: () => ({ type: MessageAnimation.SlideLeft }),
+})
+
+const emit = defineEmits<{
+  (e: 'scroll', event: ScrollEvent): void
+  (e: 'reach-top'): void
+  (e: 'reach-bottom'): void
+}>()
+
+const p = usePrefix('bubble')
+
+const listBottomAnchorId = `anchor-${Math.random().toString(32).substring(2)}`
+
+type ScrollEvent = {
+  detail: {
+    deltaX: number
+    deltaY: number
+    scrollHeight: number
+    scrollLeft: number
+    scrollTop: number
+    scrollWidth: number
+  }
+}
+
+// 滚动位置控制
+const scrollTop = ref(0)
+const scrollIntoView = ref('')
+
+// 需要触发动画的消息 ID 集合
+const pendingAnimationIds = ref<Set<string>>(new Set())
+// 已经准备好初始状态、可以触发动画的消息 ID 集合
+const readyToAnimateIds = ref<Set<string>>(new Set())
+
+// 打字机效果管理
+const typewriterManager = useTypewriterManager()
+
+/**
+ * 根节点样式 - 注入默认动画 CSS 变量
+ */
+const rootStyle = computed(() => {
+  const style: Record<string, string> = {}
+  const globalAnimation = props.animation
+
+  style['--animation-duration'] = `${globalAnimation.duration || 300}ms`
+  style['--animation-delay'] = `${globalAnimation.delay || 0}ms`
+
+  return style
+})
+
+/**
+ * 获取消息的打字机状态
+ */
+function getMessageTypewriter(message: BubbleMessage) {
+  // 从 props.messages 中动态查找消息，确保响应式更新
+  const messageRef = computed(() => {
+    return props.messages.find((m) => m.id === message.id) || message
+  })
+
+  // 只有 AI 消息且开启了 typing 才启用打字机效果
+  const enabled = computed(
+    () => messageRef.value.role === MessageRole.Ai && !!messageRef.value.typing,
+  )
+  const content = computed(() => messageRef.value.content || '')
+
+  // 用于控制滚动频率的节流
+  // let scrollThrottleTimer: ReturnType<typeof setTimeout> | null = null
+
+  return typewriterManager.getOrCreate(message.id, content, enabled, {
+    speed: message.typingSpeed || props.defaultTypingSpeed,
+    autoStart: true,
+    onUpdate: (index, len) => {
+      // 打字时自动滚动（如果不是用户主动滚动）
+      if (props.autoScroll) {
+        const lastMessage = props.messages[props.messages.length - 1]
+        if (lastMessage?.id === message.id) {
+          scrollToBottom()
+          if (index === len) {
+            setTimeout(scrollToBottom, 500)
+          }
+        }
+      }
+    },
+  })
+}
+
+function getMessageContent(message: BubbleMessage, isRichText = false): string {
+  const { displayText, isComplete } = getMessageTypewriter(message)
+  let content = displayText.value
+  if (isComplete.value || message.role !== MessageRole.Ai || !message.typing) {
+    content = message.content || ''
+  }
+  return isRichText ? (parseRichText(content) as string) : content
+}
+
+// 监听消息变化，自动滚动到底部
+watch(
+  () => props.messages.length,
+  (newLen, oldLen) => {
+    if (newLen > (oldLen || 0) && props.autoScroll) {
+      scrollToBottom()
+    }
+  },
+  { flush: 'post' },
+)
+
+// 监听最后一条消息的 loading 状态变化
+watch(
+  () => props.messages[props.messages.length - 1]?.loading,
+  (loading) => {
+    if (props.autoScroll && loading) {
+      scrollToBottom()
+    }
+  },
+)
+
+// 监听最后一条 AI 消息的内容变化（流式输出时实时滚动）
+let contentWatchStop: (() => void) | null = null
+
+watch(
+  () => props.messages[props.messages.length - 1],
+  (lastMessage) => {
+    // 清理旧的监听
+    if (contentWatchStop) {
+      contentWatchStop()
+      contentWatchStop = null
+    }
+
+    // 如果是 AI 消息且有内容变化，监听其 content
+    if (lastMessage?.role === MessageRole.Ai && lastMessage?.content !== undefined) {
+      contentWatchStop = watch(
+        () => lastMessage.content,
+        () => {
+          if (props.autoScroll) {
+            scrollToBottom()
+          }
+        },
+        { flush: 'post' },
+      )
+    }
+  },
+  { immediate: true },
+)
+
+function getPlacement(message: BubbleMessage) {
+  const config = props.roleConfigs[message.role]
+  return (
+    config?.placement ||
+    (message.role === MessageRole.User ? BubblePlacement.End : BubblePlacement.Start)
+  )
+}
+
+/**
+ * 获取消息的动画配置
+ * 优先级：消息自身的 animation > 全局 animation 配置
+ */
+function getMessageAnimation(message: BubbleMessage): MessageAnimationConfig {
+  return (
+    message.animation ||
+    props.animation || {
+      type: MessageAnimation.SlideLeft,
+      duration: 300,
+      delay: 0,
+    }
+  )
+}
+
+/**
+ * 获取动画类名
+ * 根据消息位置和动画类型返回对应的动画类
+ * 只有在 readyToAnimateIds 中时才返回动画类（确保初始状态已设置）
+ */
+function getAnimationClass(message: BubbleMessage): string {
+  const animation = getMessageAnimation(message)
+
+  // 如果指定了自定义类名，直接返回
+  if (animation.customClass) {
+    return animation.customClass
+  }
+
+  // 根据动画类型返回对应类名
+  const type = animation.type || MessageAnimation.SlideLeft
+
+  // 如果是无动画，返回空字符串
+  if (type === MessageAnimation.None) {
+    return ''
+  }
+
+  // 只有当消息准备好触发动画时才添加动画类
+  if (!readyToAnimateIds.value.has(message.id)) {
+    return ''
+  }
+
+  // 根据消息位置和动画类型生成类名
+  const placement = getPlacement(message)
+  const baseClass = p('animate')
+
+  // 处理 SlideLeft 和 SlideRight，需要根据位置决定方向
+  if (type === MessageAnimation.SlideLeft) {
+    // 左侧消息从左滑入，右侧消息从右滑入
+    return `${baseClass}--${placement === BubblePlacement.End ? 'slide-right' : 'slide-left'}`
+  }
+
+  if (type === MessageAnimation.SlideRight) {
+    // 左侧消息从右滑入，右侧消息从左滑入（反向）
+    return `${baseClass}--${placement === BubblePlacement.End ? 'slide-left' : 'slide-right'}`
+  }
+
+  // 其他动画类型直接使用
+  return `${baseClass}--${type}`
+}
+
+/**
+ * 获取动画样式
+ * 设置初始状态和 transition 相关的 CSS 变量
+ */
+function getAnimationStyle(message: BubbleMessage): Record<string, string> {
+  const animation = getMessageAnimation(message)
+  const style: Record<string, string> = {}
+
+  // 获取全局默认值
+  const globalDuration = props.animation?.duration ?? 300
+  const globalDelay = props.animation?.delay ?? 0
+
+  // 只在与全局默认值不同时才设置 CSS 变量
+  if (animation.duration !== undefined && animation.duration !== globalDuration) {
+    style['--animation-duration'] = `${animation.duration}ms`
+  }
+  if (animation.delay !== undefined && animation.delay !== globalDelay) {
+    style['--animation-delay'] = `${animation.delay}ms`
+  }
+
+  const type = animation.type || MessageAnimation.SlideLeft
+
+  // 无动画类型，直接返回
+  if (type === MessageAnimation.None) {
+    return style
+  }
+
+  // 只有当消息是新添加的（在 pendingAnimationIds 中但不在 readyToAnimateIds 中）
+  // 才设置初始状态（opacity: 0, transform: ...）
+  if (!pendingAnimationIds.value.has(message.id) || readyToAnimateIds.value.has(message.id)) {
+    return style
+  }
+
+  // 根据动画类型设置初始状态
+  switch (type) {
+    case MessageAnimation.SlideLeft:
+      // 左侧消息从左滑入，右侧消息从右滑入
+      if (getPlacement(message) === BubblePlacement.End) {
+        style.transform = 'translateX(60rpx)'
+      } else {
+        style.transform = 'translateX(-60rpx)'
+      }
+      style.opacity = '0'
+      break
+    case MessageAnimation.SlideRight:
+      // 左侧消息从右滑入，右侧消息从左滑入（反向）
+      if (getPlacement(message) === BubblePlacement.End) {
+        style.transform = 'translateX(-60rpx)'
+      } else {
+        style.transform = 'translateX(60rpx)'
+      }
+      style.opacity = '0'
+      break
+    case MessageAnimation.Scale:
+    case MessageAnimation.Bounce:
+      style.transform = 'scale(0.8)'
+      style.opacity = '0'
+      break
+    case MessageAnimation.Fade:
+    default:
+      style.opacity = '0'
+      break
+  }
+
+  return style
+}
+
+function isShowRole(message: BubbleMessage): boolean {
+  const config = props.roleConfigs[message.role]
+  // 优先使用角色配置，如果没有则使用全局配置
+  if (config?.showRole !== undefined) return config.showRole
+  return props.showRole
+}
+
+function isShowAvatar(message: BubbleMessage): boolean {
+  const config = props.roleConfigs[message.role]
+  // 优先使用角色配置，如果没有则使用全局配置
+  if (config?.showAvatar !== undefined) return config.showAvatar
+  return props.showAvatar
+}
+
+function getRoleName(message: BubbleMessage): string {
+  if (!isShowRole(message)) return ''
+  return message.roleName || props.roleConfigs[message.role]?.name || ''
+}
+
+function getAvatar(message: BubbleMessage): string {
+  if (!isShowAvatar(message)) return ''
+  return message.avatar || props.roleConfigs[message.role]?.avatar || ''
+}
+
+function isRichContent(content?: string): content is string {
+  if (!content) return false
+  return /<[^>]+>/.test(content) || /[*#`\-_!]/.test(content)
+}
+
+const scrollToBottom = () => {
+  // 使用底部锚点进行滚动，更可靠
+  scrollIntoView.value = ''
+  nextTick(() => {
+    scrollIntoView.value = listBottomAnchorId
+  })
+}
+
+function onScroll(event: ScrollEvent) {
+  emit('scroll', event)
+  if (event.detail.scrollTop <= 10) emit('reach-top')
+}
+
+// 监听消息列表变化，为正在打字的AI消息添加滚动监听
+watch(
+  () => props.messages.map((m) => m.id),
+  (newIds, oldIds) => {
+    // 清理已删除消息的打字机状态
+    if (oldIds) {
+      oldIds.forEach((id) => {
+        if (!newIds.includes(id)) {
+          typewriterManager.remove(id)
+          pendingAnimationIds.value.delete(id)
+          readyToAnimateIds.value.delete(id)
+        }
+      })
+    }
+
+    // 为新添加的消息触发动画
+    const newMessageIds = newIds.filter((id) => !oldIds?.includes(id))
+    if (newMessageIds.length > 0) {
+      // 第一步：立即添加到 pendingAnimationIds，让 getAnimationStyle 设置初始状态（opacity: 0）
+      newMessageIds.forEach((id) => pendingAnimationIds.value.add(id))
+
+      // 第二步：在下一帧添加到 readyToAnimateIds，让 getAnimationClass 添加动画类，触发 transition
+      nextTick(() => {
+        newMessageIds.forEach((id) => readyToAnimateIds.value.add(id))
+      })
+    }
+  },
+  { immediate: true },
+)
+
+// 暴露方法
+defineExpose({
+  isRichContent,
+  getMessageContent,
+  scrollToBottom,
+})
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/bubble-list/types.ts

@@ -0,0 +1,110 @@
+/** 消息角色类型 */
+export enum MessageRole {
+  Ai = 'ai',
+  User = 'user',
+  System = 'system',
+}
+
+/** 气泡位置 */
+export enum BubblePlacement {
+  Start = 'start',
+  End = 'end',
+  Both = 'both',
+  Center = 'center',
+}
+
+/** 消息动画类型 */
+export enum MessageAnimation {
+  /** 无动画 */
+  None = 'none',
+  /** 淡入 */
+  Fade = 'fade',
+  /** 从左滑入 */
+  SlideLeft = 'slide-left',
+  /** 从右滑入 */
+  SlideRight = 'slide-right',
+  /** 缩放进入 */
+  Scale = 'scale',
+  /** 弹跳进入 */
+  Bounce = 'bounce',
+}
+
+/** 消息动画配置 */
+export interface MessageAnimationConfig {
+  /** 动画类型 */
+  type?: MessageAnimation
+  /** 动画持续时间（毫秒），默认 300ms */
+  duration?: number
+  /** 动画延迟（毫秒），默认 0ms */
+  delay?: number
+  /** 自定义动画类名（会覆盖 type） */
+  customClass?: string
+}
+
+/** 单条消息 */
+export interface BubbleMessage {
+  /** 消息唯一标识 */
+  id: string
+  /** 消息角色 */
+  role: string
+  /** 消息内容 */
+  content?: string
+  /** 是否加载中 */
+  loading?: boolean
+  /** 是否开启打字机效果（仅AI消息有效） */
+  typing?: boolean
+  /** 打字速度（毫秒/字符），默认 30ms */
+  typingSpeed?: number
+  /** 发送时间 */
+  time?: string
+  /** 音频URL */
+  audioUrl?: string
+  /** 是否正在播放音频 */
+  isPlaying?: boolean
+  /** 动画配置（优先级高于全局配置） */
+  animation?: MessageAnimationConfig
+  /** 自定义数据 */
+  [key: string]: any
+}
+
+/** 角色配置 */
+export interface BubbleRoleConfig {
+  /** 角色名称 */
+  name?: string
+  /** 头像地址 */
+  avatar?: string
+  /** 气泡位置：start-左侧(对方), end-右侧(自己), both-两侧，center-水平居中 */
+  placement?: 'start' | 'end' | 'both' | 'center'
+  /** 气泡背景色 */
+  bubbleColor?: string
+  /** 气泡文字颜色 */
+  textColor?: string
+  /** 自定义渲染器 */
+  contentRenderer?: (content: string) => string
+  /** 是否显示角色名称 */
+  showRole?: boolean
+  /** 是否显示头像 */
+  showAvatar?: boolean
+}
+
+/** 组件 Props */
+export interface BubbleListProps {
+  /** 消息列表 */
+  messages?: BubbleMessage[]
+  /** 角色配置 */
+  roleConfigs?: Record<string, BubbleRoleConfig>
+  /** 默认气泡位置 */
+  defaultPlacement?: 'start' | 'end'
+  /** 是否自动滚动到底部 */
+  autoScroll?: boolean
+  /** 是否开启虚拟列表（暂未实现） */
+  virtualList?: boolean
+  /** 默认打字速度（毫秒/字符） */
+  defaultTypingSpeed?: number
+  /** 是否显示角色名称（全局配置，可被 roleConfigs 中的 showRole 覆盖） */
+  showRole?: boolean
+  /** 是否显示头像（全局配置，可被 roleConfigs 中的 showAvatar 覆盖） */
+  showAvatar?: boolean
+  /** 全局动画配置（可被单条消息的 animation 配置覆盖） */
+  animation?: MessageAnimationConfig
+}