react-optimistic-chat 1.2.1 → 2.1.0

package/dist/index.js

@@ -54,14 +54,14 @@ __export(index_exports, {
   LoadingSpinner: () => LoadingSpinner,
   SendingDots: () => SendingDots,
   useBrowserSpeechRecognition: () => useBrowserSpeechRecognition,
-  useOptimisticChat: () => useOptimisticChat,
-  useVoiceOptimisticChat: () => useVoiceOptimisticChat
+  useChat: () => useChat,
+  useVoiceChat: () => useVoiceChat
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/indicators/LoadingSpinner.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function LoadingSpinner({ size }) {
+function LoadingSpinner({ size = "md" }) {
   const sizeMap = {
     xs: 24,
     sm: 32,
@@ -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
 });