app-tutor-ai-consumer 1.33.0 → 1.34.0

package/src/modules/messages/components/chat-file-uploader/chat-file-uploader.tsx

@@ -0,0 +1,80 @@
+import { type ChangeEvent, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { DropdownActions } from '@/src/lib/components'
+import { useChatFileUpload } from '@/src/lib/hooks/use-chat-file-upload'
+import { FILE_TYPES, FILE_TYPES_KEYS } from '@/src/lib/hooks/use-chat-file-upload/constants'
+import type { FileType } from '@/src/lib/hooks/use-chat-file-upload/types'
+
+import type { ChatFileUploaderProps } from './types'
+
+function ChatFileUploader({ disabled = false, loading = false }: ChatFileUploaderProps) {
+  const { t } = useTranslation()
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const imageInputRef = useRef<HTMLInputElement>(null)
+
+  const acceptFileTypes = [FILE_TYPES.document, FILE_TYPES.spreadsheet, FILE_TYPES.pdf]
+    .flat()
+    .join()
+  const acceptImageTypes = FILE_TYPES.image.join()
+
+  const { handleSelectFile, selectedFile } = useChatFileUpload()
+
+  const triggerFileInput = (type: FileType) => {
+    const inputRef = type === FILE_TYPES_KEYS.DOCUMENT ? fileInputRef : imageInputRef
+    inputRef.current?.click()
+  }
+
+  const handleFileInputChange = (e: ChangeEvent<HTMLInputElement>, type: FileType) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      handleSelectFile(file, type)
+    }
+    e.target.value = ''
+  }
+
+  return (
+    <>
+      <input
+        type='file'
+        ref={fileInputRef}
+        onChange={(e) => handleFileInputChange(e, FILE_TYPES_KEYS.DOCUMENT)}
+        accept={acceptFileTypes}
+        className='hidden'
+        aria-hidden='true'
+        aria-label={t('general.buttons.file')}
+      />
+      <input
+        type='file'
+        ref={imageInputRef}
+        onChange={(e) => handleFileInputChange(e, FILE_TYPES_KEYS.IMAGE)}
+        accept={acceptImageTypes}
+        className='hidden'
+        aria-hidden='true'
+        aria-label={t('general.buttons.image')}
+      />
+      <DropdownActions
+        triggerIcon='plus'
+        disabled={disabled || loading || selectedFile !== null}
+        items={[
+          {
+            label: 'general.buttons.file',
+            icon: 'file',
+            visible: true,
+            callback: () => triggerFileInput(FILE_TYPES_KEYS.DOCUMENT)
+          },
+          {
+            label: 'general.buttons.image',
+            icon: 'image',
+            visible: true,
+            callback: () => triggerFileInput(FILE_TYPES_KEYS.IMAGE)
+          }
+        ]}
+        triggerClassName='rounded-full border border-neutral-300 h-10 w-10 flex items-center justify-center'
+        triggerIconClassName='w-3.5 h-3.5'
+      />
+    </>
+  )
+}
+
+export default ChatFileUploader

package/src/modules/messages/components/chat-file-uploader/index.ts

@@ -0,0 +1 @@
+export { default as ChatFileUploader } from './chat-file-uploader'

package/src/modules/messages/components/chat-file-uploader/types.ts

@@ -0,0 +1,4 @@
+export type ChatFileUploaderProps = {
+  disabled?: boolean
+  loading?: boolean
+}

package/src/modules/messages/components/chat-input/chat-input.tsx

@@ -57,7 +57,7 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
             ),
             { 'cursor-not-allowed opacity-40': inputDisabled }
           )}
-          placeholder={t('send_message.field.placeholder')}
+          placeholder={t('send_message.field.placeholder_v2')}
           value={value}
           onChange={handleChange}
           onKeyDown={handleKeyDown}

package/src/modules/messages/components/index.ts

@@ -1,3 +1,4 @@
+export * from './chat-file-uploader'
 export * from './chat-input'
 export * from './message-img'
 export * from './message-item'

package/src/modules/messages/components/message-item/message-item.tsx

@@ -22,8 +22,7 @@ function MessageItem({ message }: { message: ParsedMessage }) {
       <div
         data-test='messages-item'
         className={clsx('w-full overflow-x-hidden rounded-lg p-3', {
-          'max-w-max bg-[rgb(from_var(--hc-color-neutral-300)_r_g_b_/_0.8)]': messageFromUser,
-          'bg-neutral-200': messageFromAi
+          'max-w-max bg-[rgb(from_var(--hc-color-neutral-300)_r_g_b_/_0.8)]': messageFromUser
         })}>
         <MessageContentTypeRenderer message={message} />
       </div>

package/src/modules/messages/constants.ts

@@ -5,5 +5,6 @@ export const MessagesEndpoints = {
   getAll: (conversationId: string) =>
     `${process.env.API_CONVERSATION_URL}/v1/conversations/${conversationId}/messages`,
   create: (conversationId: string) =>
-    `${process.env.API_CONVERSATION_URL}/v1/conversations/${conversationId}/messages`
+    `${process.env.API_CONVERSATION_URL}/v1/conversations/${conversationId}/messages`,
+  getSignedUrls: () => `${process.env.API_HOTMART_TUTOR}/api/v1/files/signed-urls`
 }

package/src/modules/messages/hooks/use-get-signed-urls/index.ts

@@ -0,0 +1 @@
+export * from './use-get-signed-urls'

package/src/modules/messages/hooks/use-get-signed-urls/use-get-signed-urls.spec.tsx

@@ -0,0 +1,27 @@
+import { renderHook, waitFor } from '@/src/config/tests'
+
+import type { UseGetSignedUrlsProps } from './use-get-signed-urls'
+import { useGetSignedUrls } from './use-get-signed-urls'
+
+describe('useGetSignedUrls', () => {
+  const props: UseGetSignedUrlsProps = {
+    chatId: 'chat-id',
+    fileExtension: 'pdf',
+    fileNameWithExtension: 'file.pdf',
+    productId: 123
+  }
+  const render = () => renderHook(() => useGetSignedUrls(props))
+
+  it('should get signed upload url', async () => {
+    const { result } = render()
+
+    await waitFor(() => expect(result.current.isSuccess).toBeTruthy())
+
+    expect(result.current.data).toMatchObject({
+      uploadUrl: expect.any(String) as string,
+      futureDownloadUrl: expect.any(String) as string,
+      imagePreviewUrl: expect.any(String) as string,
+      fileNameWithExtension: expect.any(String) as string
+    })
+  })
+})

package/src/modules/messages/hooks/use-get-signed-urls/use-get-signed-urls.tsx

@@ -0,0 +1,38 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { MessagesEndpoints } from '../../constants'
+import DirectMessagesService from '../../service.direct'
+
+export type UseGetSignedUrlsProps = {
+  chatId: string
+  fileExtension: string
+  fileNameWithExtension: string
+  productId: number
+  enabled?: boolean
+}
+
+export function useGetSignedUrls({
+  chatId,
+  fileExtension,
+  fileNameWithExtension,
+  productId,
+  enabled
+}: UseGetSignedUrlsProps) {
+  return useQuery({
+    queryKey: [
+      MessagesEndpoints.getSignedUrls(),
+      chatId,
+      fileExtension,
+      fileNameWithExtension,
+      productId
+    ],
+    queryFn: () =>
+      DirectMessagesService.getSignedUrls({
+        chatId,
+        fileExtension,
+        fileNameWithExtension,
+        productId
+      }),
+    enabled
+  })
+}

package/src/modules/messages/hooks/use-infinite-get-messages/use-infinite-get-messages.spec.tsx

@@ -1,7 +1,6 @@
 import { act, MockRequest, renderHook, waitFor } from '@/src/config/tests'
 import IMessageWithSenderDataMock from '../../__tests__/imessage-with-sender-data.mock'
 import { MessagesEndpoints, MSG_MAX_COUNT } from '../../constants'
-import type { IMessageWithSenderData } from '../../types'
 
 import useInfiniteGetMessages from './use-infinite-get-messages'
 
@@ -34,7 +33,7 @@ describe('useInfiniteGetMessages', () => {
 
     MockRequest.mock(
       MessagesEndpoints.getAll(mockConversationId),
-      new IMessageWithSenderDataMock().getMany(allMessages) as IMessageWithSenderData[]
+      new IMessageWithSenderDataMock().getMany(allMessages)
     )
 
     const { result } = createHook({

package/src/modules/messages/hooks/use-infinite-get-messages/use-infinite-get-messages.tsx

@@ -1,5 +1,4 @@
-import type { UndefinedInitialDataInfiniteOptions } from '@tanstack/react-query'
-import { useInfiniteQuery } from '@tanstack/react-query'
+import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query'
 
 import { formatTime } from '@/src/config/dayjs'
 import { api } from '@/src/config/request'
@@ -18,7 +17,7 @@ export const getAllMessagesQuery = ({
   profileId,
   limit = MSG_MAX_COUNT
 }: GetAllMessagesQueryProps) =>
-  ({
+  infiniteQueryOptions({
     queryKey: ['getAllMessagesWithoutSparkie', limit, conversationId],
     queryFn: async ({ pageParam }: { pageParam?: number }) => {
       const { data: messages } = await api.get<IMessageWithSenderData[]>(
@@ -68,11 +67,7 @@ export const getAllMessagesQuery = ({
         new Map<string, ParsedMessage[]>()
       )
     }
-  }) as UndefinedInitialDataInfiniteOptions<
-    FetchMessagesResponse,
-    Error,
-    Map<string, ParsedMessage[]>
-  >
+  })
 
 function useInfiniteGetMessages({ conversationId, profileId, limit }: GetAllMessagesQueryProps) {
   const query = getAllMessagesQuery({

package/src/modules/messages/hooks/use-prefetch-messages/index.ts

@@ -0,0 +1 @@
+export { default as usePrefetchMessages } from './use-prefetch-messages'

package/src/modules/messages/hooks/use-prefetch-messages/use-prefetch-messages.tsx

@@ -0,0 +1,28 @@
+import { useCallback, useEffect } from 'react'
+import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
+
+import { getProfileQuery } from '@/src/modules/profile'
+import type { WidgetSettingProps } from '@/src/types'
+import { MSG_MAX_COUNT } from '../../constants'
+import { getAllMessagesQuery } from '../use-infinite-get-messages'
+
+function usePrefetchMessages(settings: WidgetSettingProps) {
+  const queryClient = useQueryClient()
+  const profileQuery = useSuspenseQuery(getProfileQuery())
+
+  const prefetch = useCallback(async () => {
+    await queryClient.prefetchInfiniteQuery(
+      getAllMessagesQuery({
+        conversationId: settings.conversationId,
+        profileId: typeof profileQuery?.data?.id === 'string' ? profileQuery?.data?.id : undefined,
+        limit: MSG_MAX_COUNT
+      })
+    )
+  }, [profileQuery?.data?.id, queryClient, settings.conversationId])
+
+  useEffect(() => {
+    void prefetch()
+  }, [prefetch])
+}
+
+export default usePrefetchMessages

package/src/modules/messages/hooks/use-subscribe-message-received-event/use-subscribe-message-received-event.tsx

@@ -1,11 +1,10 @@
 import { useCallback, useEffect, useMemo } from 'react'
-import type { InfiniteData, QueryClient } from '@tanstack/react-query'
+import type { InfiniteData } from '@tanstack/react-query'
 import { useQueryClient } from '@tanstack/react-query'
 import { produce } from 'immer'
 
 import { ComponentSource, DataHubService } from '@/src/config/datahub'
 import { ViewTutorAnswerMessageSchema } from '@/src/config/datahub/schemas/tutor'
-import { useResponseTimeout } from '@/src/lib/hooks/use-response-timeout'
 import { useUpdateCursor } from '@/src/modules/cursor/hooks'
 import { useGetProfile } from '@/src/modules/profile'
 import { SparkieService } from '@/src/modules/sparkie'
@@ -18,59 +17,6 @@ import { useMessagesMaxCount, useUnreadMessagesSetAtom } from '../../store'
 import type { FetchMessagesResponse, IMessageWithSenderData } from '../../types'
 import { getAllMessagesQuery } from '../use-infinite-get-messages'
 
-export type MessageReceivedProps = {
-  data: IMessageWithSenderData
-  queryClient: QueryClient
-  conversationId: string
-  profileId: string
-  limit: number
-  messageIsMineCallback?: (data: IMessageWithSenderData) => void
-  messageIsNotMineCallback?: (data: IMessageWithSenderData) => void
-  errorCallback?: (error: unknown) => void
-}
-
-const messageReceivedUtil = ({
-  queryClient,
-  data,
-  conversationId,
-  profileId,
-  limit,
-  messageIsMineCallback,
-  messageIsNotMineCallback,
-  errorCallback
-}: MessageReceivedProps) => {
-  try {
-    const messagesQueryConfig = getAllMessagesQuery({ conversationId, profileId, limit })
-    const queryData = queryClient.getQueryData<InfiniteData<FetchMessagesResponse>>(
-      messagesQueryConfig.queryKey
-    )
-
-    const idsList = new Set(
-      queryData?.pages.flatMap((items) => items.messages.map((msg) => msg.id))
-    )
-
-    if (idsList.has(data.id)) return
-
-    queryClient.setQueryData<InfiniteData<FetchMessagesResponse>>(
-      messagesQueryConfig.queryKey,
-      (oldData) =>
-        produce(oldData, (draft) => {
-          draft?.pages.at(-1)?.messages?.push(data)
-          return draft
-        })
-    )
-
-    const isMine = data.contactId === profileId
-
-    if (isMine) {
-      return messageIsMineCallback?.(data)
-    }
-    messageIsNotMineCallback?.(data)
-  } catch (error) {
-    errorCallback?.(error)
-  }
-}
-
 const useSubscribeMessageReceivedEvent = () => {
   const [settings] = useWidgetSettingsAtom()
   const [, setWidgetLoading] = useWidgetLoadingAtom()
@@ -80,78 +26,75 @@ const useSubscribeMessageReceivedEvent = () => {
   const useUpdateCursorMutation = useUpdateCursor()
   const limit = useMessagesMaxCount()
   const isAgentMode = useIsAgentParentAtomValue()
-  const { reset: resetLoadingTimeout, startTimeout } = useResponseTimeout()
 
   const conversationId = useMemo(() => String(settings?.conversationId), [settings?.conversationId])
   const profileId = useMemo(() => String(profileQuery?.data?.id), [profileQuery?.data?.id])
-
-  const messageIsMineCallback = useCallback(
-    (data: IMessageWithSenderData) => {
-      // The cursor should update only with my messages
-      useUpdateCursorMutation.mutate(data.conversationId)
-    },
-    [useUpdateCursorMutation]
+  const messagesQueryConfig = useMemo(
+    () =>
+      getAllMessagesQuery({
+        conversationId,
+        profileId,
+        limit
+      }),
+    [conversationId, limit, profileId]
   )
 
-  const messageIsNotMineCallback = useCallback(
+  const messageReceived = useCallback(
     (data: IMessageWithSenderData) => {
-      setWidgetLoading(false)
-
-      DataHubService.sendEvent({
-        schema: new ViewTutorAnswerMessageSchema({
-          correlationId: data.metadata.correlationId,
-          messageId: data.id,
-          componentSource: isAgentMode
-            ? ComponentSource.PRODUCT_AGENT
-            : ComponentSource.HOTMART_TUTOR
+      if (data.conversationId !== conversationId) return
+
+      const queryData = queryClient.getQueryData<InfiniteData<FetchMessagesResponse>>(
+        messagesQueryConfig.queryKey
+      )
+
+      const idsList = new Set(
+        queryData?.pages.flatMap((items) => items.messages.map((msg) => msg.id))
+      )
+
+      if (idsList.has(data.id)) return
+
+      queryClient.setQueryData<InfiniteData<FetchMessagesResponse>>(
+        messagesQueryConfig.queryKey,
+        (oldData) => {
+          return produce(oldData, (draft) => {
+            draft?.pages.at(-1)?.messages?.push(data)
+            return draft
+          })
+        }
+      )
+
+      const isMine = data.contactId === profileId
+
+      if (!isMine) {
+        DataHubService.sendEvent({
+          schema: new ViewTutorAnswerMessageSchema({
+            correlationId: data.metadata.correlationId,
+            messageId: data.id,
+            componentSource: isAgentMode
+              ? ComponentSource.PRODUCT_AGENT
+              : ComponentSource.HOTMART_TUTOR
+          })
         })
-      })
 
-      addUnreadMessagesToSet({ itemId: data.id })
-    },
-    [addUnreadMessagesToSet, isAgentMode, setWidgetLoading]
-  )
-
-  const errorCallback = useCallback(
-    (error: unknown) => {
-      if (error) {
-        setWidgetLoading(false)
-        console.error(error)
-        throw new Error('Error getting realtime messages')
+        addUnreadMessagesToSet({ itemId: data.id })
+        setTimeout(() => setWidgetLoading(false), 100)
+      } else {
+        // The cursor should update only with my messages
+        useUpdateCursorMutation.mutate(data.conversationId)
       }
     },
-    [setWidgetLoading]
-  )
-
-  const messageReceived = useCallback(
-    (data: IMessageWithSenderData) => {
-      if (data.conversationId === conversationId)
-        messageReceivedUtil({
-          queryClient,
-          data,
-          conversationId,
-          profileId,
-          limit,
-          messageIsMineCallback,
-          messageIsNotMineCallback,
-          errorCallback
-        })
-    },
     [
+      addUnreadMessagesToSet,
       conversationId,
-      errorCallback,
-      limit,
-      messageIsMineCallback,
-      messageIsNotMineCallback,
+      isAgentMode,
+      messagesQueryConfig.queryKey,
       profileId,
-      queryClient
+      queryClient,
+      setWidgetLoading,
+      useUpdateCursorMutation
     ]
   )
 
-  const startLoadingTimeout = useCallback(() => {
-    startTimeout(() => setWidgetLoading(false))
-  }, [setWidgetLoading, startTimeout])
-
   useEffect(() => {
     SparkieService.subscribeEvents({ messageReceived })
 
@@ -159,14 +102,6 @@ const useSubscribeMessageReceivedEvent = () => {
       SparkieService.removeEventSubscription({ messageReceived })
     }
   }, [messageReceived])
-
-  useEffect(() => {
-    startLoadingTimeout()
-
-    return () => {
-      resetLoadingTimeout()
-    }
-  }, [resetLoadingTimeout, startLoadingTimeout])
 }
 
 export default useSubscribeMessageReceivedEvent

package/src/modules/messages/hooks/use-suspense-messages/index.ts

@@ -0,0 +1,2 @@
+export * from './types'
+export { default as useSuspenseMessages } from './use-suspense-messages'

package/src/modules/messages/hooks/use-suspense-messages/types.ts

@@ -0,0 +1,4 @@
+export type UseSuspenseMessagesProps = {
+  conversationId?: string
+  limit?: number
+}

package/src/modules/messages/hooks/use-suspense-messages/use-suspense-messages.tsx

@@ -0,0 +1,21 @@
+import { useSuspenseInfiniteQuery, useSuspenseQuery } from '@tanstack/react-query'
+
+import { getProfileQuery } from '@/src/modules/profile'
+import { MSG_MAX_COUNT } from '../../constants'
+import { getAllMessagesQuery } from '../use-infinite-get-messages'
+
+import type { UseSuspenseMessagesProps } from './types'
+
+function useSuspenseMessages({ conversationId, limit = MSG_MAX_COUNT }: UseSuspenseMessagesProps) {
+  const profileQuery = useSuspenseQuery(getProfileQuery())
+
+  return useSuspenseInfiniteQuery(
+    getAllMessagesQuery({
+      conversationId: conversationId,
+      profileId: typeof profileQuery?.data?.id === 'string' ? profileQuery?.data?.id : undefined,
+      limit
+    })
+  )
+}
+
+export default useSuspenseMessages

package/src/modules/messages/service.direct.ts

@@ -6,6 +6,8 @@ import { MessagesEndpoints } from './constants'
 import type {
   DirectMessagesServiceProps,
   FetchMessagesResponse,
+  IGetSignedUrlsPayload,
+  IGetSignedUrlsResponse,
   IMessageWithSenderData
 } from './types'
 
@@ -36,6 +38,22 @@ class DirectMessagesService {
 
     return data
   }
+
+  async getSignedUrls({
+    productId,
+    chatId,
+    fileExtension,
+    fileNameWithExtension
+  }: IGetSignedUrlsPayload): Promise<IGetSignedUrlsResponse> {
+    const { data } = await api.post<IGetSignedUrlsResponse>(MessagesEndpoints.getSignedUrls(), {
+      productId,
+      chatId,
+      fileExtension,
+      fileNameWithExtension
+    })
+
+    return data
+  }
 }
 
 export default new DirectMessagesService()

package/src/modules/messages/service.ts

@@ -1,5 +1,4 @@
 import type { Message } from '@hotmart-org-ca/sparkie/dist/MessageService'
-import type MessageService from '@hotmart-org-ca/sparkie/dist/MessageService'
 
 import { ApiError } from '@/src/config/request'
 import { HttpCodes } from '@/src/lib/utils'
@@ -16,7 +15,7 @@ import type {
 } from './types'
 
 class MessagesService {
-  async getSparkieMessageService(): Promise<MessageService> {
+  async getSparkieMessageService() {
     try {
       const messageService = await SparkieService.getMessageService()
 

package/src/modules/messages/store/messages-max-count.atom.ts

@@ -2,7 +2,7 @@ import { atom, useAtom, useAtomValue } from 'jotai'
 
 const INITIAL_MAX_COUNT = 2
 
-const messagesMaxCountAtom = atom(INITIAL_MAX_COUNT)
+export const messagesMaxCountAtom = atom(INITIAL_MAX_COUNT)
 
 const setMessagesMaxCountAtom = atom(
   (get) => get(messagesMaxCountAtom),
@@ -10,4 +10,4 @@ const setMessagesMaxCountAtom = atom(
 )
 
 export const useSetMessagesMaxCountAtom = () => useAtom(setMessagesMaxCountAtom)
-export const useMessagesMaxCount = () => useAtomValue(setMessagesMaxCountAtom)
+export const useMessagesMaxCount = () => useAtomValue(messagesMaxCountAtom)

package/src/modules/messages/types.ts

@@ -19,6 +19,13 @@ export type IGetMessagesPayload = {
   before?: number
 }
 
+export type IGetSignedUrlsPayload = {
+  chatId: string
+  fileExtension: string
+  fileNameWithExtension: string
+  productId: number
+}
+
 export type ISendTextMessagePayload = {
   conversationId: string
   content: {
@@ -63,6 +70,13 @@ export type MessageParserArgs = {
   profileId: string
 }
 
+export type IGetSignedUrlsResponse = {
+  uploadUrl: string
+  futureDownloadUrl: string
+  imagePreviewUrl: string
+  fileNameWithExtension: string
+}
+
 export type ParsedMessage = {
   from: string
   id: string

package/src/modules/profile/hooks/use-get-profile/use-get-profile.tsx

@@ -1,13 +1,14 @@
-import { useQuery } from '@tanstack/react-query'
+import { queryOptions, useQuery } from '@tanstack/react-query'
 
 import { ProfileEndpoints } from '../../constants'
 import ProfileService from '../../service'
 
-export const getProfileQuery = (enabled: boolean) => ({
-  queryKey: [ProfileEndpoints.getProfile()],
-  queryFn: () => ProfileService.getProfile(),
-  enabled
-})
+export const getProfileQuery = (enabled: boolean = true) =>
+  queryOptions({
+    queryKey: [ProfileEndpoints.getProfile()],
+    queryFn: () => ProfileService.getProfile(),
+    enabled
+  })
 
 export function useGetProfile(enabled: boolean = true) {
   return useQuery(getProfileQuery(enabled))

package/src/modules/sparkie/__tests__/sparkie.mock.ts

@@ -1,11 +1,8 @@
 import ICursorUpdateBuilder from '../../cursor/__tests__/icursor-update.builder'
-import type { IMessageWithSenderData } from '../../messages'
 import IMessageWithSenderDataMock from '../../messages/__tests__/imessage-with-sender-data.mock'
 
 export const SparkieMessageServiceMock = {
-  getAll: vi
-    .fn()
-    .mockReturnValue(new IMessageWithSenderDataMock().getMany(10) as IMessageWithSenderData[]),
+  getAll: vi.fn().mockReturnValue(new IMessageWithSenderDataMock().getMany(10)),
   post: vi.fn(),
   postDirect: vi.fn(),
   remove: vi.fn()