react-optimistic-chat 1.2.1 → 2.1.0

package/dist/index.mjs

@@ -20,7 +20,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/components/indicators/LoadingSpinner.tsx
 import { jsx } from "react/jsx-runtime";
-function LoadingSpinner({ size }) {
+function LoadingSpinner({ size = "md" }) {
   const sizeMap = {
     xs: 24,
     sm: 32,
@@ -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.1.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",