react-optimistic-chat 2.0.0 → 2.2.0

package/dist/index.css

@@ -0,0 +1,214 @@
+/* src/styles/chatMessage.css */
+.roc-chat-message {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+.roc-chat-message--left {
+  justify-content: flex-start;
+}
+.roc-chat-message--right {
+  justify-content: flex-end;
+}
+.roc-chat-message__icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f3f4f6;
+  border-radius: 9999px;
+  border: 2px solid #000;
+  flex-shrink: 0;
+  margin-right: 0.5rem;
+}
+.roc-chat-message__icon svg {
+  display: block;
+}
+.roc-chat-message__bubble {
+  padding: 0.75rem;
+  max-width: calc(100% - 3rem);
+  max-height: 24rem;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  box-sizing: border-box;
+}
+.roc-chat-message__bubble--ai {
+  background-color: #f3f4f6;
+  border-radius: 0.75rem;
+}
+.roc-chat-message__bubble--user {
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem 0.75rem 0 0.75rem;
+}
+
+/* src/styles/chatList.css */
+.roc-chat-list {
+  display: flex;
+  flex-direction: column;
+}
+
+/* src/styles/chatInput.css */
+.roc-chat-input {
+  display: flex;
+  border: 1px solid #d1d5db;
+  padding: 8px 8px;
+  border-radius: 24px;
+}
+.roc-chat-input__textarea {
+  width: 100%;
+  resize: none;
+  border: none;
+  font-size: 16px;
+  line-height: 2.2;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  padding-left: 8px;
+}
+.roc-chat-input__textarea::-moz-placeholder {
+  color: #9ca3af;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Apple SD Gothic Neo",
+    "Noto Sans KR",
+    "Noto Sans",
+    system-ui,
+    sans-serif;
+}
+.roc-chat-input__textarea::placeholder {
+  color: #9ca3af;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Apple SD Gothic Neo",
+    "Noto Sans KR",
+    "Noto Sans",
+    system-ui,
+    sans-serif;
+}
+.roc-chat-input__button {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  margin-top: auto;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  margin-left: 8px;
+  cursor: pointer;
+}
+.roc-chat-input__layer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 24px;
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+.roc-chat-input__layer.is-active {
+  opacity: 1;
+}
+.roc-chat-input__layer--mic {
+  background: #f3f4f6;
+  color: #374151;
+}
+.roc-chat-input__layer--recording {
+  background: #dc2626;
+  color: #ffffff;
+}
+.roc-chat-input__layer--send {
+  background: #000000;
+  color: #ffffff;
+}
+.roc-chat-input__layer--sending {
+  background: #9ca3af;
+  color: #ffffff;
+}
+
+/* src/styles/chatContainer.css */
+.roc-chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.roc-chat-container__list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+.roc-chat-container__loading {
+  display: flex;
+  justify-content: center;
+  padding: 8px 0;
+}
+.roc-chat-container__input {
+  position: relative;
+  flex-shrink: 0;
+}
+.roc-chat-container__scroll-button {
+  position: absolute;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+/* src/styles/loadingSpinner.css */
+.roc-spinner-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.roc-spinner {
+  border: 4px solid #e5e7eb;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: roc-spin 1s linear infinite;
+}
+@keyframes roc-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+/* src/styles/sendingDots.css */
+.roc-sending-dots {
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.roc-sending-dot {
+  font-weight: 800;
+  line-height: 1;
+  animation: roc-sending-bounce 1.4s ease-in-out infinite;
+}
+@keyframes roc-sending-bounce {
+  0%, to {
+    opacity: .2;
+    transform: translateY(0);
+  }
+  50% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}

package/dist/index.d.mts

@@ -10,11 +10,21 @@ type BaseMessage = {
     content: string;
     isLoading?: boolean;
 };
-type Message<T = {}> = BaseMessage & T;
+type MessageCore = Pick<BaseMessage, "id" | "role" | "content">;
+type Message<TCustom = unknown> = BaseMessage & {
+    custom?: TCustom;
+};
+
+type VoiceRecognition = {
+    start: () => void;
+    stop: () => void;
+    isRecording: boolean;
+    onTranscript?: (text: string) => void;
+};
 
 type Size$1 = 'xs' | 'sm' | 'md' | 'lg';
 type Props$5 = {
-    size: Size$1;
+    size?: Size$1;
 };
 declare function LoadingSpinner({ size }: Props$5): react_jsx_runtime.JSX.Element;
 
@@ -37,28 +47,22 @@ 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 MessagePatch = Partial<BaseMessage> & Record<string, unknown>;
-type Props$2<T extends Message = Message> = {
-    messages: T[];
-    messageMapper?: (msg: T) => MessagePatch;
-    messageRenderer?: (msg: T) => React$1.ReactNode;
+type Props$2<Raw> = {
+    messages: Raw[];
+    messageMapper?: (msg: Raw) => Message;
+    messageRenderer?: (msg: Message) => React$1.ReactNode;
     className?: string;
     loadingRenderer?: React$1.ReactNode;
 };
-declare function ChatList<T extends Message>({ messages, messageMapper, messageRenderer, className, loadingRenderer, }: Props$2<T>): react_jsx_runtime.JSX.Element;
+declare function ChatList<Raw>({ messages, messageMapper, messageRenderer, className, loadingRenderer, }: Props$2<Raw>): react_jsx_runtime.JSX.Element;
 
-type VoiceRecognitionController$1 = {
-    start: () => void;
-    stop: () => void;
-    isRecording: boolean;
-};
 type ButtonConfig = {
     className?: string;
     icon?: React.ReactNode;
 };
 type Props$1 = {
     onSend: (value: string) => void | Promise<void>;
-    voice?: boolean | VoiceRecognitionController$1;
+    voice?: boolean | VoiceRecognition;
     placeholder?: string;
     className?: string;
     inputClassName?: string;
@@ -78,9 +82,9 @@ type MessageProps = {
     messages: Message[];
     messageMapper?: never;
 };
-type RawProps<T> = {
-    messages: T[];
-    messageMapper: (msg: T) => Message;
+type RawProps<Raw> = {
+    messages: Raw[];
+    messageMapper: (msg: Raw) => Message;
 };
 type CommonProps = {
     messageRenderer?: (msg: Message) => React.ReactNode;
@@ -96,32 +100,27 @@ type CommonProps = {
     isFetchingNextPage?: boolean;
     className?: string;
 };
-type Props<T> = CommonProps & (MessageProps | RawProps<T>);
-declare function ChatContainer<T>(props: Props<T>): react_jsx_runtime.JSX.Element;
+type Props<Raw> = CommonProps & (MessageProps | RawProps<Raw>);
+declare function ChatContainer<Raw>(props: Props<Raw>): 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 Options$2<TRaw> = {
+type ExtractCustom$1<Raw> = Omit<Raw, keyof BaseMessage>;
+type Options$2<Raw> = {
     queryKey: readonly unknown[];
-    queryFn: (pageParam: unknown) => Promise<TRaw[]>;
+    queryFn: (pageParam: unknown) => Promise<Raw[]>;
     initialPageParam: unknown;
-    getNextPageParam: (lastPage: MessageMapper$1<TRaw>[], allPages: MessageMapper$1<TRaw>[][]) => unknown;
-    mutationFn: (content: string) => Promise<TRaw>;
-    map: (raw: TRaw) => MessageMapperResult$1;
+    getNextPageParam: (lastPage: Message<ExtractCustom$1<Raw>>[], allPages: Message<ExtractCustom$1<Raw>>[][]) => unknown;
+    mutationFn: (content: string) => Promise<Raw>;
+    map: (raw: Raw) => MessageCore;
     onError?: (error: unknown) => void;
     staleTime?: number;
     gcTime?: number;
 };
-declare function useChat<TRaw extends object>({ queryKey, queryFn, initialPageParam, getNextPageParam, mutationFn, map, onError, staleTime, gcTime, }: Options$2<TRaw>): {
-    messages: MessageMapper$1<TRaw>[];
+declare function useChat<Raw extends object>({ queryKey, queryFn, initialPageParam, getNextPageParam, mutationFn, map, onError, staleTime, gcTime, }: Options$2<Raw>): {
+    messages: Message<ExtractCustom$1<Raw>>[];
     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>>;
+    fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<InfiniteData<Message<ExtractCustom$1<Raw>>[], unknown>, Error>>;
     hasNextPage: boolean;
     isFetchingNextPage: boolean;
 };
@@ -196,39 +195,28 @@ declare function useBrowserSpeechRecognition({ lang, onStart, onEnd, onError, }?
     onTranscript: (text: string) => void;
 };
 
-type VoiceRecognitionController = {
-    start: () => void;
-    stop: () => void;
-    isRecording: boolean;
-    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 Options<TRaw> = {
+type ExtractCustom<Raw> = Omit<Raw, keyof BaseMessage>;
+type Options<Raw> = {
     queryKey: readonly unknown[];
-    queryFn: (pageParam: unknown) => Promise<TRaw[]>;
+    queryFn: (pageParam: unknown) => Promise<Raw[]>;
     initialPageParam: unknown;
-    getNextPageParam: (lastPage: MessageMapper<TRaw>[], allPages: MessageMapper<TRaw>[][]) => unknown;
-    mutationFn: (content: string) => Promise<TRaw>;
-    map: (raw: TRaw) => MessageMapperResult;
-    voice: VoiceRecognitionController;
+    getNextPageParam: (lastPage: Message<ExtractCustom<Raw>>[], allPages: Message<ExtractCustom<Raw>>[][]) => unknown;
+    mutationFn: (content: string) => Promise<Raw>;
+    map: (raw: Raw) => MessageCore;
+    voice: VoiceRecognition;
     onError?: (error: unknown) => void;
     staleTime?: number;
     gcTime?: number;
 };
-declare function useVoiceChat<TRaw extends object>({ queryKey, queryFn, initialPageParam, getNextPageParam, mutationFn, map, voice, onError, staleTime, gcTime, }: Options<TRaw>): {
-    messages: MessageMapper<TRaw>[];
+declare function useVoiceChat<Raw extends object>({ queryKey, queryFn, initialPageParam, getNextPageParam, mutationFn, map, voice, onError, staleTime, gcTime, }: Options<Raw>): {
+    messages: Message<ExtractCustom<Raw>>[];
     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>>;
+    fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<InfiniteData<Message<ExtractCustom<Raw>>[], unknown>, Error>>;
     hasNextPage: boolean;
     isFetchingNextPage: boolean;
 };
 
-export { ChatContainer, ChatInput, ChatList, ChatMessage, LoadingSpinner, type Message, SendingDots, useBrowserSpeechRecognition, useChat, useVoiceChat };
+export { ChatContainer, ChatInput, ChatList, ChatMessage, LoadingSpinner, type Message, SendingDots, type VoiceRecognition, useBrowserSpeechRecognition, useChat, useVoiceChat };

package/dist/index.d.ts

@@ -10,11 +10,21 @@ type BaseMessage = {
     content: string;
     isLoading?: boolean;
 };
-type Message<T = {}> = BaseMessage & T;
+type MessageCore = Pick<BaseMessage, "id" | "role" | "content">;
+type Message<TCustom = unknown> = BaseMessage & {
+    custom?: TCustom;
+};
+
+type VoiceRecognition = {
+    start: () => void;
+    stop: () => void;
+    isRecording: boolean;
+    onTranscript?: (text: string) => void;
+};
 
 type Size$1 = 'xs' | 'sm' | 'md' | 'lg';
 type Props$5 = {
-    size: Size$1;
+    size?: Size$1;
 };
 declare function LoadingSpinner({ size }: Props$5): react_jsx_runtime.JSX.Element;
 
@@ -37,28 +47,22 @@ 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 MessagePatch = Partial<BaseMessage> & Record<string, unknown>;
-type Props$2<T extends Message = Message> = {
-    messages: T[];
-    messageMapper?: (msg: T) => MessagePatch;
-    messageRenderer?: (msg: T) => React$1.ReactNode;
+type Props$2<Raw> = {
+    messages: Raw[];
+    messageMapper?: (msg: Raw) => Message;
+    messageRenderer?: (msg: Message) => React$1.ReactNode;
     className?: string;
     loadingRenderer?: React$1.ReactNode;
 };
-declare function ChatList<T extends Message>({ messages, messageMapper, messageRenderer, className, loadingRenderer, }: Props$2<T>): react_jsx_runtime.JSX.Element;
+declare function ChatList<Raw>({ messages, messageMapper, messageRenderer, className, loadingRenderer, }: Props$2<Raw>): react_jsx_runtime.JSX.Element;
 
-type VoiceRecognitionController$1 = {
-    start: () => void;
-    stop: () => void;
-    isRecording: boolean;
-};
 type ButtonConfig = {
     className?: string;
     icon?: React.ReactNode;
 };
 type Props$1 = {
     onSend: (value: string) => void | Promise<void>;
-    voice?: boolean | VoiceRecognitionController$1;
+    voice?: boolean | VoiceRecognition;
     placeholder?: string;
     className?: string;
     inputClassName?: string;
@@ -78,9 +82,9 @@ type MessageProps = {
     messages: Message[];
     messageMapper?: never;
 };
-type RawProps<T> = {
-    messages: T[];
-    messageMapper: (msg: T) => Message;
+type RawProps<Raw> = {
+    messages: Raw[];
+    messageMapper: (msg: Raw) => Message;
 };
 type CommonProps = {
     messageRenderer?: (msg: Message) => React.ReactNode;
@@ -96,32 +100,27 @@ type CommonProps = {
     isFetchingNextPage?: boolean;
     className?: string;
 };
-type Props<T> = CommonProps & (MessageProps | RawProps<T>);
-declare function ChatContainer<T>(props: Props<T>): react_jsx_runtime.JSX.Element;
+type Props<Raw> = CommonProps & (MessageProps | RawProps<Raw>);
+declare function ChatContainer<Raw>(props: Props<Raw>): 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 Options$2<TRaw> = {
+type ExtractCustom$1<Raw> = Omit<Raw, keyof BaseMessage>;
+type Options$2<Raw> = {
     queryKey: readonly unknown[];
-    queryFn: (pageParam: unknown) => Promise<TRaw[]>;
+    queryFn: (pageParam: unknown) => Promise<Raw[]>;
     initialPageParam: unknown;
-    getNextPageParam: (lastPage: MessageMapper$1<TRaw>[], allPages: MessageMapper$1<TRaw>[][]) => unknown;
-    mutationFn: (content: string) => Promise<TRaw>;
-    map: (raw: TRaw) => MessageMapperResult$1;
+    getNextPageParam: (lastPage: Message<ExtractCustom$1<Raw>>[], allPages: Message<ExtractCustom$1<Raw>>[][]) => unknown;
+    mutationFn: (content: string) => Promise<Raw>;
+    map: (raw: Raw) => MessageCore;
     onError?: (error: unknown) => void;
     staleTime?: number;
     gcTime?: number;
 };
-declare function useChat<TRaw extends object>({ queryKey, queryFn, initialPageParam, getNextPageParam, mutationFn, map, onError, staleTime, gcTime, }: Options$2<TRaw>): {
-    messages: MessageMapper$1<TRaw>[];
+declare function useChat<Raw extends object>({ queryKey, queryFn, initialPageParam, getNextPageParam, mutationFn, map, onError, staleTime, gcTime, }: Options$2<Raw>): {
+    messages: Message<ExtractCustom$1<Raw>>[];
     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>>;
+    fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<InfiniteData<Message<ExtractCustom$1<Raw>>[], unknown>, Error>>;
     hasNextPage: boolean;
     isFetchingNextPage: boolean;
 };
@@ -196,39 +195,28 @@ declare function useBrowserSpeechRecognition({ lang, onStart, onEnd, onError, }?
     onTranscript: (text: string) => void;
 };
 
-type VoiceRecognitionController = {
-    start: () => void;
-    stop: () => void;
-    isRecording: boolean;
-    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 Options<TRaw> = {
+type ExtractCustom<Raw> = Omit<Raw, keyof BaseMessage>;
+type Options<Raw> = {
     queryKey: readonly unknown[];
-    queryFn: (pageParam: unknown) => Promise<TRaw[]>;
+    queryFn: (pageParam: unknown) => Promise<Raw[]>;
     initialPageParam: unknown;
-    getNextPageParam: (lastPage: MessageMapper<TRaw>[], allPages: MessageMapper<TRaw>[][]) => unknown;
-    mutationFn: (content: string) => Promise<TRaw>;
-    map: (raw: TRaw) => MessageMapperResult;
-    voice: VoiceRecognitionController;
+    getNextPageParam: (lastPage: Message<ExtractCustom<Raw>>[], allPages: Message<ExtractCustom<Raw>>[][]) => unknown;
+    mutationFn: (content: string) => Promise<Raw>;
+    map: (raw: Raw) => MessageCore;
+    voice: VoiceRecognition;
     onError?: (error: unknown) => void;
     staleTime?: number;
     gcTime?: number;
 };
-declare function useVoiceChat<TRaw extends object>({ queryKey, queryFn, initialPageParam, getNextPageParam, mutationFn, map, voice, onError, staleTime, gcTime, }: Options<TRaw>): {
-    messages: MessageMapper<TRaw>[];
+declare function useVoiceChat<Raw extends object>({ queryKey, queryFn, initialPageParam, getNextPageParam, mutationFn, map, voice, onError, staleTime, gcTime, }: Options<Raw>): {
+    messages: Message<ExtractCustom<Raw>>[];
     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>>;
+    fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<InfiniteData<Message<ExtractCustom<Raw>>[], unknown>, Error>>;
     hasNextPage: boolean;
     isFetchingNextPage: boolean;
 };
 
-export { ChatContainer, ChatInput, ChatList, ChatMessage, LoadingSpinner, type Message, SendingDots, useBrowserSpeechRecognition, useChat, useVoiceChat };
+export { ChatContainer, ChatInput, ChatList, ChatMessage, LoadingSpinner, type Message, SendingDots, type VoiceRecognition, useBrowserSpeechRecognition, useChat, useVoiceChat };