migrate: get messages next token > chat message context 내 prevToken으로 마이그레이션

Author: dia-triple

packages/tds-widget/src/chat/chat/chat-room-messages/chat-api-service.ts

@@ -68,7 +68,7 @@ export class ChatApiService<T = UserType> {
     backward?: boolean
     lastMessageId: number | string | null
   }): Promise<
-    | { messages: ChatMessageInterface<T>[]; hasNext: boolean }
+    | { messages: ChatMessageInterface<T>[]; nextToken?: number }
     | ChatMessageInterface<T>[] // legacy API
   > {
     return this.fetcher(

packages/tds-widget/src/chat/chat/chat-room-messages/chat-message-context.tsx

@@ -24,7 +24,7 @@ import { ChatFetcher, ChatApiService } from './chat-api-service'
 
 export interface ChatMessagesProviderProps<T = UserType> {
   messages?: ChatMessageInterface<T>[]
-  hasPrevMessage?: boolean
+  prevToken?: ChatMessageInterface<T>['id']
   welcomeMessages?: WelcomeMessageInterface<T>[]
   fetcher: ChatFetcher
   /**
@@ -41,6 +41,7 @@ export interface ChatMessagesContextValue<T = UserType> {
   pendingMessages: UnsentMessage<ChatMessageInterface<T>>[]
   failedMessages: UnsentMessage<ChatMessageInterface<T>>[]
   hasPrevMessage: boolean
+  prevToken?: ChatMessageInterface<T>['id']
   dispatch: Dispatch<
     MessagesAction<ChatMessageInterface<T>, ChatMessageInterface<T>['id']>
   >
@@ -56,7 +57,7 @@ export const ChatMessagesContext =
 export function ChatMessagesProvider<T = UserType>({
   welcomeMessages = [],
   messages: initialMessages = [],
-  hasPrevMessage: initialPrevMessage,
+  prevToken: initialPrevToken,
   fetcher,
   useTripleChat = false,
   children,
@@ -69,7 +70,7 @@ export function ChatMessagesProvider<T = UserType>({
   )
 
   const [
-    { messages, pendingMessages, failedMessages, hasPrevMessage },
+    { messages, pendingMessages, failedMessages, hasPrevMessage, prevToken },
     dispatch,
   ] = useMessagesReducer<
     ChatMessageInterface<T>,
@@ -84,7 +85,7 @@ export function ChatMessagesProvider<T = UserType>({
       })
     } else {
       let messages = initialMessages
-      let hasPrevMessage: boolean | undefined = initialPrevMessage
+      let prevToken: number | undefined | null = initialPrevToken
 
       if (!messages.length) {
         try {
@@ -95,9 +96,10 @@ export function ChatMessagesProvider<T = UserType>({
           })
           if ('messages' in result) {
             messages = result.messages
-            hasPrevMessage = result.hasNext
+            prevToken = result.nextToken
           } else {
             messages = result
+            prevToken = null
           }
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
         } catch (error) {}
@@ -106,7 +108,9 @@ export function ChatMessagesProvider<T = UserType>({
       dispatch({
         action: MessagesActions.INIT,
         messages,
-        hasPrevMessage: hasPrevMessage ?? messages.length > 0,
+        ...(prevToken !== null && {
+          prevToken,
+        }),
       })
     }
   }
@@ -115,7 +119,8 @@ export function ChatMessagesProvider<T = UserType>({
     messages,
     pendingMessages,
     failedMessages,
-    hasPrevMessage,
+    hasPrevMessage: hasPrevMessage || !!prevToken,
+    prevToken,
     dispatch,
     welcomeMessages,
     initMessages,

packages/tds-widget/src/chat/chat/chat-room-messages/use-chat-room-messages.ts

@@ -62,6 +62,7 @@ export function useChatMessages<T = UserType>(
     pendingMessages,
     failedMessages,
     hasPrevMessage,
+    prevToken,
     dispatch,
     initMessages,
     welcomeMessages,
@@ -292,24 +293,24 @@ export function useChatMessages<T = UserType>(
       isCreatedChatRoom(room) &&
       isIntersecting &&
       !firstRenderForPrevScrollRef.current &&
-      hasPrevMessage &&
+      (hasPrevMessage || !!prevToken) &&
       messages.length > 0
 
     if (scrollable) {
       const prevScrollY = getScrollContainerHeight()
       let pastMessages: ChatMessageInterface<T>[] = []
-      let hasPrevMessage: boolean | undefined
+      let prevToken: number | undefined | null
 
       try {
         const result = await api.getMessages({
           roomId: room.id,
-          lastMessageId: messages[0].id,
+          lastMessageId: prevToken ?? messages[0].id,
           backward: true,
         })
 
         if ('messages' in result) {
           pastMessages = result.messages
-          hasPrevMessage = result.hasNext
+          prevToken = result.nextToken
         } else {
           pastMessages = result
         }
@@ -320,7 +321,9 @@ export function useChatMessages<T = UserType>(
       dispatch({
         action: MessagesActions.PAST,
         messages: pastMessages,
-        hasPrevMessage,
+        ...(prevToken !== null && {
+          prevToken,
+        }),
       })
       setScrollY(prevScrollY)
     } else if (isIntersecting && firstRenderForPrevScrollRef.current) {

packages/tds-widget/src/chat/chat/messages-reducer.ts

@@ -32,6 +32,11 @@ export interface MessagesState<Message extends MessageBase<Id>, Id = string> {
   failedMessages: UnsentMessage<Message, Id>[]
   hasPrevMessage: boolean
   hasNextMessage: boolean
+  /**
+   * [nol-chat] 다음 페이지 요청 cursor
+   * nol-chat에서는 hasPrevMessage 대신 prevToken을 사용
+   */
+  prevToken?: Id
 }
 
 export const initialMessagesState = {
@@ -46,12 +51,12 @@ export type MessagesAction<Message extends MessageBase<Id>, Id = string> =
   | {
       action: MessagesActions.INIT
       messages: Message[]
-      hasPrevMessage?: boolean
+      prevToken?: Id
     }
   | {
       action: MessagesActions.PAST
       messages: Message[]
-      hasPrevMessage?: boolean
+      prevToken?: Id
     }
   | {
       action: MessagesActions.NEW
@@ -95,14 +100,19 @@ function MessagesReducer<Message extends MessageBase<Id>, Id = string>(
       return {
         ...state,
         messages: action.messages,
-        hasPrevMessage: action.hasPrevMessage ?? state.hasPrevMessage,
+        prevToken: action.prevToken,
+        ...('prevToken' in action && { hasPrevMessage: !!action.prevToken }),
       }
 
     case MessagesActions.PAST:
       return {
         ...state,
         messages: [...action.messages, ...state.messages],
-        hasPrevMessage: action.hasPrevMessage ?? action.messages.length > 0,
+        hasPrevMessage:
+          'prevToken' in action
+            ? !!action.prevToken
+            : action.messages.length > 0,
+        prevToken: action.prevToken,
       }
 
     case MessagesActions.NEW: