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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huyooo/ai-chat-frontend-react",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "AI Chat Frontend - React components with adapter pattern",
   "type": "module",
   "main": "./dist/index.js",
@@ -32,8 +32,8 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@huyooo/ai-chat-bridge-electron": "^0.2.11",
-    "@huyooo/ai-chat-shared": "^0.2.11",
+    "@huyooo/ai-chat-bridge-electron": "^0.2.13",
+    "@huyooo/ai-chat-shared": "^0.2.13",
     "@iconify/react": "^5.0.2"
   },
   "devDependencies": {

package/src/components/input/AtFilePicker.css

@@ -2,9 +2,9 @@
   position: fixed;
   width: 332px;
   background: var(--chat-dropdown-bg, #252526);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--chat-border, rgba(0, 0, 0, 0.12));
   border-radius: 10px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
   z-index: 99999;
   display: flex;
   flex-direction: column;
@@ -16,7 +16,7 @@
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid var(--chat-border, rgba(0, 0, 0, 0.12));
 }
 
 .at-picker-back {
@@ -28,18 +28,18 @@
   background: transparent;
   border: none;
   border-radius: 4px;
-  color: #888;
+  color: var(--chat-text-muted, #888);
   cursor: pointer;
   flex-shrink: 0;
 }
 
 .at-picker-back:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: #ccc;
+  background: var(--chat-muted-hover, rgba(0, 0, 0, 0.06));
+  color: var(--chat-text, #26251eeb);
 }
 
 .at-picker-search-icon {
-  color: #666;
+  color: var(--chat-text-muted, #888);
   flex-shrink: 0;
 }
 
@@ -48,7 +48,7 @@
   background: transparent;
   border: none;
   outline: none;
-  color: #ddd;
+  color: var(--chat-text, #26251eeb);
   font-size: 13px;
 }
 
@@ -72,7 +72,7 @@
 .at-picker-recent {
   padding-bottom: 6px;
   margin-bottom: 6px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  border-bottom: 1px solid var(--chat-border, rgba(0, 0, 0, 0.12));
 }
 
 .at-picker-list {
@@ -91,27 +91,27 @@
   border: 1px solid transparent;
   background: transparent;
   cursor: pointer;
-  color: #ccc;
+  color: var(--chat-text, #26251eeb);
   width: 100%;
 }
 
 .at-picker-item:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--chat-muted-hover, rgba(0, 0, 0, 0.06));
 }
 
 .at-picker-item.active {
-  background: rgba(59, 130, 246, 0.15);
-  border-color: rgba(59, 130, 246, 0.3);
+  background: var(--chat-muted-hover, rgba(0, 0, 0, 0.06));
+  border-color: var(--chat-primary, #54a9ff);
 }
 
 .at-picker-item-icon {
-  color: #999;
+  color: var(--chat-text-muted, #888);
   flex-shrink: 0;
 }
 
 .at-picker-item-name {
   font-size: 13px;
-  color: #ddd;
+  color: var(--chat-text, #26251eeb);
   flex-shrink: 0;
   max-width: 160px;
   overflow: hidden;
@@ -121,7 +121,7 @@
 
 .at-picker-item-path {
   font-size: 11px;
-  color: #555;
+  color: var(--chat-text-muted, #888);
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -135,13 +135,13 @@
 }
 
 .at-picker-chevron {
-  color: #555;
+  color: var(--chat-text-muted, #888);
   flex-shrink: 0;
 }
 
 .at-picker-footer {
   padding: 8px 12px;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-  color: #555;
+  border-top: 1px solid var(--chat-border, rgba(0, 0, 0, 0.12));
+  color: var(--chat-text-muted, #888);
   font-size: 11px;
 }

package/src/components/input/ChatInput.css

@@ -30,6 +30,8 @@
   background: rgba(37, 99, 235, 0.1);
 }
 
+/* 录音态不改变 textarea 样式（仅改变图标颜色） */
+
 /* 图片预览区 */
 .images-preview {
   display: flex;
@@ -161,8 +163,64 @@
 
 .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);
+}
+
+.input-right .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;
+}
+
+.input-right .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);
+}
+
+.input-right .voice-btn.connecting {
+  color: #f59e0b;
+  background: transparent;
 }
 
+.input-right .voice-btn.connecting:hover {
+  color: #f59e0b;
+  background: rgba(0, 0, 0, 0.06);
+  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
+}
+
+.input-right .voice-btn .spin {
+  animation: spin 1s linear infinite;
+}
+
+.input-right .voice-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.input-right .voice-btn.recording {
+  color: #ef4444;
+  background: transparent;
+  animation: none;
+}
+
+.input-right .voice-btn.recording:hover {
+  color: #ef4444;
+  background: rgba(0, 0, 0, 0.06);
+  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
+}
+
+/* 录音态不加动效（使用实心暂停图标即可） */
+
 .toggle-btn {
   display: flex;
   align-items: center;
@@ -179,10 +237,21 @@
 
 .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-text, #fff);
+  /* 激活态使用主色调（更清晰的对比度） */
+  color: var(--chat-primary, #54a9ff);
+  background: rgba(84, 169, 255, 0.14);
+  background: color-mix(in srgb, var(--chat-primary, #54a9ff) 14%, transparent);
+}
+
+.toggle-btn.active:hover {
+  color: var(--chat-primary-hover, #2f90ff);
+  background: rgba(84, 169, 255, 0.2);
+  background: color-mix(in srgb, var(--chat-primary, #54a9ff) 20%, transparent);
 }
 
 .send-btn {
@@ -201,4 +270,15 @@
 
 .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);
 }

package/src/components/input/ChatInput.tsx

@@ -13,6 +13,7 @@ import { DropdownSelector } from './DropdownSelector';
 import type { DropdownOption, GroupedOptions } from './DropdownSelector';
 import { useChatInputContext } from '../../context/ChatInputContext';
 import { useImageUpload } from '../../hooks/useImageUpload';
+import { useVoiceToTextInput } from '../../hooks/useVoiceToTextInput';
 import type { ImageData } from '../../adapter';
 
 /** ChatInput 暴露给外部的方法 */
@@ -193,6 +194,23 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       return inputText.trim() || imageUpload.hasImages;
     }, [inputText, imageUpload.hasImages]);
 
+    const voiceCtl = useVoiceToTextInput({
+      adapter,
+      inputText,
+      setInputText,
+      hasImages: imageUpload.hasImages,
+      isLoading,
+    });
+    const voiceInput = voiceCtl.voiceInput;
+    const toggleVoiceInput = useCallback(async () => {
+      await voiceCtl.toggleVoice();
+      // 停止/取消后聚焦输入框
+      if (voiceInput.status === 'recording' || voiceInput.status === 'connecting') {
+        pendingFocusRef.current = true;
+        pendingCaretRef.current = null;
+      }
+    }, [voiceCtl, voiceInput.status]);
+
     // 自动调整高度
     const adjustTextareaHeight = useCallback(() => {
       if (inputRef.current) {
@@ -293,12 +311,13 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     // 处理键盘事件
     const handleKeyDown = useCallback(
       (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (voiceCtl.handleKeyDownForVoice(e)) return;
         if (e.key === 'Enter' && !e.shiftKey) {
           e.preventDefault();
           handleSendOrCancel();
         }
       },
-      [handleSendOrCancel]
+      [handleSendOrCancel, voiceCtl]
     );
 
     // 点击外部关闭菜单
@@ -327,7 +346,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       >
         <div
           ref={containerRef}
-          className={`input-container${isFocused ? ' focused' : ''}${imageUpload.isDragOver ? ' drag-over' : ''}`.trim()}
+          className={`input-container${isFocused ? ' focused' : ''}${imageUpload.isDragOver ? ' drag-over' : ''}${voiceInput.status === 'connecting' ? ' connecting' : ''}${voiceInput.isRecording ? ' recording' : ''}`.trim()}
         >
           {/* 图片预览区 */}
           {imageUpload.hasImages && (
@@ -372,6 +391,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
               placeholder={placeholder}
               rows={1}
               className="input-field chat-scrollbar"
+                readOnly={voiceInput.isRecording}
               spellCheck={false}
               autoCorrect="off"
               autoComplete="off"
@@ -476,23 +496,50 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                   )}
                 </div>
 
-                {hasContent || isLoading ? (
-                  <button
-                    className={`send-btn${isLoading ? ' loading' : ''}`}
-                    title={isLoading ? '停止' : isMessageVariant ? '重新发送' : '发送'}
-                    onClick={handleSendOrCancel}
-                  >
-                    {isLoading ? (
-                      <Icon icon="streamline-flex:button-pause-circle-remix" width={18} />
-                    ) : (
-                      <Icon icon="streamline-flex:mail-send-email-message-circle-remix" width={18} />
-                    )}
-                  </button>
-                ) : (
-                  <button className="icon-btn" title="语音输入">
+                {/* 方案 A：录音按钮 + 发送按钮独立（停止录音入口永不消失） */}
+                <button
+                  className={`voice-btn${voiceInput.status === 'connecting' ? ' connecting' : ''}${voiceInput.isRecording ? ' recording' : ''}`}
+                  title={
+                    voiceInput.status === 'connecting'
+                      ? '正在连接，点击取消'
+                      : voiceInput.isRecording
+                        ? '点击停止'
+                        : '点击录音'
+                  }
+                  onClick={() => toggleVoiceInput().catch(() => {})}
+                  disabled={isLoading || !adapter}
+                >
+                  {voiceInput.status === 'connecting' ? (
+                    <Icon icon="lucide:loader-2" width={18} className="spin" />
+                  ) : voiceInput.isRecording ? (
+                    <Icon icon="streamline-flex:button-pause-circle-remix" width={18} />
+                  ) : (
                     <Icon icon="lucide:mic" width={18} />
-                  </button>
-                )}
+                  )}
+                </button>
+
+                <button
+                  className={`send-btn${isLoading ? ' loading' : ''}`}
+                  title={
+                    isLoading
+                      ? '停止'
+                      : voiceInput.status === 'connecting'
+                        ? '语音连接中，先取消/停止'
+                        : voiceInput.isRecording
+                          ? '录音中，先停止'
+                          : isMessageVariant
+                            ? '重新发送'
+                            : '发送'
+                  }
+                  onClick={handleSendOrCancel}
+                  disabled={(!hasContent && !isLoading) || voiceInput.isRecording || voiceInput.status === 'connecting'}
+                >
+                  {isLoading ? (
+                    <Icon icon="streamline-flex:button-pause-circle-remix" width={18} />
+                  ) : (
+                    <Icon icon="streamline-flex:mail-send-email-message-circle-remix" width={18} />
+                  )}
+                </button>
               </div>
             </div>
           )}

package/src/components/input/DropdownSelector.css

@@ -7,8 +7,11 @@
   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;
@@ -18,7 +21,8 @@
 }
 
 .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);
 }
 
@@ -87,12 +91,14 @@
 }
 
 .dropdown-selector .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-selector .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);
 }