react-optimistic-chat 1.2.1 → 2.0.0

package/dist/index.d.mts

@@ -1,5 +1,7 @@
 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 BaseMessage = {
@@ -89,28 +91,39 @@ type CommonProps = {
     disableVoice?: boolean;
     placeholder?: string;
     inputClassName?: string;
+    fetchNextPage?: () => void;
+    hasNextPage?: boolean;
+    isFetchingNextPage?: boolean;
     className?: string;
 };
 type Props<T> = CommonProps & (MessageProps | RawProps<T>);
 declare function ChatContainer<T>(props: Props<T>): react_jsx_runtime.JSX.Element;
 
 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 MessageMapper$1<TRaw> = Message<ExtraFromRaw$1<TRaw>>;
 type Options$2<TRaw> = {
     queryKey: readonly unknown[];
-    queryFn: () => Promise<TRaw[]>;
+    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<TRaw>({ queryKey, queryFn, mutationFn, map, onError, staleTime, gcTime, }: Options$2<TRaw>): {
+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 {
@@ -190,11 +203,16 @@ type VoiceRecognitionController = {
     onTranscript: (text: string) => void;
 };
 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 MessageMapper<TRaw> = Message<ExtraFromRaw<TRaw>>;
 type Options<TRaw> = {
     queryKey: readonly unknown[];
-    queryFn: () => Promise<TRaw[]>;
+    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;
@@ -202,12 +220,15 @@ type Options<TRaw> = {
     staleTime?: number;
     gcTime?: number;
 };
-declare function useVoiceOptimisticChat<TRaw>({ queryKey, queryFn, mutationFn, map, voice, onError, staleTime, gcTime, }: Options<TRaw>): {
+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,5 +1,7 @@
 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 BaseMessage = {
@@ -89,28 +91,39 @@ type CommonProps = {
     disableVoice?: boolean;
     placeholder?: string;
     inputClassName?: string;
+    fetchNextPage?: () => void;
+    hasNextPage?: boolean;
+    isFetchingNextPage?: boolean;
     className?: string;
 };
 type Props<T> = CommonProps & (MessageProps | RawProps<T>);
 declare function ChatContainer<T>(props: Props<T>): react_jsx_runtime.JSX.Element;
 
 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 MessageMapper$1<TRaw> = Message<ExtraFromRaw$1<TRaw>>;
 type Options$2<TRaw> = {
     queryKey: readonly unknown[];
-    queryFn: () => Promise<TRaw[]>;
+    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<TRaw>({ queryKey, queryFn, mutationFn, map, onError, staleTime, gcTime, }: Options$2<TRaw>): {
+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 {
@@ -190,11 +203,16 @@ type VoiceRecognitionController = {
     onTranscript: (text: string) => void;
 };
 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 MessageMapper<TRaw> = Message<ExtraFromRaw<TRaw>>;
 type Options<TRaw> = {
     queryKey: readonly unknown[];
-    queryFn: () => Promise<TRaw[]>;
+    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;
@@ -202,12 +220,15 @@ type Options<TRaw> = {
     staleTime?: number;
     gcTime?: number;
 };
-declare function useVoiceOptimisticChat<TRaw>({ queryKey, queryFn, mutationFn, map, voice, onError, staleTime, gcTime, }: Options<TRaw>): {
+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);
 
@@ -531,20 +531,30 @@ function ChatContainer(props) {
     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;
@@ -572,17 +582,20 @@ function ChatContainer(props) {
           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({
-                messages: mappedMessages
-              }, 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: [
@@ -625,12 +638,26 @@ function ChatContainer(props) {
   ) });
 }
 
-// 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,
@@ -640,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 raw = await queryFn();
-      return raw.map((r) => __spreadValues(__spreadValues({}, map(r)), r));
+    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>
@@ -661,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 ? { prev } : {};
     },
     onSuccess: (rawAiResponse) => {
-      const aiMessage = __spreadValues(__spreadValues({}, map(rawAiResponse)), 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);
     },
@@ -715,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,
@@ -738,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 raw = await queryFn();
-      return raw.map((r) => __spreadValues(__spreadValues({}, map(r)), r));
+    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>
@@ -759,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 ? { prev } : {};
     },
     onSuccess: (rawAiResponse) => {
-      const aiMessage = __spreadValues(__spreadValues({}, map(rawAiResponse)), 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);
     },
@@ -803,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) => {
@@ -818,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,8 +945,12 @@ function useVoiceOptimisticChat({
     // 초기 로딩 상태
     startRecording,
     // 음성 인식 시작 함수
-    stopRecording
+    stopRecording,
     // 음성 인식 종료 함수
+    // infinite query용
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
   };
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -863,6 +962,6 @@ function useVoiceOptimisticChat({
   LoadingSpinner,
   SendingDots,
   useBrowserSpeechRecognition,
-  useOptimisticChat,
-  useVoiceOptimisticChat
+  useChat,
+  useVoiceChat
 });

package/dist/index.mjs

@@ -490,20 +490,30 @@ function ChatContainer(props) {
     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;
@@ -531,17 +541,20 @@ function ChatContainer(props) {
           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({
-                messages: mappedMessages
-              }, 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: [
@@ -584,12 +597,26 @@ function ChatContainer(props) {
   ) });
 }
 
-// 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,
@@ -599,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 raw = await queryFn();
-      return raw.map((r) => __spreadValues(__spreadValues({}, map(r)), r));
+    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>
@@ -620,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 ? { prev } : {};
     },
     onSuccess: (rawAiResponse) => {
-      const aiMessage = __spreadValues(__spreadValues({}, map(rawAiResponse)), 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);
     },
@@ -674,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,
@@ -697,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 raw = await queryFn();
-      return raw.map((r) => __spreadValues(__spreadValues({}, map(r)), r));
+    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>
@@ -718,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 ? { prev } : {};
     },
     onSuccess: (rawAiResponse) => {
-      const aiMessage = __spreadValues(__spreadValues({}, map(rawAiResponse)), 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);
     },
@@ -762,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) => {
@@ -777,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,8 +904,12 @@ function useVoiceOptimisticChat({
     // 초기 로딩 상태
     startRecording,
     // 음성 인식 시작 함수
-    stopRecording
+    stopRecording,
     // 음성 인식 종료 함수
+    // infinite query용
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
   };
 }
 export {
@@ -821,6 +920,6 @@ export {
   LoadingSpinner,
   SendingDots,
   useBrowserSpeechRecognition,
-  useOptimisticChat,
-  useVoiceOptimisticChat
+  useChat,
+  useVoiceChat
 };

package/package.json

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