app-tutor-ai-consumer 1.37.0 → 1.39.0

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

@@ -1,14 +1,17 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react'
 import { useInfiniteQuery } from '@tanstack/react-query'
 
 import { useMediaQuery } from '@/src/lib/hooks'
 import { isTextEmpty } from '@/src/lib/utils/is-text-empty'
 import { ChatInput, MessagesList, useChatInputValueAtom } from '@/src/modules/messages/components'
+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 { useMessagesMaxCount } from '@/src/modules/messages/store'
+import { useAttachedFileAtom } from '@/src/modules/messages/store/attached-file.atom'
 import { useGetProfile } from '@/src/modules/profile'
 import { TutorWidgetEvents } from '../../events'
+import { useSendViewChatEvent } from '../../hooks'
 import { useSendViewTutorEvent } from '../../hooks/use-send-view-tutor-event'
 import {
   useWidgetLoadingAtom,
@@ -24,6 +27,7 @@ function ChatPage() {
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
   const scrollerRef = useRef<HTMLDivElement>(null)
   const settings = useWidgetSettingsAtomValue()
+  const [attachedFileAtom] = useAttachedFileAtom()
   const profileQuery = useGetProfile()
   const widgetTabs = useWidgetTabsValueAtom()
   const sendTextMessageMutation = useSendTextMessage()
@@ -45,11 +49,11 @@ function ChatPage() {
       }),
     [conversationId, limit, profileId]
   )
+  useSendViewTutorEvent()
+  useSendViewChatEvent()
 
   const messagesQuery = useInfiniteQuery(messagesQueryConfig)
 
-  useSendViewTutorEvent()
-
   const handleSendMessage = () => {
     const text = chatInputRef.current?.value ?? ''
 
@@ -100,18 +104,29 @@ function ChatPage() {
     }
   }, [messagesQuery.isError, setWidgetLoading])
 
+  const ChatInputWrapper = settings?.config?.metadata?.showFileUpload
+    ? ChatFileUploaderWrapper
+    : Fragment
+
   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()}
-          />
+          <ChatInputWrapper>
+            <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() ||
+                (Boolean(attachedFileAtom) && !attachedFileAtom?.downloadUrl)
+              }
+            />
+          </ChatInputWrapper>
 
           <div className='mx-auto w-fit'>
             <AIDisclaimer />

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

@@ -1,3 +1,4 @@
 export * from './use-listen-to-theme-change-event'
 export * from './use-listen-to-visibility-events'
+export * from './use-send-view-chat-event'
 export * from './use-send-view-tutor-event'

package/src/modules/widget/hooks/use-send-view-chat-event/index.ts

@@ -0,0 +1 @@
+export { default as useSendViewChatEvent } from './use-send-view-chat-event'

package/src/modules/widget/hooks/use-send-view-chat-event/use-send-view-chat-event.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'react'
+
+import { AgentType, ComponentSource, DataHubEntities, DataHubService } from '@/src/config/datahub'
+import ViewChatSchema from '@/src/config/datahub/schemas/tutor/view-chat'
+import { useIsAgentParentAtomValue, useWidgetSettingsAtomValue } from '../../store'
+
+function useSendViewChatEvent() {
+  const isAgentMode = useIsAgentParentAtomValue()
+  const settings = useWidgetSettingsAtomValue()
+
+  const sent = useRef(false)
+
+  useEffect(() => {
+    if (sent.current) return
+
+    const schema = new ViewChatSchema({
+      componentSource: isAgentMode ? ComponentSource.PRODUCT_AGENT : ComponentSource.HOTMART_TUTOR,
+      agent: isAgentMode ? AgentType.PRODUCT_AGENT : AgentType.HOTMART_TUTOR,
+      conversationId: settings?.conversationId,
+      entity: DataHubEntities.CONVERSATIONAL_AGENT
+    })
+
+    DataHubService.sendEvent({ schema })
+    sent.current = true
+  }, [isAgentMode, settings?.conversationId])
+}
+
+export default useSendViewChatEvent

package/src/lib/hooks/use-chat-file-upload/types.ts

@@ -1,14 +0,0 @@
-export type FileType = 'document' | 'image'
-
-export type SelectedFile = {
-  file: File
-  type: FileType
-  name: string
-  size: number
-  previewUrl?: string
-}
-
-export type UseFileUploadReturn = {
-  selectedFile: SelectedFile | null
-  handleSelectFile: (file: File, type: FileType) => void
-}

package/src/lib/hooks/use-chat-file-upload/use-chat-file-upload.spec.ts

@@ -1,59 +0,0 @@
-import { act, renderHook } from '@/src/config/tests'
-
-import { useChatFileUpload } from './use-chat-file-upload'
-
-describe('useChatFileUpload', () => {
-  beforeEach(() => {
-    global.URL.createObjectURL = vi.fn(() => 'blob:mock-url')
-  })
-
-  afterEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should initialize with default values', () => {
-    const { result } = renderHook(() => useChatFileUpload())
-
-    expect(result.current.selectedFile).toBeNull()
-  })
-
-  describe('when selecting a document file', () => {
-    it('should store the file with correct properties', () => {
-      const { result } = renderHook(() => useChatFileUpload())
-
-      const mockFile = new File(['content'], 'document.pdf', { type: 'application/pdf' })
-
-      act(() => {
-        result.current.handleSelectFile(mockFile, 'document')
-      })
-
-      expect(result.current.selectedFile).toEqual({
-        file: mockFile,
-        type: 'document',
-        name: 'document.pdf',
-        size: mockFile.size
-      })
-    })
-  })
-
-  describe('when selecting an image file', () => {
-    it('should create a preview URL', () => {
-      const { result } = renderHook(() => useChatFileUpload())
-
-      const mockImage = new File(['image'], 'photo.jpg', { type: 'image/jpeg' })
-
-      act(() => {
-        result.current.handleSelectFile(mockImage, 'image')
-      })
-
-      expect(result.current.selectedFile).toEqual({
-        file: mockImage,
-        type: 'image',
-        name: 'photo.jpg',
-        size: mockImage.size,
-        previewUrl: 'blob:mock-url'
-      })
-      expect(global.URL.createObjectURL).toHaveBeenCalledWith(mockImage)
-    })
-  })
-})

package/src/lib/hooks/use-chat-file-upload/use-chat-file-upload.ts

@@ -1,28 +0,0 @@
-import { useState } from 'react'
-
-import { FILE_TYPES_KEYS } from './constants'
-import type { FileType, SelectedFile, UseFileUploadReturn } from './types'
-
-export function useChatFileUpload(): UseFileUploadReturn {
-  const [selectedFile, setSelectedFile] = useState<SelectedFile | null>(null)
-
-  const handleSelectFile = (file: File, type: FileType) => {
-    const newFile: SelectedFile = {
-      file,
-      type,
-      name: file.name,
-      size: file.size
-    }
-
-    if (type === FILE_TYPES_KEYS.IMAGE) {
-      newFile.previewUrl = URL.createObjectURL(file)
-    }
-
-    setSelectedFile(newFile)
-  }
-
-  return {
-    selectedFile,
-    handleSelectFile
-  }
-}

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

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

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

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

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

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