app-tutor-ai-consumer 1.33.0 → 1.33.1

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.33.1](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.33.0...v1.33.1) (2025-10-22)
+
+### Bug Fixes
+
+- markdownrenderer ([ae8c08a](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/ae8c08a0620cd95a54a787ac00ddab78640d3f45))
+
 # [1.33.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.32.3...v1.33.0) (2025-10-16)
 
 ### Features

package/config/vitest/__mocks__/sparkie.tsx

@@ -4,7 +4,7 @@ import {
   SparkieMessageServiceMock,
   SparkieCursorServiceMock
 } from '@/src/modules/sparkie/__tests__/sparkie.mock'
-import MessageService from '@hotmart-org-ca/sparkie/dist/MessageService'
+import MessageService from '@hotmart/sparkie/dist/MessageService'
 
 vi.mock('@hotmart/sparkie', () => ({ default: SparkieMock }))
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.33.0",
+  "version": "1.33.1",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",
@@ -108,8 +108,8 @@
   "dependencies": {
     "@hot-observability-js/react": "~1.1.0",
     "@hotmart-org-ca/hot-observability-js": "~1.1.0",
-    "@hotmart-org-ca/sparkie": "~5.1.4",
     "@hotmart/event-agent-js": "~1.1.2",
+    "@hotmart/sparkie": "~5.1.0",
     "@optimizely/react-sdk": "~3.2.4",
     "@tanstack/query-sync-storage-persister": "~5.80.7",
     "@tanstack/react-query": "~5.80.6",

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

@@ -1,4 +1,4 @@
-import type { StartTutorWidgetProps, WidgetInstance } from '@/src/types'
+import type { StartTutorWidgetProps } from '@/src/types'
 
 export {}
 
@@ -13,8 +13,7 @@ declare global {
       elementId: StartTutorWidgetProps['elementId'],
       settings: StartTutorWidgetProps['settings']
     ) => Promise<void>
-    closeChatWidget: () => Promise<void>
-    __CHAT_WIDGET_INSTANCE__?: WidgetInstance
+    closeChatWidget: () => void
     TOKEN: string
   }
 }

package/src/config/tanstack/query-provider.tsx

@@ -1,16 +1,12 @@
-import type { QueryClient } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
 import type { PropsWithChildren } from 'react'
 
-import { persister } from './query-client'
+import { persister, queryClient } from './query-client'
 
-export type QueryProviderProps = PropsWithChildren<{
-  showDevTools?: boolean
-  queryClient: QueryClient
-}>
+export type QueryProviderProps = PropsWithChildren<{ showDevTools?: boolean }>
 
-function QueryProvider({ children, queryClient, showDevTools = true }: QueryProviderProps) {
+function QueryProvider({ children, showDevTools = true }: QueryProviderProps) {
   return (
     <PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
       {children}

package/src/index.tsx

@@ -4,15 +4,14 @@ import './config/styles/index.css'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 
-import { queryClient, QueryProvider } from '@/src/config/tanstack'
 import { initTheme } from '@/src/config/theme'
 import { version } from '../package.json'
 
 import { initLanguage } from './config/i18n'
 import { devMode, productionMode } from './lib/utils'
-import { SparkieService } from './modules/sparkie'
+import { Main } from './main'
+import { TutorWidgetEvents } from './modules/widget'
 import type { Theme, WidgetSettingProps } from './types'
-import Wrapper from './wrapper'
 
 const loadMainStyles = () => {
   const isProduction = productionMode
@@ -34,80 +33,28 @@ window.startChatWidget = async (
   elementId = 'tutor-chat-app-widget',
   settings: WidgetSettingProps
 ) => {
-  if (window.__CHAT_WIDGET_INSTANCE__) {
-    await window.closeChatWidget()
-  }
-
   if (!devMode) {
     loadMainStyles()
   }
 
-  const container = document.getElementById(elementId) as HTMLElement
+  const rootElement = document.getElementById(elementId) as HTMLElement
 
-  if (!container) return
+  if (!rootElement) return
 
-  container.setAttribute('id', 'hotmart-app-tutor-ai-consumer-root')
-  const theme = (container.getAttribute('data-theme') ?? 'dark') as Theme
+  rootElement.setAttribute('id', 'hotmart-app-tutor-ai-consumer-root')
+  const theme = (rootElement.getAttribute('data-theme') ?? 'dark') as Theme
+  const root = createRoot(rootElement)
 
-  const root = createRoot(container)
+  await initLanguage(settings.locale)
+  initTheme(theme)
 
   if (root) {
-    initTheme(theme)
-    await initLanguage(settings.locale)
-
     root.render(
       <StrictMode>
-        <QueryProvider queryClient={queryClient} showDevTools={false}>
-          <Wrapper settings={{ ...settings, config: { ...settings.config, theme } }} />
-        </QueryProvider>
+        <Main settings={{ ...settings, config: { ...settings.config, theme } }} />
       </StrictMode>
     )
-
-    window.__CHAT_WIDGET_INSTANCE__ = { root, container, queryClient }
   }
 }
 
-window.closeChatWidget = async () => {
-  const chatWidgetInstance = window.__CHAT_WIDGET_INSTANCE__
-
-  if (!chatWidgetInstance) return
-
-  const { root, container, queryClient } = chatWidgetInstance
-
-  try {
-    await queryClient.cancelQueries()
-  } catch (err) {
-    console.error('Error cancelling queries on widget close', err)
-  }
-
-  try {
-    root.unmount()
-  } catch (err) {
-    console.warn('Error unmounting widget root', err)
-  }
-
-  if (typeof queryClient.clear === 'function') {
-    try {
-      queryClient.clear()
-    } catch {
-      queryClient.getQueryCache().clear()
-      queryClient.getMutationCache().clear()
-    }
-  } else {
-    queryClient.getQueryCache().clear()
-    queryClient.getMutationCache().clear()
-  }
-
-  try {
-    container.remove()
-  } catch {
-    // ignore
-  }
-
-  try {
-    await SparkieService.destroySparkie()
-    window.__CHAT_WIDGET_INSTANCE__ = undefined
-  } catch (err) {
-    console.error('Error destroying Sparkie instance', err)
-  }
-}
+window.closeChatWidget = () => TutorWidgetEvents['c3po-app-widget-close'].dispatch()

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

@@ -23,5 +23,6 @@ export type ValidIconNames =
   | 'sparkle-tutor-light'
   | 'sparkle-tutor'
   | 'stop'
+  | 'tutor-logo'
   | 'warning'
   | 'waveforms'

package/src/lib/components/icons/tutor-logo.svg

@@ -0,0 +1,9 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.896914 6.12971C0.779441 6.10837 0.779442 5.89161 0.896914 5.87028C5.07103 5.11209 5.67461 2.64887 5.90592 0.812118C5.92066 0.695019 6.07934 0.695018 6.09408 0.812117C6.32539 2.64887 6.92897 5.11209 11.1031 5.87028C11.2206 5.89161 11.2206 6.10837 11.1031 6.12971C6.92897 6.8879 6.32539 9.35112 6.09408 11.1879C6.07934 11.305 5.92066 11.305 5.90592 11.1879C5.67461 9.35112 5.07103 6.8879 0.896914 6.12971Z" fill="url(#paint0_linear_7672_1716)"/>
+<defs>
+<linearGradient id="paint0_linear_7672_1716" x1="1.125" y1="-0.0649467" x2="10.634" y2="12.0859" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44D0FF"/>
+<stop offset="1" stop-color="#B48EFF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/modules/global-providers/global-providers.tsx

@@ -2,6 +2,7 @@ import { type PropsWithChildren, useEffect } from 'react'
 import { v4 } from 'uuid'
 
 import { OptimizelyProvider } from '@/src/config/optimizely'
+import { QueryProvider } from '@/src/config/tanstack'
 import { useWidgetSettingsAtom } from '@/src/modules/widget'
 import type { WidgetSettingProps } from '@/src/types'
 
@@ -20,7 +21,11 @@ function GlobalProviders({ children, settings }: GlobalProvidersProps) {
     setWidgetSettings(settings)
   }, [setWidgetSettings, settings])
 
-  return <OptimizelyProvider settings={settings}>{children}</OptimizelyProvider>
+  return (
+    <OptimizelyProvider settings={settings}>
+      <QueryProvider>{children}</QueryProvider>
+    </OptimizelyProvider>
+  )
 }
 
 export default GlobalProviders

package/src/modules/messages/__tests__/imessage-with-sender-data.builder.ts

@@ -1,4 +1,4 @@
-import type { MessageContent } from '@hotmart-org-ca/sparkie/dist/MessageService'
+import type { MessageContent } from '@hotmart/sparkie/dist/MessageService'
 
 import { chance } from '@/src/config/tests'
 import type { IMessageWithSenderData } from '../types'

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/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/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/service.direct.ts

@@ -1,4 +1,4 @@
-import type { Message } from '@hotmart-org-ca/sparkie/dist/MessageService'
+import type { Message } from '@hotmart/sparkie/dist/MessageService'
 
 import { api } from '@/src/config/request'
 

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 type { Message } from '@hotmart/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/types.ts

@@ -2,7 +2,7 @@ import type {
   Message as SparkieMsg,
   MessageContent,
   SenderData
-} from '@hotmart-org-ca/sparkie/dist/MessageService'
+} from '@hotmart/sparkie/dist/MessageService'
 
 export type IMessage = SparkieMsg & {
   metadata: {

package/src/modules/messages/utils/set-messages-cache/utils.ts

@@ -1,4 +1,4 @@
-import type { Message } from '@hotmart-org-ca/sparkie/dist/MessageService'
+import type { Message } from '@hotmart/sparkie/dist/MessageService'
 import type { InfiniteData, QueryClient } from '@tanstack/react-query'
 import { produce } from 'immer'
 

package/src/modules/sparkie/hooks/use-init-sparkie/use-init-sparkie.tsx

@@ -1,20 +1,16 @@
 import { useCallback, useEffect, useState } from 'react'
 
-import { useIsAgentParentAtomValue, useWidgetSettingsAtomValue } from '@/src/modules/widget'
+import { useWidgetSettingsAtomValue } from '@/src/modules/widget'
 import { SparkieService } from '../..'
-import { useSparkieStateAtom } from '../../store'
 
 function useInitSparkie() {
   const [isSuccess, setIsSuccess] = useState(false)
   const settings = useWidgetSettingsAtomValue()
-  const [sparkieState, setSparkieState] = useSparkieStateAtom()
-  const isAgentMode = useIsAgentParentAtomValue()
 
   const init = useCallback(async () => {
     if (!settings?.hotmartToken) return
 
     try {
-      setSparkieState('initializing')
       await SparkieService.initSparkie({
         token: settings?.hotmartToken,
         skipPresenceSetup: true,
@@ -26,26 +22,16 @@ function useInitSparkie() {
       })
       await SparkieService.ensureInitialized()
       setIsSuccess(true)
-      setSparkieState('initialized')
     } catch {
       setIsSuccess(false)
-      setSparkieState('failed')
+      // TODO: Create Error PAGE and setTab
+      // setTab('information')
     }
-  }, [setSparkieState, settings?.hotmartToken])
-
-  const checkState = useCallback(() => {
-    if (!isAgentMode && sparkieState === 'idle') {
-      return init()
-    }
-
-    if (sparkieState === 'initialized') {
-      setIsSuccess(true)
-    }
-  }, [init, isAgentMode, sparkieState])
+  }, [settings?.hotmartToken])
 
   useEffect(() => {
-    void checkState()
-  }, [checkState])
+    void init()
+  }, [init])
 
   return isSuccess
 }

package/src/modules/sparkie/service.ts

@@ -1,4 +1,4 @@
-import Sparkie from '@hotmart-org-ca/sparkie'
+import Sparkie from '@hotmart/sparkie'
 
 import { MSG_MAX_COUNT } from '../messages'
 
@@ -110,7 +110,8 @@ class SparkieService {
 
     while (attempt <= maxRetries) {
       try {
-        if (!token?.trim()) throw new Error('Invalid or missing token for Sparkie initialization')
+        if (!token || !token.trim())
+          throw new Error('Invalid or missing token for Sparkie initialization')
 
         const sparkie = this.sparkieInstance
         const service = await sparkie.init(token, { skipPresenceSetup })

package/src/modules/widget/components/ai-disclaimer/ai-disclaimer.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next'
+
+import { Icon } from '@/src/lib/components/icons'
+
+const AIDisclaimer = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='mt-4 flex w-full items-center gap-1 text-xs text-neutral-500'>
+      <p className='mb-0'>{t('ai_disclaimer.technology')}</p>
+
+      <Icon name='tutor-logo' className='inline-flex h-3 w-3 align-middle' />
+
+      <p className='mb-0'>{t('ai_disclaimer.hotmart_ai')}</p>
+    </div>
+  )
+}
+
+export default AIDisclaimer

package/src/modules/widget/components/ai-disclaimer/index.ts

@@ -0,0 +1 @@
+export { default as AIDisclaimer } from './ai-disclaimer'