app-tutor-ai-consumer 1.32.3 → 1.33.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [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
+
+- change sparkie call to messages history page ([ec5aa19](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/ec5aa19ee913204881491d729d7fd979e05bf337))
+
 ## [1.32.3](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.32.2...v1.32.3) (2025-10-13)
 
 ## [1.32.2](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.32.1...v1.32.2) (2025-10-08)

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.32.3",
+  "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,14 +4,13 @@ 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 { Main } from './main'
-import { SparkieService } from './modules/sparkie'
+import { TutorWidgetEvents } from './modules/widget'
 import type { Theme, WidgetSettingProps } from './types'
 
 const loadMainStyles = () => {
@@ -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}>
-          <Main 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/lib/components/markdownrenderer/markdownrenderer.tsx

@@ -79,7 +79,7 @@ const mdComponents: Partial<Components> = {
     )
   },
   p({ children }) {
-    return <span className='inline-block [&:not(:only-child)]:my-3'>{children}</span>
+    return <span className='block [&:not(:only-child)]:my-3'>{children}</span>
   },
   ul({ children }) {
     return <ul className='my-3 list-inside list-disc'>{children}</ul>

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/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'

package/src/modules/widget/components/chat-page/chat-page.tsx

@@ -17,6 +17,7 @@ import {
   useWidgetTabsValueAtom
 } from '../../store'
 import { testQuestionRegex } from '../../utils'
+import { AIDisclaimer } from '../ai-disclaimer'
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
@@ -94,14 +95,20 @@ function ChatPage() {
   return (
     <PageLayout
       asideChild={
-        <ChatInput
-          name='new-chat-msg-input'
-          ref={chatInputRef}
-          onSend={widgetTabs.currentTab === 'chat' ? handleSendMessage : undefined}
-          loading={sendTextMessageMutation.isPending}
-          inputDisabled={messagesQuery?.isLoading}
-          buttonDisabled={widgetLoading || messagesQuery?.isLoading || !value.trim()}
-        />
+        <>
+          <ChatInput
+            name='new-chat-msg-input'
+            ref={chatInputRef}
+            onSend={widgetTabs.currentTab === 'chat' ? handleSendMessage : undefined}
+            loading={sendTextMessageMutation.isPending}
+            inputDisabled={messagesQuery?.isLoading}
+            buttonDisabled={widgetLoading || messagesQuery?.isLoading || !value.trim()}
+          />
+
+          <div className='mx-auto w-fit'>
+            <AIDisclaimer />
+          </div>
+        </>
       }>
       <div className='max-md:px-[1.125rem] max-md:pt-[1.125rem] md:px-5 md:pt-5'>
         <WidgetHeader

package/src/modules/widget/components/container/container.tsx

@@ -1,9 +1,21 @@
+import { useEffect, useState } from 'react'
+
 import { useSubscribeMessageReceivedEvent } from '@/src/modules/messages/hooks'
 import { useSubscribeThreadClosedEvent } from '@/src/modules/thread/hooks'
 import { useListenToVisibilityEvents } from '../../hooks'
 import { useWidgetTabsAtom } from '../../store'
 import { WIDGET_TABS } from '../constants'
 
+// TODO: REMOVE
+const hotmartRumKey = 'app-tutor-ai-consumer::hotmart-rum::activate'
+const useSentryDebugger = () => {
+  const [logError] = useState(() => Boolean(window?.localStorage?.getItem?.(hotmartRumKey)))
+
+  useEffect(() => {
+    if (logError) throw new Error(hotmartRumKey)
+  }, [logError])
+}
+
 function WidgetContainer() {
   const [widgetTabs] = useWidgetTabsAtom()
 
@@ -11,6 +23,8 @@ function WidgetContainer() {
   useSubscribeThreadClosedEvent()
   useListenToVisibilityEvents()
 
+  useSentryDebugger()
+
   return (
     <div className='flex h-full flex-col items-center justify-stretch overflow-hidden'>
       {WIDGET_TABS[widgetTabs.currentTab]}

package/src/modules/widget/components/greetings-card/greetings-card.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
+import { useIsAgentParentAtomValue } from '../../store'
 import { AIAvatar } from '../ai-avatar'
 
 export type GreetingsCardProps = {
@@ -11,6 +12,7 @@ export type GreetingsCardProps = {
 
 function GreetingsCard({ author, tutorName, isDarkTheme = false }: GreetingsCardProps) {
   const { t } = useTranslation()
+  const isAgentMode = useIsAgentParentAtomValue()
 
   return (
     <div className='flex flex-col items-center justify-center'>
@@ -31,7 +33,12 @@ function GreetingsCard({ author, tutorName, isDarkTheme = false }: GreetingsCard
               'text-white': isDarkTheme,
               'text-gray-900': !isDarkTheme
             })}>
-            {t('general.greetings.firstMessage', { tutorName })}
+            {t(
+              isAgentMode
+                ? 'general.greetings.agentFirstMessage'
+                : 'general.greetings.firstMessage',
+              { tutorName }
+            )}
           </h3>
         </div>
         <p
@@ -39,7 +46,7 @@ function GreetingsCard({ author, tutorName, isDarkTheme = false }: GreetingsCard
             'text-gray-400': isDarkTheme,
             'text-neutral-600': !isDarkTheme
           })}>
-          {t('general.greetings.description')}
+          {t(isAgentMode ? 'general.greetings.agentDescription' : 'general.greetings.description')}
         </p>
       </div>
     </div>

package/src/modules/widget/components/starter-page/starter-page.tsx

@@ -12,6 +12,7 @@ import { useInitSparkie } from '@/src/modules/sparkie/hooks/use-init-sparkie'
 import { TutorWidgetEvents } from '../../events'
 import { useWidgetLoadingAtomValue, useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
 import { testQuestionRegex } from '../../utils'
+import { AIDisclaimer } from '../ai-disclaimer'
 import { GreetingsCard } from '../greetings-card'
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
@@ -133,13 +134,19 @@ function WidgetStarterPage() {
   return (
     <PageLayout
       asideChild={
-        <ChatInput
-          name='new-chat-msg-input'
-          ref={chatInputRef}
-          onSend={handleSend}
-          buttonDisabled={widgetLoading || !chatInputValue.trim()}
-          loading={!isSparkieReady}
-        />
+        <>
+          <ChatInput
+            name='new-chat-msg-input'
+            ref={chatInputRef}
+            onSend={handleSend}
+            buttonDisabled={widgetLoading || !chatInputValue.trim()}
+            loading={!isSparkieReady}
+          />
+
+          <div className='mx-auto w-fit'>
+            <AIDisclaimer />
+          </div>
+        </>
       }>
       <div className='grid-areas-[a_b] grid h-full grid-cols-1 grid-rows-[1fr_auto]'>
         <div className='grid-area-[a] flex min-h-0 flex-col max-md:px-[1.125rem] max-md:pt-[1.125rem] md:px-5 md:pt-5'>

package/src/types.ts

@@ -1,6 +1,3 @@
-import type { QueryClient } from '@tanstack/react-query'
-import type { Root } from 'react-dom/client'
-
 import type { ILanguages } from './config/i18n'
 
 export type StartTutorWidgetProps = {
@@ -71,9 +68,3 @@ export interface ICustomEvent<T = object> {
   handler: (listener: EventListenerOrEventListenerObject) => () => void | Promise<void>
   dispatch: <D = unknown>(detail?: D) => void
 }
-
-export type WidgetInstance = {
-  root: Root
-  container: HTMLElement
-  queryClient: QueryClient
-}

package/src/index.backup.tsx

@@ -1,61 +0,0 @@
-import './config/styles/global.css'
-import './config/styles/index.css'
-
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-
-import { initTheme } from '@/src/config/theme'
-import { version } from '../package.json'
-
-import { initLanguage } from './config/i18n'
-import { devMode, productionMode } from './lib/utils'
-import { Main } from './main'
-import { TutorWidgetEvents } from './modules/widget'
-import type { Theme, WidgetSettingProps } from './types'
-
-const loadMainStyles = () => {
-  const isProduction = productionMode
-  const bundlePath = !isProduction
-    ? `${process.env.BUNDLE_PATH}/`
-    : `${process.env.BUNDLE_PATH}/${process.env.APP_NAME}/_current/`
-
-  const cssPath = `${bundlePath}app-tutor-ai-consumer.css?v=${version}`
-
-  if (!document.querySelector(`link[href="${cssPath}"]`)) {
-    const linkElement = document.createElement('link')
-    linkElement.rel = 'stylesheet'
-    linkElement.href = cssPath
-    document.head.appendChild(linkElement)
-  }
-}
-
-window.startChatWidget = async (
-  elementId = 'tutor-chat-app-widget',
-  settings: WidgetSettingProps
-) => {
-  if (!devMode) {
-    loadMainStyles()
-  }
-
-  const rootElement = document.getElementById(elementId) as HTMLElement
-
-  if (!rootElement) return
-
-  rootElement.setAttribute('id', 'hotmart-app-tutor-ai-consumer-root')
-  const theme = (rootElement.getAttribute('data-theme') ?? 'dark') as Theme
-  const root = createRoot(rootElement)
-
-  await initLanguage(settings.locale)
-  initTheme(theme)
-
-  if (root) {
-    root.render(
-      <StrictMode>
-        <Main settings={{ ...settings, config: { ...settings.config, theme } }} />
-      </StrictMode>
-    )
-  }
-}
-
-window.closeChatWidget = () =>
-  Promise.resolve(TutorWidgetEvents['c3po-app-widget-close'].dispatch())

package/src/lib/hooks/use-response-timeout/index.ts

@@ -1 +0,0 @@
-export { default as useResponseTimeout } from './use-response-timeout'

package/src/lib/hooks/use-response-timeout/use-response-timeout.tsx

@@ -1,42 +0,0 @@
-import { useCallback, useRef } from 'react'
-
-const FIVE_MINUTES = 5 * 60 * 1000
-
-function useResponseTimeout() {
-  const timeoutRef = useRef<NodeJS.Timeout>(null)
-  const isWaitingRef = useRef(false)
-
-  const startTimeout = useCallback((callback: () => void) => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current)
-
-    isWaitingRef.current = true
-
-    timeoutRef.current = setTimeout(() => {
-      callback()
-      isWaitingRef.current = false
-    }, FIVE_MINUTES)
-  }, [])
-
-  const reset = useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current)
-      timeoutRef.current = null
-    }
-    isWaitingRef.current = false
-  }, [])
-
-  const cleanup = useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current)
-    }
-  }, [])
-
-  return {
-    startTimeout,
-    cleanup,
-    reset,
-    isWaiting: isWaitingRef.current
-  }
-}
-
-export default useResponseTimeout