react-optimistic-chat 1.1.0 → 1.2.1

package/dist/index.d.mts

@@ -2,12 +2,13 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
 
 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 +35,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 +72,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;
@@ -83,20 +91,23 @@ type Props<T> = {
     inputClassName?: string;
     className?: string;
 };
-declare function ChatContainer<T>({ messages, messageMapper, messageRenderer, loadingRenderer, listClassName, onSend, isSending, disableVoice, placeholder, inputClassName, className, }: Props<T>): react_jsx_runtime.JSX.Element;
+type 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 MessageMapperResult$1 = Pick<BaseMessage, "id" | "role" | "content">;
+type MessageMapper$1<TRaw> = Message<ExtraFromRaw$1<TRaw>>;
+type Options$2<TRaw> = {
     queryKey: readonly unknown[];
-    queryFn: () => Promise<TQueryRaw[]>;
-    mutationFn: (content: string) => Promise<TMutationRaw>;
-    map: MessageMapper$1<TQueryRaw | TMutationRaw>;
+    queryFn: () => Promise<TRaw[]>;
+    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 useOptimisticChat<TRaw>({ queryKey, queryFn, mutationFn, map, onError, staleTime, gcTime, }: Options$2<TRaw>): {
+    messages: MessageMapper$1<TRaw>[];
     sendUserMessage: (content: string) => void;
     isPending: boolean;
     isInitialLoading: boolean;
@@ -172,25 +183,27 @@ 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 MessageMapperResult = Pick<BaseMessage, "id" | "role" | "content">;
+type MessageMapper<TRaw> = Message<ExtraFromRaw<TRaw>>;
+type Options<TRaw> = {
     queryKey: readonly unknown[];
-    queryFn: () => Promise<TQueryRaw[]>;
-    mutationFn: (content: string) => Promise<TMutationRaw>;
-    map: MessageMapper<TQueryRaw | TMutationRaw>;
+    queryFn: () => Promise<TRaw[]>;
+    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 useVoiceOptimisticChat<TRaw>({ queryKey, queryFn, mutationFn, map, voice, onError, staleTime, gcTime, }: Options<TRaw>): {
+    messages: MessageMapper<TRaw>[];
     isPending: boolean;
     isInitialLoading: boolean;
     startRecording: () => Promise<void>;

package/dist/index.d.ts

@@ -2,12 +2,13 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
 
 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 +35,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 +72,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;
@@ -83,20 +91,23 @@ type Props<T> = {
     inputClassName?: string;
     className?: string;
 };
-declare function ChatContainer<T>({ messages, messageMapper, messageRenderer, loadingRenderer, listClassName, onSend, isSending, disableVoice, placeholder, inputClassName, className, }: Props<T>): react_jsx_runtime.JSX.Element;
+type 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 MessageMapperResult$1 = Pick<BaseMessage, "id" | "role" | "content">;
+type MessageMapper$1<TRaw> = Message<ExtraFromRaw$1<TRaw>>;
+type Options$2<TRaw> = {
     queryKey: readonly unknown[];
-    queryFn: () => Promise<TQueryRaw[]>;
-    mutationFn: (content: string) => Promise<TMutationRaw>;
-    map: MessageMapper$1<TQueryRaw | TMutationRaw>;
+    queryFn: () => Promise<TRaw[]>;
+    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 useOptimisticChat<TRaw>({ queryKey, queryFn, mutationFn, map, onError, staleTime, gcTime, }: Options$2<TRaw>): {
+    messages: MessageMapper$1<TRaw>[];
     sendUserMessage: (content: string) => void;
     isPending: boolean;
     isInitialLoading: boolean;
@@ -172,25 +183,27 @@ 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 MessageMapperResult = Pick<BaseMessage, "id" | "role" | "content">;
+type MessageMapper<TRaw> = Message<ExtraFromRaw<TRaw>>;
+type Options<TRaw> = {
     queryKey: readonly unknown[];
-    queryFn: () => Promise<TQueryRaw[]>;
-    mutationFn: (content: string) => Promise<TMutationRaw>;
-    map: MessageMapper<TQueryRaw | TMutationRaw>;
+    queryFn: () => Promise<TRaw[]>;
+    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 useVoiceOptimisticChat<TRaw>({ queryKey, queryFn, mutationFn, map, voice, onError, staleTime, gcTime, }: Options<TRaw>): {
+    messages: MessageMapper<TRaw>[];
     isPending: boolean;
     isInitialLoading: boolean;
     startRecording: () => Promise<void>;

package/dist/index.js

@@ -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,21 +518,22 @@ 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,
+    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;
@@ -578,9 +579,9 @@ function ChatContainer({
             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 })
+              __spreadValues(__spreadValues(__spreadValues({
+                messages: mappedMessages
+              }, messageRenderer && { messageRenderer }), loadingRenderer && { loadingRenderer }), listClassName && { className: listClassName })
             )
           }
         ),
@@ -644,8 +645,8 @@ function useOptimisticChat({
   } = (0, import_react_query.useQuery)({
     queryKey,
     queryFn: async () => {
-      const rawList = await queryFn();
-      return rawList.map(map);
+      const raw = await queryFn();
+      return raw.map((r) => __spreadValues(__spreadValues({}, map(r)), r));
     },
     staleTime,
     gcTime
@@ -678,10 +679,10 @@ function useOptimisticChat({
           }
         ];
       });
-      return { prev };
+      return prev ? { prev } : {};
     },
     onSuccess: (rawAiResponse) => {
-      const aiMessage = map(rawAiResponse);
+      const aiMessage = __spreadValues(__spreadValues({}, map(rawAiResponse)), rawAiResponse);
       queryClient.setQueryData(queryKey, (old) => {
         if (!old || old.length === 0) {
           return [aiMessage];
@@ -701,10 +702,6 @@ function useOptimisticChat({
         queryClient.setQueryData(queryKey, context.prev);
       }
       onError == null ? void 0 : onError(error);
-    },
-    // mutation 이후 서버 기준 최신 데이터 재동기화
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey });
     }
   });
   const sendUserMessage = (content) => {
@@ -746,8 +743,8 @@ function useVoiceOptimisticChat({
   } = (0, import_react_query2.useQuery)({
     queryKey,
     queryFn: async () => {
-      const rawList = await queryFn();
-      return rawList.map(map);
+      const raw = await queryFn();
+      return raw.map((r) => __spreadValues(__spreadValues({}, map(r)), r));
     },
     staleTime,
     gcTime
@@ -774,10 +771,10 @@ function useVoiceOptimisticChat({
           }
         ];
       });
-      return { prev };
+      return prev ? { prev } : {};
     },
     onSuccess: (rawAiResponse) => {
-      const aiMessage = map(rawAiResponse);
+      const aiMessage = __spreadValues(__spreadValues({}, map(rawAiResponse)), rawAiResponse);
       queryClient.setQueryData(queryKey, (old) => {
         if (!old || old.length === 0) {
           return [aiMessage];
@@ -797,10 +794,6 @@ function useVoiceOptimisticChat({
         queryClient.setQueryData(queryKey, context.prev);
       }
       onError == null ? void 0 : onError(error);
-    },
-    // mutation 이후 서버 기준 최신 데이터 재동기화
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey });
     }
   });
   const startRecording = async () => {
@@ -850,7 +843,7 @@ function useVoiceOptimisticChat({
   };
   return {
     messages,
-    // Message[]
+    // Message<TExtra>[]
     isPending,
     // 사용자가 채팅 전송 후 AI 응답이 올 때까지의 로딩
     isInitialLoading,

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,21 +477,22 @@ 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,
+    className
+  } = props;
+  const mappedMessages = typeof props.messageMapper === "function" ? props.messages.map(props.messageMapper) : messages;
   useEffect3(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -537,9 +538,9 @@ function ChatContainer({
             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 })
+              __spreadValues(__spreadValues(__spreadValues({
+                messages: mappedMessages
+              }, messageRenderer && { messageRenderer }), loadingRenderer && { loadingRenderer }), listClassName && { className: listClassName })
             )
           }
         ),
@@ -603,8 +604,8 @@ function useOptimisticChat({
   } = useQuery({
     queryKey,
     queryFn: async () => {
-      const rawList = await queryFn();
-      return rawList.map(map);
+      const raw = await queryFn();
+      return raw.map((r) => __spreadValues(__spreadValues({}, map(r)), r));
     },
     staleTime,
     gcTime
@@ -637,10 +638,10 @@ function useOptimisticChat({
           }
         ];
       });
-      return { prev };
+      return prev ? { prev } : {};
     },
     onSuccess: (rawAiResponse) => {
-      const aiMessage = map(rawAiResponse);
+      const aiMessage = __spreadValues(__spreadValues({}, map(rawAiResponse)), rawAiResponse);
       queryClient.setQueryData(queryKey, (old) => {
         if (!old || old.length === 0) {
           return [aiMessage];
@@ -660,10 +661,6 @@ function useOptimisticChat({
         queryClient.setQueryData(queryKey, context.prev);
       }
       onError == null ? void 0 : onError(error);
-    },
-    // mutation 이후 서버 기준 최신 데이터 재동기화
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey });
     }
   });
   const sendUserMessage = (content) => {
@@ -705,8 +702,8 @@ function useVoiceOptimisticChat({
   } = useQuery2({
     queryKey,
     queryFn: async () => {
-      const rawList = await queryFn();
-      return rawList.map(map);
+      const raw = await queryFn();
+      return raw.map((r) => __spreadValues(__spreadValues({}, map(r)), r));
     },
     staleTime,
     gcTime
@@ -733,10 +730,10 @@ function useVoiceOptimisticChat({
           }
         ];
       });
-      return { prev };
+      return prev ? { prev } : {};
     },
     onSuccess: (rawAiResponse) => {
-      const aiMessage = map(rawAiResponse);
+      const aiMessage = __spreadValues(__spreadValues({}, map(rawAiResponse)), rawAiResponse);
       queryClient.setQueryData(queryKey, (old) => {
         if (!old || old.length === 0) {
           return [aiMessage];
@@ -756,10 +753,6 @@ function useVoiceOptimisticChat({
         queryClient.setQueryData(queryKey, context.prev);
       }
       onError == null ? void 0 : onError(error);
-    },
-    // mutation 이후 서버 기준 최신 데이터 재동기화
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey });
     }
   });
   const startRecording = async () => {
@@ -809,7 +802,7 @@ function useVoiceOptimisticChat({
   };
   return {
     messages,
-    // Message[]
+    // Message<TExtra>[]
     isPending,
     // 사용자가 채팅 전송 후 AI 응답이 올 때까지의 로딩
     isInitialLoading,

package/package.json

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