app-tutor-ai-consumer 1.4.0 → 1.6.0

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

@@ -1,17 +1,36 @@
 import { useRef } from 'react'
 
+import { isTextEmpty } from '@/src/lib/utils/is-text-empty'
 import { ChatInput, MessagesList } from '@/src/modules/messages/components'
+import { useSendTextMessage } from '@/src/modules/messages/hooks'
+import { useWidgetTabsValueAtom } from '../../store'
 
 function ChatPage() {
+  const widgetTabs = useWidgetTabsValueAtom()
   const chatInputRef = useRef<HTMLInputElement>(null)
+  const sendTextMessageMutation = useSendTextMessage()
+
+  const handleSendMessage = () => {
+    const text = chatInputRef.current?.value ?? ''
+
+    if (!isTextEmpty(text)) return
+
+    sendTextMessageMutation.mutate(text, {
+      onSuccess() {
+        if (chatInputRef.current?.value) chatInputRef.current.value = ''
+      }
+    })
+  }
 
   return (
     <>
-      <div className='overflow-auto px-5 py-4'>
-        <MessagesList />
-      </div>
+      <MessagesList />
       <div className='border-t border-t-neutral-700 px-5 py-4'>
-        <ChatInput name='new-chat-msg-input' ref={chatInputRef} />
+        <ChatInput
+          name='new-chat-msg-input'
+          ref={chatInputRef}
+          onSend={widgetTabs.currentTab === 'chat' ? handleSendMessage : undefined}
+        />
       </div>
     </>
   )

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

@@ -1,27 +1,13 @@
-import { useEffect } from 'react'
-import { useQueryClient } from '@tanstack/react-query'
-
-import { getInitSparkieQuery } from '../../hooks'
-import { useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
+import { useSubscribeMessageReceivedEvent } from '@/src/modules/messages/hooks'
+import { useWidgetTabsValueAtom } from '../../store'
 import { WIDGET_TABS } from '../constants'
 
 function WidgetContainer() {
-  const [settings] = useWidgetSettingsAtom()
-  const initSparkieQuery = settings ? getInitSparkieQuery(settings) : null
-  const queryClient = useQueryClient()
-  const [widgetTabs] = useWidgetTabsAtom()
-
-  useEffect(() => {
-    if (!initSparkieQuery) return
-    void (async () => {
-      await queryClient.prefetchQuery(initSparkieQuery)
-    })()
-  }, [initSparkieQuery, queryClient])
-
-  if (!settings?.tutorName) return null
+  const widgetTabs = useWidgetTabsValueAtom()
+  useSubscribeMessageReceivedEvent()
 
   return (
-    <div className='flex min-h-svh flex-col items-center justify-center bg-neutral-900'>
+    <div className='flex min-h-svh flex-col items-center justify-center'>
       <div className='grid h-svh w-full grid-rows-[1fr_max-content]'>
         {WIDGET_TABS[widgetTabs.currentTab]}
       </div>

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

@@ -2,3 +2,4 @@ export * from './ai-avatar'
 export * from './chat-page'
 export * from './container'
 export * from './greetings-card'
+export * from './scroll-to-bottom-button'

package/src/modules/widget/components/scroll-to-bottom-button/index.ts

@@ -0,0 +1,2 @@
+export * from './scroll-to-bottom-button'
+export { default as ScrollToBottomButton } from './scroll-to-bottom-button'

package/src/modules/widget/components/scroll-to-bottom-button/scroll-to-bottom-button.tsx

@@ -0,0 +1,32 @@
+import { type ButtonHTMLAttributes, type DetailedHTMLProps, forwardRef } from 'react'
+import clsx from 'clsx'
+
+import { Icon } from '@/src/lib/components'
+
+export interface IScrollToBottomButtonProps
+  extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+  show?: boolean
+  top?: number
+}
+
+const ScrollToBottomButton = forwardRef<HTMLButtonElement, IScrollToBottomButtonProps>(
+  ({ show = false, top = 0, onClick, className, ...props }, ref) => (
+    <button
+      {...props}
+      style={isNaN(Number(top)) ? undefined : { top }}
+      ref={ref}
+      className={clsx(
+        'fixed inset-x-1/2 flex size-7 cursor-pointer flex-col items-center justify-center rounded-full bg-neutral-600 text-sm text-neutral-50 outline-none transition-colors duration-300 ease-in hover:scale-110 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2',
+        { 'pointer-events-none opacity-0': !show },
+        className
+      )}
+      onClick={onClick}
+      aria-label='Scroller Button'>
+      <Icon name='arrow-down' className='size-4' aria-label='Scroller Button Icon' />
+    </button>
+  )
+)
+
+ScrollToBottomButton.displayName = 'ScrollToBottomButton'
+
+export default ScrollToBottomButton

package/src/modules/widget/events.ts

@@ -19,3 +19,7 @@ const TutorWidgetEventsList: Array<ITutorWidgetEvent> = [
 ] as const
 
 export const TutorWidgetEvents = new Map(TutorWidgetEventsList.map((e) => [e.name, e]))
+
+export const ACTION_EVENTS = {
+  SCROLL: 'c3po-app-widget-scroll-to-bottom'
+}

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

@@ -4,15 +4,17 @@ import { SparkieService } from '@/src/modules/sparkie'
 import type { WidgetSettingProps } from '@/src/types'
 
 export const getInitSparkieQuery = (settings: WidgetSettingProps) => ({
-  queryKey: ['SparkieService:initializeSparkie', settings.hotmartToken],
+  queryKey: ['SparkieService:initializeSparkie', settings?.hotmartToken ?? ''],
   queryFn: () =>
     SparkieService.initSparkie({
-      token: settings.hotmartToken,
+      token: settings?.hotmartToken,
       skipPresenceSetup: true
-    }),
-  enabled: Boolean(settings?.hotmartToken?.trim())
+    })
 })
 
-export function useInitSparkie(settings: WidgetSettingProps) {
-  return useQuery(getInitSparkieQuery(settings))
+export function useInitSparkie(settings: WidgetSettingProps | null) {
+  return useQuery({
+    ...getInitSparkieQuery(settings as WidgetSettingProps),
+    enabled: Boolean(settings?.hotmartToken?.trim())
+  })
 }

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

@@ -1,2 +1,5 @@
+export * from './widget-container-intrinsic-height.atom'
+export * from './widget-loading.atom'
+export * from './widget-scrolling.atom'
 export * from './widget-settings.atom'
 export * from './widget-tabs.atom'

package/src/modules/widget/store/widget-container-intrinsic-height.atom.ts

@@ -0,0 +1,13 @@
+import { atom, useAtom, useAtomValue } from 'jotai'
+
+const intrinsicHeightAtom = atom('100svh')
+const setIntrinsicHeightAtom = atom(
+  (get) => get(intrinsicHeightAtom),
+  (_, set, value: string) => {
+    set(intrinsicHeightAtom, value)
+  }
+)
+
+export const useIntrinsicHeightAtom = () => useAtom(setIntrinsicHeightAtom)
+
+export const useIntrinsicHeightAtomValue = () => useAtomValue(intrinsicHeightAtom)

package/src/modules/widget/store/widget-loading.atom.ts

@@ -0,0 +1,11 @@
+import { atom, useAtom, useAtomValue } from 'jotai'
+
+const widgetLoadingAtom = atom<boolean>(false)
+
+const setWidgetLoadingAtom = atom(
+  (get) => get(widgetLoadingAtom),
+  (_, set, isLoading: boolean) => set(widgetLoadingAtom, isLoading)
+)
+
+export const useWidgetLoadingAtom = () => useAtom(setWidgetLoadingAtom)
+export const useWidgetLoadingAtomValue = () => useAtomValue(setWidgetLoadingAtom)

package/src/modules/widget/store/widget-scrolling.atom.ts

@@ -0,0 +1,11 @@
+import { atom, useAtom, useAtomValue } from 'jotai'
+
+const widgetScrollingAtom = atom<boolean>(false)
+
+const setWidgetScrollingAtom = atom(
+  (get) => get(widgetScrollingAtom),
+  (_, set, isScrolling: boolean) => set(widgetScrollingAtom, isScrolling)
+)
+
+export const useWidgetScrollingAtom = () => useAtom(setWidgetScrollingAtom)
+export const useWidgetScrollingAtomValue = () => useAtomValue(setWidgetScrollingAtom)

package/src/modules/widget/store/widget-tabs.atom.ts

@@ -1,4 +1,4 @@
-import { atom, useAtom } from 'jotai'
+import { atom, useAtom, useAtomValue } from 'jotai'
 
 import type { CurrentTabKey } from '../components'
 
@@ -50,4 +50,5 @@ export const goBackTabAtom = atom(null, (get, set) => {
 
 export const useGetWidgetTabsAtom = () => useAtom(widgetTabsAtom)
 export const useWidgetTabsAtom = () => useAtom(setWidgetTabsAtom)
+export const useWidgetTabsValueAtom = () => useAtomValue(setWidgetTabsAtom)
 export const useWidgetGoBackTabAton = () => useAtom(goBackTabAtom)

package/src/types.ts

@@ -26,10 +26,13 @@ export type WidgetSettingProps = {
   namespace?: string
   productId: number
   productName: string
-  sessionId?: string
+  sessionId: string
   membershipId?: string
   membershipSlug?: string
   userId?: string
   tutorName?: string
   user?: User
+  classHashId?: string
+  owner_id?: string
+  current_media_codes?: string
 }