xiaoyuan-assistant 0.5.45

package/src/components/XiaoyuanAssistant.vue

@@ -0,0 +1,519 @@
+<template>
+  <div class="xy-root">
+    <button
+      v-if="!expanded"
+      class="xy-fab"
+      :class="stateClass"
+      type="button"
+      aria-label="打开小园"
+      @click="activate"
+    >
+      <span class="xy-fab-glow"></span>
+      <span class="xy-avatar">园</span>
+      <span v-if="wakeListening" class="xy-live-dot"></span>
+    </button>
+
+    <transition name="xy-pop">
+      <section v-if="expanded" class="xy-panel" aria-label="小园智能助手">
+        <header class="xy-header">
+          <div class="xy-title-wrap">
+            <div class="xy-avatar small">园</div>
+            <div>
+              <div class="xy-title">小园</div>
+              <div class="xy-status">
+                <span class="xy-status-dot" :class="stateClass"></span>
+                {{ stateText }}
+              </div>
+            </div>
+          </div>
+          <div class="xy-header-actions">
+            <button type="button" class="xy-icon-btn" title="收起" @click="collapse" aria-label="收起">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/></svg>
+            </button>
+            <button type="button" class="xy-icon-btn" title="停止播报" @click="stopSpeech" aria-label="停止播报">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4l16 16M9.5 6.2A7 7 0 0 1 19 12v1.2M4.8 9.1A7 7 0 0 0 5 13"/></svg>
+            </button>
+          </div>
+        </header>
+
+        <div class="xy-subtitle" :class="{ show: subtitle }">
+          {{ subtitle }}
+        </div>
+
+        <main ref="messageBox" class="xy-messages">
+          <div v-if="!messages.length" class="xy-empty">
+            <div class="xy-empty-orb"><span>园</span></div>
+            <div class="xy-empty-title">你好，我是小园</div>
+            <div class="xy-empty-text">可以帮你操控大屏、读取数据并进行分析。</div>
+            <div class="xy-quick-row">
+              <span>🎙 你好小园</span>
+              <span>⌨ 输入指令</span>
+              <span>📊 数据分析</span>
+            </div>
+          </div>
+
+          <article
+            v-for="item in messages"
+            :key="item.id"
+            class="xy-msg"
+            :class="item.role"
+          >
+            <div class="xy-msg-head">
+              <div class="xy-msg-avatar" :class="item.role">
+                {{ item.role === 'user' ? '你' : '园' }}
+              </div>
+              <div class="xy-msg-label">{{ item.role === 'user' ? '你' : '小园' }}</div>
+            </div>
+            <div class="xy-msg-bubble">{{ item.displayText }}</div>
+          </article>
+        </main>
+
+        <footer class="xy-footer">
+          <div v-if="interimText" class="xy-interim">{{ interimText }}</div>
+          <div class="xy-input-row">
+            <textarea
+              v-model="text"
+              class="xy-input"
+              rows="2"
+              placeholder="输入指令，或按住语音按钮说话…"
+              @keydown.enter.exact.prevent="submitText"
+            ></textarea>
+            <button
+              type="button"
+              class="xy-mic"
+              :class="{ active: listening }"
+              :disabled="processing"
+              @click="toggleListening"
+            >
+              <span v-if="listening" class="xy-mic-bars"><i></i><i></i><i></i></span>
+              <svg v-else viewBox="0 0 24 24" aria-hidden="true"><path d="M12 15.5a3.5 3.5 0 0 0 3.5-3.5V7a3.5 3.5 0 0 0-7 0v5a3.5 3.5 0 0 0 3.5 3.5ZM6.5 11.5a5.5 5.5 0 0 0 11 0M12 17v4M8.5 21h7"/></svg>
+            </button>
+            <button
+              type="button"
+              class="xy-send"
+              :disabled="!text.trim()"
+              @click="submitText"
+            >发送</button>
+          </div>
+          <div class="xy-hint">
+            唤醒词：{{ wakeWord }} · 支持文字和语音
+          </div>
+        </footer>
+      </section>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useXiaoyuan } from '../index.js'
+
+const { manager, speech, options } = useXiaoyuan()
+const wakeWord = options.wakeWord || '你好小园'
+const autoCollapseMs = options.autoCollapseMs ?? 0
+
+const expanded = ref(false)
+const listening = ref(false)
+const wakeListening = ref(false)
+const processing = ref(false)
+const text = ref('')
+const interimText = ref('')
+const subtitle = ref('')
+const messages = ref([])
+const messageBox = ref(null)
+let wakeController = null
+let collapseTimer = null
+let subtitleTimer = null
+let speechQueue = Promise.resolve()
+let speechQueueToken = 0
+let commandSessionId = 0
+
+const state = computed(() => {
+  if (processing.value) return 'processing'
+  if (listening.value) return 'listening'
+  if (wakeListening.value) return 'standby'
+  if (expanded.value) return 'ready'
+  return 'idle'
+})
+
+const stateClass = computed(() => `state-${state.value}`)
+const stateText = computed(() => ({
+  idle: '点击唤醒',
+  standby: '正在等待唤醒',
+  ready: '待命中，可输入指令',
+  listening: '正在聆听',
+  processing: '正在处理'
+}[state.value] || '待命'))
+
+function addMessage(role, text, meta = '') {
+  const id = `${Date.now()}-${Math.random()}`
+  const value = String(text ?? '')
+  const message = {
+    id,
+    role,
+    text: value,
+    displayText: role === 'assistant' ? '' : value,
+    meta,
+    typing: role === 'assistant'
+  }
+
+  // 关键修复：messages 是 ref 数组，push 后 Vue 会把对象转成 Proxy。
+  // 之前直接修改 push 前的 raw message 对象 displayText，不会触发界面更新，
+  // 因此“打字机”实际上在内部执行了，但页面始终显示空字符串。
+  messages.value.push(message)
+  const messageIndex = messages.value.length - 1
+
+  nextTick(() => {
+    if (messageBox.value) messageBox.value.scrollTop = messageBox.value.scrollHeight
+  })
+
+  if (role !== 'assistant') return
+
+  let index = 0
+  const step = value.length > 180 ? 2 : 1
+  const interval = value.length > 500 ? 18 : 28
+
+  const tick = () => {
+    const current = messages.value[messageIndex]
+    if (!current) return
+
+    index = Math.min(value.length, index + step)
+    // 必须修改 Proxy 上的数据，确保 Vue 响应式更新。
+    current.displayText = value.slice(0, index)
+
+    if (messageBox.value) messageBox.value.scrollTop = messageBox.value.scrollHeight
+
+    if (index < value.length) {
+      current.typing = true
+      window.setTimeout(tick, interval)
+    } else {
+      current.typing = false
+    }
+  }
+
+  window.setTimeout(tick, 16)
+}
+
+function showSubtitle(value, ttl = 5000) {
+  subtitle.value = value
+  window.clearTimeout(subtitleTimer)
+  if (ttl > 0) subtitleTimer = window.setTimeout(() => { subtitle.value = '' }, ttl)
+}
+
+function collapse() {
+  expanded.value = false
+  if (collapseTimer) window.clearTimeout(collapseTimer)
+}
+
+async function activate(reason = 'manual') {
+  // 用户点击/唤醒时先完成本地前置 TTS 的解锁与预解码，避免收到识别结果后播放被浏览器拦截。
+  await speech.unlockTTS?.()
+  expanded.value = true
+  showSubtitle(reason === 'wake' ? '小园已唤醒，请说出您的指令。' : '小园已唤醒，请输入或说出您的指令。')
+  if (reason === 'wake') {
+    wakeController?.pause?.()
+    wakeListening.value = false
+    // 被唤醒后不再立即播报欢迎语，避免 TTS 与麦克风识别互相干扰。
+    // 被唤醒后自动进入一次性聆听，用户无需再次点击麦克风。
+    window.setTimeout(() => {
+      if (!expanded.value || listening.value || processing.value) return
+      void listenForCommand({ auto: true })
+    }, 180)
+  }
+}
+
+async function speakWithRetry(textToSpeak, speakOptions = {}, retryCount = 2) {
+  const attempts = Math.max(1, Number(retryCount) + 1)
+  let lastError = null
+
+  for (let attempt = 0; attempt < attempts; attempt += 1) {
+    try {
+      const started = await speech.speak(textToSpeak, speakOptions)
+      if (started !== false) return true
+    } catch (error) {
+      lastError = error
+      console.warn('[小园 TTS] 播报失败，准备重试:', error?.message || error)
+    }
+
+    if (attempt < attempts - 1) {
+      await new Promise((resolve) => window.setTimeout(resolve, 180 + attempt * 220))
+    }
+  }
+
+  if (lastError) console.warn('[小园 TTS] 重试结束:', lastError?.message || lastError)
+  return false
+}
+
+function queueSpeak(textToSpeak) {
+  if (!options.enableTTS || !textToSpeak) return
+  const token = ++speechQueueToken
+  speechQueue = speechQueue
+    .catch(() => {})
+    .then(() => {
+      if (token !== speechQueueToken) return undefined
+      return speakWithRetry(textToSpeak, {}, 1)
+    })
+}
+
+function stopSpeech() {
+  speechQueueToken += 1
+  speechQueue = Promise.resolve()
+  speech.stopSpeaking()
+}
+
+// 新指令到来时立即打断上一条播报，并让上一条任务后续产生的播报失效。
+function interruptForNewCommand() {
+  commandSessionId += 1
+  stopSpeech()
+  subtitle.value = ''
+  interimText.value = ''
+  return commandSessionId
+}
+
+async function toggleListening() {
+  if (listening.value) return
+  await speech.unlockTTS?.()
+  await listenForCommand()
+}
+
+async function listenForCommand({ auto = false } = {}) {
+  // 在开始语音识别时就完成本地前置 TTS 的 AudioContext 解锁/预解码，
+  // 这样识别结束后收到结果时无需依赖新的用户手势。
+  await speech.unlockTTS?.()
+
+  if (!speech.supported()) {
+    showSubtitle('当前浏览器不支持语音识别，请使用 Chrome / Edge。', 7000)
+    return
+  }
+
+  // 手动或唤醒后的单次聆听期间，暂停持续唤醒监听，避免两个 Recognition 实例抢麦克风。
+  wakeController?.pause?.()
+  wakeListening.value = false
+
+  listening.value = true
+  interimText.value = ''
+  showSubtitle('正在聆听，请说出你的指令…', 0)
+
+  try {
+    const spoken = await speech.listenOnce()
+    interimText.value = ''
+
+    if (spoken) {
+      await handleCommand(spoken, 'voice')
+    } else if (auto) {
+      showSubtitle('没有听到您的声音，请再说一次。', 5000)
+    }
+  } catch (error) {
+    interimText.value = ''
+    const message = String(error?.message || error || '语音识别失败')
+    addMessage('assistant', message)
+    showSubtitle(message, 6000)
+    queueSpeak(message)
+  } finally {
+    listening.value = false
+    // 当前指令处理结束后恢复全局唤醒监听。
+    if (!processing.value && options.enableWakeWord) {
+      wakeController?.resume?.()
+      wakeListening.value = true
+    }
+    if (!processing.value) {
+      showSubtitle('待命中，可继续输入或说话。', 5000)
+    }
+  }
+}
+
+function normalizeAnalysisSubject(value = '') {
+  let text = String(value || '')
+    .replace(/^[\s，,。；;：:、]+/, '')
+    .replace(/^(?:请|请帮我|帮我|帮忙|麻烦|想看一下|想看看|想了解|查看一下|查看|看一下|看看|查询一下|查询|获取一下|获取|读取一下|读取|展示一下|展示|分析一下|分析|帮我分析一下|帮我分析|分析下|看下|了解一下|了解)\s*/i, '')
+    .trim()
+
+  // 去掉已经被拼进分析文本里的时间前缀，避免出现“正在分析2025年……”
+  text = text.replace(/^(?:19|20)\d{2}年?\s*[,，、]?\s*/i, '').trim()
+  return text || '当前数据'
+}
+
+function buildStepSpeech(command = {}, description = '') {
+  if (command?.type === 'analysis') {
+    const instruction = normalizeAnalysisSubject(command?.instruction || description)
+    return `正在分析${instruction}，请稍等。`
+  }
+
+  const name = String(command?.function || command?.name || '')
+  const params = command?.params || {}
+  const value = params?.value ?? params?.param ?? params?.target ?? params?.id ?? params?.name
+  const valueText = value !== undefined && value !== null && String(value) !== '' ? String(value) : ''
+
+  if (/^changeYear$/i.test(name) && valueText) {
+    return `已切换到${valueText}年。`
+  }
+
+  if (/handleMenuClick|menu/i.test(name) && valueText) {
+    return `已切换到${valueText}菜单。`
+  }
+
+  const text = String(description || name || '当前指令').trim()
+  return `已${text}${/[。！？!?]$/.test(text) ? '' : '。'}`
+}
+
+async function submitText() {
+  await speech.unlockTTS?.()
+  if (!text.value.trim()) return
+  const value = text.value.trim()
+  text.value = ''
+  await handleCommand(value, 'text')
+}
+
+async function handleCommand(commandText, source) {
+  const sessionId = interruptForNewCommand()
+  // 文本按钮/语音按钮触发时属于用户手势，提前解锁 FreeTTS Web Audio。
+  void speech.unlockTTS?.()
+  processing.value = true
+  addMessage('user', commandText, source === 'voice' ? '语音输入' : '文字输入')
+
+  showSubtitle('收到指令，请您稍等。', 0)
+
+  // 固定“收到指令，请您稍等”只负责异步提示，不占用主业务流程。
+  // 不等待它请求完成、也不等待它播放开始；本地 voice 音频使用独立 Audio 通道，
+  // 后续菜单/Function/AI 可以立即开始，确保速度优先。
+  if (options.enableTTS) {
+    const promptStartedAt = Date.now()
+    void speech.speakReceivedPromptAsync?.().then((started) => {
+      console.debug?.('[小园 TTS] 异步前置提示已触发，耗时', `${Date.now() - promptStartedAt}ms`, 'started:', started)
+    }).catch((error) => {
+      console.warn('[小园 TTS] 异步前置提示失败，不阻塞后续指令：', error?.message || error)
+    })
+  }
+
+  if (sessionId !== commandSessionId) return
+
+  try {
+    const result = await manager.run(commandText, {
+      // 执行过程中不播报中间状态，只保留字幕等待提示；每一步完成后再播报具体结果。
+      onBeforeStep: async ({ index, description, command }) => {
+        if (sessionId !== commandSessionId) return
+
+        // 每一个拆分后的步骤都必须遵循：
+        // 1. 先请求本步骤对应的 TTS 文案
+        // 2. TTS 真正进入 playing 后立即执行本步骤
+        // 3. 本步骤执行结束后，manager 再等待 3 秒后进入下一步骤
+        const stepSpeech = buildStepSpeech(command, description)
+        showSubtitle(stepSpeech, 0)
+
+        const stepTtsStartedAt = Date.now()
+        const stepPlayed = await speakWithRetry(stepSpeech, { providerOnly: true }, 2)
+        if (sessionId !== commandSessionId) return
+        if (stepPlayed === false) {
+          throw new Error(`第${Number(index) + 1}步 TTS 播放失败，已停止当前指令。`)
+        }
+
+        console.debug?.(
+          '[小园 TTS] 第',
+          Number(index) + 1,
+          '步音频已真正开始播放，立即执行：',
+          stepSpeech,
+          '耗时',
+          `${Date.now() - stepTtsStartedAt}ms`
+        )
+      },
+      onStep: ({ command, description, result }) => {
+        if (sessionId !== commandSessionId) return
+        // TTS 已在 onBeforeStep 中完成并于 playing 时放行执行。
+        // 这里不再重复播报，避免一个步骤播放两次。
+        if (command?.type === 'analysis') return
+        const success = result?.success !== false
+        const resultText = success
+          ? `已完成${description}。`
+          : `未能完成${description}。`
+        showSubtitle(resultText, 8000)
+      },
+      onAnalysisStart: ({ step }) => {
+        if (sessionId !== commandSessionId) return
+        const analysisText = normalizeAnalysisSubject(step?.instruction || '相关数据')
+        const promptText = `正在分析${analysisText}，请稍等。`
+        // 分析步骤的“正在分析”播报已经在 onBeforeStep 中完成，这里只更新字幕。
+        // 避免同一句 TTS 重复请求/播放，减少延迟和语音竞争。
+        showSubtitle(promptText, 0)
+      },
+      onAnalysisDone: async ({ result: analysisResult }) => {
+        if (sessionId !== commandSessionId) return
+        const final = analysisResult?.analysis || analysisResult?.reply
+        if (final) {
+          const text = typeof final === 'string' ? final : JSON.stringify(final)
+          showSubtitle(text, 10000)
+          addMessage('assistant', text)
+
+          // AI 分析结果属于“最终结果播报”：必须把整段语音播完，
+          // manager 才允许进入下一步指令。这里不是只等 playing。
+          const completed = await speakWithRetry(text, { providerOnly: true, waitForEnd: true }, 2)
+          if (sessionId !== commandSessionId) return
+          if (completed === false) {
+            throw new Error('AI 分析结果播报失败，已停止后续步骤。')
+          }
+        }
+      }
+    })
+
+    const executionItems = Array.isArray(result?.execution) ? result.execution : []
+    const analysisItem = executionItems.find((item) => item?.type === 'analysis' && item?.data)
+
+    // 页面操作已经按步骤实时播报，不再追加“已完成相关操作”或重复播报。
+    // 分析结果已经由 onAnalysisDone 播报；没有任何执行结果时，才显示普通模型回复。
+    if (sessionId !== commandSessionId) return
+
+    if (!executionItems.length) {
+      const reply = String(result?.reply || '').trim()
+      if (reply && !/^(已完成处理|处理完成|收到指令，请您稍等[。！!]?|好的[。！!]?|收到[。！!]?)$/i.test(reply)) {
+        addMessage('assistant', reply)
+        showSubtitle(reply, 10000)
+        queueSpeak(reply)
+      }
+    } else if (!analysisItem && executionItems.some((item) => item.success === false)) {
+      const failedText = executionItems.find((item) => item.success === false)?.message || '当前操作未能完成。'
+      showSubtitle(failedText, 8000)
+      addMessage('assistant', failedText)
+      queueSpeak(failedText)
+    }
+  } catch (error) {
+    if (sessionId !== commandSessionId) return
+    const message = `处理失败：${error?.message || '未知错误'}`
+    addMessage('assistant', message)
+    showSubtitle(message, 8000)
+    queueSpeak(message)
+  } finally {
+    if (sessionId !== commandSessionId) return
+    processing.value = false
+    if (autoCollapseMs > 0) {
+      collapseTimer = window.setTimeout(collapse, autoCollapseMs)
+    }
+  }
+}
+
+function startWakeWord() {
+  if (!options.enableWakeWord || !speech.supported()) return
+  wakeController?.stop?.()
+  wakeController = speech.startWakeWordListener({
+    wakeWord,
+    onWake: () => activate('wake'),
+    onError: (code) => {
+      // 首次自动唤醒可能因为浏览器尚未授予麦克风权限而失败，不反复打断用户。
+      wakeListening.value = false
+      if (code === 'not-allowed' || code === 'service-not-allowed') {
+        showSubtitle('请先点击麦克风按钮授权语音，授权后可继续使用“你好小园”唤醒。', 7000)
+      }
+    }
+  })
+  wakeListening.value = true
+}
+
+onMounted(() => {
+  startWakeWord()
+})
+
+onBeforeUnmount(() => {
+  wakeController?.stop?.()
+  speech.stopSpeaking()
+  window.clearTimeout(collapseTimer)
+  window.clearTimeout(subtitleTimer)
+})
+</script>