app-tutor-ai-consumer 1.5.0 → 1.7.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [1.7.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.6.0...v1.7.0) (2025-07-11)
+
+### Features
+
+- add send text message validation ([4f242ca](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/4f242caf92ec3cdab2ae5866d67abd6f1b5d864f))
+
+# [1.6.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.5.0...v1.6.0) (2025-07-11)
+
+### Features
+
+- add send text message support ([6526d55](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/6526d55fe2781cd9842be805f3406bf2176c825e))
+
 # [1.5.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.4.0...v1.5.0) (2025-07-10)
 
 ### Bug Fixes

package/config/vitest/__mocks__/sparkie.tsx

@@ -1,3 +1,12 @@
 import SparkieMock from '@/src/modules/sparkie/__tests__/sparkie.mock'
+import { SparkieService } from '@/src/modules/sparkie'
+import { SparkieMessageServiceMock } from '@/src/modules/sparkie/__tests__/sparkie.mock'
+import MessageService from '@hotmart/sparkie/dist/MessageService'
 
 vi.mock('@hotmart/sparkie', () => ({ default: SparkieMock }))
+
+beforeEach(() => {
+  vi.spyOn(SparkieService, 'getMessageService').mockResolvedValue(
+    SparkieMessageServiceMock as unknown as MessageService
+  )
+})

package/eslint.config.mjs

@@ -8,6 +8,7 @@ import globals from 'globals'
 import simpleImportSort from 'eslint-plugin-simple-import-sort'
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import pluginQuery from '@tanstack/eslint-plugin-query'
+import vitest from '@vitest/eslint-plugin'
 
 export default tseslint.config(
   {
@@ -89,4 +90,30 @@ export default tseslint.config(
       '@typescript-eslint/no-explicit-any': 'off',
     },
   },
+  {
+    files: [
+      '**/*.test.ts',
+      '**/*.test.tsx',
+      '**/*.spec.ts',
+      '**/*.spec.tsx'
+    ],
+    plugins: {
+      vitest,
+    },
+    languageOptions: {
+      globals: {
+        ...vitest.environments.env.globals,
+      },
+    },
+    rules: {
+      ...vitest.configs.recommended.rules,
+      '@typescript-eslint/unbound-method': 'off',
+      '@typescript-eslint/no-unsafe-assignment': 'off',
+      '@typescript-eslint/no-unsafe-member-access': 'off',
+      '@typescript-eslint/no-unsafe-call': 'off',
+      '@typescript-eslint/no-unsafe-return': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-non-null-assertion': 'off',
+    },
+  }
 )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",
@@ -60,9 +60,11 @@
     "@types/react-dom": "~19.1.6",
     "@types/react-router-dom": "~5.3.3",
     "@types/ua-parser-js": "~0.7.39",
+    "@types/uuid": "~10.0.0",
     "@vitejs/plugin-react": "~4.5.2",
     "@vitest/coverage-istanbul": "~3.2.3",
     "@vitest/coverage-v8": "~3.2.3",
+    "@vitest/eslint-plugin": "~1.3.4",
     "autoprefixer": "~10.4.21",
     "chance": "~1.1.13",
     "compression-webpack-plugin": "~11.1.0",
@@ -111,6 +113,7 @@
     "dayjs": "~1.11.13",
     "i18next": "~25.2.1",
     "i18next-resources-to-backend": "~1.2.1",
+    "immer": "~10.1.1",
     "jotai": "~2.12.5",
     "linkify-it": "~5.0.0",
     "prism-react-renderer": "~2.4.1",
@@ -118,10 +121,12 @@
     "react-dom": "~19.1.0",
     "react-i18next": "~15.5.2",
     "react-markdown": "~10.1.0",
+    "react-textarea-autosize": "~8.5.9",
     "rehype-raw": "~7.0.0",
     "rehype-sanitize": "~6.0.0",
     "remark-breaks": "~4.0.0",
-    "remark-gfm": "~4.0.1"
+    "remark-gfm": "~4.0.1",
+    "uuid": "~11.1.0"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "4.6.1",

package/src/@types/index.d.ts

@@ -9,8 +9,11 @@ declare global {
 
   interface Window {
     __INJECT_CSS_MODULE__?: (cssText: string, id: string) => void
-    startTutorWidget: (props: StartTutorWidgetProps) => Promise<void>
-    closeTutorWidget: () => void
+    startChatWidget: (
+      elementId: StartTutorWidgetProps['elementId'],
+      settings: StartTutorWidgetProps['settings']
+    ) => Promise<void>
+    closeChatWidget: () => void
     TOKEN: string
   }
 }

package/src/config/styles/global.css

@@ -79,14 +79,15 @@
   --ai-color-chat-response: #1e1926;
 
   /* Size */
+  --hc-size-spacing-1: 0.25rem;
   --hc-size-spacing-2: 0.5rem;
   --hc-size-border-medium: 0.5rem;
 }
 
 #hotmart-app-tutor-ai-consumer-root {
   & *::-webkit-scrollbar {
-    width: var(--hc-size-spacing-2);
-    height: var(--hc-size-spacing-2);
+    width: var(--custom-scrollbar-width, var(--hc-size-spacing-2));
+    height: var(--custom-scrollbar-width, var(--hc-size-spacing-2));
   }
 
   & *::-webkit-scrollbar-track {

package/src/config/tanstack/query-client.ts

@@ -14,7 +14,7 @@ export const queryClient = new QueryClient({
       retry(failureCount, error) {
         if (!api?.defaults?.headers?.common?.['Authorization']) return false
 
-        const maxRetries = 2
+        const maxRetries = 3
         const statusCode = (error as ApiError).statusCode
 
         return (

package/src/development-bootstrap.tsx

@@ -1,26 +1,26 @@
 import './index'
 
+import { v4 } from 'uuid'
+
 import { LANGUAGES } from './config/i18n'
 import { devMode } from './lib/utils'
 
 if (devMode) {
   window.TOKEN = process.env.TOKEN ?? ''
   void (async () => {
-    await window.startTutorWidget({
-      elementId: 'root',
-      settings: {
-        hotmartToken: window.TOKEN,
-        locale: LANGUAGES.PT_BR,
-        conversationId: '21506473-a93c-4b38-9c32-68a5ca37ce73', // OWNER
-        tutorName: 'Prof Jou Robots',
-        contactId: '38138170-6009-40cd-be50-001249e80a0d',
-        membershipId: '6297a4efa488cc775ac5e1dd',
-        namespace: 'tutor_v1-2',
-        author: 'Jonathan',
-        clubName: 'comofazerumvideodeteste',
-        productName: 'Curso de Assinatura',
-        productId: 4266504
-      }
+    await window.startChatWidget('root', {
+      hotmartToken: window.TOKEN,
+      locale: LANGUAGES.PT_BR,
+      conversationId: '21506473-a93c-4b38-9c32-68a5ca37ce73', // OWNER
+      tutorName: 'Prof Jou Robots',
+      contactId: '38138170-6009-40cd-be50-001249e80a0d',
+      membershipId: '6297a4efa488cc775ac5e1dd',
+      namespace: 'tutor_v1-2',
+      author: 'user',
+      clubName: 'comofazerumvideodeteste',
+      productName: 'Curso de Assinatura',
+      productId: 4266504,
+      sessionId: v4()
     })
   })()
 }

package/src/index.tsx

@@ -9,8 +9,9 @@ import { initLanguage } from './config/i18n'
 import { initAxios } from './config/request/api'
 import { productionMode } from './lib/utils'
 import { Main } from './main'
+import { SparkieService } from './modules/sparkie'
 import { TutorWidgetEvents, TutorWidgetEventTypes } from './modules/widget'
-import type { StartTutorWidgetProps } from './types'
+import type { WidgetSettingProps } from './types'
 
 const loadMainStyles = () => {
   const isProduction = productionMode
@@ -28,15 +29,24 @@ const loadMainStyles = () => {
   }
 }
 
-window.startTutorWidget = async ({
+window.startChatWidget = async (
   elementId = 'tutor-chat-app-widget',
-  settings
-}: StartTutorWidgetProps) => {
+  settings: WidgetSettingProps
+) => {
   loadMainStyles()
 
   const rootElement = document.getElementById(elementId) as HTMLElement
   const root = createRoot(rootElement)
 
+  await SparkieService.initSparkie({
+    token: settings.hotmartToken,
+    skipPresenceSetup: true,
+    retryOptions: {
+      maxRetries: 5,
+      retryDelay: 2000,
+      backoffMultiplier: 1.5
+    }
+  })
   initAxios(settings.hotmartToken)
   await initLanguage(settings.locale)
   await initDayjs(settings.locale)
@@ -49,4 +59,4 @@ window.startTutorWidget = async ({
     )
 }
 
-window.closeTutorWidget = () => TutorWidgetEvents.get(TutorWidgetEventTypes.CLOSE)?.dispatch()
+window.closeChatWidget = () => TutorWidgetEvents.get(TutorWidgetEventTypes.CLOSE)?.dispatch()

package/src/lib/components/icons/ai-color.svg

@@ -0,0 +1,17 @@
+<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M21.5813 16.7843L24.9086 18.5499L21.5813 20.3154L19.8068 23.6263L18.0313 20.3154L14.7041 18.5499L18.0313 16.7843L19.8068 13.4734L21.5813 16.7843ZM11.9119 9.10141L17.2354 11.9261L11.9119 14.7508L9.07199 20.0485L6.23301 14.7508L0.908569 11.9261L6.23301 9.10141L9.07199 3.80376L11.9119 9.10141ZM20.1457 3.24642L22.7786 4.64367L20.1457 6.03994L18.7413 8.66002L17.337 6.03994L14.7041 4.64367L17.337 3.24642L18.7413 0.626343L20.1457 3.24642Z"
+    fill="url(#paint0_linear_18592_52336)" />
+  <defs>
+    <linearGradient
+      id="paint0_linear_18592_52336"
+      x1="0.908569"
+      y1="12.1263"
+      x2="24.9086"
+      y2="12.1263"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#44D0FF" />
+      <stop offset="1" stop-color="#B48EFF" />
+    </linearGradient>
+  </defs>
+</svg>

package/src/lib/components/icons/icon-names.d.ts

@@ -1,2 +1,2 @@
 // Auto-generated file - DO NOT EDIT
-export type ValidIconNames = 'arrow-down' | 'chevron-down' | 'send'
+export type ValidIconNames = 'ai-color' | 'arrow-down' | 'chevron-down' | 'send' | 'stop'

package/src/lib/components/icons/stop.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+>
+  <rect x="7" y="7" width="10" height="10" rx="1.25" fill="currentColor"></rect>
+</svg>

package/src/lib/utils/is-text-empty.ts

@@ -0,0 +1,3 @@
+export function isTextEmpty(text: string) {
+  return /\S/.test(text)
+}

package/src/main/main.spec.tsx

@@ -13,14 +13,6 @@ describe('Main', () => {
     vi.mocked(useWidgetSettingsAtom).mockReturnValue([null, vi.fn()])
   })
 
-  it('should render empty element when settings.tutorName is not defined', async () => {
-    const { container } = renderComponent()
-
-    await waitFor(() => {
-      expect(container).toBeEmptyDOMElement()
-    })
-  })
-
   it('should render without errors', async () => {
     const props = new WidgetSettingPropsBuilder().withTutorName(chance.name())
     vi.mocked(useWidgetSettingsAtom).mockReturnValue([props, vi.fn()])

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

@@ -0,0 +1,76 @@
+import { createRef } from 'react'
+
+import { chance, fireEvent, render, screen } from '@/src/config/tests'
+
+import ChatInput from './chat-input'
+import { useChatInputValueAtom } from './chat-input.atom'
+
+vi.mock('./chat-input.atom', () => ({ useChatInputValueAtom: vi.fn() }))
+
+describe('ChatInput', () => {
+  const ref = createRef<HTMLTextAreaElement>()
+  const chatInputValueAtomMock = { val: '', setVal: vi.fn() }
+  const defaultProps = { name: chance.name() }
+
+  const renderComponent = (props = defaultProps) => render(<ChatInput {...props} ref={ref} />)
+
+  beforeEach(() => {
+    vi.mocked(useChatInputValueAtom).mockReturnValue([
+      chatInputValueAtomMock.val,
+      chatInputValueAtomMock.setVal
+    ])
+  })
+
+  it('should call focus when rendering the input', () => {
+    renderComponent()
+
+    expect(ref.current).toHaveFocus()
+  })
+
+  it('should call setValue when ref change event is called', () => {
+    renderComponent()
+
+    expect(ref.current).not.toBeNull()
+
+    const event = { target: { value: 'Test message' } }
+
+    fireEvent.change(ref.current!, event)
+
+    expect(chatInputValueAtomMock.setVal).toHaveBeenCalledTimes(1)
+    expect(chatInputValueAtomMock.setVal).toHaveBeenNthCalledWith(1, event.target.value)
+  })
+
+  it('should call onSend prop when it is defined and user presses the EnterKey', () => {
+    const onSend = vi.fn()
+    renderComponent({ ...defaultProps, onSend } as never)
+
+    expect(ref.current).not.toBeNull()
+
+    const event = { code: 'Enter' }
+
+    fireEvent.keyDown(ref.current!, event)
+
+    expect(onSend).toHaveBeenCalledTimes(1)
+  })
+
+  it('should disable the button when buttonDisabled prop is true', () => {
+    renderComponent({ buttonDisabled: true } as never)
+
+    expect(screen.getByRole('button', { name: /Submit Button/i })).toBeDisabled()
+  })
+
+  it('should enable the button when buttonDisabled prop is falsy', () => {
+    renderComponent()
+
+    expect(screen.getByRole('button', { name: /Submit Button/i })).toBeEnabled()
+  })
+
+  it('should set textarea value correctly', () => {
+    const name = chance.name()
+    vi.mocked(useChatInputValueAtom).mockReturnValue([name, vi.fn()])
+
+    renderComponent()
+
+    expect(ref.current?.value).toBe(name)
+  })
+})

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

@@ -1,32 +1,109 @@
-import { forwardRef } from 'react'
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
+import clsx from 'clsx'
+import type { ChangeEvent, KeyboardEvent } from 'react'
 import { useTranslation } from 'react-i18next'
+import TextareaAutosize from 'react-textarea-autosize'
 
-import { Icon } from '@/src/lib/components'
+import { Icon, Spinner } from '@/src/lib/components'
 
 import { useChatInputValueAtom } from './chat-input.atom'
 import type { ChatInputProps } from './types'
 
-const ChatInput = forwardRef<HTMLInputElement, ChatInputProps>(function ({ name, onSend }, ref) {
-  const { t } = useTranslation()
-  const [value] = useChatInputValueAtom()
-
-  return (
-    <div className='flex items-center rounded-full border-neutral-800 bg-neutral-800 px-4 py-2'>
-      <input
-        id={name}
-        name={name}
-        ref={ref}
-        type='text'
-        className='h-6 w-full border-none bg-transparent text-neutral-400 outline-0 placeholder:text-neutral-400'
-        placeholder={t('send_message.field.placeholder')}
-        defaultValue={value}
-      />
-      <button onClick={onSend}>
-        <Icon name='send' className='h-4 w-4 text-neutral-50' />
-      </button>
-    </div>
-  )
-})
+import styles from './styles.module.css'
+
+const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
+  (
+    { name, onSend, loading = false, inputDisabled = false, buttonDisabled = false },
+    forwardedRef
+  ) => {
+    const { t } = useTranslation()
+    const [value, setValue] = useChatInputValueAtom()
+    const ref = useRef<HTMLTextAreaElement>(null)
+
+    useImperativeHandle(forwardedRef, () => ref?.current as HTMLTextAreaElement)
+
+    const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+      if (inputDisabled) return
+
+      setValue(e.target.value)
+    }
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (loading || buttonDisabled) return
+
+      const isEnterKey = e.code === 'Enter'
+      const isShiftKey = e.shiftKey
+
+      if (isEnterKey && !isShiftKey) {
+        e.preventDefault()
+        onSend?.()
+      }
+    }
+
+    useEffect(() => {
+      if (inputDisabled) return
+
+      const input = ref?.current
+
+      if (input) {
+        input.focus()
+
+        const position = input.textLength ?? 0
+        input.setSelectionRange(position, position)
+      }
+    }, [inputDisabled])
+
+    return (
+      <div
+        className={clsx(
+          'flex items-center rounded-full border border-neutral-800 bg-neutral-900 px-4 py-2',
+          { 'cursor-not-allowed opacity-40': inputDisabled }
+        )}>
+        <TextareaAutosize
+          id={name}
+          name={name}
+          ref={ref}
+          className={clsx(
+            clsx(
+              'max-h-12 w-full resize-none border-none bg-transparent text-neutral-100 outline-none outline-0 placeholder:text-neutral-400',
+              styles.textArea
+            ),
+            { 'cursor-not-allowed': inputDisabled, 'opacity-40': inputDisabled || loading }
+          )}
+          placeholder={t('send_message.field.placeholder')}
+          value={value}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          disabled={inputDisabled}
+        />
+        <button
+          onClick={onSend}
+          disabled={buttonDisabled || loading}
+          className={clsx(
+            'flex size-8 flex-col items-center justify-center rounded-full outline-none transition-colors duration-300 ease-in',
+            {
+              'cursor-pointer hover:scale-110 hover:bg-neutral-600 focus:bg-neutral-700 focus:outline-none focus:ring-1 focus:ring-neutral-500 focus:ring-offset-2':
+                !buttonDisabled,
+              'cursor-not-allowed': buttonDisabled
+            }
+          )}
+          aria-label='Submit Button'>
+          {loading ? (
+            <Spinner className='h-5 w-5 text-neutral-500' />
+          ) : (
+            <Icon
+              name='send'
+              className={clsx('h-4 w-4 pr-0.5 pt-0.5 transition-colors duration-150', {
+                'text-neutral-50': !buttonDisabled,
+                'text-neutral-500': buttonDisabled
+              })}
+            />
+          )}
+        </button>
+      </div>
+    )
+  }
+)
 
 ChatInput.displayName = 'ChatInput'
 

package/src/modules/messages/components/chat-input/styles.module.css

@@ -0,0 +1,3 @@
+.textArea {
+  --custom-scrollbar-width: var(--hc-size-spacing-1);
+}

package/src/modules/messages/components/chat-input/types.ts

@@ -1,4 +1,7 @@
 export type ChatInputProps = {
   name: string
   onSend?: () => void
+  loading?: boolean
+  inputDisabled?: boolean
+  buttonDisabled?: boolean
 }

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

@@ -1,4 +1,5 @@
 export * from './chat-input'
 export * from './message-img'
 export * from './message-item'
+export * from './message-skeleton'
 export * from './messages-list'

package/src/modules/messages/components/message-skeleton/index.ts

@@ -0,0 +1 @@
+export { default as MessageSkeleton } from './message-skeleton'

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

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react'
+
+import { AIAvatarIcon } from '@/src/modules/widget'
+
+const MessageSkeleton = forwardRef<HTMLDivElement>((_, ref) => {
+  return (
+    <div
+      ref={ref}
+      className='flex max-w-[86%] flex-col items-start gap-2'
+      aria-label='Loading Component'>
+      <AIAvatarIcon className='rounded-lg bg-ai-chat-response' />
+      <div className='flex w-full flex-col items-start gap-2'>
+        <div className='h-3 w-full animate-pulse rounded-full bg-neutral-800 transition-colors' />
+        <div className='h-3 w-[83%] animate-pulse rounded-full bg-neutral-800 transition-colors delay-75' />
+        <div className='h-3 w-[56%] animate-pulse rounded-full bg-neutral-800 transition-colors delay-100' />
+      </div>
+    </div>
+  )
+})
+
+MessageSkeleton.displayName = 'MessageSkeleton'
+
+export default MessageSkeleton

package/src/modules/messages/components/messages-list/messages-list.tsx

@@ -2,8 +2,11 @@ import { lazy, useCallback, useRef } from 'react'
 import clsx from 'clsx'
 
 import { useRefClientHeight } from '@/src/lib/hooks'
+import { useWidgetLoadingAtomValue } from '@/src/modules/widget'
 import { useAllMessages, useManageScroll } from '../../hooks'
+import { useSkeletonRef } from '../../hooks/use-skeleton-ref'
 import { MessageItem } from '../message-item'
+import { MessageSkeleton } from '../message-skeleton'
 
 const MessageItemError = lazy(() => import('../message-item-error/message-item-error'))
 
@@ -22,7 +25,8 @@ function MessagesList() {
   const scrollerClientHeight = useRefClientHeight(scrollerRef)
   const scrollToButtonRef = useRef<HTMLButtonElement>(null)
   const { allMessages, messagesQuery } = useAllMessages()
-
+  const widgetIsLoading = useWidgetLoadingAtomValue()
+  const skeletonRef = useSkeletonRef()
   const { showScrollButton } = useManageScroll(scrollerRef)
 
   const scrollToBottom = useCallback(() => {
@@ -76,6 +80,15 @@ function MessagesList() {
         message={`❌ Error loading messages: ${messagesQuery.error?.message ?? ''}`}
         retry={() => void messagesQuery.refetch()}
       />
+
+      <div
+        className={clsx({
+          'pointer-events-none h-0 overflow-hidden opacity-0': !widgetIsLoading,
+          'pb-4': widgetIsLoading
+        })}
+        ref={skeletonRef}>
+        <MessageSkeleton />
+      </div>
     </div>
   )
 }

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

@@ -2,3 +2,5 @@ export * from './use-all-messages'
 export * from './use-fetch-messages'
 export * from './use-infinite-get-messages'
 export * from './use-manage-scroll'
+export * from './use-send-text-message'
+export * from './use-subscribe-message-received-event'

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

@@ -1,4 +1,7 @@
+import type MessageService from '@hotmart/sparkie/dist/MessageService'
+
 import { act, renderHook, waitFor } from '@/src/config/tests'
+import { SparkieService } from '@/src/modules/sparkie'
 import { SparkieMessageServiceMock } from '@/src/modules/sparkie/__tests__/sparkie.mock'
 import IMessageWithSenderDataMock from '../../__tests__/imessage-with-sender-data.mock'
 import type { IMessageWithSenderData } from '../../types'
@@ -11,6 +14,10 @@ describe('useInfiniteGetMessages', () => {
   const mockEnabled = true
 
   beforeEach(() => {
+    vi.clearAllMocks()
+    vi.spyOn(SparkieService, 'getMessageService').mockResolvedValue(
+      SparkieMessageServiceMock as unknown as MessageService
+    )
     SparkieMessageServiceMock.getAll.mockClear()
   })
 

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

@@ -1,12 +1,10 @@
-import { useCallback, useEffect } from 'react'
 import type { UndefinedInitialDataInfiniteOptions } from '@tanstack/react-query'
-import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
+import { useInfiniteQuery } from '@tanstack/react-query'
 
 import { formatTime } from '@/src/config/dayjs'
-import { SparkieService } from '@/src/modules/sparkie'
 import { MessagesService } from '../..'
 import { MSG_MAX_COUNT } from '../../constants'
-import type { FetchMessagesResponse, IMessage, ParsedMessage } from '../../types'
+import type { FetchMessagesResponse, ParsedMessage } from '../../types'
 import { messagesParser } from '../../utils'
 import type { UseFetchMessagesProps } from '../use-fetch-messages'
 
@@ -71,25 +69,11 @@ function useInfiniteGetMessages({
   profileId,
   enabled = false
 }: Omit<UseFetchMessagesProps, 'currentMessages' | 'loadFirstPage'>) {
-  const queryClient = useQueryClient()
-  const query = getMessagesInfiniteQuery({ conversationId, profileId, enabled })
-
-  const messageReceived = useCallback(
-    (data: IMessage) => {
-      if (data.conversationId !== conversationId) return
-
-      void queryClient.invalidateQueries({ queryKey: query.queryKey })
-    },
-    [conversationId, queryClient, query.queryKey]
-  )
-
-  useEffect(() => {
-    SparkieService.subscribeEvents({ messageReceived })
-
-    return () => {
-      SparkieService.removeEventSubscription({ messageReceived })
-    }
-  }, [messageReceived])
+  const query = getMessagesInfiniteQuery({
+    conversationId,
+    profileId,
+    enabled
+  })
 
   return useInfiniteQuery(query)
 }