app-tutor-ai-consumer 1.47.0 → 1.48.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# [1.48.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.47.0...v1.48.0) (2026-01-05)
+
+### Features
+
+- add new conversation handling ([e075045](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/e075045f8f0aa5833c2b11d0cd4ef1ff4bef5bfd))
+
 # [1.47.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.46.2...v1.47.0) (2026-01-02)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.47.0",
+  "version": "1.48.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",

package/src/config/tests/handlers.ts

@@ -1,5 +1,6 @@
 import { http, HttpResponse } from 'msw'
 
+import { ConversationEndpoints } from '@/src/modules/conversation/constants'
 import { MessagesEndpoints, MSG_MAX_COUNT } from '@/src/modules/messages'
 import SignedFilesUrlsResponseBuilder from '@/src/modules/messages/__tests__/files-signed-urls.builder'
 import IMessageWithSenderDataMock from '@/src/modules/messages/__tests__/imessage-with-sender-data.mock'
@@ -28,5 +29,14 @@ export const handlers = [
     return HttpResponse.json(
       new IMessageWithSenderDataMock().getMany(isNaN(limit) ? MSG_MAX_COUNT : limit)
     )
-  })
+  }),
+  http.patch(
+    ConversationEndpoints.updateTitle({
+      productId: ':productId' as unknown as number,
+      conversationId: ':conversationId'
+    }),
+    () => {
+      return HttpResponse.json({ ok: true })
+    }
+  )
 ]

package/src/modules/conversation/constants.ts

@@ -0,0 +1,6 @@
+import type { ConversationUpdateRequestProps } from './types'
+
+export const ConversationEndpoints = {
+  updateTitle: ({ productId, conversationId }: Omit<ConversationUpdateRequestProps, 'title'>) =>
+    `${process.env.API_HOTMART_TUTOR}/api/v1/chat/product/${productId}/buyer/chat/${conversationId}`
+}

package/src/modules/conversation/events.ts

@@ -0,0 +1,27 @@
+import type { ICustomEvent } from '@/src/types'
+
+import type { UpdateConversationTitleParams } from './hooks/update-conversation-title'
+
+export const ConversationEventTypes = {
+  UPDATE_CONVERSATION_TITLE: 'tutor-app-widget:update-conversation-title'
+} as const
+
+export const ConversationEvents = {
+  [ConversationEventTypes.UPDATE_CONVERSATION_TITLE]: {
+    name: ConversationEventTypes.UPDATE_CONVERSATION_TITLE,
+    handler(callback) {
+      window.addEventListener(ConversationEventTypes.UPDATE_CONVERSATION_TITLE, callback)
+
+      return () => {
+        window.removeEventListener(ConversationEventTypes.UPDATE_CONVERSATION_TITLE, callback)
+      }
+    },
+    dispatch(payload: UpdateConversationTitleParams) {
+      window.dispatchEvent(
+        new CustomEvent(ConversationEventTypes.UPDATE_CONVERSATION_TITLE, {
+          detail: payload
+        })
+      )
+    }
+  } as ICustomEvent<typeof ConversationEventTypes>
+} as const

package/src/modules/conversation/hooks/update-conversation-title/index.ts

@@ -0,0 +1,2 @@
+export * from './types'
+export { default as useUpdateConversationTitle } from './update-conversation-title'

package/src/modules/conversation/hooks/update-conversation-title/types.ts

@@ -0,0 +1,5 @@
+export type UpdateConversationTitleParams = {
+  conversationId: string
+  productId: number
+  subject: string
+}

package/src/modules/conversation/hooks/update-conversation-title/update-conversation-title.spec.tsx

@@ -0,0 +1,34 @@
+import { chance, renderHook, waitFor } from '@/src/config/tests'
+import { ConversationEvents, ConversationEventTypes } from '../../events'
+
+import useUpdateConversationTitle from './update-conversation-title'
+
+describe('useUpdateConversationTitle', () => {
+  const payload = {
+    conversationId: chance.guid({ version: 4 }),
+    productId: chance.integer({ min: 1, max: 100 }),
+    subject: chance.sentence({ words: 5 })
+  }
+
+  const customRenderHook = () => renderHook(useUpdateConversationTitle)
+
+  it('should update the conversation title without errors', () => {
+    const { result } = customRenderHook()
+
+    expect(result.current).toBeDefined()
+  })
+
+  it('should dispatch event when update is done successfully', async () => {
+    const evt = ConversationEvents[ConversationEventTypes.UPDATE_CONVERSATION_TITLE]
+
+    vi.spyOn(evt, 'dispatch')
+
+    const { result } = customRenderHook()
+
+    await waitFor(async () => {
+      await result.current.mutateAsync(payload)
+    })
+
+    expect(evt.dispatch).toHaveBeenCalledExactlyOnceWith(payload)
+  })
+})

package/src/modules/conversation/hooks/update-conversation-title/update-conversation-title.tsx

@@ -0,0 +1,18 @@
+import { useMutation } from '@tanstack/react-query'
+
+import { ConversationService } from '../..'
+import { ConversationEvents, ConversationEventTypes } from '../../events'
+
+import type { UpdateConversationTitleParams } from './types'
+
+function useUpdateConversationTitle() {
+  return useMutation({
+    mutationFn: async ({ conversationId, productId, subject }: UpdateConversationTitleParams) =>
+      ConversationService.updateTitle({ conversationId, productId, title: subject }),
+    onSuccess: (_, variables) => {
+      ConversationEvents[ConversationEventTypes.UPDATE_CONVERSATION_TITLE].dispatch(variables)
+    }
+  })
+}
+
+export default useUpdateConversationTitle

package/src/modules/conversation/index.ts

@@ -0,0 +1 @@
+export { default as ConversationService } from './service'

package/src/modules/conversation/service.ts

@@ -0,0 +1,20 @@
+import { api } from '@/src/config/request'
+
+import { ConversationEndpoints } from './constants'
+import type { ConversationUpdateRequestProps } from './types'
+
+class ConversationService {
+  async updateTitle({ productId, conversationId, title }: ConversationUpdateRequestProps) {
+    const { data } = await api.patch<object>(
+      ConversationEndpoints.updateTitle({
+        productId,
+        conversationId
+      }),
+      { subject: title }
+    )
+
+    return data
+  }
+}
+
+export default new ConversationService()

package/src/modules/conversation/types.ts

@@ -0,0 +1,5 @@
+export type ConversationUpdateRequestProps = {
+  productId: number
+  conversationId: string
+  title: string
+}

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

@@ -64,16 +64,18 @@ const MessagesContainer = forwardRef<HTMLDivElement, MessagesContainerProps>(
       <div
         ref={scrollerRef}
         className='flex h-full flex-col gap-2 overflow-auto max-md:p-[1.125rem] md:p-5'>
-        <div className='mb-auto flex-1 self-center'>
-          <Button
-            className='max-w-max rounded-full border border-neutral-300 bg-neutral-200 px-2 py-1 text-xs/normal tracking-wide text-neutral-900 hover:text-neutral-900 focus:text-neutral-900 active:text-neutral-900'
-            onClick={handleClickShowMore}
-            loading={loading}
-            show={showButton}>
-            <Icon name='arrow-up' className='h-4 w-3' aria-hidden />
-            <span className='text-nowrap'>{t('general.buttons.show_more')}</span>
-          </Button>
-        </div>
+        {showButton && (
+          <div className='mb-auto flex-1 self-center'>
+            <Button
+              className='max-w-max rounded-full border border-neutral-300 bg-neutral-200 px-2 py-1 text-xs/normal tracking-wide text-neutral-900 hover:text-neutral-900 focus:text-neutral-900 active:text-neutral-900'
+              onClick={handleClickShowMore}
+              loading={loading}
+              show={showButton}>
+              <Icon name='arrow-up' className='h-4 w-3' aria-hidden />
+              <span className='text-nowrap'>{t('general.buttons.show_more')}</span>
+            </Button>
+          </div>
+        )}
         {children}
 
         {error?.show &&

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

@@ -0,0 +1,12 @@
+import { useIsAgentParentAtomValue } from '@/src/modules/widget'
+import { WidgetStarterPageContent } from '@/src/modules/widget/components/starter-page/starter-page-content'
+
+function MessagesListEmptyState() {
+  const isAgentMode = useIsAgentParentAtomValue()
+
+  if (!isAgentMode) return null
+
+  return <WidgetStarterPageContent />
+}
+
+export default MessagesListEmptyState

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

@@ -1,8 +1,19 @@
+import { useEffect } from 'react'
+
 import type { ParsedMessage } from '@/src/modules/messages'
 import { MessageItem } from '@/src/modules/messages/components'
+import { useMessagesCountAtom } from '../../store/messages-count.atom'
+
+import MessagesListEmptyState from './messages-list-empty-state'
 
 function MessagesList({ messagesMap }: { messagesMap: Map<string, ParsedMessage[]> }) {
-  if (!(messagesMap.size > 0)) return null
+  const [, setMessagesCount] = useMessagesCountAtom()
+
+  useEffect(() => {
+    setMessagesCount(messagesMap?.size ?? 0)
+  }, [messagesMap, setMessagesCount])
+
+  if (!(messagesMap.size > 0)) return <MessagesListEmptyState />
 
   return Array.from(messagesMap).map(([, messages], i) => (
     <div key={i} className='flex flex-1 flex-col justify-center gap-6'>

package/src/modules/messages/constants.ts

@@ -1,5 +1,6 @@
 export const MSG_MAX_COUNT = 20
 export const MSG_MAX_PAGES = 20
+export const EXCERPT_SIZE = 47
 
 export const MessagesEndpoints = {
   getAll: (conversationId: string) =>

package/src/modules/messages/hooks/use-send-first-message/index.ts

@@ -0,0 +1 @@
+export { default as useSendFirstMessage } from './use-send-first-message'

package/src/modules/messages/hooks/use-send-first-message/use-send-first-message.spec.tsx

@@ -0,0 +1,142 @@
+import { renderHook } from '@/src/config/tests'
+import { useUpdateConversationTitle } from '@/src/modules/conversation/hooks/update-conversation-title'
+import { useWidgetSettingsAtomValue } from '@/src/modules/widget/store'
+import { useMessagesCountAtomValue } from '../../store/messages-count.atom'
+import { useSendTextMessage } from '../use-send-text-message'
+
+import useSendFirstMessage from './use-send-first-message'
+
+vi.mock('@/src/modules/conversation/hooks/update-conversation-title', () => ({
+  useUpdateConversationTitle: vi.fn()
+}))
+
+vi.mock('@/src/modules/widget/store', () => ({
+  useWidgetSettingsAtomValue: vi.fn()
+}))
+
+vi.mock('../../store/messages-count.atom', () => ({
+  useMessagesCountAtomValue: vi.fn()
+}))
+
+vi.mock('../use-send-text-message', () => ({
+  useSendTextMessage: vi.fn()
+}))
+
+describe('useSendFirstMessage', () => {
+  const mockSendMessage = vi.fn()
+  const mockUpdateTitle = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    vi.mocked(useSendTextMessage).mockReturnValue({
+      mutateAsync: mockSendMessage,
+      isPending: false,
+      error: null
+    } as never)
+
+    vi.mocked(useUpdateConversationTitle).mockReturnValue({
+      mutateAsync: mockUpdateTitle,
+      isPending: false,
+      error: null
+    } as never)
+
+    vi.mocked(useWidgetSettingsAtomValue).mockReturnValue({
+      conversationId: null,
+      productId: 'prod-456'
+    } as never)
+
+    vi.mocked(useMessagesCountAtomValue).mockReturnValue(0)
+  })
+
+  describe('when sending first message', () => {
+    it('should send message and update conversation title', async () => {
+      vi.mocked(useWidgetSettingsAtomValue).mockReturnValue({
+        conversationId: 'conv-123',
+        productId: 'prod-456'
+      } as never)
+      const mockMessage = { id: 'msg-1', content: 'Hello' }
+      mockSendMessage.mockResolvedValue(mockMessage)
+      mockUpdateTitle.mockResolvedValue({})
+
+      const { result } = renderHook(() => useSendFirstMessage())
+
+      await result.current.sendFirstMessage('Hello world')
+
+      expect(mockSendMessage).toHaveBeenCalledWith('Hello world', undefined)
+      expect(mockUpdateTitle).toHaveBeenCalledWith({
+        conversationId: 'conv-123',
+        productId: 'prod-456',
+        subject: 'Hello world'
+      })
+    })
+  })
+
+  describe('when not first message', () => {
+    it('should only send message without updating title', async () => {
+      vi.mocked(useMessagesCountAtomValue).mockReturnValue(5)
+
+      const mockMessage = { id: 'msg-1', content: 'Hello' }
+      mockSendMessage.mockResolvedValue(mockMessage)
+
+      const { result } = renderHook(() => useSendFirstMessage())
+
+      await result.current.sendFirstMessage('Hello world')
+
+      expect(mockSendMessage).toHaveBeenCalledWith('Hello world', undefined)
+      expect(mockUpdateTitle).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('when missing settings', () => {
+    it('should not update title if conversationId is missing', async () => {
+      const mockMessage = { id: 'msg-1', content: 'Hello' }
+      mockSendMessage.mockResolvedValue(mockMessage)
+
+      const { result } = renderHook(() => useSendFirstMessage())
+
+      await result.current.sendFirstMessage('Hello world')
+
+      expect(mockSendMessage).toHaveBeenCalled()
+      expect(mockUpdateTitle).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('error handling', () => {
+    it('should throw error when send message fails', async () => {
+      vi.spyOn(console, 'error').mockImplementationOnce(() => {})
+      const error = new Error('Send failed')
+      mockSendMessage.mockRejectedValue(error)
+
+      const { result } = renderHook(() => useSendFirstMessage())
+
+      await expect(result.current.sendFirstMessage('Hello')).rejects.toThrow('Send failed')
+    })
+  })
+
+  describe('loading states', () => {
+    it('should return loading state when sending message', () => {
+      vi.mocked(useSendTextMessage).mockReturnValue({
+        mutateAsync: mockSendMessage,
+        isPending: true,
+        error: null
+      } as never)
+
+      const { result } = renderHook(() => useSendFirstMessage())
+
+      expect(result.current.isLoading).toBe(true)
+    })
+
+    it('should return loading state when updating title', () => {
+      vi.mocked(useUpdateConversationTitle).mockReturnValue({
+        mutateAsync: mockUpdateTitle,
+        isPending: true,
+        error: null
+      } as never)
+
+      const { result } = renderHook(() => useSendFirstMessage())
+
+      expect(result.current.isLoading).toBe(true)
+    })
+  })
+})

package/src/modules/messages/hooks/use-send-first-message/use-send-first-message.tsx

@@ -0,0 +1,48 @@
+import { useCallback } from 'react'
+import type { Message } from '@hotmart-org-ca/sparkie/dist/MessageService'
+import type { MutateOptions } from '@tanstack/react-query'
+
+import { useUpdateConversationTitle } from '@/src/modules/conversation/hooks/update-conversation-title'
+import { useWidgetSettingsAtomValue } from '@/src/modules/widget/store'
+import { useMessagesCountAtomValue } from '../../store/messages-count.atom'
+import { excerptMessage } from '../../utils'
+import { useSendTextMessage } from '../use-send-text-message'
+
+function useSendFirstMessage() {
+  const messagesCount = useMessagesCountAtomValue()
+  const sendMessageMutation = useSendTextMessage()
+  const updateTitleMutation = useUpdateConversationTitle()
+  const settings = useWidgetSettingsAtomValue()
+
+  const sendFirstMessage = useCallback(
+    async (message: string, options?: MutateOptions<Message, Error, string, void>) => {
+      const isFirstMessage = messagesCount === 0
+
+      try {
+        const messageResult = await sendMessageMutation.mutateAsync(message, options)
+
+        if (isFirstMessage && settings?.conversationId && settings?.productId) {
+          await updateTitleMutation.mutateAsync({
+            conversationId: settings.conversationId,
+            productId: settings.productId,
+            subject: excerptMessage({ message })
+          })
+        }
+
+        return messageResult
+      } catch (error) {
+        console.error('Failed to send first message:', error)
+        throw error
+      }
+    },
+    [messagesCount, sendMessageMutation, updateTitleMutation, settings]
+  )
+
+  return {
+    sendFirstMessage,
+    isLoading: sendMessageMutation.isPending || updateTitleMutation.isPending,
+    error: sendMessageMutation.error || updateTitleMutation.error
+  }
+}
+
+export default useSendFirstMessage

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

@@ -0,0 +1,12 @@
+import { atom, useAtom, useAtomValue } from 'jotai'
+
+const messagesCountAtom = atom(0)
+
+const setMessagesCountAtom = atom(
+  (get) => get(messagesCountAtom),
+  (_, set, count: number) => set(messagesCountAtom, count)
+)
+
+export const useMessagesCountAtom = () => useAtom(setMessagesCountAtom)
+
+export const useMessagesCountAtomValue = () => useAtomValue(messagesCountAtom)

package/src/modules/messages/utils/excerpt-message/excerpt-message.spec.ts

@@ -0,0 +1,77 @@
+import { EXCERPT_SIZE } from '../../constants'
+
+import { excerptMessage } from './excerpt-message'
+
+describe('excerptMessage', () => {
+  describe('when message is shorter than excerpt size', () => {
+    it('should return the original message without ellipsis', () => {
+      const message = 'Short message'
+      const result = excerptMessage({ message })
+
+      expect(result).toBe('Short message')
+    })
+  })
+
+  describe('when message is longer than excerpt size', () => {
+    it('should return truncated message with ellipsis', () => {
+      const message = 'This is a very long message that exceeds the default excerpt size limit'
+      const result = excerptMessage({ message })
+
+      expect(result).toBe('This is a very long message that exceeds the de...')
+      expect(result.length).toBe(EXCERPT_SIZE + 3)
+    })
+  })
+
+  describe('when message is exactly the excerpt size', () => {
+    it('should return the original message without ellipsis', () => {
+      const message = 'A'.repeat(EXCERPT_SIZE)
+      const result = excerptMessage({ message })
+
+      expect(result).toBe(message)
+      expect(result).not.toContain('...')
+    })
+  })
+
+  describe('when custom excerpt size is provided', () => {
+    it('should use custom size for truncation', () => {
+      const message = 'This is a test message'
+      const customSize = 10
+      const result = excerptMessage({ message, excerptSize: customSize })
+
+      expect(result).toBe(message.slice(0, customSize).trim() + '...')
+      expect(result.length).toBe(customSize + 2)
+    })
+  })
+
+  describe('when message is empty', () => {
+    it('should return empty string', () => {
+      const result = excerptMessage({ message: '' })
+
+      expect(result).toBe('')
+    })
+  })
+
+  describe('when message has leading/trailing whitespace', () => {
+    it('should trim whitespace from truncated message', () => {
+      const customSize = 15
+      const message = '   This is a message with spaces   '
+      const result = excerptMessage({ message, excerptSize: customSize })
+
+      expect(result).toBe(message.slice(0, customSize).trim() + '...')
+    })
+  })
+
+  describe('when message is null or undefined', () => {
+    it('should handle null message', () => {
+      const result = excerptMessage({ message: null as never })
+
+      expect(result).toBe(null)
+    })
+
+    it('should handle undefined message', () => {
+      const result = excerptMessage({ message: undefined as never })
+
+      expect(result).toBe(undefined)
+    })
+  })
+})

package/src/modules/messages/utils/excerpt-message/excerpt-message.ts

@@ -0,0 +1,11 @@
+import { EXCERPT_SIZE } from '../../constants'
+
+type ExcerptMessageProps = {
+  message: string
+  excerptSize?: number
+}
+
+export const excerptMessage = ({ message, excerptSize = EXCERPT_SIZE }: ExcerptMessageProps) =>
+  Number(message?.length) > 0
+    ? message.slice(0, excerptSize).trim() + (message.length > excerptSize ? '...' : '')
+    : message

package/src/modules/messages/utils/excerpt-message/index.ts

@@ -0,0 +1 @@
+export * from './excerpt-message'

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

@@ -1,3 +1,4 @@
+export * from './excerpt-message'
 export * from './has-to-update-cursor'
 export * from './messages-parser'
 export * from './set-messages-cache'

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

@@ -7,6 +7,7 @@ import { ChatInput, MessagesList, useChatInputValueAtom } from '@/src/modules/me
 import { ChatFileUploaderWrapper } from '@/src/modules/messages/components/chat-file-uploader-wrapper'
 import { MessagesContainer } from '@/src/modules/messages/components/messages-container'
 import { getAllMessagesQuery, useSendTextMessage } from '@/src/modules/messages/hooks'
+import { useSendFirstMessage } from '@/src/modules/messages/hooks/use-send-first-message'
 import { useMessagesMaxCount } from '@/src/modules/messages/store'
 import { useAttachedFileAtom } from '@/src/modules/messages/store/attached-file.atom'
 import { useGetProfile } from '@/src/modules/profile'
@@ -30,7 +31,7 @@ function ChatPage() {
   const [attachedFileAtom] = useAttachedFileAtom()
   const profileQuery = useGetProfile()
   const widgetTabs = useWidgetTabsValueAtom()
-  const sendTextMessageMutation = useSendTextMessage()
+  const sendTextMessageMutation = useSendFirstMessage()
   const sendInitialMessageMutation = useSendTextMessage()
   const limit = useMessagesMaxCount()
   const [value, setValue] = useChatInputValueAtom()
@@ -59,7 +60,7 @@ function ChatPage() {
 
     if (!isTextEmpty(text)) return
 
-    sendTextMessageMutation.mutate(text, {
+    void sendTextMessageMutation.sendFirstMessage(text, {
       onSuccess() {
         if (chatInputRef.current?.value) chatInputRef.current.value = ''
         setValue('')
@@ -117,7 +118,7 @@ function ChatPage() {
               name='new-chat-msg-input'
               ref={chatInputRef}
               onSend={widgetTabs.currentTab === 'chat' ? handleSendMessage : undefined}
-              loading={sendTextMessageMutation.isPending}
+              loading={sendTextMessageMutation?.isLoading}
               inputDisabled={messagesQuery?.isLoading}
               buttonDisabled={
                 widgetLoading ||

package/src/modules/widget/components/header/widget-header.tsx

@@ -13,7 +13,7 @@ import { AiIconCircle, Button, Icon, Tooltip } from '@/src/lib/components'
 import { useMediaQuery } from '@/src/lib/hooks'
 import { TutorWidgetEvents } from '../../events'
 import { useMembershipColor } from '../../hooks'
-import { useWidgetGoBackTabAtom, useWidgetTabsAtom } from '../../store'
+import { useIsAgentParentAtomValue, useWidgetGoBackTabAtom, useWidgetTabsAtom } from '../../store'
 
 import type { WidgetHeaderProps } from './types'
 
@@ -93,6 +93,7 @@ function WidgetHeader({
   const [, goBack] = useWidgetGoBackTabAtom()
   const membershipColor = useMembershipColor()
   const name = tutorName ?? t('general.name')
+  const isAgentMode = useIsAgentParentAtomValue()
 
   const handleHideWidget = () => {
     TutorWidgetEvents['c3po-app-widget-hide'].dispatch()
@@ -111,6 +112,8 @@ function WidgetHeader({
     DataHubService.sendEvent({ schema: new ClickTutorBackSchema() })
   }
 
+  if (isAgentMode) return null
+
   return (
     <div
       id='tutor-ai-consumer-widget-header'