@huyooo/ai-chat-frontend-vue 0.2.11 → 0.2.13

package/src/components/input/ChatInput.vue

@@ -5,7 +5,18 @@
     @dragleave="imageUpload.handleDragLeave"
     @drop.prevent="imageUpload.handleDrop"
   >
-    <div ref="containerRef" :class="['input-container', { focused: isFocused, 'drag-over': imageUpload.isDragOver.value }]">
+    <div
+      ref="containerRef"
+      :class="[
+        'input-container',
+        {
+          focused: isFocused,
+          'drag-over': imageUpload.isDragOver.value,
+          connecting: voiceInput.status.value === 'connecting',
+          recording: voiceIsRecording,
+        },
+      ]"
+    >
       <!-- 图片预览区 -->
       <div v-if="imageUpload.hasImages.value" class="images-preview">
         <div v-for="(img, i) in imageUpload.images.value" :key="i" class="image-preview-item">
@@ -105,36 +116,57 @@
 
             <!-- @ 下拉菜单 -->
             <AtFilePicker
-              v-if="chatAdapter"
+              v-if="props.adapter"
               :visible="atPickerVisible"
-              :adapter="chatAdapter"
+              :adapter="props.adapter"
               :anchor-el="atSelectorRef"
               @close="closeAtPicker"
               @select="applyAtPath"
             />
           </div>
 
-          <!-- 发送/停止按钮 -->
+          <!-- 方案 A：录音按钮 + 发送按钮独立（停止录音入口永不消失） -->
           <button
-            v-if="inputText.trim() || imageUpload.hasImages.value || isLoading"
-            :class="['send-btn', { loading: isLoading }]"
-            :title="isLoading ? '停止' : isMessageVariant ? '重新发送' : '发送'"
+            class="voice-btn"
+            :class="{ connecting: voiceInput.status.value === 'connecting', recording: voiceIsRecording }"
+            :title="voiceInput.status.value === 'connecting' ? '正在连接，点击取消' : voiceIsRecording ? '点击停止' : '点击录音'"
+            @click.prevent="toggleVoiceInput"
+            :disabled="isLoading"
+          >
+            <Icon v-if="voiceInput.status.value === 'connecting'" icon="lucide:loader-2" width="18" class="spin" />
+            <Icon v-else-if="voiceIsRecording" icon="streamline-flex:button-pause-circle-remix" width="18" />
+            <Icon v-else icon="lucide:mic" width="18" />
+          </button>
+
+          <button
+            class="send-btn"
+            :class="{ loading: isLoading }"
+            :disabled="(!inputText.trim() && !imageUpload.hasImages.value) || voiceIsRecording || voiceInput.status.value === 'connecting'"
+            :title="
+              isLoading
+                ? '停止'
+                : voiceInput.status.value === 'connecting'
+                  ? '语音连接中，先取消/停止'
+                  : voiceIsRecording
+                    ? '录音中，先停止'
+                    : isMessageVariant
+                      ? '重新发送'
+                      : '发送'
+            "
             @click="handleSendOrCancel"
           >
             <Icon v-if="isLoading" icon="streamline-flex:button-pause-circle-remix" width="18" />
             <Icon v-else icon="streamline-flex:mail-send-email-message-circle-remix" width="18" />
           </button>
-          <button v-else class="icon-btn" title="语音输入">
-            <Icon icon="lucide:mic" width="18" />
-          </button>
         </div>
       </div>
+
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { computed, ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { Icon } from '@iconify/vue';
 import type { ChatMode, ModelOption } from '../../types';
 import AtFilePicker from './AtFilePicker.vue';
@@ -142,6 +174,7 @@ import ImagePreviewModal from './ImagePreviewModal.vue';
 import DropdownSelector, { type GroupedOptions } from './DropdownSelector.vue';
 import type { ChatAdapter, ImageData } from '../../adapter';
 import { useImageUpload } from '../../composables/useImageUpload';
+import { useVoiceToTextInput } from '../../composables/useVoiceToTextInput';
 
 const props = withDefaults(
   defineProps<{
@@ -150,6 +183,8 @@ const props = withDefaults(
     /** 受控值（用于历史消息编辑） */
     value?: string;
     isLoading?: boolean;
+    /** 由宿主显式传入（@ 面板需要） */
+    adapter?: ChatAdapter;
     mode?: ChatMode;
     model?: string;
     /** 模型列表 */
@@ -161,6 +196,7 @@ const props = withDefaults(
     variant: 'input',
     value: '',
     isLoading: false,
+    adapter: undefined,
     mode: 'agent',
     model: '',
     models: () => [],
@@ -188,13 +224,25 @@ const containerRef = ref<HTMLDivElement | null>(null);
 const isFocused = ref(false);
 const lastInputText = ref(props.value);
 
-// 注入 adapter（由 ChatPanel 提供）
-const chatAdapter = inject<ChatAdapter | null>('chatAdapter', null);
+// 显式 adapter（由 ChatPanel / MessageBubble 通过 props 传递）
+const chatAdapter = computed(() => props.adapter);
 
 // ============ 图片上传功能（使用 composable） ============
 const imageUpload = useImageUpload();
 const imageInputRef = ref<HTMLInputElement | null>(null);
 
+// ============ 语音输入功能（高内聚控制层） ============
+const voiceCtl = useVoiceToTextInput({
+  adapter: props.adapter,
+  inputText,
+  hasImages: computed(() => imageUpload.hasImages.value),
+  isLoading: computed(() => props.isLoading),
+  focusInput: () => inputRef.value?.focus(),
+  adjustTextareaHeight,
+});
+const voiceInput = voiceCtl.voiceInput;
+const voiceIsRecording = computed(() => voiceInput.status.value === 'recording');
+
 // 预览索引（使用 computed 双向绑定到 composable）
 const previewIndex = computed({
   get: () => imageUpload.previewIndex.value,
@@ -206,13 +254,20 @@ function triggerImageUpload() {
   imageInputRef.value?.click();
 }
 
+// ============ 语音输入操作 ============
+
+/** 切换语音输入（点击切换模式） */
+async function toggleVoiceInput() {
+  await voiceCtl.toggleVoice();
+}
+
 // @ 文件选择面板
 const atPickerVisible = ref(false);
 const replaceRange = ref<{ start: number; end: number } | null>(null);
 const atSelectorRef = ref<HTMLDivElement | null>(null);
 
 function toggleAtPicker() {
-  if (!chatAdapter) return;
+  if (!chatAdapter.value) return;
   if (!atPickerVisible.value) {
     replaceRange.value = null;
   }
@@ -334,7 +389,7 @@ function adjustTextareaHeight() {
   // 检测是否新增输入了 '@'，用事件驱动打开面板
   const cur = inputText.value || '';
   const prev = lastInputText.value || '';
-  if (chatAdapter && cur.length === prev.length + 1 && inputRef.value) {
+  if (chatAdapter.value && cur.length === prev.length + 1 && inputRef.value) {
     const cursor = inputRef.value.selectionStart ?? cur.length;
     const inserted = cur.slice(cursor - 1, cursor);
     if (inserted === '@') {
@@ -377,6 +432,7 @@ function handleSendOrCancel() {
 }
 
 function handleKeydown(event: KeyboardEvent) {
+  if (voiceCtl.handleKeydownForVoice(event)) return;
   if (event.key === 'Enter' && !event.shiftKey) {
     event.preventDefault();
     handleSendOrCancel();
@@ -460,6 +516,7 @@ defineExpose({
 }
 
 .input-container {
+  position: relative;
   display: flex;
   flex-direction: column;
   background: var(--chat-input-bg, #2d2d2d);
@@ -478,6 +535,8 @@ defineExpose({
   background: rgba(37, 99, 235, 0.1);
 }
 
+/* 录音态不改变 textarea 样式（仅改变图标颜色） */
+
 /* 图片预览区 */
 .images-preview {
   display: flex;
@@ -609,6 +668,8 @@ defineExpose({
 
 .input-right .icon-btn:hover {
   color: var(--chat-text, #ccc);
+  background: rgba(0, 0, 0, 0.06);
+  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
 }
 
 .toggle-btn {
@@ -627,17 +688,22 @@ defineExpose({
 
 .toggle-btn:hover {
   color: var(--chat-text, #ccc);
+  background: rgba(0, 0, 0, 0.06);
+  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
 }
 
 .toggle-btn.active {
   /* 激活态使用主色调（仅配色，不改布局） */
   color: var(--chat-primary);
-  background: var(--chat-muted);
+  /* 避免用 --chat-muted 做背景（与 input 背景太接近，暗色几乎无对比） */
+  background: rgba(84, 169, 255, 0.14);
+  background: color-mix(in srgb, var(--chat-primary) 14%, transparent);
 }
 
 .toggle-btn.active:hover {
   color: var(--chat-primary-hover);
-  background: var(--chat-muted-hover);
+  background: rgba(84, 169, 255, 0.2);
+  background: color-mix(in srgb, var(--chat-primary) 20%, transparent);
 }
 
 .send-btn {
@@ -656,5 +722,87 @@ defineExpose({
 
 .send-btn:hover {
   color: var(--chat-text, #ccc);
+  background: rgba(0, 0, 0, 0.06);
+  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
+}
+
+.send-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.send-btn:disabled:hover {
+  color: var(--chat-text-muted, #666);
+}
+
+/* 语音输入按钮 */
+.voice-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--chat-text-muted, #666);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.voice-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.voice-btn:disabled:hover {
+  background: transparent;
+  color: var(--chat-text-muted, #666);
+}
+
+.voice-btn:hover {
+  color: var(--chat-text, #ccc);
+  background: rgba(0, 0, 0, 0.06);
+  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
 }
+
+.voice-btn.recording {
+  color: #ef4444;
+  background: transparent;
+  animation: none;
+}
+
+.voice-btn.recording:hover {
+  color: #ef4444;
+  background: rgba(0, 0, 0, 0.06);
+  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
+}
+
+.voice-btn.connecting {
+  color: #f59e0b;
+  background: transparent;
+}
+
+.voice-btn.connecting:hover {
+  color: #f59e0b;
+  background: rgba(0, 0, 0, 0.06);
+  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
+}
+
+.voice-btn .spin {
+  animation: spin 1s linear infinite;
+}
+
+.voice-btn .stop-icon {
+  animation: none;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* 录音态动效：仅对图标做“呼吸”效果（无背景变化） */
+/* 录音态图标不加动效 */
+
 </style>

package/src/components/input/DropdownSelector.vue

@@ -182,8 +182,11 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 4px 8px;
-  background: var(--chat-muted, #3c3c3c);
+  height: 28px; /* 与 ChatInput 右侧按钮一致 */
+  padding: 0 8px;
+  /* 避免用 --chat-muted 做背景（暗色下容易与 input 背景同色） */
+  background: rgba(0, 0, 0, 0.04);
+  background: color-mix(in srgb, var(--chat-text, #ccc) 6%, transparent);
   border: none;
   border-radius: 6px;
   font-size: 14px;
@@ -193,7 +196,8 @@ onUnmounted(() => {
 }
 
 .dropdown-selector:hover:not(.disabled) {
-  background: var(--chat-muted-hover, #444);
+  background: rgba(0, 0, 0, 0.06);
+  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
   color: var(--chat-text, #ccc);
 }
 
@@ -270,12 +274,14 @@ onUnmounted(() => {
 }
 
 .dropdown-item:hover {
-  background: rgba(255, 255, 255, 0.08);
+  background: rgba(0, 0, 0, 0.06);
+  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
   color: var(--chat-text, #ccc);
 }
 
 .dropdown-item.active {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.08);
+  background: color-mix(in srgb, var(--chat-text, #ccc) 14%, transparent);
   color: var(--chat-text, #fff);
 }
 

package/src/components/message/MessageBubble.vue

@@ -12,6 +12,7 @@
         :web-search-enabled="inputState.webSearch.value"
         :thinking-enabled="inputState.thinking.value"
         :is-loading="inputState.isLoading.value"
+        :adapter="props.adapter"
         @send="(text) => $emit('send', text)"
         @update:mode="inputState.setMode"
         @update:model="inputState.setModel"