@foundbyte/uni-agent 1.0.0-alpha.0

package/components/sender/index.vue

@@ -0,0 +1,374 @@
+<template>
+  <view :class="p()" @contextmenu.prevent>
+    <slot></slot>
+    <view :class="[p('input-wrapper'), { [p('input-wrapper', 'multi-line')]: isMultiLine }]">
+      <!-- 切换按钮 -->
+      <view v-show="enableVoice && !canSend" :class="p('mode-toggle')" @click="toggleMode">
+        <image
+          :class="[p('toggle-icon'), { [p('toggle-icon', 'disabled')]: disabled }]"
+          :src="`${staticPrefix}/icon-sender-${inputMode === 'text' ? 'voice' : 'kb'}.png`"
+        />
+      </view>
+
+      <!-- 文本输入模式 -->
+      <template v-if="inputMode === 'text'">
+        <textarea
+          v-model="inputText"
+          :class="p('chat-input')"
+          :maxlength="maxlength"
+          :auto-height="true"
+          :placeholder="placeholder"
+          :fixed="true"
+          :show-confirm-bar="false"
+          :cursor-spacing="cursorSpacing"
+          @focus="isAttachmentPanelShow = false"
+          @linechange="onLineChange"
+          @confirm="onSend"
+        />
+      </template>
+
+      <!-- 语音输入模式 -->
+      <template v-else>
+        <view
+          :class="[
+            p('voice-input-btn'),
+            { [p('voice-input-btn', 'recording')]: isRecording },
+            { [p('voice-input-btn', 'disabled')]: disabled },
+            { [p('voice-input-btn', 'will-cancel')]: isWillCancel },
+          ]"
+          @touchstart="onVoiceStart"
+          @touchend="onVoiceEnd"
+          @touchmove="onVoiceMove"
+          @touchcancel="onVoiceCancel"
+        >
+          <text>{{ isRecording ? '松开结束' : '按住说话' }}</text>
+        </view>
+      </template>
+
+      <!-- 发送按钮 -->
+      <image
+        v-if="canSend"
+        :src="`${staticPrefix}/btn-send.png`"
+        :class="[p('send-btn'), { [p('send-btn', 'disabled')]: !canSend || disabled }]"
+        @click="onSend"
+      />
+      <!-- 附件按钮 (+号) -->
+      <view
+        v-if="enableAttachment && !canSend"
+        :class="[
+          p('attachment-toggle'),
+          {
+            [p('attachment-toggle', 'active')]: isAttachmentPanelShow,
+            [p('attachment-toggle', 'disabled')]: disabled,
+          },
+        ]"
+        @click="toggleAttachmentPanel"
+      >
+        <image :src="`${staticPrefix}/icon-sender-plus.png`" :class="p('attachment-icon')" />
+      </view>
+    </view>
+
+    <!-- 附件选择面板 -->
+    <view
+      :class="[
+        p('attachment-panel'),
+        {
+          [p('attachment-panel', 'visible')]: isAttachmentPanelShow,
+        },
+      ]"
+    >
+      <view :class="p('attachment-options')">
+        <view :class="p('attachment-item')" @click="onAttachmentSelect('album')">
+          <view :class="p(['attachment-item-icon', 'wrap'])">
+            <image
+              :src="`${staticPrefix}/icon-sender-tool-album.png`"
+              :class="p('attachment-item-icon')"
+            />
+          </view>
+          <text :class="p('attachment-item-label')">相册</text>
+        </view>
+        <view :class="p('attachment-item')" @click="onAttachmentSelect('camera')">
+          <view :class="p(['attachment-item-icon', 'wrap'])">
+            <image
+              :src="`${staticPrefix}/icon-sender-tool-camera.png`"
+              :class="p('attachment-item-icon')"
+            />
+          </view>
+          <text :class="p('attachment-item-label')">拍照</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 录音遮罩层 -->
+    <view v-if="isRecording" :class="p('voice-overlay')" @touchmove.stop.prevent>
+      <view :class="p(['voice-overlay', 'content'])">
+        <!-- 语音转换文本显示区域 -->
+        <!-- <view :class="p('voice-output-text')">{{ formatRecordingTime(recordingTime) }}</view> -->
+        <!-- 麦克风 -->
+        <view :class="p('voice-mic')">
+          <view
+            :class="[
+              p('voice-mic-bg'),
+              {
+                [p('voice-mic-bg', 'will-cancel')]: isWillCancel,
+              },
+            ]"
+          ></view>
+          <text :class="p('voice-mic-text')">
+            {{ isWillCancel ? '松手取消' : '松手发送，上移取消' }}
+          </text>
+          <!-- 录音动画 -->
+          <view :class="p('voice-marquee-viewport')">
+            <view
+              :class="[
+                p('voice-marquee-track'),
+                { [p('voice-marquee-track', 'paused')]: isWillCancel },
+              ]"
+            >
+              <!-- 图片1 -->
+              <view :class="p('voice-marquee-item')">
+                <image :class="p('voice-marquee-img')" :src="`${staticPrefix}/recorder.gif`" />
+              </view>
+              <!-- 图片2（完全复制，用于无缝衔接） -->
+              <view :class="p('voice-marquee-item')">
+                <image :class="p('voice-marquee-img')" :src="`${staticPrefix}/recorder.gif`" />
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </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, useRecorder } from '../../composables'
+import { chooseImage } from './image-picker'
+import type { AttachmentType, ChooseImageResult, InputMode, SenderProps } from './types'
+import type { RecorderResult } from '../../composables'
+
+defineOptions({
+  options: {
+    styleIsolation: 'shared',
+    virtualHost: true,
+  },
+})
+
+const props = withDefaults(defineProps<SenderProps>(), {
+  disabled: false,
+  placeholder: '请输入消息...',
+  maxlength: 500,
+  cursorSpacing: 20,
+  enableVoice: true,
+  defaultMode: 'text',
+  enableAttachment: true,
+})
+
+const emit = defineEmits<{
+  /** 发送消息事件 */
+  (e: 'send', text: string): void
+  /** 语音输入事件 */
+  // (e: 'voice', type: VoiceEventType): void
+  /** 语音输入结果事件 */
+  (e: 'voice', result: RecorderResult): void
+  /** 输入模式切换事件 */
+  (e: 'modeChange', mode: InputMode): void
+  /** 图片选择完成事件 */
+  (e: 'imageSelected', result: ChooseImageResult): void
+  /** 图片选择错误事件 */
+  (e: 'imageError', error: string): void
+}>()
+
+const p = usePrefix('sender')
+
+// 录音功能
+const {
+  isRecording,
+  start: startRecording,
+  stop: stopRecording,
+  cancel: cancelRecording,
+} = useRecorder()
+
+// 输入模式: text-文本输入 voice-语音输入
+const inputMode = ref<InputMode>(props.defaultMode)
+
+// 是否将取消发送（手指上滑）
+const isWillCancel = ref(false)
+
+// 输入文本
+const inputText = ref('')
+
+// 是否显示附件面板
+const isAttachmentPanelShow = ref(false)
+
+// 录音开始时的触摸位置
+let startY = 0
+
+// 是否可以发送
+const canSend = computed(() => {
+  return inputText.value.trim().length > 0
+})
+
+/**
+ * 切换输入模式
+ */
+function toggleMode() {
+  if (props.disabled) return
+  isAttachmentPanelShow.value = false
+  inputMode.value = inputMode.value === 'text' ? 'voice' : 'text'
+  emit('modeChange', inputMode.value)
+}
+
+/**
+ * 切换附件面板显示状态
+ */
+function toggleAttachmentPanel() {
+  if (props.disabled) return
+  isAttachmentPanelShow.value = !isAttachmentPanelShow.value
+}
+
+/**
+ * 选择附件类型
+ */
+function onAttachmentSelect(type: AttachmentType) {
+  isAttachmentPanelShow.value = false
+
+  // 根据类型选择图片来源
+  if (type === 'album' || type === 'camera') {
+    chooseImage(
+      {
+        sourceType: [type],
+        count: 1, // 默认最多选择1张
+      },
+      {
+        onSuccess(res) {
+          emit('imageSelected', res)
+        },
+        onError(e) {
+          emit('imageError', e)
+        },
+      },
+    )
+  }
+}
+
+/**
+ * 开始语音输入
+ */
+async function onVoiceStart(event: TouchEvent) {
+  if (props.disabled) return
+  isWillCancel.value = false
+  startY = event.touches[0].clientY
+
+  try {
+    await startRecording({
+      duration: 1000 * 60, // 1分钟
+      format: 'aac',
+    })
+  } catch (error) {
+    console.error('启动录音失败:', error)
+    cancelRecording()
+  }
+}
+
+/**
+ * 语音输入时手指移动
+ */
+function onVoiceMove(event: TouchEvent) {
+  if (!isRecording.value) return
+  const currentY = event.touches[0].clientY
+  const moveDistance = startY - currentY
+  // 上滑超过 80rpx 时进入取消状态
+  isWillCancel.value = moveDistance > 80
+}
+
+/**
+ * 结束语音输入
+ */
+async function onVoiceEnd() {
+  // if (!isRecording.value) return
+
+  // 如果处于取消状态，则触发取消事件
+  if (isWillCancel.value) {
+    isWillCancel.value = false
+    cancelRecording()
+  } else {
+    try {
+      const result = await stopRecording()
+      if (result) {
+        emit('voice', result)
+      }
+    } catch (error) {
+      console.error('停止录音失败:', error)
+    }
+  }
+}
+
+/**
+ * 取消语音输入
+ */
+function onVoiceCancel() {
+  if (!isRecording.value) return
+  isWillCancel.value = false
+  cancelRecording()
+}
+
+/**
+ * 发送消息
+ */
+function onSend() {
+  const text = inputText.value.trim()
+  if (!text || props.disabled) return
+
+  // 触发发送事件
+  emit('send', text)
+
+  // 清空输入框
+  inputText.value = ''
+}
+
+/** 清空输入 */
+function clear() {
+  inputText.value = ''
+}
+
+/** 设置输入值 */
+function setValue(value: string) {
+  inputText.value = value
+}
+
+/** 获取当前输入值 */
+function getValue(): string {
+  return inputText.value
+}
+
+const isMultiLine = ref(false)
+function onLineChange(e: { detail: { lineCount: number } }) {
+  isMultiLine.value = e.detail.lineCount > 1
+}
+
+/**
+ * 格式化录音时间
+ * @param ms 毫秒数
+ */
+// function formatRecordingTime(ms: number): string {
+//   const seconds = Math.floor(ms / 1000)
+//   const milliseconds = Math.floor((ms % 1000) / 100)
+//   return `${seconds}.${milliseconds}s`
+// }
+
+defineExpose({
+  clear,
+  setValue,
+  getValue,
+  toggleMode,
+  onAttachmentSelect,
+})
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/sender/types.ts

@@ -0,0 +1,56 @@
+/** 输入模式 */
+export type InputMode = 'text' | 'voice'
+
+/** 输入框组件 Props */
+export interface SenderProps {
+  /** 是否禁用发送按钮 */
+  disabled?: boolean
+  /** 输入框占位符 */
+  placeholder?: string
+  /** 最大输入长度 */
+  maxlength?: number
+  /** 光标与键盘的距离 */
+  cursorSpacing?: number
+  /** 是否启用语音输入功能 */
+  enableVoice?: boolean
+  /** 初始输入模式 */
+  defaultMode?: InputMode
+  /** 是否启用附件功能（+号按钮） */
+  enableAttachment?: boolean
+}
+
+/** 发送事件参数 */
+export interface SendEvent {
+  text: string
+}
+
+/** 附件类型 */
+export type AttachmentType = 'album' | 'camera'
+
+/** 附件事件参数 */
+export interface AttachmentEvent {
+  type: AttachmentType
+}
+
+/** 图片选择选项 */
+export interface ChooseImageOptions {
+  /** 最多可以选择的图片张数，默认 9 */
+  count?: number
+  /** 图片压缩类型，默认 'compressed' */
+  sizeType?: ('original' | 'compressed')[]
+  /** 选择图片的来源，默认 ['album', 'camera'] */
+  sourceType?: ('album' | 'camera')[]
+}
+
+/** 选择的图片信息 */
+export interface ChooseImageResult {
+  /** 图片的本地临时文件路径列表 */
+  tempFilePaths: string[]
+  /** 图片的本地临时文件列表（包含文件信息） */
+  tempFiles: {
+    /** 本地临时文件路径 */
+    path: string
+    /** 本地临时文件大小，单位 B */
+    size: number
+  }[]
+}

package/composables/index.ts

@@ -0,0 +1,6 @@
+export * from './use-inner-audio/enums'
+export * from './use-inner-audio/types'
+export { useInnerAudio } from './use-inner-audio/use-inner-audio'
+export { usePrefix } from './use-prefix'
+export * from './use-recorder/types'
+export { useRecorder } from './use-recorder/use-recorder'

package/composables/use-inner-audio/audio-manager.ts

@@ -0,0 +1,22 @@
+/** 全局音频实例 */
+let audioInstance: UniApp.InnerAudioContext | null = null
+
+/**
+ * 获取全局音频实例（单例）
+ */
+export function getAudioInstance(): UniApp.InnerAudioContext {
+  if (!audioInstance) {
+    audioInstance = uni.createInnerAudioContext()
+  }
+  return audioInstance
+}
+
+/**
+ * 销毁音频实例
+ */
+export function destroyAudioInstance(): void {
+  if (audioInstance) {
+    audioInstance.destroy()
+    audioInstance = null
+  }
+}

package/composables/use-inner-audio/enums.ts

@@ -0,0 +1,15 @@
+/** 音频播放状态 */
+export enum EAudioPlayState {
+  /** 空闲状态，初始状态或未加载 */
+  Idle = 'idle',
+  /** 加载中 */
+  Loading = 'loading',
+  /** 播放中 */
+  Playing = 'playing',
+  /** 已暂停 */
+  Paused = 'paused',
+  /** 播放结束 */
+  Ended = 'ended',
+  /** 播放错误 */
+  Error = 'error',
+}

package/composables/use-inner-audio/types.ts

@@ -0,0 +1,8 @@
+/**
+ * 音频播放相关类型定义
+ */
+
+/** 音频错误信息 */
+export interface AudioError {
+  errMsg: string
+}

package/composables/use-inner-audio/use-inner-audio.ts

@@ -0,0 +1,149 @@
+// eslint-disable-next-line no-restricted-imports
+import { onUnmounted, ref } from 'vue'
+import { destroyAudioInstance, getAudioInstance } from './audio-manager'
+import type { AudioError } from './types'
+import { EAudioPlayState } from './enums'
+
+export { destroyAudioInstance, getAudioInstance }
+
+// 全局当前播放id
+const playingId = ref<string>()
+
+/**
+ * 音频播放器 Hooks
+ * 全局单例模式，确保整个应用只有一个音频实例
+ * @returns 音频播放控制方法和状态
+ *
+ * @example
+ * const { state, currentTime, duration, play, pause, load } = useInnerAudio()
+ *
+ * // 加载并播放
+ * load('https://example.com/audio.mp3')
+ * play()
+ */
+export function useInnerAudio() {
+  const audio = getAudioInstance()
+
+  // 状态
+  const state = ref<EAudioPlayState>(EAudioPlayState.Idle)
+  const currentTime = ref(0)
+  const duration = ref(0)
+  const src = ref('')
+  const error = ref<AudioError | null>(null)
+
+  const isPlaying = computed(() => state.value === EAudioPlayState.Playing)
+
+  // 更新状态
+  const setState = (newState: EAudioPlayState) => {
+    state.value = newState
+  }
+
+  // 注册事件
+  audio.onPlay(() => setState(EAudioPlayState.Playing))
+  audio.onPause(() => setState(EAudioPlayState.Paused))
+  audio.onStop(() => {
+    setState(EAudioPlayState.Paused)
+    currentTime.value = 0
+  })
+  audio.onEnded(() => {
+    setState(EAudioPlayState.Ended)
+    currentTime.value = 0
+  })
+  audio.onTimeUpdate(() => {
+    currentTime.value = audio.currentTime
+    duration.value = audio.duration
+  })
+  audio.onError((err) => {
+    error.value = { errMsg: err.errMsg }
+    setState(EAudioPlayState.Error)
+  })
+  // audio.onWaiting(() => setState(EAudioPlayState.Loading))
+
+  /**
+   * 加载音频
+   * @param id 唯一标识
+   * @param url 音频地址
+   * @param autoplay 是否自动播放
+   */
+  const load = (id: string, url: string, autoplay = false) => {
+    playingId.value = id
+    src.value = url
+    audio.src = url
+    if (autoplay) {
+      audio.play()
+    }
+  }
+
+  /** 播放 */
+  const play = () => {
+    if (!src.value) {
+      console.warn('[useInnerAudio] 请先调用 load() 加载音频')
+      return
+    }
+    audio.play()
+  }
+
+  /** 暂停 */
+  const pause = () => {
+    audio.pause()
+  }
+
+  /** 停止 */
+  const stop = () => {
+    audio.stop()
+    currentTime.value = 0
+  }
+
+  /**
+   * 跳转到指定位置
+   * @param position 秒
+   */
+  const seek = (position: number) => {
+    audio.seek(position)
+  }
+
+  /** 切换播放/暂停 */
+  const toggle = () => {
+    if (state.value === EAudioPlayState.Playing) {
+      pause()
+    } else {
+      play()
+    }
+  }
+
+  /** 销毁 */
+  const destroy = () => {
+    destroyAudioInstance()
+    state.value = EAudioPlayState.Idle
+    src.value = ''
+    currentTime.value = 0
+    duration.value = 0
+    error.value = null
+  }
+
+  onUnmounted(() => {
+    // 全局单例，不在卸载时销毁
+  })
+
+  return {
+    // 状态
+    state,
+    currentTime,
+    duration,
+    src,
+    error,
+    isPlaying,
+    playingId,
+
+    // 方法
+    load,
+    play,
+    pause,
+    stop,
+    seek,
+    toggle,
+    destroy,
+  }
+}
+
+export default useInnerAudio

package/composables/use-prefix.ts

@@ -0,0 +1,54 @@
+/* eslint-disable no-restricted-syntax */
+import { cssPrefix } from '../configs'
+
+/**
+ * 获取带前缀的 class 名称（BEM 规范）
+ * @param block 块级组件名称
+ * @returns 返回一个函数，用于生成带前缀的 BEM class 名
+ * @example
+ * const p = usePrefix('bubble')
+ * p() // 'ua-bubble'
+ * p('list') // 'ua-bubble__list'
+ * p('item', 'active') // 'ua-bubble__item ua-bubble__item--active'
+ * p('avatar', 'left') // 'ua-bubble__avatar ua-bubble__avatar--left'
+ * p(['avatar', 'image']) // 'ua-bubble__avatar-image'
+ */
+export function usePrefix(block: string) {
+  return (...args: (string | string[] | false | null | undefined)[]) => {
+    const validArgs = args.filter(Boolean) as (string | string[])[]
+
+    if (validArgs.length === 0) {
+      return `${cssPrefix}-${block}`
+    }
+
+    // 处理数组参数，如 ['avatar', 'image'] -> 'avatar-image'
+    const firstArg = validArgs[0]
+    if (Array.isArray(firstArg)) {
+      const element = firstArg.join('-')
+      return `${cssPrefix}-${block}__${element}`
+    }
+
+    const baseClass = `${cssPrefix}-${block}__${firstArg}`
+
+    // 如果有额外的参数，作为 modifier
+    const modifiers = validArgs
+      .slice(1)
+      .filter((arg): arg is string => typeof arg === 'string')
+      .map((modifier) => `${cssPrefix}-${block}__${firstArg}--${modifier}`)
+
+    return modifiers.length > 0 ? [...modifiers].join(' ') : baseClass
+  }
+}
+
+/**
+ * 获取简单的前缀 class（不区分组件）
+ * @param classes class 名称
+ * @returns 带前缀的 class 名
+ * @example
+ * prefix('btn') // 'ua-btn'
+ * prefix('btn', 'primary') // 'ua-btn ua-btn--primary'
+ */
+// export function prefix(...classes: (string | false | null | undefined)[]) {
+//   const validClasses = classes.filter(Boolean) as string[]
+//   return validClasses.map((cls) => `${cssPrefix}-${cls}`).join(' ')
+// }