react-optimistic-chat 1.0.0 → 1.1.0

package/dist/index.d.mts

@@ -43,6 +43,65 @@ type Props$2<T> = {
 };
 declare function ChatList<T>({ messages, messageMapper, messageRenderer, className, loadingRenderer, }: Props$2<T>): react_jsx_runtime.JSX.Element;
 
+type VoiceRecognitionController$1 = {
+    start: () => void;
+    stop: () => void;
+    isRecording: boolean;
+};
+type ButtonConfig = {
+    className?: string;
+    icon?: React.ReactNode;
+};
+type Props$1 = {
+    onSend: (value: string) => void | Promise<void>;
+    voice?: boolean | VoiceRecognitionController$1;
+    placeholder?: string;
+    className?: string;
+    inputClassName?: string;
+    micButton?: ButtonConfig;
+    recordingButton?: ButtonConfig;
+    sendButton?: ButtonConfig;
+    sendingButton?: ButtonConfig;
+    maxHeight?: number;
+    value?: string;
+    onChange?: (value: string) => void;
+    isSending: boolean;
+    submitOnEnter?: boolean;
+};
+declare function ChatInput({ onSend, voice, placeholder, className, inputClassName, micButton, recordingButton, sendButton, sendingButton, maxHeight, value, onChange, isSending, submitOnEnter, }: Props$1): react_jsx_runtime.JSX.Element;
+
+type Props<T> = {
+    messages: T[];
+    messageMapper?: (msg: T) => Message;
+    messageRenderer?: (msg: Message) => React.ReactNode;
+    loadingRenderer?: React.ReactNode;
+    listClassName?: string;
+    onSend: (value: string) => void | Promise<void>;
+    isSending: boolean;
+    disableVoice?: boolean;
+    placeholder?: string;
+    inputClassName?: string;
+    className?: string;
+};
+declare function ChatContainer<T>({ messages, messageMapper, messageRenderer, loadingRenderer, listClassName, onSend, isSending, disableVoice, placeholder, inputClassName, className, }: Props<T>): react_jsx_runtime.JSX.Element;
+
+type MessageMapper$1<TRaw> = (raw: TRaw) => Message;
+type Options$2<TQueryRaw, TMutationRaw> = {
+    queryKey: readonly unknown[];
+    queryFn: () => Promise<TQueryRaw[]>;
+    mutationFn: (content: string) => Promise<TMutationRaw>;
+    map: MessageMapper$1<TQueryRaw | TMutationRaw>;
+    onError?: (error: unknown) => void;
+    staleTime?: number;
+    gcTime?: number;
+};
+declare function useOptimisticChat<TQeuryRaw, TMutationRaw>({ queryKey, queryFn, mutationFn, map, onError, staleTime, gcTime, }: Options$2<TQeuryRaw, TMutationRaw>): {
+    messages: Message[];
+    sendUserMessage: (content: string) => void;
+    isPending: boolean;
+    isInitialLoading: boolean;
+};
+
 interface SpeechGrammar {
     src: string;
     weight: number;
@@ -100,59 +159,42 @@ declare global {
         webkitSpeechRecognition: new () => SpeechRecognition;
     }
 }
-type ButtonConfig = {
-    className?: string;
-    icon?: React.ReactNode;
-};
-type Props$1 = {
-    onSend: (value: string) => void | Promise<void>;
-    disableVoice?: boolean;
-    placeholder?: string;
-    className?: string;
-    inputClassName?: string;
-    micButton?: ButtonConfig;
-    recordingButton?: ButtonConfig;
-    sendButton?: ButtonConfig;
-    sendingButton?: ButtonConfig;
-    maxHeight?: number;
-    value?: string;
-    onChange?: (value: string) => void;
-    isSending: boolean;
-    submitOnEnter?: boolean;
-    speechLang?: string;
+type Options$1 = {
+    lang?: string;
+    onStart?: () => void;
+    onEnd?: () => void;
+    onError?: (error: unknown) => void;
 };
-declare function ChatInput({ onSend, disableVoice, placeholder, className, inputClassName, micButton, recordingButton, sendButton, sendingButton, maxHeight, value, onChange, isSending, submitOnEnter, speechLang, }: Props$1): react_jsx_runtime.JSX.Element;
-
-type Props<T> = {
-    messages: T[];
-    messageMapper?: (msg: T) => Message;
-    messageRenderer?: (msg: Message) => React.ReactNode;
-    loadingRenderer?: React.ReactNode;
-    listClassName?: string;
-    onSend: (value: string) => void | Promise<void>;
-    isSending: boolean;
-    disableVoice?: boolean;
-    placeholder?: string;
-    inputClassName?: string;
-    className?: string;
+declare function useBrowserSpeechRecognition({ lang, onStart, onEnd, onError, }?: Options$1): {
+    start: () => void;
+    stop: () => void;
+    isRecording: boolean;
+    onTranscript: (text: string) => void;
 };
-declare function ChatContainer<T>({ messages, messageMapper, messageRenderer, loadingRenderer, listClassName, onSend, isSending, disableVoice, placeholder, inputClassName, className, }: Props<T>): react_jsx_runtime.JSX.Element;
 
 type MessageMapper<TRaw> = (raw: TRaw) => Message;
+type VoiceRecognitionController = {
+    start: () => void;
+    stop: () => void;
+    isRecording: boolean;
+    onTranscript: (text: string) => void;
+};
 type Options<TQueryRaw, TMutationRaw> = {
     queryKey: readonly unknown[];
     queryFn: () => Promise<TQueryRaw[]>;
     mutationFn: (content: string) => Promise<TMutationRaw>;
     map: MessageMapper<TQueryRaw | TMutationRaw>;
+    voice: VoiceRecognitionController;
     onError?: (error: unknown) => void;
     staleTime?: number;
     gcTime?: number;
 };
-declare function useOptimisticChat<TQeuryRaw, TMutationRaw>({ queryKey, queryFn, mutationFn, map, onError, staleTime, gcTime, }: Options<TQeuryRaw, TMutationRaw>): {
+declare function useVoiceOptimisticChat<TQeuryRaw, TMutationRaw>({ queryKey, queryFn, mutationFn, map, voice, onError, staleTime, gcTime, }: Options<TQeuryRaw, TMutationRaw>): {
     messages: Message[];
-    sendUserMessage: (content: string) => void;
     isPending: boolean;
     isInitialLoading: boolean;
+    startRecording: () => Promise<void>;
+    stopRecording: () => void;
 };
 
-export { ChatContainer, ChatInput, ChatList, ChatMessage, LoadingSpinner, type Message, SendingDots, useOptimisticChat };
+export { ChatContainer, ChatInput, ChatList, ChatMessage, LoadingSpinner, type Message, SendingDots, useBrowserSpeechRecognition, useOptimisticChat, useVoiceOptimisticChat };

package/dist/index.d.ts

@@ -43,6 +43,65 @@ type Props$2<T> = {
 };
 declare function ChatList<T>({ messages, messageMapper, messageRenderer, className, loadingRenderer, }: Props$2<T>): react_jsx_runtime.JSX.Element;
 
+type VoiceRecognitionController$1 = {
+    start: () => void;
+    stop: () => void;
+    isRecording: boolean;
+};
+type ButtonConfig = {
+    className?: string;
+    icon?: React.ReactNode;
+};
+type Props$1 = {
+    onSend: (value: string) => void | Promise<void>;
+    voice?: boolean | VoiceRecognitionController$1;
+    placeholder?: string;
+    className?: string;
+    inputClassName?: string;
+    micButton?: ButtonConfig;
+    recordingButton?: ButtonConfig;
+    sendButton?: ButtonConfig;
+    sendingButton?: ButtonConfig;
+    maxHeight?: number;
+    value?: string;
+    onChange?: (value: string) => void;
+    isSending: boolean;
+    submitOnEnter?: boolean;
+};
+declare function ChatInput({ onSend, voice, placeholder, className, inputClassName, micButton, recordingButton, sendButton, sendingButton, maxHeight, value, onChange, isSending, submitOnEnter, }: Props$1): react_jsx_runtime.JSX.Element;
+
+type Props<T> = {
+    messages: T[];
+    messageMapper?: (msg: T) => Message;
+    messageRenderer?: (msg: Message) => React.ReactNode;
+    loadingRenderer?: React.ReactNode;
+    listClassName?: string;
+    onSend: (value: string) => void | Promise<void>;
+    isSending: boolean;
+    disableVoice?: boolean;
+    placeholder?: string;
+    inputClassName?: string;
+    className?: string;
+};
+declare function ChatContainer<T>({ messages, messageMapper, messageRenderer, loadingRenderer, listClassName, onSend, isSending, disableVoice, placeholder, inputClassName, className, }: Props<T>): react_jsx_runtime.JSX.Element;
+
+type MessageMapper$1<TRaw> = (raw: TRaw) => Message;
+type Options$2<TQueryRaw, TMutationRaw> = {
+    queryKey: readonly unknown[];
+    queryFn: () => Promise<TQueryRaw[]>;
+    mutationFn: (content: string) => Promise<TMutationRaw>;
+    map: MessageMapper$1<TQueryRaw | TMutationRaw>;
+    onError?: (error: unknown) => void;
+    staleTime?: number;
+    gcTime?: number;
+};
+declare function useOptimisticChat<TQeuryRaw, TMutationRaw>({ queryKey, queryFn, mutationFn, map, onError, staleTime, gcTime, }: Options$2<TQeuryRaw, TMutationRaw>): {
+    messages: Message[];
+    sendUserMessage: (content: string) => void;
+    isPending: boolean;
+    isInitialLoading: boolean;
+};
+
 interface SpeechGrammar {
     src: string;
     weight: number;
@@ -100,59 +159,42 @@ declare global {
         webkitSpeechRecognition: new () => SpeechRecognition;
     }
 }
-type ButtonConfig = {
-    className?: string;
-    icon?: React.ReactNode;
-};
-type Props$1 = {
-    onSend: (value: string) => void | Promise<void>;
-    disableVoice?: boolean;
-    placeholder?: string;
-    className?: string;
-    inputClassName?: string;
-    micButton?: ButtonConfig;
-    recordingButton?: ButtonConfig;
-    sendButton?: ButtonConfig;
-    sendingButton?: ButtonConfig;
-    maxHeight?: number;
-    value?: string;
-    onChange?: (value: string) => void;
-    isSending: boolean;
-    submitOnEnter?: boolean;
-    speechLang?: string;
+type Options$1 = {
+    lang?: string;
+    onStart?: () => void;
+    onEnd?: () => void;
+    onError?: (error: unknown) => void;
 };
-declare function ChatInput({ onSend, disableVoice, placeholder, className, inputClassName, micButton, recordingButton, sendButton, sendingButton, maxHeight, value, onChange, isSending, submitOnEnter, speechLang, }: Props$1): react_jsx_runtime.JSX.Element;
-
-type Props<T> = {
-    messages: T[];
-    messageMapper?: (msg: T) => Message;
-    messageRenderer?: (msg: Message) => React.ReactNode;
-    loadingRenderer?: React.ReactNode;
-    listClassName?: string;
-    onSend: (value: string) => void | Promise<void>;
-    isSending: boolean;
-    disableVoice?: boolean;
-    placeholder?: string;
-    inputClassName?: string;
-    className?: string;
+declare function useBrowserSpeechRecognition({ lang, onStart, onEnd, onError, }?: Options$1): {
+    start: () => void;
+    stop: () => void;
+    isRecording: boolean;
+    onTranscript: (text: string) => void;
 };
-declare function ChatContainer<T>({ messages, messageMapper, messageRenderer, loadingRenderer, listClassName, onSend, isSending, disableVoice, placeholder, inputClassName, className, }: Props<T>): react_jsx_runtime.JSX.Element;
 
 type MessageMapper<TRaw> = (raw: TRaw) => Message;
+type VoiceRecognitionController = {
+    start: () => void;
+    stop: () => void;
+    isRecording: boolean;
+    onTranscript: (text: string) => void;
+};
 type Options<TQueryRaw, TMutationRaw> = {
     queryKey: readonly unknown[];
     queryFn: () => Promise<TQueryRaw[]>;
     mutationFn: (content: string) => Promise<TMutationRaw>;
     map: MessageMapper<TQueryRaw | TMutationRaw>;
+    voice: VoiceRecognitionController;
     onError?: (error: unknown) => void;
     staleTime?: number;
     gcTime?: number;
 };
-declare function useOptimisticChat<TQeuryRaw, TMutationRaw>({ queryKey, queryFn, mutationFn, map, onError, staleTime, gcTime, }: Options<TQeuryRaw, TMutationRaw>): {
+declare function useVoiceOptimisticChat<TQeuryRaw, TMutationRaw>({ queryKey, queryFn, mutationFn, map, voice, onError, staleTime, gcTime, }: Options<TQeuryRaw, TMutationRaw>): {
     messages: Message[];
-    sendUserMessage: (content: string) => void;
     isPending: boolean;
     isInitialLoading: boolean;
+    startRecording: () => Promise<void>;
+    stopRecording: () => void;
 };
 
-export { ChatContainer, ChatInput, ChatList, ChatMessage, LoadingSpinner, type Message, SendingDots, useOptimisticChat };
+export { ChatContainer, ChatInput, ChatList, ChatMessage, LoadingSpinner, type Message, SendingDots, useBrowserSpeechRecognition, useOptimisticChat, useVoiceOptimisticChat };

package/dist/index.js

@@ -53,7 +53,9 @@ __export(index_exports, {
   ChatMessage: () => ChatMessage,
   LoadingSpinner: () => LoadingSpinner,
   SendingDots: () => SendingDots,
-  useOptimisticChat: () => useOptimisticChat
+  useBrowserSpeechRecognition: () => useBrowserSpeechRecognition,
+  useOptimisticChat: () => useOptimisticChat,
+  useVoiceOptimisticChat: () => useVoiceOptimisticChat
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -220,11 +222,82 @@ function ChatList({
 }
 
 // src/components/ChatInput.tsx
+var import_react4 = require("react");
+
+// src/hooks/useBrowserSpeechRecognition.ts
 var import_react3 = require("react");
+function useBrowserSpeechRecognition({
+  lang = "ko-KR",
+  onStart,
+  onEnd,
+  onError
+} = {}) {
+  const [isRecording, setIsRecording] = (0, import_react3.useState)(false);
+  const recognitionRef = (0, import_react3.useRef)(null);
+  const onTranscriptRef = (0, import_react3.useRef)(void 0);
+  const start = () => {
+    const Speech = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!Speech) {
+      onError == null ? void 0 : onError(new Error("SpeechRecognition not supported"));
+      return;
+    }
+    const recognition = new Speech();
+    recognition.lang = lang;
+    recognition.continuous = true;
+    recognition.interimResults = true;
+    recognition.onstart = () => {
+      setIsRecording(true);
+      onStart == null ? void 0 : onStart();
+    };
+    recognition.onend = () => {
+      setIsRecording(false);
+      onEnd == null ? void 0 : onEnd();
+    };
+    recognition.onresult = (event) => {
+      var _a;
+      const transcript = Array.from(event.results).map((r) => {
+        var _a2;
+        return (_a2 = r[0]) == null ? void 0 : _a2.transcript;
+      }).join("");
+      (_a = onTranscriptRef.current) == null ? void 0 : _a.call(onTranscriptRef, transcript);
+    };
+    recognition.onerror = (e) => {
+      onError == null ? void 0 : onError(e);
+    };
+    recognitionRef.current = recognition;
+    recognition.start();
+  };
+  const stop = () => {
+    var _a;
+    (_a = recognitionRef.current) == null ? void 0 : _a.stop();
+  };
+  (0, import_react3.useEffect)(() => {
+    return () => {
+      var _a;
+      (_a = recognitionRef.current) == null ? void 0 : _a.stop();
+      recognitionRef.current = null;
+    };
+  }, []);
+  return {
+    start,
+    // 음성 인식 시작
+    stop,
+    // 음성 인식 종료
+    isRecording,
+    // 음성 인식 상태
+    // 외부에서 음성 인식 결과(transcript) 처리 로직을 주입하기 위한 setter
+    // 음성 인식 이벤트는 React 생명주기와 무관하게 발생하므로 ref로 관리한다
+    set onTranscript(fn) {
+      onTranscriptRef.current = fn;
+    }
+  };
+}
+
+// src/components/ChatInput.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function ChatInput({
   onSend,
-  disableVoice = false,
+  voice = true,
   placeholder = "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD558\uC138\uC694...",
   className = "",
   inputClassName = "",
@@ -236,34 +309,29 @@ function ChatInput({
   value,
   onChange,
   isSending,
-  submitOnEnter = false,
-  speechLang = "ko-KR"
+  submitOnEnter = false
 }) {
-  const [innerText, setInnerText] = (0, import_react3.useState)("");
-  const [isRecording, setIsRecording] = (0, import_react3.useState)(false);
-  const textareaRef = (0, import_react3.useRef)(null);
+  var _a;
+  const [innerText, setInnerText] = (0, import_react4.useState)("");
+  const textareaRef = (0, import_react4.useRef)(null);
   const isControlled = value !== void 0;
   const text = isControlled ? value : innerText;
   const isEmpty = text.trim().length === 0;
-  const recognition = (0, import_react3.useRef)(null);
-  const isVoiceMode = !disableVoice && !isSending && (isEmpty || isRecording);
-  (0, import_react3.useEffect)(() => {
-    return () => {
-      const r = recognition.current;
-      if (r) {
-        r.onresult = null;
-        r.onstart = null;
-        r.onend = null;
-        try {
-          r.stop();
-        } catch (e) {
-          console.warn("SpeechRecognition stop error:", e);
-        }
+  const defaultVoice = useBrowserSpeechRecognition();
+  (0, import_react4.useEffect)(() => {
+    if (!defaultVoice) return;
+    defaultVoice.onTranscript = (text2) => {
+      if (!isControlled) {
+        setInnerText(text2);
       }
-      recognition.current = null;
+      onChange == null ? void 0 : onChange(text2);
     };
-  }, []);
-  (0, import_react3.useEffect)(() => {
+  }, [defaultVoice, isControlled, onChange]);
+  const voiceController = voice === true ? defaultVoice : typeof voice === "object" ? voice : null;
+  const isRecording = (_a = voiceController == null ? void 0 : voiceController.isRecording) != null ? _a : false;
+  const isVoiceEnabled = Boolean(voiceController);
+  const isVoiceMode = isVoiceEnabled && !isSending && (isEmpty || isRecording);
+  (0, import_react4.useEffect)(() => {
     const el = textareaRef.current;
     if (!el) return;
     el.style.height = "auto";
@@ -299,53 +367,21 @@ function ChatInput({
     }
   };
   const handleRecord = () => {
-    var _a, _b;
-    try {
-      if (!isRecording) {
-        const Speech = window.SpeechRecognition || window.webkitSpeechRecognition;
-        if (!Speech) {
-          console.error("Browser does not support SpeechRecognition");
-          alert("\uD604\uC7AC \uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C\uB294 \uC74C\uC131 \uC778\uC2DD \uAE30\uB2A5\uC744 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
-          return;
-        }
-        recognition.current = new Speech();
-        recognition.current.lang = speechLang;
-        recognition.current.continuous = true;
-        recognition.current.interimResults = true;
-        recognition.current.onstart = () => {
-          setIsRecording(true);
-        };
-        recognition.current.onend = () => {
-          setIsRecording(false);
-        };
-        recognition.current.onresult = (event) => {
-          const newTranscript = Array.from(event.results).map((r) => {
-            var _a2;
-            return (_a2 = r[0]) == null ? void 0 : _a2.transcript;
-          }).join("");
-          setInnerText(newTranscript);
-        };
-        (_a = recognition.current) == null ? void 0 : _a.start();
-      } else {
-        (_b = recognition.current) == null ? void 0 : _b.stop();
-      }
-    } catch (e) {
-      console.error("Speech Recognition error: ", e);
-      alert("\uC74C\uC131 \uC785\uB825\uC744 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. \uD14D\uC2A4\uD2B8\uB85C \uC785\uB825\uD574\uC8FC\uC138\uC694.");
-      setIsRecording(false);
+    if (!voiceController) return;
+    if (isRecording) {
+      voiceController.stop();
+    } else {
+      voiceController.start();
     }
   };
   const getActivityLayer = () => {
     if (isSending) return "sending";
-    if (!disableVoice) {
+    if (isVoiceEnabled) {
       if (isRecording) return "recording";
       if (isVoiceMode) return "mic";
       return "send";
     }
-    if (disableVoice) {
-      if (!isEmpty) return "send";
-      return null;
-    }
+    if (!isEmpty) return "send";
     return null;
   };
   const activeLayer = getActivityLayer();
@@ -480,7 +516,7 @@ function ChatInput({
 }
 
 // src/components/ChatContainer.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function ChatContainer({
   messages,
@@ -495,9 +531,9 @@ function ChatContainer({
   inputClassName,
   className
 }) {
-  const [isAtBottom, setIsAtBottom] = (0, import_react4.useState)(true);
-  const scrollRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const [isAtBottom, setIsAtBottom] = (0, import_react5.useState)(true);
+  const scrollRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     const el = scrollRef.current;
     if (!el) return;
     el.scrollTop = el.scrollHeight;
@@ -508,7 +544,7 @@ function ChatContainer({
     el.addEventListener("scroll", handleScroll);
     return () => el.removeEventListener("scroll", handleScroll);
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const el = scrollRef.current;
     if (!el) return;
     if (isAtBottom) {
@@ -590,7 +626,7 @@ function ChatContainer({
 
 // src/hooks/useOptimisticChat.ts
 var import_react_query = require("@tanstack/react-query");
-var import_react5 = require("react");
+var import_react6 = require("react");
 function useOptimisticChat({
   queryKey,
   queryFn,
@@ -600,7 +636,7 @@ function useOptimisticChat({
   staleTime = 0,
   gcTime = 0
 }) {
-  const [isPending, setIsPending] = (0, import_react5.useState)(false);
+  const [isPending, setIsPending] = (0, import_react6.useState)(false);
   const queryClient = (0, import_react_query.useQueryClient)();
   const {
     data: messages = [],
@@ -686,6 +722,145 @@ function useOptimisticChat({
     // 초기 로딩 상태
   };
 }
+
+// src/hooks/useVoiceOptimisticChat.ts
+var import_react_query2 = require("@tanstack/react-query");
+var import_react7 = require("react");
+function useVoiceOptimisticChat({
+  queryKey,
+  queryFn,
+  mutationFn,
+  map,
+  voice,
+  onError,
+  staleTime = 0,
+  gcTime = 0
+}) {
+  const [isPending, setIsPending] = (0, import_react7.useState)(false);
+  const queryClient = (0, import_react_query2.useQueryClient)();
+  const currentTextRef = (0, import_react7.useRef)("");
+  const rollbackRef = (0, import_react7.useRef)(void 0);
+  const {
+    data: messages = [],
+    isLoading: isInitialLoading
+  } = (0, import_react_query2.useQuery)({
+    queryKey,
+    queryFn: async () => {
+      const rawList = await queryFn();
+      return rawList.map(map);
+    },
+    staleTime,
+    gcTime
+  });
+  const mutation = (0, import_react_query2.useMutation)({
+    mutationFn,
+    // (content: string) => Promise<TMutationRaw>
+    onMutate: async () => {
+      setIsPending(true);
+      const prev = queryClient.getQueryData(queryKey);
+      if (prev) {
+        await queryClient.cancelQueries({ queryKey });
+      }
+      queryClient.setQueryData(queryKey, (old) => {
+        const base = old != null ? old : [];
+        return [
+          ...base,
+          // AI placeholder 추가
+          {
+            id: crypto.randomUUID(),
+            role: "AI",
+            content: "",
+            isLoading: true
+          }
+        ];
+      });
+      return { prev };
+    },
+    onSuccess: (rawAiResponse) => {
+      const aiMessage = map(rawAiResponse);
+      queryClient.setQueryData(queryKey, (old) => {
+        if (!old || old.length === 0) {
+          return [aiMessage];
+        }
+        const next = [...old];
+        const lastIndex = next.length - 1;
+        next[lastIndex] = __spreadProps(__spreadValues(__spreadValues({}, next[lastIndex]), aiMessage), {
+          isLoading: false
+        });
+        return next;
+      });
+      setIsPending(false);
+    },
+    onError: (error, _variables, context) => {
+      setIsPending(false);
+      if (context == null ? void 0 : context.prev) {
+        queryClient.setQueryData(queryKey, context.prev);
+      }
+      onError == null ? void 0 : onError(error);
+    },
+    // mutation 이후 서버 기준 최신 데이터 재동기화
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey });
+    }
+  });
+  const startRecording = async () => {
+    currentTextRef.current = "";
+    const prev = queryClient.getQueryData(queryKey);
+    rollbackRef.current = prev;
+    if (prev) {
+      await queryClient.cancelQueries({ queryKey });
+    }
+    queryClient.setQueryData(queryKey, (old) => [
+      ...old != null ? old : [],
+      {
+        id: crypto.randomUUID(),
+        role: "USER",
+        content: ""
+      }
+    ]);
+    voice.start();
+  };
+  const onTranscript = (text) => {
+    currentTextRef.current = text;
+    queryClient.setQueryData(queryKey, (old) => {
+      var _a;
+      if (!old) return old;
+      const next = [...old];
+      const last = next.length - 1;
+      if (((_a = next[last]) == null ? void 0 : _a.role) !== "USER") return old;
+      next[last] = __spreadProps(__spreadValues({}, next[last]), {
+        content: text
+      });
+      return next;
+    });
+  };
+  (0, import_react7.useEffect)(() => {
+    voice.onTranscript = onTranscript;
+  }, [voice]);
+  const stopRecording = () => {
+    voice.stop();
+    const finalText = currentTextRef.current.trim();
+    if (!finalText) {
+      if (rollbackRef.current) {
+        queryClient.setQueryData(queryKey, rollbackRef.current);
+      }
+      return;
+    }
+    mutation.mutate(finalText);
+  };
+  return {
+    messages,
+    // Message[]
+    isPending,
+    // 사용자가 채팅 전송 후 AI 응답이 올 때까지의 로딩
+    isInitialLoading,
+    // 초기 로딩 상태
+    startRecording,
+    // 음성 인식 시작 함수
+    stopRecording
+    // 음성 인식 종료 함수
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ChatContainer,
@@ -694,5 +869,7 @@ function useOptimisticChat({
   ChatMessage,
   LoadingSpinner,
   SendingDots,
-  useOptimisticChat
+  useBrowserSpeechRecognition,
+  useOptimisticChat,
+  useVoiceOptimisticChat
 });

package/dist/index.mjs

@@ -181,11 +181,82 @@ function ChatList({
 }
 
 // src/components/ChatInput.tsx
-import { useState, useRef, useEffect } from "react";
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
+
+// src/hooks/useBrowserSpeechRecognition.ts
+import { useEffect, useRef, useState } from "react";
+function useBrowserSpeechRecognition({
+  lang = "ko-KR",
+  onStart,
+  onEnd,
+  onError
+} = {}) {
+  const [isRecording, setIsRecording] = useState(false);
+  const recognitionRef = useRef(null);
+  const onTranscriptRef = useRef(void 0);
+  const start = () => {
+    const Speech = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!Speech) {
+      onError == null ? void 0 : onError(new Error("SpeechRecognition not supported"));
+      return;
+    }
+    const recognition = new Speech();
+    recognition.lang = lang;
+    recognition.continuous = true;
+    recognition.interimResults = true;
+    recognition.onstart = () => {
+      setIsRecording(true);
+      onStart == null ? void 0 : onStart();
+    };
+    recognition.onend = () => {
+      setIsRecording(false);
+      onEnd == null ? void 0 : onEnd();
+    };
+    recognition.onresult = (event) => {
+      var _a;
+      const transcript = Array.from(event.results).map((r) => {
+        var _a2;
+        return (_a2 = r[0]) == null ? void 0 : _a2.transcript;
+      }).join("");
+      (_a = onTranscriptRef.current) == null ? void 0 : _a.call(onTranscriptRef, transcript);
+    };
+    recognition.onerror = (e) => {
+      onError == null ? void 0 : onError(e);
+    };
+    recognitionRef.current = recognition;
+    recognition.start();
+  };
+  const stop = () => {
+    var _a;
+    (_a = recognitionRef.current) == null ? void 0 : _a.stop();
+  };
+  useEffect(() => {
+    return () => {
+      var _a;
+      (_a = recognitionRef.current) == null ? void 0 : _a.stop();
+      recognitionRef.current = null;
+    };
+  }, []);
+  return {
+    start,
+    // 음성 인식 시작
+    stop,
+    // 음성 인식 종료
+    isRecording,
+    // 음성 인식 상태
+    // 외부에서 음성 인식 결과(transcript) 처리 로직을 주입하기 위한 setter
+    // 음성 인식 이벤트는 React 생명주기와 무관하게 발생하므로 ref로 관리한다
+    set onTranscript(fn) {
+      onTranscriptRef.current = fn;
+    }
+  };
+}
+
+// src/components/ChatInput.tsx
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function ChatInput({
   onSend,
-  disableVoice = false,
+  voice = true,
   placeholder = "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD558\uC138\uC694...",
   className = "",
   inputClassName = "",
@@ -197,34 +268,29 @@ function ChatInput({
   value,
   onChange,
   isSending,
-  submitOnEnter = false,
-  speechLang = "ko-KR"
+  submitOnEnter = false
 }) {
-  const [innerText, setInnerText] = useState("");
-  const [isRecording, setIsRecording] = useState(false);
-  const textareaRef = useRef(null);
+  var _a;
+  const [innerText, setInnerText] = useState2("");
+  const textareaRef = useRef2(null);
   const isControlled = value !== void 0;
   const text = isControlled ? value : innerText;
   const isEmpty = text.trim().length === 0;
-  const recognition = useRef(null);
-  const isVoiceMode = !disableVoice && !isSending && (isEmpty || isRecording);
-  useEffect(() => {
-    return () => {
-      const r = recognition.current;
-      if (r) {
-        r.onresult = null;
-        r.onstart = null;
-        r.onend = null;
-        try {
-          r.stop();
-        } catch (e) {
-          console.warn("SpeechRecognition stop error:", e);
-        }
+  const defaultVoice = useBrowserSpeechRecognition();
+  useEffect2(() => {
+    if (!defaultVoice) return;
+    defaultVoice.onTranscript = (text2) => {
+      if (!isControlled) {
+        setInnerText(text2);
       }
-      recognition.current = null;
+      onChange == null ? void 0 : onChange(text2);
     };
-  }, []);
-  useEffect(() => {
+  }, [defaultVoice, isControlled, onChange]);
+  const voiceController = voice === true ? defaultVoice : typeof voice === "object" ? voice : null;
+  const isRecording = (_a = voiceController == null ? void 0 : voiceController.isRecording) != null ? _a : false;
+  const isVoiceEnabled = Boolean(voiceController);
+  const isVoiceMode = isVoiceEnabled && !isSending && (isEmpty || isRecording);
+  useEffect2(() => {
     const el = textareaRef.current;
     if (!el) return;
     el.style.height = "auto";
@@ -260,53 +326,21 @@ function ChatInput({
     }
   };
   const handleRecord = () => {
-    var _a, _b;
-    try {
-      if (!isRecording) {
-        const Speech = window.SpeechRecognition || window.webkitSpeechRecognition;
-        if (!Speech) {
-          console.error("Browser does not support SpeechRecognition");
-          alert("\uD604\uC7AC \uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C\uB294 \uC74C\uC131 \uC778\uC2DD \uAE30\uB2A5\uC744 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
-          return;
-        }
-        recognition.current = new Speech();
-        recognition.current.lang = speechLang;
-        recognition.current.continuous = true;
-        recognition.current.interimResults = true;
-        recognition.current.onstart = () => {
-          setIsRecording(true);
-        };
-        recognition.current.onend = () => {
-          setIsRecording(false);
-        };
-        recognition.current.onresult = (event) => {
-          const newTranscript = Array.from(event.results).map((r) => {
-            var _a2;
-            return (_a2 = r[0]) == null ? void 0 : _a2.transcript;
-          }).join("");
-          setInnerText(newTranscript);
-        };
-        (_a = recognition.current) == null ? void 0 : _a.start();
-      } else {
-        (_b = recognition.current) == null ? void 0 : _b.stop();
-      }
-    } catch (e) {
-      console.error("Speech Recognition error: ", e);
-      alert("\uC74C\uC131 \uC785\uB825\uC744 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. \uD14D\uC2A4\uD2B8\uB85C \uC785\uB825\uD574\uC8FC\uC138\uC694.");
-      setIsRecording(false);
+    if (!voiceController) return;
+    if (isRecording) {
+      voiceController.stop();
+    } else {
+      voiceController.start();
     }
   };
   const getActivityLayer = () => {
     if (isSending) return "sending";
-    if (!disableVoice) {
+    if (isVoiceEnabled) {
       if (isRecording) return "recording";
       if (isVoiceMode) return "mic";
       return "send";
     }
-    if (disableVoice) {
-      if (!isEmpty) return "send";
-      return null;
-    }
+    if (!isEmpty) return "send";
     return null;
   };
   const activeLayer = getActivityLayer();
@@ -441,7 +475,7 @@ function ChatInput({
 }
 
 // src/components/ChatContainer.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function ChatContainer({
   messages,
@@ -456,9 +490,9 @@ function ChatContainer({
   inputClassName,
   className
 }) {
-  const [isAtBottom, setIsAtBottom] = useState2(true);
-  const scrollRef = useRef2(null);
-  useEffect2(() => {
+  const [isAtBottom, setIsAtBottom] = useState3(true);
+  const scrollRef = useRef3(null);
+  useEffect3(() => {
     const el = scrollRef.current;
     if (!el) return;
     el.scrollTop = el.scrollHeight;
@@ -469,7 +503,7 @@ function ChatContainer({
     el.addEventListener("scroll", handleScroll);
     return () => el.removeEventListener("scroll", handleScroll);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     const el = scrollRef.current;
     if (!el) return;
     if (isAtBottom) {
@@ -551,7 +585,7 @@ function ChatContainer({
 
 // src/hooks/useOptimisticChat.ts
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 function useOptimisticChat({
   queryKey,
   queryFn,
@@ -561,7 +595,7 @@ function useOptimisticChat({
   staleTime = 0,
   gcTime = 0
 }) {
-  const [isPending, setIsPending] = useState3(false);
+  const [isPending, setIsPending] = useState4(false);
   const queryClient = useQueryClient();
   const {
     data: messages = [],
@@ -647,6 +681,145 @@ function useOptimisticChat({
     // 초기 로딩 상태
   };
 }
+
+// src/hooks/useVoiceOptimisticChat.ts
+import { useMutation as useMutation2, useQuery as useQuery2, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
+function useVoiceOptimisticChat({
+  queryKey,
+  queryFn,
+  mutationFn,
+  map,
+  voice,
+  onError,
+  staleTime = 0,
+  gcTime = 0
+}) {
+  const [isPending, setIsPending] = useState5(false);
+  const queryClient = useQueryClient2();
+  const currentTextRef = useRef4("");
+  const rollbackRef = useRef4(void 0);
+  const {
+    data: messages = [],
+    isLoading: isInitialLoading
+  } = useQuery2({
+    queryKey,
+    queryFn: async () => {
+      const rawList = await queryFn();
+      return rawList.map(map);
+    },
+    staleTime,
+    gcTime
+  });
+  const mutation = useMutation2({
+    mutationFn,
+    // (content: string) => Promise<TMutationRaw>
+    onMutate: async () => {
+      setIsPending(true);
+      const prev = queryClient.getQueryData(queryKey);
+      if (prev) {
+        await queryClient.cancelQueries({ queryKey });
+      }
+      queryClient.setQueryData(queryKey, (old) => {
+        const base = old != null ? old : [];
+        return [
+          ...base,
+          // AI placeholder 추가
+          {
+            id: crypto.randomUUID(),
+            role: "AI",
+            content: "",
+            isLoading: true
+          }
+        ];
+      });
+      return { prev };
+    },
+    onSuccess: (rawAiResponse) => {
+      const aiMessage = map(rawAiResponse);
+      queryClient.setQueryData(queryKey, (old) => {
+        if (!old || old.length === 0) {
+          return [aiMessage];
+        }
+        const next = [...old];
+        const lastIndex = next.length - 1;
+        next[lastIndex] = __spreadProps(__spreadValues(__spreadValues({}, next[lastIndex]), aiMessage), {
+          isLoading: false
+        });
+        return next;
+      });
+      setIsPending(false);
+    },
+    onError: (error, _variables, context) => {
+      setIsPending(false);
+      if (context == null ? void 0 : context.prev) {
+        queryClient.setQueryData(queryKey, context.prev);
+      }
+      onError == null ? void 0 : onError(error);
+    },
+    // mutation 이후 서버 기준 최신 데이터 재동기화
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey });
+    }
+  });
+  const startRecording = async () => {
+    currentTextRef.current = "";
+    const prev = queryClient.getQueryData(queryKey);
+    rollbackRef.current = prev;
+    if (prev) {
+      await queryClient.cancelQueries({ queryKey });
+    }
+    queryClient.setQueryData(queryKey, (old) => [
+      ...old != null ? old : [],
+      {
+        id: crypto.randomUUID(),
+        role: "USER",
+        content: ""
+      }
+    ]);
+    voice.start();
+  };
+  const onTranscript = (text) => {
+    currentTextRef.current = text;
+    queryClient.setQueryData(queryKey, (old) => {
+      var _a;
+      if (!old) return old;
+      const next = [...old];
+      const last = next.length - 1;
+      if (((_a = next[last]) == null ? void 0 : _a.role) !== "USER") return old;
+      next[last] = __spreadProps(__spreadValues({}, next[last]), {
+        content: text
+      });
+      return next;
+    });
+  };
+  useEffect4(() => {
+    voice.onTranscript = onTranscript;
+  }, [voice]);
+  const stopRecording = () => {
+    voice.stop();
+    const finalText = currentTextRef.current.trim();
+    if (!finalText) {
+      if (rollbackRef.current) {
+        queryClient.setQueryData(queryKey, rollbackRef.current);
+      }
+      return;
+    }
+    mutation.mutate(finalText);
+  };
+  return {
+    messages,
+    // Message[]
+    isPending,
+    // 사용자가 채팅 전송 후 AI 응답이 올 때까지의 로딩
+    isInitialLoading,
+    // 초기 로딩 상태
+    startRecording,
+    // 음성 인식 시작 함수
+    stopRecording
+    // 음성 인식 종료 함수
+  };
+}
 export {
   ChatContainer,
   ChatInput,
@@ -654,5 +827,7 @@ export {
   ChatMessage,
   LoadingSpinner,
   SendingDots,
-  useOptimisticChat
+  useBrowserSpeechRecognition,
+  useOptimisticChat,
+  useVoiceOptimisticChat
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-optimistic-chat",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",