react-optimistic-chat 1.1.0 → 2.0.0

package/dist/index.d.mts

@@ -1,13 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
+import * as _tanstack_query_core from '@tanstack/query-core';
+import { InfiniteData } from '@tanstack/react-query';
 
 type ChatRole = "AI" | "USER";
-type Message = {
+type BaseMessage = {
     id: number | string;
     role: ChatRole;
     content: string;
     isLoading?: boolean;
 };
+type Message<T = {}> = BaseMessage & T;
 
 type Size$1 = 'xs' | 'sm' | 'md' | 'lg';
 type Props$5 = {
@@ -34,14 +37,15 @@ type Props$3 = Message & {
 };
 declare function ChatMessage({ id, role, content, isLoading, wrapperClassName, icon, aiIconWrapperClassName, aiIconColor, bubbleClassName, aiBubbleClassName, userBubbleClassName, position, loadingRenderer, }: Props$3): react_jsx_runtime.JSX.Element;
 
-type Props$2<T> = {
+type MessagePatch = Partial<BaseMessage> & Record<string, unknown>;
+type Props$2<T extends Message = Message> = {
     messages: T[];
-    messageMapper?: (msg: T) => Message;
-    messageRenderer?: (msg: Message) => React$1.ReactNode;
+    messageMapper?: (msg: T) => MessagePatch;
+    messageRenderer?: (msg: T) => React$1.ReactNode;
     className?: string;
     loadingRenderer?: React$1.ReactNode;
 };
-declare function ChatList<T>({ messages, messageMapper, messageRenderer, className, loadingRenderer, }: Props$2<T>): react_jsx_runtime.JSX.Element;
+declare function ChatList<T extends Message>({ messages, messageMapper, messageRenderer, className, loadingRenderer, }: Props$2<T>): react_jsx_runtime.JSX.Element;
 
 type VoiceRecognitionController$1 = {
     start: () => void;
@@ -70,9 +74,15 @@ type Props$1 = {
 };
 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> = {
+type MessageProps = {
+    messages: Message[];
+    messageMapper?: never;
+};
+type RawProps<T> = {
     messages: T[];
-    messageMapper?: (msg: T) => Message;
+    messageMapper: (msg: T) => Message;
+};
+type CommonProps = {
     messageRenderer?: (msg: Message) => React.ReactNode;
     loadingRenderer?: React.ReactNode;
     listClassName?: string;
@@ -81,25 +91,39 @@ type Props<T> = {
     disableVoice?: boolean;
     placeholder?: string;
     inputClassName?: string;
+    fetchNextPage?: () => void;
+    hasNextPage?: boolean;
+    isFetchingNextPage?: boolean;
     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 Props<T> = CommonProps & (MessageProps | RawProps<T>);
+declare function ChatContainer<T>(props: Props<T>): react_jsx_runtime.JSX.Element;
 
-type MessageMapper$1<TRaw> = (raw: TRaw) => Message;
-type Options$2<TQueryRaw, TMutationRaw> = {
+type ExtraFromRaw$1<TRaw> = Omit<TRaw, keyof BaseMessage>;
+type CustomMessage$1<TCustom> = BaseMessage & {
+    custom: TCustom;
+};
+type MessageMapper$1<TRaw> = CustomMessage$1<ExtraFromRaw$1<TRaw>>;
+type MessageMapperResult$1 = Pick<BaseMessage, "id" | "role" | "content">;
+type Options$2<TRaw> = {
     queryKey: readonly unknown[];
-    queryFn: () => Promise<TQueryRaw[]>;
-    mutationFn: (content: string) => Promise<TMutationRaw>;
-    map: MessageMapper$1<TQueryRaw | TMutationRaw>;
+    queryFn: (pageParam: unknown) => Promise<TRaw[]>;
+    initialPageParam: unknown;
+    getNextPageParam: (lastPage: MessageMapper$1<TRaw>[], allPages: MessageMapper$1<TRaw>[][]) => unknown;
+    mutationFn: (content: string) => Promise<TRaw>;
+    map: (raw: TRaw) => MessageMapperResult$1;
     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[];
+declare function useChat<TRaw extends object>({ queryKey, queryFn, initialPageParam, getNextPageParam, mutationFn, map, onError, staleTime, gcTime, }: Options$2<TRaw>): {
+    messages: MessageMapper$1<TRaw>[];
     sendUserMessage: (content: string) => void;
     isPending: boolean;
     isInitialLoading: boolean;
+    fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<InfiniteData<MessageMapper$1<TRaw>[], unknown>, Error>>;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
 };
 
 interface SpeechGrammar {
@@ -172,29 +196,39 @@ declare function useBrowserSpeechRecognition({ lang, onStart, onEnd, onError, }?
     onTranscript: (text: string) => void;
 };
 
-type MessageMapper<TRaw> = (raw: TRaw) => Message;
 type VoiceRecognitionController = {
     start: () => void;
     stop: () => void;
     isRecording: boolean;
     onTranscript: (text: string) => void;
 };
-type Options<TQueryRaw, TMutationRaw> = {
+type ExtraFromRaw<TRaw> = Omit<TRaw, keyof BaseMessage>;
+type CustomMessage<TCustom> = BaseMessage & {
+    custom: TCustom;
+};
+type MessageMapper<TRaw> = CustomMessage<ExtraFromRaw<TRaw>>;
+type MessageMapperResult = Pick<BaseMessage, "id" | "role" | "content">;
+type Options<TRaw> = {
     queryKey: readonly unknown[];
-    queryFn: () => Promise<TQueryRaw[]>;
-    mutationFn: (content: string) => Promise<TMutationRaw>;
-    map: MessageMapper<TQueryRaw | TMutationRaw>;
+    queryFn: (pageParam: unknown) => Promise<TRaw[]>;
+    initialPageParam: unknown;
+    getNextPageParam: (lastPage: MessageMapper<TRaw>[], allPages: MessageMapper<TRaw>[][]) => unknown;
+    mutationFn: (content: string) => Promise<TRaw>;
+    map: (raw: TRaw) => MessageMapperResult;
     voice: VoiceRecognitionController;
     onError?: (error: unknown) => void;
     staleTime?: number;
     gcTime?: number;
 };
-declare function useVoiceOptimisticChat<TQeuryRaw, TMutationRaw>({ queryKey, queryFn, mutationFn, map, voice, onError, staleTime, gcTime, }: Options<TQeuryRaw, TMutationRaw>): {
-    messages: Message[];
+declare function useVoiceChat<TRaw extends object>({ queryKey, queryFn, initialPageParam, getNextPageParam, mutationFn, map, voice, onError, staleTime, gcTime, }: Options<TRaw>): {
+    messages: MessageMapper<TRaw>[];
     isPending: boolean;
     isInitialLoading: boolean;
     startRecording: () => Promise<void>;
     stopRecording: () => void;
+    fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<InfiniteData<MessageMapper<TRaw>[], unknown>, Error>>;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
 };
 
-export { ChatContainer, ChatInput, ChatList, ChatMessage, LoadingSpinner, type Message, SendingDots, useBrowserSpeechRecognition, useOptimisticChat, useVoiceOptimisticChat };
+export { ChatContainer, ChatInput, ChatList, ChatMessage, LoadingSpinner, type Message, SendingDots, useBrowserSpeechRecognition, useChat, useVoiceChat };

package/dist/index.d.ts

@@ -1,13 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
+import * as _tanstack_query_core from '@tanstack/query-core';
+import { InfiniteData } from '@tanstack/react-query';
 
 type ChatRole = "AI" | "USER";
-type Message = {
+type BaseMessage = {
     id: number | string;
     role: ChatRole;
     content: string;
     isLoading?: boolean;
 };
+type Message<T = {}> = BaseMessage & T;
 
 type Size$1 = 'xs' | 'sm' | 'md' | 'lg';
 type Props$5 = {
@@ -34,14 +37,15 @@ type Props$3 = Message & {
 };
 declare function ChatMessage({ id, role, content, isLoading, wrapperClassName, icon, aiIconWrapperClassName, aiIconColor, bubbleClassName, aiBubbleClassName, userBubbleClassName, position, loadingRenderer, }: Props$3): react_jsx_runtime.JSX.Element;
 
-type Props$2<T> = {
+type MessagePatch = Partial<BaseMessage> & Record<string, unknown>;
+type Props$2<T extends Message = Message> = {
     messages: T[];
-    messageMapper?: (msg: T) => Message;
-    messageRenderer?: (msg: Message) => React$1.ReactNode;
+    messageMapper?: (msg: T) => MessagePatch;
+    messageRenderer?: (msg: T) => React$1.ReactNode;
     className?: string;
     loadingRenderer?: React$1.ReactNode;
 };
-declare function ChatList<T>({ messages, messageMapper, messageRenderer, className, loadingRenderer, }: Props$2<T>): react_jsx_runtime.JSX.Element;
+declare function ChatList<T extends Message>({ messages, messageMapper, messageRenderer, className, loadingRenderer, }: Props$2<T>): react_jsx_runtime.JSX.Element;
 
 type VoiceRecognitionController$1 = {
     start: () => void;
@@ -70,9 +74,15 @@ type Props$1 = {
 };
 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> = {
+type MessageProps = {
+    messages: Message[];
+    messageMapper?: never;
+};
+type RawProps<T> = {
     messages: T[];
-    messageMapper?: (msg: T) => Message;
+    messageMapper: (msg: T) => Message;
+};
+type CommonProps = {
     messageRenderer?: (msg: Message) => React.ReactNode;
     loadingRenderer?: React.ReactNode;
     listClassName?: string;
@@ -81,25 +91,39 @@ type Props<T> = {
     disableVoice?: boolean;
     placeholder?: string;
     inputClassName?: string;
+    fetchNextPage?: () => void;
+    hasNextPage?: boolean;
+    isFetchingNextPage?: boolean;
     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 Props<T> = CommonProps & (MessageProps | RawProps<T>);
+declare function ChatContainer<T>(props: Props<T>): react_jsx_runtime.JSX.Element;
 
-type MessageMapper$1<TRaw> = (raw: TRaw) => Message;
-type Options$2<TQueryRaw, TMutationRaw> = {
+type ExtraFromRaw$1<TRaw> = Omit<TRaw, keyof BaseMessage>;
+type CustomMessage$1<TCustom> = BaseMessage & {
+    custom: TCustom;
+};
+type MessageMapper$1<TRaw> = CustomMessage$1<ExtraFromRaw$1<TRaw>>;
+type MessageMapperResult$1 = Pick<BaseMessage, "id" | "role" | "content">;
+type Options$2<TRaw> = {
     queryKey: readonly unknown[];
-    queryFn: () => Promise<TQueryRaw[]>;
-    mutationFn: (content: string) => Promise<TMutationRaw>;
-    map: MessageMapper$1<TQueryRaw | TMutationRaw>;
+    queryFn: (pageParam: unknown) => Promise<TRaw[]>;
+    initialPageParam: unknown;
+    getNextPageParam: (lastPage: MessageMapper$1<TRaw>[], allPages: MessageMapper$1<TRaw>[][]) => unknown;
+    mutationFn: (content: string) => Promise<TRaw>;
+    map: (raw: TRaw) => MessageMapperResult$1;
     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[];
+declare function useChat<TRaw extends object>({ queryKey, queryFn, initialPageParam, getNextPageParam, mutationFn, map, onError, staleTime, gcTime, }: Options$2<TRaw>): {
+    messages: MessageMapper$1<TRaw>[];
     sendUserMessage: (content: string) => void;
     isPending: boolean;
     isInitialLoading: boolean;
+    fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<InfiniteData<MessageMapper$1<TRaw>[], unknown>, Error>>;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
 };
 
 interface SpeechGrammar {
@@ -172,29 +196,39 @@ declare function useBrowserSpeechRecognition({ lang, onStart, onEnd, onError, }?
     onTranscript: (text: string) => void;
 };
 
-type MessageMapper<TRaw> = (raw: TRaw) => Message;
 type VoiceRecognitionController = {
     start: () => void;
     stop: () => void;
     isRecording: boolean;
     onTranscript: (text: string) => void;
 };
-type Options<TQueryRaw, TMutationRaw> = {
+type ExtraFromRaw<TRaw> = Omit<TRaw, keyof BaseMessage>;
+type CustomMessage<TCustom> = BaseMessage & {
+    custom: TCustom;
+};
+type MessageMapper<TRaw> = CustomMessage<ExtraFromRaw<TRaw>>;
+type MessageMapperResult = Pick<BaseMessage, "id" | "role" | "content">;
+type Options<TRaw> = {
     queryKey: readonly unknown[];
-    queryFn: () => Promise<TQueryRaw[]>;
-    mutationFn: (content: string) => Promise<TMutationRaw>;
-    map: MessageMapper<TQueryRaw | TMutationRaw>;
+    queryFn: (pageParam: unknown) => Promise<TRaw[]>;
+    initialPageParam: unknown;
+    getNextPageParam: (lastPage: MessageMapper<TRaw>[], allPages: MessageMapper<TRaw>[][]) => unknown;
+    mutationFn: (content: string) => Promise<TRaw>;
+    map: (raw: TRaw) => MessageMapperResult;
     voice: VoiceRecognitionController;
     onError?: (error: unknown) => void;
     staleTime?: number;
     gcTime?: number;
 };
-declare function useVoiceOptimisticChat<TQeuryRaw, TMutationRaw>({ queryKey, queryFn, mutationFn, map, voice, onError, staleTime, gcTime, }: Options<TQeuryRaw, TMutationRaw>): {
-    messages: Message[];
+declare function useVoiceChat<TRaw extends object>({ queryKey, queryFn, initialPageParam, getNextPageParam, mutationFn, map, voice, onError, staleTime, gcTime, }: Options<TRaw>): {
+    messages: MessageMapper<TRaw>[];
     isPending: boolean;
     isInitialLoading: boolean;
     startRecording: () => Promise<void>;
     stopRecording: () => void;
+    fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<InfiniteData<MessageMapper<TRaw>[], unknown>, Error>>;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
 };
 
-export { ChatContainer, ChatInput, ChatList, ChatMessage, LoadingSpinner, type Message, SendingDots, useBrowserSpeechRecognition, useOptimisticChat, useVoiceOptimisticChat };
+export { ChatContainer, ChatInput, ChatList, ChatMessage, LoadingSpinner, type Message, SendingDots, useBrowserSpeechRecognition, useChat, useVoiceChat };

package/dist/index.js

@@ -54,8 +54,8 @@ __export(index_exports, {
   LoadingSpinner: () => LoadingSpinner,
   SendingDots: () => SendingDots,
   useBrowserSpeechRecognition: () => useBrowserSpeechRecognition,
-  useOptimisticChat: () => useOptimisticChat,
-  useVoiceOptimisticChat: () => useVoiceOptimisticChat
+  useChat: () => useChat,
+  useVoiceChat: () => useVoiceChat
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -206,7 +206,7 @@ function ChatList({
   className,
   loadingRenderer
 }) {
-  const mappedMessages = messageMapper ? messages.map(messageMapper) : messages;
+  const mappedMessages = messageMapper ? messages.map((msg) => __spreadValues(__spreadValues({}, msg), messageMapper(msg))) : messages;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `flex flex-col ${className}`, children: mappedMessages.map((msg) => {
     if (messageRenderer) {
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react2.default.Fragment, { children: messageRenderer(msg) }, msg.id);
@@ -518,32 +518,43 @@ function ChatInput({
 // src/components/ChatContainer.tsx
 var import_react5 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function ChatContainer({
-  messages,
-  messageMapper,
-  messageRenderer,
-  loadingRenderer,
-  listClassName,
-  onSend,
-  isSending,
-  disableVoice,
-  placeholder,
-  inputClassName,
-  className
-}) {
+function ChatContainer(props) {
   const [isAtBottom, setIsAtBottom] = (0, import_react5.useState)(true);
   const scrollRef = (0, import_react5.useRef)(null);
+  const {
+    messages,
+    messageRenderer,
+    loadingRenderer,
+    listClassName,
+    onSend,
+    isSending,
+    disableVoice,
+    placeholder,
+    inputClassName,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    className
+  } = props;
+  const mappedMessages = typeof props.messageMapper === "function" ? props.messages.map(props.messageMapper) : messages;
   (0, import_react5.useEffect)(() => {
     const el = scrollRef.current;
     if (!el) return;
-    el.scrollTop = el.scrollHeight;
-    const handleScroll = () => {
+    const handleScroll = async () => {
       const isBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 10;
       setIsAtBottom(isBottom);
+      if (el.scrollTop === 0 && hasNextPage && !isFetchingNextPage && fetchNextPage) {
+        const prevScrollHeight = el.scrollHeight;
+        await fetchNextPage();
+        requestAnimationFrame(() => {
+          const newScrollHeight = el.scrollHeight;
+          el.scrollTop = newScrollHeight - prevScrollHeight;
+        });
+      }
     };
     el.addEventListener("scroll", handleScroll);
     return () => el.removeEventListener("scroll", handleScroll);
-  }, []);
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
   (0, import_react5.useEffect)(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -571,17 +582,20 @@ function ChatContainer({
           flex flex-col ${className || ""}
         `,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "div",
           {
             ref: scrollRef,
             className: `flex-1 overflow-y-auto chatContainer-scroll p-2`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              ChatList,
-              __spreadValues(__spreadValues(__spreadValues(__spreadValues({
-                messages
-              }, messageMapper && { messageMapper }), messageRenderer && { messageRenderer }), loadingRenderer && { loadingRenderer }), listClassName && { className: listClassName })
-            )
+            children: [
+              hasNextPage && isFetchingNextPage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LoadingSpinner, { size: "sm" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                ChatList,
+                __spreadValues(__spreadValues(__spreadValues({
+                  messages: mappedMessages
+                }, messageRenderer && { messageRenderer }), loadingRenderer && { loadingRenderer }), listClassName && { className: listClassName })
+              )
+            ]
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-shrink-0 relative", children: [
@@ -624,12 +638,26 @@ function ChatContainer({
   ) });
 }
 
-// src/hooks/useOptimisticChat.ts
+// src/hooks/useChat.ts
 var import_react_query = require("@tanstack/react-query");
 var import_react6 = require("react");
-function useOptimisticChat({
+function splitRawToMessage(raw, mapped) {
+  const custom = {};
+  const mappedValues = new Set(Object.values(mapped));
+  for (const [key, value] of Object.entries(raw)) {
+    if (!mappedValues.has(value)) {
+      custom[key] = value;
+    }
+  }
+  return __spreadProps(__spreadValues({}, mapped), {
+    custom
+  });
+}
+function useChat({
   queryKey,
   queryFn,
+  initialPageParam,
+  getNextPageParam,
   mutationFn,
   map,
   onError,
@@ -639,17 +667,26 @@ function useOptimisticChat({
   const [isPending, setIsPending] = (0, import_react6.useState)(false);
   const queryClient = (0, import_react_query.useQueryClient)();
   const {
-    data: messages = [],
-    isLoading: isInitialLoading
-  } = (0, import_react_query.useQuery)({
+    data,
+    isLoading: isInitialLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
+  } = (0, import_react_query.useInfiniteQuery)({
     queryKey,
-    queryFn: async () => {
-      const rawList = await queryFn();
-      return rawList.map(map);
+    initialPageParam,
+    queryFn: async ({ pageParam }) => {
+      const raw = await queryFn(pageParam);
+      return raw.map((r) => {
+        const mapped = map(r);
+        return splitRawToMessage(r, mapped);
+      });
     },
+    getNextPageParam,
     staleTime,
     gcTime
   });
+  const messages = data ? [...data.pages].reverse().flat() : [];
   const mutation = (0, import_react_query.useMutation)({
     mutationFn,
     // (content: string) => Promise<TMutationRaw>
@@ -660,38 +697,47 @@ function useOptimisticChat({
         await queryClient.cancelQueries({ queryKey });
       }
       queryClient.setQueryData(queryKey, (old) => {
-        const base = old != null ? old : [];
-        return [
-          ...base,
-          // user 메시지 추가
+        var _a;
+        if (!old) return old;
+        const pages = [...old.pages];
+        const firstPage = (_a = pages[0]) != null ? _a : [];
+        pages[0] = [
+          ...firstPage,
           {
             id: crypto.randomUUID(),
             role: "USER",
-            content
+            content,
+            custom: {}
           },
-          // AI placeholder 추가
           {
             id: crypto.randomUUID(),
             role: "AI",
             content: "",
-            isLoading: true
+            isLoading: true,
+            custom: {}
           }
         ];
+        return __spreadProps(__spreadValues({}, old), {
+          pages
+        });
       });
-      return { prev };
+      return prev ? { prev } : {};
     },
     onSuccess: (rawAiResponse) => {
-      const aiMessage = map(rawAiResponse);
+      const mapped = map(rawAiResponse);
+      const aiMessage = splitRawToMessage(rawAiResponse, mapped);
       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), {
+        if (!old) return old;
+        const pages = [...old.pages];
+        const firstPage = [...pages[0]];
+        const lastIndex = firstPage.length - 1;
+        firstPage[lastIndex] = __spreadProps(__spreadValues(__spreadValues({}, firstPage[lastIndex]), aiMessage), {
           isLoading: false
         });
-        return next;
+        pages[0] = firstPage;
+        return __spreadProps(__spreadValues({}, old), {
+          pages
+        });
       });
       setIsPending(false);
     },
@@ -701,10 +747,6 @@ function useOptimisticChat({
         queryClient.setQueryData(queryKey, context.prev);
       }
       onError == null ? void 0 : onError(error);
-    },
-    // mutation 이후 서버 기준 최신 데이터 재동기화
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey });
     }
   });
   const sendUserMessage = (content) => {
@@ -718,17 +760,35 @@ function useOptimisticChat({
     // (content: string) => void
     isPending,
     // 사용자가 채팅 전송 후 AI 응답이 올 때까지의 로딩
-    isInitialLoading
+    isInitialLoading,
     // 초기 로딩 상태
+    // infinite query용
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
   };
 }
 
-// src/hooks/useVoiceOptimisticChat.ts
+// src/hooks/useVoiceChat.ts
 var import_react_query2 = require("@tanstack/react-query");
 var import_react7 = require("react");
-function useVoiceOptimisticChat({
+function splitRawToMessage2(raw, mapped) {
+  const custom = {};
+  const mappedValues = new Set(Object.values(mapped));
+  for (const [key, value] of Object.entries(raw)) {
+    if (!mappedValues.has(value)) {
+      custom[key] = value;
+    }
+  }
+  return __spreadProps(__spreadValues({}, mapped), {
+    custom
+  });
+}
+function useVoiceChat({
   queryKey,
   queryFn,
+  initialPageParam,
+  getNextPageParam,
   mutationFn,
   map,
   voice,
@@ -741,17 +801,26 @@ function useVoiceOptimisticChat({
   const currentTextRef = (0, import_react7.useRef)("");
   const rollbackRef = (0, import_react7.useRef)(void 0);
   const {
-    data: messages = [],
-    isLoading: isInitialLoading
-  } = (0, import_react_query2.useQuery)({
+    data,
+    isLoading: isInitialLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
+  } = (0, import_react_query2.useInfiniteQuery)({
     queryKey,
-    queryFn: async () => {
-      const rawList = await queryFn();
-      return rawList.map(map);
+    initialPageParam,
+    queryFn: async ({ pageParam }) => {
+      const raw = await queryFn(pageParam);
+      return raw.map((r) => {
+        const mapped = map(r);
+        return splitRawToMessage2(r, mapped);
+      });
     },
+    getNextPageParam,
     staleTime,
     gcTime
   });
+  const messages = data ? data.pages.map((page) => [...page]).reverse().flat() : [];
   const mutation = (0, import_react_query2.useMutation)({
     mutationFn,
     // (content: string) => Promise<TMutationRaw>
@@ -762,32 +831,41 @@ function useVoiceOptimisticChat({
         await queryClient.cancelQueries({ queryKey });
       }
       queryClient.setQueryData(queryKey, (old) => {
-        const base = old != null ? old : [];
-        return [
-          ...base,
-          // AI placeholder 추가
+        var _a;
+        if (!old) return old;
+        const pages = [...old.pages];
+        const firstPage = (_a = pages[0]) != null ? _a : [];
+        pages[0] = [
+          ...firstPage,
           {
             id: crypto.randomUUID(),
             role: "AI",
             content: "",
-            isLoading: true
+            isLoading: true,
+            custom: {}
           }
         ];
+        return __spreadProps(__spreadValues({}, old), {
+          pages
+        });
       });
-      return { prev };
+      return prev ? { prev } : {};
     },
     onSuccess: (rawAiResponse) => {
-      const aiMessage = map(rawAiResponse);
+      const mapped = map(rawAiResponse);
+      const aiMessage = splitRawToMessage2(rawAiResponse, mapped);
       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), {
+        if (!old) return old;
+        const pages = [...old.pages];
+        const firstPage = [...pages[0]];
+        const lastIndex = firstPage.length - 1;
+        firstPage[lastIndex] = __spreadProps(__spreadValues(__spreadValues({}, firstPage[lastIndex]), aiMessage), {
           isLoading: false
         });
-        return next;
+        pages[0] = firstPage;
+        return __spreadProps(__spreadValues({}, old), {
+          pages
+        });
       });
       setIsPending(false);
     },
@@ -797,10 +875,6 @@ function useVoiceOptimisticChat({
         queryClient.setQueryData(queryKey, context.prev);
       }
       onError == null ? void 0 : onError(error);
-    },
-    // mutation 이후 서버 기준 최신 데이터 재동기화
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey });
     }
   });
   const startRecording = async () => {
@@ -810,14 +884,24 @@ function useVoiceOptimisticChat({
     if (prev) {
       await queryClient.cancelQueries({ queryKey });
     }
-    queryClient.setQueryData(queryKey, (old) => [
-      ...old != null ? old : [],
-      {
-        id: crypto.randomUUID(),
-        role: "USER",
-        content: ""
-      }
-    ]);
+    queryClient.setQueryData(queryKey, (old) => {
+      var _a;
+      if (!old) return old;
+      const pages = [...old.pages];
+      const firstPage = (_a = pages[0]) != null ? _a : [];
+      pages[0] = [
+        ...firstPage,
+        {
+          id: crypto.randomUUID(),
+          role: "USER",
+          content: "",
+          custom: {}
+        }
+      ];
+      return __spreadProps(__spreadValues({}, old), {
+        pages
+      });
+    });
     voice.start();
   };
   const onTranscript = (text) => {
@@ -825,13 +909,17 @@ function useVoiceOptimisticChat({
     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]), {
+      const pages = [...old.pages];
+      const firstPage = [...pages[0]];
+      const lastIndex = firstPage.length - 1;
+      if (((_a = firstPage[lastIndex]) == null ? void 0 : _a.role) !== "USER") return old;
+      firstPage[lastIndex] = __spreadProps(__spreadValues({}, firstPage[lastIndex]), {
         content: text
       });
-      return next;
+      pages[0] = firstPage;
+      return __spreadProps(__spreadValues({}, old), {
+        pages
+      });
     });
   };
   (0, import_react7.useEffect)(() => {
@@ -850,15 +938,19 @@ function useVoiceOptimisticChat({
   };
   return {
     messages,
-    // Message[]
+    // Message<TExtra>[]
     isPending,
     // 사용자가 채팅 전송 후 AI 응답이 올 때까지의 로딩
     isInitialLoading,
     // 초기 로딩 상태
     startRecording,
     // 음성 인식 시작 함수
-    stopRecording
+    stopRecording,
     // 음성 인식 종료 함수
+    // infinite query용
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
   };
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -870,6 +962,6 @@ function useVoiceOptimisticChat({
   LoadingSpinner,
   SendingDots,
   useBrowserSpeechRecognition,
-  useOptimisticChat,
-  useVoiceOptimisticChat
+  useChat,
+  useVoiceChat
 });

package/dist/index.mjs

@@ -165,7 +165,7 @@ function ChatList({
   className,
   loadingRenderer
 }) {
-  const mappedMessages = messageMapper ? messages.map(messageMapper) : messages;
+  const mappedMessages = messageMapper ? messages.map((msg) => __spreadValues(__spreadValues({}, msg), messageMapper(msg))) : messages;
   return /* @__PURE__ */ jsx4("div", { className: `flex flex-col ${className}`, children: mappedMessages.map((msg) => {
     if (messageRenderer) {
       return /* @__PURE__ */ jsx4(React2.Fragment, { children: messageRenderer(msg) }, msg.id);
@@ -477,32 +477,43 @@ function ChatInput({
 // src/components/ChatContainer.tsx
 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,
-  messageMapper,
-  messageRenderer,
-  loadingRenderer,
-  listClassName,
-  onSend,
-  isSending,
-  disableVoice,
-  placeholder,
-  inputClassName,
-  className
-}) {
+function ChatContainer(props) {
   const [isAtBottom, setIsAtBottom] = useState3(true);
   const scrollRef = useRef3(null);
+  const {
+    messages,
+    messageRenderer,
+    loadingRenderer,
+    listClassName,
+    onSend,
+    isSending,
+    disableVoice,
+    placeholder,
+    inputClassName,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    className
+  } = props;
+  const mappedMessages = typeof props.messageMapper === "function" ? props.messages.map(props.messageMapper) : messages;
   useEffect3(() => {
     const el = scrollRef.current;
     if (!el) return;
-    el.scrollTop = el.scrollHeight;
-    const handleScroll = () => {
+    const handleScroll = async () => {
       const isBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 10;
       setIsAtBottom(isBottom);
+      if (el.scrollTop === 0 && hasNextPage && !isFetchingNextPage && fetchNextPage) {
+        const prevScrollHeight = el.scrollHeight;
+        await fetchNextPage();
+        requestAnimationFrame(() => {
+          const newScrollHeight = el.scrollHeight;
+          el.scrollTop = newScrollHeight - prevScrollHeight;
+        });
+      }
     };
     el.addEventListener("scroll", handleScroll);
     return () => el.removeEventListener("scroll", handleScroll);
-  }, []);
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
   useEffect3(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -530,17 +541,20 @@ function ChatContainer({
           flex flex-col ${className || ""}
         `,
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsxs4(
           "div",
           {
             ref: scrollRef,
             className: `flex-1 overflow-y-auto chatContainer-scroll p-2`,
-            children: /* @__PURE__ */ jsx6(
-              ChatList,
-              __spreadValues(__spreadValues(__spreadValues(__spreadValues({
-                messages
-              }, messageMapper && { messageMapper }), messageRenderer && { messageRenderer }), loadingRenderer && { loadingRenderer }), listClassName && { className: listClassName })
-            )
+            children: [
+              hasNextPage && isFetchingNextPage && /* @__PURE__ */ jsx6("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx6(LoadingSpinner, { size: "sm" }) }),
+              /* @__PURE__ */ jsx6(
+                ChatList,
+                __spreadValues(__spreadValues(__spreadValues({
+                  messages: mappedMessages
+                }, messageRenderer && { messageRenderer }), loadingRenderer && { loadingRenderer }), listClassName && { className: listClassName })
+              )
+            ]
           }
         ),
         /* @__PURE__ */ jsxs4("div", { className: "flex-shrink-0 relative", children: [
@@ -583,12 +597,26 @@ function ChatContainer({
   ) });
 }
 
-// src/hooks/useOptimisticChat.ts
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+// src/hooks/useChat.ts
+import { useInfiniteQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useState as useState4 } from "react";
-function useOptimisticChat({
+function splitRawToMessage(raw, mapped) {
+  const custom = {};
+  const mappedValues = new Set(Object.values(mapped));
+  for (const [key, value] of Object.entries(raw)) {
+    if (!mappedValues.has(value)) {
+      custom[key] = value;
+    }
+  }
+  return __spreadProps(__spreadValues({}, mapped), {
+    custom
+  });
+}
+function useChat({
   queryKey,
   queryFn,
+  initialPageParam,
+  getNextPageParam,
   mutationFn,
   map,
   onError,
@@ -598,17 +626,26 @@ function useOptimisticChat({
   const [isPending, setIsPending] = useState4(false);
   const queryClient = useQueryClient();
   const {
-    data: messages = [],
-    isLoading: isInitialLoading
-  } = useQuery({
+    data,
+    isLoading: isInitialLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
+  } = useInfiniteQuery({
     queryKey,
-    queryFn: async () => {
-      const rawList = await queryFn();
-      return rawList.map(map);
+    initialPageParam,
+    queryFn: async ({ pageParam }) => {
+      const raw = await queryFn(pageParam);
+      return raw.map((r) => {
+        const mapped = map(r);
+        return splitRawToMessage(r, mapped);
+      });
     },
+    getNextPageParam,
     staleTime,
     gcTime
   });
+  const messages = data ? [...data.pages].reverse().flat() : [];
   const mutation = useMutation({
     mutationFn,
     // (content: string) => Promise<TMutationRaw>
@@ -619,38 +656,47 @@ function useOptimisticChat({
         await queryClient.cancelQueries({ queryKey });
       }
       queryClient.setQueryData(queryKey, (old) => {
-        const base = old != null ? old : [];
-        return [
-          ...base,
-          // user 메시지 추가
+        var _a;
+        if (!old) return old;
+        const pages = [...old.pages];
+        const firstPage = (_a = pages[0]) != null ? _a : [];
+        pages[0] = [
+          ...firstPage,
           {
             id: crypto.randomUUID(),
             role: "USER",
-            content
+            content,
+            custom: {}
           },
-          // AI placeholder 추가
           {
             id: crypto.randomUUID(),
             role: "AI",
             content: "",
-            isLoading: true
+            isLoading: true,
+            custom: {}
           }
         ];
+        return __spreadProps(__spreadValues({}, old), {
+          pages
+        });
       });
-      return { prev };
+      return prev ? { prev } : {};
     },
     onSuccess: (rawAiResponse) => {
-      const aiMessage = map(rawAiResponse);
+      const mapped = map(rawAiResponse);
+      const aiMessage = splitRawToMessage(rawAiResponse, mapped);
       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), {
+        if (!old) return old;
+        const pages = [...old.pages];
+        const firstPage = [...pages[0]];
+        const lastIndex = firstPage.length - 1;
+        firstPage[lastIndex] = __spreadProps(__spreadValues(__spreadValues({}, firstPage[lastIndex]), aiMessage), {
           isLoading: false
         });
-        return next;
+        pages[0] = firstPage;
+        return __spreadProps(__spreadValues({}, old), {
+          pages
+        });
       });
       setIsPending(false);
     },
@@ -660,10 +706,6 @@ function useOptimisticChat({
         queryClient.setQueryData(queryKey, context.prev);
       }
       onError == null ? void 0 : onError(error);
-    },
-    // mutation 이후 서버 기준 최신 데이터 재동기화
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey });
     }
   });
   const sendUserMessage = (content) => {
@@ -677,17 +719,35 @@ function useOptimisticChat({
     // (content: string) => void
     isPending,
     // 사용자가 채팅 전송 후 AI 응답이 올 때까지의 로딩
-    isInitialLoading
+    isInitialLoading,
     // 초기 로딩 상태
+    // infinite query용
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
   };
 }
 
-// src/hooks/useVoiceOptimisticChat.ts
-import { useMutation as useMutation2, useQuery as useQuery2, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+// src/hooks/useVoiceChat.ts
+import { useInfiniteQuery as useInfiniteQuery2, useMutation as useMutation2, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
-function useVoiceOptimisticChat({
+function splitRawToMessage2(raw, mapped) {
+  const custom = {};
+  const mappedValues = new Set(Object.values(mapped));
+  for (const [key, value] of Object.entries(raw)) {
+    if (!mappedValues.has(value)) {
+      custom[key] = value;
+    }
+  }
+  return __spreadProps(__spreadValues({}, mapped), {
+    custom
+  });
+}
+function useVoiceChat({
   queryKey,
   queryFn,
+  initialPageParam,
+  getNextPageParam,
   mutationFn,
   map,
   voice,
@@ -700,17 +760,26 @@ function useVoiceOptimisticChat({
   const currentTextRef = useRef4("");
   const rollbackRef = useRef4(void 0);
   const {
-    data: messages = [],
-    isLoading: isInitialLoading
-  } = useQuery2({
+    data,
+    isLoading: isInitialLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
+  } = useInfiniteQuery2({
     queryKey,
-    queryFn: async () => {
-      const rawList = await queryFn();
-      return rawList.map(map);
+    initialPageParam,
+    queryFn: async ({ pageParam }) => {
+      const raw = await queryFn(pageParam);
+      return raw.map((r) => {
+        const mapped = map(r);
+        return splitRawToMessage2(r, mapped);
+      });
     },
+    getNextPageParam,
     staleTime,
     gcTime
   });
+  const messages = data ? data.pages.map((page) => [...page]).reverse().flat() : [];
   const mutation = useMutation2({
     mutationFn,
     // (content: string) => Promise<TMutationRaw>
@@ -721,32 +790,41 @@ function useVoiceOptimisticChat({
         await queryClient.cancelQueries({ queryKey });
       }
       queryClient.setQueryData(queryKey, (old) => {
-        const base = old != null ? old : [];
-        return [
-          ...base,
-          // AI placeholder 추가
+        var _a;
+        if (!old) return old;
+        const pages = [...old.pages];
+        const firstPage = (_a = pages[0]) != null ? _a : [];
+        pages[0] = [
+          ...firstPage,
           {
             id: crypto.randomUUID(),
             role: "AI",
             content: "",
-            isLoading: true
+            isLoading: true,
+            custom: {}
           }
         ];
+        return __spreadProps(__spreadValues({}, old), {
+          pages
+        });
       });
-      return { prev };
+      return prev ? { prev } : {};
     },
     onSuccess: (rawAiResponse) => {
-      const aiMessage = map(rawAiResponse);
+      const mapped = map(rawAiResponse);
+      const aiMessage = splitRawToMessage2(rawAiResponse, mapped);
       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), {
+        if (!old) return old;
+        const pages = [...old.pages];
+        const firstPage = [...pages[0]];
+        const lastIndex = firstPage.length - 1;
+        firstPage[lastIndex] = __spreadProps(__spreadValues(__spreadValues({}, firstPage[lastIndex]), aiMessage), {
           isLoading: false
         });
-        return next;
+        pages[0] = firstPage;
+        return __spreadProps(__spreadValues({}, old), {
+          pages
+        });
       });
       setIsPending(false);
     },
@@ -756,10 +834,6 @@ function useVoiceOptimisticChat({
         queryClient.setQueryData(queryKey, context.prev);
       }
       onError == null ? void 0 : onError(error);
-    },
-    // mutation 이후 서버 기준 최신 데이터 재동기화
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey });
     }
   });
   const startRecording = async () => {
@@ -769,14 +843,24 @@ function useVoiceOptimisticChat({
     if (prev) {
       await queryClient.cancelQueries({ queryKey });
     }
-    queryClient.setQueryData(queryKey, (old) => [
-      ...old != null ? old : [],
-      {
-        id: crypto.randomUUID(),
-        role: "USER",
-        content: ""
-      }
-    ]);
+    queryClient.setQueryData(queryKey, (old) => {
+      var _a;
+      if (!old) return old;
+      const pages = [...old.pages];
+      const firstPage = (_a = pages[0]) != null ? _a : [];
+      pages[0] = [
+        ...firstPage,
+        {
+          id: crypto.randomUUID(),
+          role: "USER",
+          content: "",
+          custom: {}
+        }
+      ];
+      return __spreadProps(__spreadValues({}, old), {
+        pages
+      });
+    });
     voice.start();
   };
   const onTranscript = (text) => {
@@ -784,13 +868,17 @@ function useVoiceOptimisticChat({
     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]), {
+      const pages = [...old.pages];
+      const firstPage = [...pages[0]];
+      const lastIndex = firstPage.length - 1;
+      if (((_a = firstPage[lastIndex]) == null ? void 0 : _a.role) !== "USER") return old;
+      firstPage[lastIndex] = __spreadProps(__spreadValues({}, firstPage[lastIndex]), {
         content: text
       });
-      return next;
+      pages[0] = firstPage;
+      return __spreadProps(__spreadValues({}, old), {
+        pages
+      });
     });
   };
   useEffect4(() => {
@@ -809,15 +897,19 @@ function useVoiceOptimisticChat({
   };
   return {
     messages,
-    // Message[]
+    // Message<TExtra>[]
     isPending,
     // 사용자가 채팅 전송 후 AI 응답이 올 때까지의 로딩
     isInitialLoading,
     // 초기 로딩 상태
     startRecording,
     // 음성 인식 시작 함수
-    stopRecording
+    stopRecording,
     // 음성 인식 종료 함수
+    // infinite query용
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
   };
 }
 export {
@@ -828,6 +920,6 @@ export {
   LoadingSpinner,
   SendingDots,
   useBrowserSpeechRecognition,
-  useOptimisticChat,
-  useVoiceOptimisticChat
+  useChat,
+  useVoiceChat
 };

package/package.json

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