@foundbyte/uni-agent 1.0.0-alpha.0

package/components/bubble-list/use-typewriter.ts

@@ -0,0 +1,193 @@
+// eslint-disable-next-line no-restricted-imports
+import { ref, type Ref, watch } from 'vue'
+
+export interface TypewriterOptions {
+  /** 打字速度（毫秒/字符），默认 30ms */
+  speed?: number
+  /** 是否自动开始 */
+  autoStart?: boolean
+  /** 内容更新时的回调（用于自动滚动） */
+  onUpdate?: (currentIndex: number, totalLength: number) => void
+}
+
+export interface TypewriterResult {
+  /** 当前显示的文本 */
+  displayText: Ref<string>
+  /** 是否正在打字中 */
+  isTyping: Ref<boolean>
+  /** 是否已完成 */
+  isComplete: Ref<boolean>
+  /** 开始打字 */
+  start: () => void
+  /** 跳过动画，直接显示全部 */
+  skip: () => void
+  /** 重置状态 */
+  reset: () => void
+}
+
+/**
+ * 打字机效果 composable
+ * @param fullText 完整文本内容
+ * @param enabled 是否启用打字机效果
+ * @param options 配置选项
+ */
+export const useTypewriter = (
+  fullText: Ref<string>,
+  enabled: Ref<boolean>,
+  options: TypewriterOptions = {},
+) => {
+  const { speed = 30, autoStart = true, onUpdate } = options
+
+  const displayText = ref('')
+  const isTyping = ref(false)
+  const isComplete = ref(false)
+  let currentIndex = 0
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  const clearTimer = () => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  const typeNextChar = () => {
+    const text = fullText.value || ''
+
+    if (currentIndex < text.length) {
+      // 处理 Markdown 代码块，确保代码块标签完整显示
+      const nextChar = text[currentIndex]
+      displayText.value += nextChar
+      currentIndex++
+
+      // 检查是否在代码块标记内，如果是则加速显示整个标记
+      const isInCodeBlockMarker =
+        /```\w*$/.test(text.slice(0, currentIndex)) || /^\s*```/.test(text.slice(currentIndex - 3))
+
+      // 如果在代码块标记附近，加速显示
+      const actualSpeed = isInCodeBlockMarker ? 10 : speed
+
+      // 触发更新回调（用于自动滚动）
+      onUpdate?.(currentIndex, text.length)
+
+      timer = setTimeout(typeNextChar, actualSpeed)
+    } else {
+      isTyping.value = false
+      isComplete.value = true
+    }
+  }
+
+  const start = () => {
+    if (!enabled.value) {
+      displayText.value = fullText.value || ''
+      isComplete.value = true
+      return
+    }
+
+    clearTimer()
+    displayText.value = ''
+    currentIndex = 0
+    isTyping.value = true
+    isComplete.value = false
+    typeNextChar()
+  }
+
+  const skip = () => {
+    clearTimer()
+    displayText.value = fullText.value || ''
+    isTyping.value = false
+    isComplete.value = true
+    currentIndex = displayText.value.length
+  }
+
+  const reset = () => {
+    clearTimer()
+    displayText.value = ''
+    currentIndex = 0
+    isTyping.value = false
+    isComplete.value = false
+  }
+
+  // 监听 fullText 变化，重新开始打字
+  watch(
+    () => fullText.value,
+    (newText, oldText) => {
+      if (!enabled.value) {
+        displayText.value = newText || ''
+        isComplete.value = true
+        return
+      }
+
+      // 如果是追加内容（流式响应），继续打字
+      if (isTyping.value && newText && oldText && newText.startsWith(oldText)) {
+        // 继续打字，不需要重置
+        return
+      }
+
+      // 否则重新开始
+      reset()
+      if (autoStart && newText) {
+        start()
+      }
+    },
+    { immediate: true },
+  )
+
+  // 监听 enabled 变化
+  watch(
+    () => enabled.value,
+    (enabled) => {
+      if (!enabled) {
+        skip()
+      }
+    },
+  )
+
+  return {
+    displayText,
+    isTyping,
+    isComplete,
+    start,
+    skip,
+    reset,
+  }
+}
+
+/**
+ * 管理多个消息的打字机状态
+ */
+export const useTypewriterManager = () => {
+  const typingStates = new Map<string, TypewriterResult>()
+
+  const getOrCreate = (
+    messageId: string,
+    fullText: Ref<string>,
+    enabled: Ref<boolean>,
+    options?: TypewriterOptions,
+  ): TypewriterResult => {
+    if (!typingStates.has(messageId)) {
+      const state = useTypewriter(fullText, enabled, options)
+      typingStates.set(messageId, state)
+    }
+    return typingStates.get(messageId)!
+  }
+
+  const remove = (messageId: string) => {
+    const state = typingStates.get(messageId)
+    if (state) {
+      state.reset()
+      typingStates.delete(messageId)
+    }
+  }
+
+  const clear = () => {
+    typingStates.forEach((state) => state.reset())
+    typingStates.clear()
+  }
+
+  return {
+    getOrCreate,
+    remove,
+    clear,
+  }
+}

package/components/bubble-wrapper/index.scss

@@ -0,0 +1,34 @@
+@use '../../styles/base' as base;
+
+.#{base.$prefix}-bubble {
+  &__wrapper {
+    padding: 32rpx;
+    border-radius: 24rpx;
+    background-color: #ffffff;
+    color: rgba(0, 0, 0, 0.85);
+    border-top-left-radius: 0;
+    box-shadow: 1px 4rpx 24rpx 0 rgba(0, 0, 0, 0.05);
+
+    &--dark {
+      background-color: #f6f7f8;
+      color: rgba(0, 0, 0, 0.85);
+      border-top-left-radius: 24rpx;
+      border-top-right-radius: 0;
+      padding: 32rpx;
+      box-shadow: none;
+    }
+
+    &-tool {
+      display: flex;
+      gap: 24rpx;
+      border-top: 1px solid #f6f7f8;
+      margin-top: 32rpx;
+      padding-top: 24rpx;
+
+      &-icon {
+        width: 48rpx;
+        height: 48rpx;
+      }
+    }
+  }
+}

package/components/bubble-wrapper/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <view :class="[p('wrapper'), { [p('wrapper', 'dark')]: !showTool }]">
+    <view style="white-space: pre-line">
+      <slot></slot>
+    </view>
+    <view v-if="showTool" :class="p(['wrapper', 'tool'])">
+      <image
+        :src="`${staticPrefix}/icon-msg-${audioIcon}.png`"
+        :class="p(['wrapper', 'tool', 'icon'])"
+        @click="onPlay"
+      />
+      <image
+        :src="`${staticPrefix}/icon-msg-copy.png`"
+        :class="p(['wrapper', 'tool', 'icon'])"
+        @click="onCopy"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { staticPrefix } from '../../configs'
+import { EAudioPlayState, useInnerAudio, usePrefix } from '../../composables'
+import type { BubbleMessage } from '../bubble-list/types'
+
+defineOptions({
+  options: {
+    styleIsolation: 'shared',
+    virtualHost: true,
+  },
+})
+
+const props = defineProps<{
+  showTool?: boolean
+  message: BubbleMessage
+}>()
+
+const emit = defineEmits<{
+  /** 音频播放事件 */
+  (e: 'audio-play'): void
+  /** 音频暂停事件 */
+  (e: 'audio-pause'): void
+  /** 音频停止事件 */
+  (e: 'audio-stop'): void
+  /** 文本转语音事件 */
+  (e: 'text2audio', text: string): Promise<string> | void
+}>()
+
+const p = usePrefix('bubble')
+
+const { state, isPlaying, playingId, load, play, pause } = useInnerAudio()
+
+const audioIcon = computed(() => {
+  return isPlaying.value && playingId.value === props.message.id ? 'voice-pause' : 'voice'
+})
+
+async function onPlay() {
+  const { audioUrl, id, content } = props.message
+  if (!audioUrl) {
+    if (content) {
+      emit('text2audio', content)
+    }
+    return
+  }
+  if (id !== playingId.value) {
+    load(id, audioUrl, true)
+    return
+  }
+  switch (state.value) {
+    case EAudioPlayState.Playing:
+      pause()
+      break
+    case EAudioPlayState.Paused:
+    case EAudioPlayState.Ended:
+      play()
+      break
+    default:
+      load(id, audioUrl, true)
+  }
+}
+
+function onCopy() {
+  uni.setClipboardData({
+    data: props.message.content || '',
+    success() {
+      uni.showToast({
+        title: '复制成功',
+        icon: 'success',
+      })
+    },
+  })
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/history/index.scss

@@ -0,0 +1,87 @@
+@use '../../styles/base' as base;
+
+.#{base.$prefix}-history {
+  display: flex;
+  flex-direction: column;
+
+  &__head {
+    font-weight: 600;
+  }
+
+  &__title {
+    display: flex;
+    justify-content: space-between;
+    padding: 40rpx;
+
+    &-text {
+      height: 40rpx;
+      font-size: 28rpx;
+      color: rgba(0, 0, 0, 0.85);
+      font-weight: 600;
+    }
+  }
+
+  &__edit {
+    height: 40rpx;
+    font-size: 20rpx;
+    color: rgba(0, 0, 0, 0.45);
+    font-weight: 400;
+    display: flex;
+    align-items: center;
+    gap: 24rpx;
+
+    &-switch {
+      width: 32rpx;
+      height: 32rpx;
+    }
+  }
+
+  &__body {
+    flex: 1;
+    overflow: auto;
+    &-inner {
+      display: flex;
+      flex-direction: column;
+      // gap: 24rpx;
+      padding: 40rpx;
+      padding-top: 0;
+    }
+  }
+
+  &__group {
+    & + & {
+      margin-top: 40rpx;
+    }
+
+    &-title {
+      line-height: 28rpx;
+      font-size: 20rpx;
+      color: rgba(0, 0, 0, 0.65);
+      font-weight: 400;
+      padding-left: 8rpx;
+    }
+  }
+
+  &__item {
+    display: flex;
+    gap: 24rpx;
+    align-items: center;
+    margin-top: 24rpx;
+
+    &-title {
+      flex: 1;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      line-height: 40rpx;
+      font-size: 28rpx;
+      color: #000000;
+      font-weight: 400;
+    }
+
+    &-clear {
+      width: 32rpx;
+      height: 32rpx;
+    }
+  }
+}

package/components/history/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <view :class="p()">
+    <view :class="p('head')">
+      <slot name="title-before"></slot>
+      <view :class="p('title')">
+        <view :class="p(['title', 'text'])">对话记录</view>
+        <view v-if="isEditing" :class="p('edit')">
+          <view :class="p(['edit', 'clear'])" @click="$emit('deleteAll')">清空</view>
+          <view>|</view>
+          <view @click="endEdit">完成</view>
+        </view>
+        <image
+          v-else
+          :class="p(['edit', 'switch'])"
+          :src="`${staticPrefix}/icon-del.png`"
+          @click="isEditing = true"
+        />
+      </view>
+    </view>
+    <scroll-view :class="p('body')" scroll-y @scrolltolower="$emit('reachBottom')">
+      <view :class="p('body-inner')">
+        <!-- 分组 -->
+        <view v-for="group in groups" :key="group.title" :class="p('group')">
+          <view :class="p(['group', 'title'])">{{ group.title }}</view>
+          <!-- 会话列表 -->
+          <view
+            v-for="session in group.sessions"
+            :key="session.id"
+            :class="p('item')"
+            @click="$emit('itemClick', session)"
+          >
+            <view :class="p(['item', 'title'])">{{ session.label }}</view>
+            <image
+              v-if="isEditing"
+              :src="`${staticPrefix}/icon-del.png`"
+              :class="p(['item', 'clear'])"
+              @click.stop="$emit('delete', session)"
+            />
+          </view>
+        </view>
+        <view
+          style="
+            text-align: center;
+            margin-top: 40rpx;
+            font-size: 24rpx;
+            color: rgba(0, 0, 0, 0.45);
+          "
+          >{{ hasMore ? '加载中…' : '没有更多了~' }}</view
+        >
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup lang="ts">
+// 会话历史
+// eslint-disable-next-line no-restricted-imports
+import { computed, ref } from 'vue'
+import { staticPrefix } from '../../configs'
+import { usePrefix } from '../../composables'
+import type { HistoryProps, Session } from './types'
+
+defineOptions({
+  options: {
+    styleIsolation: 'shared',
+    virtualHost: true,
+  },
+})
+
+const props = withDefaults(defineProps<HistoryProps>(), {
+  sessions: () => [],
+})
+
+defineEmits<{
+  itemClick: [session: Session]
+  delete: [session: Session]
+  deleteAll: []
+  reachBottom: []
+}>()
+
+const p = usePrefix('history')
+
+const isEditing = ref(false)
+
+const groups = computed<
+  {
+    title: string
+    sessions: Session[]
+  }[]
+>(() => {
+  const groupMap = new Map<string, Session[]>()
+
+  for (const session of props.sessions) {
+    const date = session.date
+    if (!groupMap.has(date)) {
+      groupMap.set(date, [])
+    }
+    groupMap.get(date)!.push(session)
+  }
+
+  return Array.from(groupMap.entries()).map(([title, sessions]) => ({
+    title,
+    sessions,
+  }))
+})
+
+function endEdit() {
+  isEditing.value = false
+}
+
+defineExpose({
+  endEdit,
+})
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/history/types.ts

@@ -0,0 +1,16 @@
+export interface Session {
+  id: string
+  /** 日常 */
+  date: string
+  /** 显示文本（首条会话内容？） */
+  label: string
+}
+
+export interface HistoryProps {
+  /** 数据加载中 */
+  loading?: boolean
+  /** 是否有更多数据 */
+  hasMore?: boolean
+  /** 会话列表 */
+  sessions?: Session[]
+}

package/components/index.ts

@@ -0,0 +1,4 @@
+export * from './bubble-list/types'
+export * from './history/types'
+export * from './prompts/types'
+export * from './sender/types'

package/components/prompts/index.scss

@@ -0,0 +1,30 @@
+@use '../../styles/base' as base;
+
+.#{base.$prefix}-prompts {
+  display: flex;
+  gap: 12rpx;
+
+  &__item {
+    background-color: #fff;
+    padding: 15rpx 20rpx;
+    line-height: 34rpx;
+    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.05);
+    border-radius: 32rpx;
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+
+    &--disabled {
+      opacity: 0.6;
+    }
+
+    &:active {
+      background-color: #f0f0f0;
+    }
+  }
+
+  &__item-icon {
+    width: 32rpx;
+    height: 32rpx;
+  }
+}

package/components/prompts/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <view :class="p()">
+    <view
+      v-for="(item, index) in items"
+      :key="item.id || index"
+      :class="[p('item'), { [p('item', 'disabled')]: item.disabled }]"
+      @click="onClick(item)"
+    >
+      <image v-if="item.icon" :src="item.icon" :class="p(['item', 'icon'])" mode="aspectFit" />
+      <text>{{ item.label }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+// 提示集
+import { usePrefix } from '../../composables'
+import type { PromptItem, PromptsProps } from './types'
+
+defineOptions({
+  options: {
+    styleIsolation: 'shared',
+    virtualHost: true,
+  },
+})
+
+withDefaults(defineProps<PromptsProps>(), {
+  items: () => [],
+})
+
+const emit = defineEmits<{
+  itemClick: [item: PromptItem]
+}>()
+
+const p = usePrefix('prompts')
+
+function onClick(item: PromptItem) {
+  if (!item.disabled) {
+    emit('itemClick', item)
+  }
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/prompts/types.ts

@@ -0,0 +1,11 @@
+export interface PromptItem {
+  icon?: string
+  label: string
+  id?: string
+  disabled?: boolean
+}
+
+export interface PromptsProps {
+  /** 提示集合 */
+  items?: PromptItem[]
+}