@huyooo/ai-chat-frontend-react 0.2.14 → 0.2.16

package/src/hooks/useVoiceInput.ts

@@ -1,454 +0,0 @@
-/**
- * 语音输入 hook（React）
- *
- * 浏览器录音 + Electron bridge ASR（WebSocket）实时转写。
- * 与 Vue 版本 useVoiceInput.ts 逻辑保持一致，但使用 React state。
- */
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { ChatAdapter, AsrResultData } from '@huyooo/ai-chat-bridge-electron/renderer';
-
-export type VoiceInputStatus = 'idle' | 'connecting' | 'recording' | 'processing' | 'error';
-
-export interface VoiceInputConfig {
-  sampleRate?: number;
-  sendInterval?: number;
-  enablePunc?: boolean;
-  enableItn?: boolean;
-}
-
-export interface UseVoiceInputReturn {
-  status: VoiceInputStatus;
-  isRecording: boolean;
-  currentText: string;
-  finalText: string;
-  error: string | null;
-  start: () => Promise<void>;
-  stop: () => Promise<string>;
-  cancel: () => void;
-}
-
-function float32ToInt16(float32Array: Float32Array): Int16Array {
-  const int16Array = new Int16Array(float32Array.length);
-  for (let i = 0; i < float32Array.length; i++) {
-    const s = Math.max(-1, Math.min(1, float32Array[i]));
-    int16Array[i] = s < 0 ? s * 0x8000 : s * 0x7fff;
-  }
-  return int16Array;
-}
-
-function resample(audioData: Float32Array, fromSampleRate: number, toSampleRate: number): Float32Array {
-  if (fromSampleRate === toSampleRate) return audioData;
-
-  const ratio = fromSampleRate / toSampleRate;
-  const newLength = Math.round(audioData.length / ratio);
-  const result = new Float32Array(newLength);
-
-  for (let i = 0; i < newLength; i++) {
-    const srcIndex = i * ratio;
-    const srcIndexFloor = Math.floor(srcIndex);
-    const srcIndexCeil = Math.min(srcIndexFloor + 1, audioData.length - 1);
-    const t = srcIndex - srcIndexFloor;
-    result[i] = audioData[srcIndexFloor] * (1 - t) + audioData[srcIndexCeil] * t;
-  }
-
-  return result;
-}
-
-// 全局预热标志：确保只预热一次（避免多个组件实例重复预热）
-let asrWarmupDone = false;
-
-async function setupAudioWorkletCapture(opts: {
-  audioContext: AudioContext;
-  source: MediaStreamAudioSourceNode;
-  chunkSize: number;
-  onChunk: (chunk: Float32Array) => void;
-}): Promise<{
-  cleanup: () => void;
-}> {
-  const { audioContext, source, chunkSize, onChunk } = opts;
-
-  const workletCode = `
-class PcmCaptureProcessor extends AudioWorkletProcessor {
-  constructor(options) {
-    super();
-    const size = (options && options.processorOptions && options.processorOptions.chunkSize) || 4096;
-    this._chunkSize = size;
-    this._buf = new Float32Array(size);
-    this._offset = 0;
-  }
-  process(inputs, outputs) {
-    const input = inputs && inputs[0] && inputs[0][0];
-    const output = outputs && outputs[0] && outputs[0][0];
-    if (!input) return true;
-    if (output) output.set(input);
-
-    let i = 0;
-    while (i < input.length) {
-      const remain = this._chunkSize - this._offset;
-      const take = Math.min(remain, input.length - i);
-      this._buf.set(input.subarray(i, i + take), this._offset);
-      this._offset += take;
-      i += take;
-      if (this._offset >= this._chunkSize) {
-        const out = this._buf;
-        this.port.postMessage(out, [out.buffer]);
-        this._buf = new Float32Array(this._chunkSize);
-        this._offset = 0;
-      }
-    }
-    return true;
-  }
-}
-registerProcessor('pcm-capture', PcmCaptureProcessor);
-`;
-
-  const blob = new Blob([workletCode], { type: 'text/javascript' });
-  const url = URL.createObjectURL(blob);
-  await audioContext.audioWorklet.addModule(url);
-  URL.revokeObjectURL(url);
-
-  const workletNode = new AudioWorkletNode(audioContext, 'pcm-capture', {
-    numberOfInputs: 1,
-    numberOfOutputs: 1,
-    channelCount: 1,
-    processorOptions: { chunkSize },
-  });
-
-  const silentGain = audioContext.createGain();
-  silentGain.gain.value = 0;
-
-  const onMessage = (event: MessageEvent) => {
-    const data = event.data;
-    if (data instanceof Float32Array) {
-      onChunk(data);
-      return;
-    }
-    if (data instanceof ArrayBuffer) {
-      onChunk(new Float32Array(data));
-    }
-  };
-  workletNode.port.addEventListener('message', onMessage);
-  workletNode.port.start();
-
-  source.connect(workletNode);
-  workletNode.connect(silentGain);
-  silentGain.connect(audioContext.destination);
-
-  return {
-    cleanup: () => {
-      try {
-        workletNode.port.removeEventListener('message', onMessage);
-      } catch {
-        // ignore
-      }
-      try {
-        workletNode.disconnect();
-      } catch {
-        // ignore
-      }
-      try {
-        silentGain.disconnect();
-      } catch {
-        // ignore
-      }
-    },
-  };
-}
-
-export function useVoiceInput(adapter: ChatAdapter | undefined, config: VoiceInputConfig = {}): UseVoiceInputReturn {
-  const { sampleRate = 16000, sendInterval = 200, enablePunc = true, enableItn = true } = config;
-
-  // 自动预热 ASR 连接（仅首次调用，延迟执行，避免阻塞初始化）
-  useEffect(() => {
-    if (adapter && !asrWarmupDone && typeof adapter.asrWarmup === 'function') {
-      asrWarmupDone = true;
-      // 延迟 800ms 预热，避免与首屏渲染竞争资源
-      const timer = setTimeout(() => {
-        adapter.asrWarmup?.().catch(() => {
-          // 静默失败，不影响功能
-        });
-      }, 800);
-      return () => clearTimeout(timer);
-    }
-  }, [adapter]);
-
-  const [status, setStatus] = useState<VoiceInputStatus>('idle');
-  const [currentText, setCurrentText] = useState('');
-  const [finalText, setFinalText] = useState('');
-  const [error, setError] = useState<string | null>(null);
-
-  const statusRef = useRef<VoiceInputStatus>('idle');
-  const currentTextRef = useRef('');
-  const finalTextRef = useRef('');
-
-  const mediaStreamRef = useRef<MediaStream | null>(null);
-  const audioContextRef = useRef<AudioContext | null>(null);
-  const workletCleanupRef = useRef<(() => void) | null>(null);
-  const sourceRef = useRef<MediaStreamAudioSourceNode | null>(null);
-  const audioBufferRef = useRef<Float32Array[]>([]);
-  const sendTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const cleanupFnsRef = useRef<Array<() => void>>([]);
-
-  // UI 维度的“正在录音”：包含连接中的瞬间（避免用户误以为没点到）
-  const isRecording = useMemo(() => status === 'connecting' || status === 'recording', [status]);
-
-  // 同步到 refs，避免音频回调/计时器读取到旧闭包
-  useEffect(() => {
-    statusRef.current = status;
-  }, [status]);
-  useEffect(() => {
-    currentTextRef.current = currentText;
-  }, [currentText]);
-  useEffect(() => {
-    finalTextRef.current = finalText;
-  }, [finalText]);
-
-  const setStatusSafe = useCallback((next: VoiceInputStatus) => {
-    statusRef.current = next;
-    setStatus(next);
-  }, []);
-
-  const cleanup = useCallback(() => {
-    if (sendTimerRef.current) {
-      clearInterval(sendTimerRef.current);
-      sendTimerRef.current = null;
-    }
-
-    if (workletCleanupRef.current) {
-      workletCleanupRef.current();
-      workletCleanupRef.current = null;
-    }
-
-    if (sourceRef.current) {
-      try {
-        sourceRef.current.disconnect();
-      } catch {
-        // ignore
-      }
-      sourceRef.current = null;
-    }
-
-    if (audioContextRef.current) {
-      audioContextRef.current.close().catch(() => {});
-      audioContextRef.current = null;
-    }
-
-    if (mediaStreamRef.current) {
-      mediaStreamRef.current.getTracks().forEach((t) => t.stop());
-      mediaStreamRef.current = null;
-    }
-
-    cleanupFnsRef.current.forEach((fn) => fn());
-    cleanupFnsRef.current = [];
-
-    audioBufferRef.current = [];
-  }, []);
-
-  const sendAudioChunk = useCallback(async () => {
-    if (!adapter?.asrSendAudio) return;
-    const buf = audioBufferRef.current;
-    if (!buf.length) return;
-
-    const totalLength = buf.reduce((sum, arr) => sum + arr.length, 0);
-    const merged = new Float32Array(totalLength);
-    let offset = 0;
-    for (const chunk of buf) {
-      merged.set(chunk, offset);
-      offset += chunk.length;
-    }
-    audioBufferRef.current = [];
-
-    const pcmData = float32ToInt16(merged);
-    const result = await adapter.asrSendAudio(pcmData.buffer);
-    if (!result.success) {
-      // 不中断录音，只记录错误
-      // eslint-disable-next-line no-console
-      console.error('[VoiceInput] 发送音频失败:', result.error);
-    }
-  }, [adapter]);
-
-  const start = useCallback(async () => {
-    // 防抖：连接中/录音中不重复 start（避免多次点击造成状态错乱）
-    if (statusRef.current === 'connecting' || statusRef.current === 'recording') return;
-
-    if (!adapter) {
-      setError('Adapter 未初始化');
-      setStatusSafe('error');
-      return;
-    }
-    if (!adapter.asrStart) {
-      setError('语音识别功能不可用');
-      setStatusSafe('error');
-      return;
-    }
-
-    setError(null);
-    setCurrentText('');
-    setFinalText('');
-    setStatusSafe('connecting');
-
-    try {
-      mediaStreamRef.current = await navigator.mediaDevices.getUserMedia({
-        audio: {
-          channelCount: 1,
-          sampleRate: { ideal: sampleRate },
-          echoCancellation: true,
-          noiseSuppression: true,
-        },
-      });
-
-      audioContextRef.current = new AudioContext({ sampleRate });
-      const actualSampleRate = audioContextRef.current.sampleRate;
-
-      if (adapter.onAsrResult) {
-        const off = adapter.onAsrResult((data: { result: AsrResultData; isLast: boolean }) => {
-          const text = data.result.result?.text || '';
-          setCurrentText(text);
-          if (data.isLast) setFinalText(text);
-        });
-        cleanupFnsRef.current.push(off);
-      }
-
-      if (adapter.onAsrError) {
-        const off = adapter.onAsrError((err: { message: string }) => {
-          // eslint-disable-next-line no-console
-          console.error('[VoiceInput] ASR 错误:', err.message);
-          setError(err.message);
-          setStatusSafe('error');
-        });
-        cleanupFnsRef.current.push(off);
-      }
-
-      if (adapter.onAsrClosed) {
-        const off = adapter.onAsrClosed(() => {
-          if (statusRef.current === 'recording') {
-            setStatusSafe('idle');
-          }
-        });
-        cleanupFnsRef.current.push(off);
-      }
-
-      const ctx = audioContextRef.current;
-      const stream = mediaStreamRef.current;
-      if (!ctx || !stream) throw new Error('AudioContext 或 MediaStream 初始化失败');
-
-      const startResult = await adapter.asrStart({
-        format: 'pcm',
-        sampleRate,
-        enablePunc,
-        enableItn,
-        showUtterances: true,
-      });
-
-      if (!startResult.success) {
-        throw new Error(startResult.error || 'ASR 启动失败');
-      }
-
-      // 连接成功后再开始接收语音（降低复杂度）
-      sourceRef.current = ctx.createMediaStreamSource(stream);
-      if (typeof AudioWorkletNode === 'undefined' || !ctx.audioWorklet) {
-        throw new Error('当前环境不支持 AudioWorkletNode（无法启动语音录制）');
-      }
-      const { cleanup: off } = await setupAudioWorkletCapture({
-        audioContext: ctx,
-        source: sourceRef.current,
-        chunkSize: 4096,
-        onChunk: (chunk) => {
-          if (statusRef.current !== 'recording') return;
-          const resampled = resample(chunk, actualSampleRate, sampleRate);
-          audioBufferRef.current.push(new Float32Array(resampled));
-        },
-      });
-      workletCleanupRef.current = off;
-
-      sendTimerRef.current = setInterval(() => {
-        sendAudioChunk().catch(() => {});
-      }, sendInterval);
-
-      setStatusSafe('recording');
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : String(e);
-      setError(msg);
-      setStatusSafe('error');
-      cleanup();
-    }
-  }, [adapter, cleanup, enableItn, enablePunc, sampleRate, sendAudioChunk, sendInterval, setStatusSafe]);
-
-  const stop = useCallback(async (): Promise<string> => {
-    // 连接中点击停止：按“取消”处理，保证状态立刻回到 idle
-    if (statusRef.current === 'connecting') {
-      if (adapter?.asrStop) {
-        adapter.asrStop().catch(() => {});
-      }
-      cleanup();
-      setCurrentText('');
-      setFinalText('');
-      setError(null);
-      setStatusSafe('idle');
-      return '';
-    }
-    if (statusRef.current !== 'recording') return finalTextRef.current || currentTextRef.current;
-
-    setStatusSafe('processing');
-
-    try {
-      await sendAudioChunk();
-      if (adapter?.asrFinish) {
-        await adapter.asrFinish();
-      }
-
-      // 等待最终结果（最多 3s）
-      await new Promise<void>((resolve) => {
-        const startAt = Date.now();
-        const timer = setInterval(() => {
-          if (Date.now() - startAt > 3000) {
-            clearInterval(timer);
-            resolve();
-            return;
-          }
-          if (finalTextRef.current) {
-            clearInterval(timer);
-            resolve();
-          }
-        }, 100);
-      });
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : String(e);
-      setError(msg);
-    } finally {
-      cleanup();
-      setStatusSafe('idle');
-    }
-
-    return finalTextRef.current || currentTextRef.current;
-  }, [adapter, cleanup, sendAudioChunk, setStatusSafe]);
-
-  const cancel = useCallback(() => {
-    if (adapter?.asrStop) {
-      adapter.asrStop().catch(() => {});
-    }
-    cleanup();
-    setCurrentText('');
-    setFinalText('');
-    setError(null);
-    setStatusSafe('idle');
-  }, [adapter, cleanup, setStatusSafe]);
-
-  useEffect(() => {
-    return () => cancel();
-  }, [cancel]);
-
-  return {
-    status,
-    isRecording,
-    currentText,
-    finalText,
-    error,
-    start,
-    stop,
-    cancel,
-  };
-}
-
-

package/src/hooks/useVoiceToTextInput.ts

@@ -1,87 +0,0 @@
-/**
- * 将语音识别（useVoiceInput）封装成“写入输入框”的高内聚控制层
- * - 处理 prefix（追加模式）
- * - 处理实时同步到 inputText
- * - 处理 Enter：语音中 Enter 停止/取消语音（不发送）
- * - 输出按钮状态/禁用逻辑（ChatInput 只负责渲染）
- */
-
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import type { ChatAdapter } from '@huyooo/ai-chat-bridge-electron/renderer';
-import { useVoiceInput } from './useVoiceInput';
-
-export function useVoiceToTextInput(opts: {
-  adapter: ChatAdapter | undefined;
-  inputText: string;
-  setInputText: (v: string) => void;
-  hasImages: boolean;
-  isLoading: boolean;
-}) {
-  const { adapter, inputText, setInputText, hasImages, isLoading } = opts;
-  const voiceInput = useVoiceInput(adapter);
-  const prefixRef = useRef('');
-
-  const isVoiceActive = useMemo(
-    () => voiceInput.status === 'connecting' || voiceInput.status === 'recording',
-    [voiceInput.status]
-  );
-
-  // 实时同步语音识别文本到输入框（追加模式）
-  useEffect(() => {
-    if (!isVoiceActive) return;
-    const prefix = prefixRef.current;
-    const t = voiceInput.currentText;
-    const next = prefix ? (t ? `${prefix} ${t}` : prefix) : t;
-    setInputText(next);
-  }, [isVoiceActive, setInputText, voiceInput.currentText]);
-
-  const toggleVoice = useCallback(async () => {
-    if (isLoading) return;
-    if (!adapter) return;
-
-    if (voiceInput.status === 'connecting') {
-      voiceInput.cancel();
-      setInputText(prefixRef.current);
-      prefixRef.current = '';
-      return;
-    }
-
-    if (voiceInput.status === 'recording') {
-      await voiceInput.stop();
-      prefixRef.current = '';
-      return;
-    }
-
-    prefixRef.current = inputText.trim();
-    await voiceInput.start();
-  }, [adapter, inputText, isLoading, setInputText, voiceInput]);
-
-  const sendDisabled = useMemo(() => {
-    if (isLoading) return false; // 允许停止生成
-    if (isVoiceActive) return true;
-    return !inputText.trim() && !hasImages;
-  }, [hasImages, inputText, isLoading, isVoiceActive]);
-
-  const handleKeyDownForVoice = useCallback(
-    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      if (!isVoiceActive) return false;
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        toggleVoice().catch(() => {});
-        return true;
-      }
-      return false;
-    },
-    [isVoiceActive, toggleVoice]
-  );
-
-  return {
-    voiceInput,
-    isVoiceActive,
-    toggleVoice,
-    sendDisabled,
-    handleKeyDownForVoice,
-  };
-}
-
-

package/src/index.ts

@@ -1,151 +0,0 @@
-/**
- * @huyooo/ai-chat-frontend-react
- *
- * AI Chat 前端组件库 - React 版本
- *
- * 新架构：使用 ContentPart 数组渲染消息内容
- * - 支持流式渲染
- * - 支持自定义 Part 类型渲染（如 weather, stock）
- * - 支持思考、搜索、工具调用等多种内容类型
- */
-
-// CSS 变量默认值（与 vue 版本保持一致：入口自动注入）
-import './styles.css'
-
-// ==================== 核心类型 ====================
-
-// 从 bridge-electron 重新导出通信相关类型
-export type {
-  ChatAdapter,
-  ChatEvent,
-  ChatEventType,
-  ChatOptions,
-  ChatMode,
-  ThinkingMode,
-  SessionRecord,
-  MessageRecord,
-  ModelOption,
-  ProviderType,
-} from '@huyooo/ai-chat-bridge-electron/renderer'
-
-// 导出 adapter 辅助类型
-export type {
-  ThinkingData,
-  ToolCallData,
-  ToolResultData,
-  ImageData,
-  SendMessageOptions,
-  CreateSessionOptions,
-  UpdateSessionOptions,
-  SaveMessageOptions,
-} from './adapter'
-
-// 导出消息和内容类型
-export type {
-  // 消息类型
-  ChatMessage,
-  // ContentPart 类型
-  ContentPart,
-  ContentPartType,
-  TextPart,
-  ThinkingPart,
-  SearchPart,
-  ToolCallPart,
-  ImagePart,
-  ErrorPart,
-  // 搜索结果
-  SearchResult,
-  // 错误详情
-  ErrorDetails,
-  // 输入配置
-  ChatInputOptions,
-} from './types'
-
-// 导出工具函数
-export { getMessageText } from './types'
-
-// ==================== Hooks ====================
-
-export { useChat } from './hooks/useChat'
-export type { UseChatOptions, ToolCompleteEvent, SideEffect } from './hooks/useChat'
-
-// ==================== Context ====================
-
-export { ChatInputProvider, useChatInputContext } from './context/ChatInputContext'
-export type { ChatInputContextValue } from './context/ChatInputContext'
-
-// Part 渲染器上下文
-export { PartRenderersProvider, PartRenderersContext } from './context/RenderersContext'
-export type { PartRenderers, PartRendererProps } from './context/RenderersContext'
-
-// ==================== 主组件 ====================
-
-export { ChatPanel } from './components/ChatPanel'
-export type { ChatPanelHandle } from './components/ChatPanel'
-
-// ==================== 消息组件 ====================
-
-export { MessageBubble } from './components/message/MessageBubble'
-export { PartsRenderer } from './components/message/PartsRenderer'
-
-// Part 渲染组件
-export {
-  TextPart as TextPartComponent,
-  ThinkingPart as ThinkingPartComponent,
-  SearchPart as SearchPartComponent,
-  ToolCallPart as ToolCallPartComponent,
-  ImagePart as ImagePartComponent,
-  ErrorPart as ErrorPartComponent,
-} from './components/message/parts'
-
-// ==================== 其他组件 ====================
-
-// 输入组件
-export { ChatInput } from './components/input/ChatInput'
-
-// Header 组件
-export { ChatHeader } from './components/header/ChatHeader'
-
-// 欢迎消息组件
-export { WelcomeMessage } from './components/message/WelcomeMessage'
-export type { WelcomeConfig, WelcomeFeature, WelcomeTask } from './components/message/welcome-types'
-export { defaultWelcomeConfig } from './components/message/welcome-types'
-
-// 通用组件
-export { ConfirmDialog } from './components/common/ConfirmDialog'
-export { Toast } from './components/common/Toast'
-
-// ==================== 工具渲染器相关 ====================
-
-// 从 ai-chat-shared 重新导出（用于自定义工具渲染器）
-export type {
-  ContentBlockType,
-  ContentBlock,
-  TextBlock as TextBlockType,
-  CodeBlock as CodeBlockType,
-  WeatherData,
-  SearchResultItem,
-} from '@huyooo/ai-chat-shared'
-export { parseContent, highlightCode, getLanguageDisplayName, renderMarkdown } from '@huyooo/ai-chat-shared'
-
-/**
- * 使用说明：
- *
- * 1. 导入样式：
- *    import '@huyooo/ai-chat-frontend-react/style.css'
- *
- * 2. 基本使用：
- *    import { ChatPanel } from '@huyooo/ai-chat-frontend-react'
- *    import { createElectronAdapter } from '@huyooo/ai-chat-bridge-electron/renderer'
- *    const adapter = createElectronAdapter()
- *    <ChatPanel adapter={adapter} cwd="/path/to/dir" />
- *
- * 3. 自定义 Part 渲染器（新架构）：
- *    import WeatherCard from './WeatherCard'
- *    const partRenderers = { weather: WeatherCard }
- *    <ChatPanel adapter={adapter} partRenderers={partRenderers} />
- *
- * 4. 使用 useChat hook 自定义 UI：
- *    import { useChat } from '@huyooo/ai-chat-frontend-react'
- *    const { messages, sendMessage, ... } = useChat({ adapter })
- */