app-tutor-ai-consumer 1.5.0 → 1.6.0

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

@@ -1,57 +1,15 @@
-function AIAvatarIcon() {
+import clsx from 'clsx'
+
+import { Icon } from '@/src/lib/components'
+
+function AIAvatarIcon({
+  className = 'rounded-full border-4 border-neutral-900 bg-neutral-800'
+}: {
+  className?: string
+}) {
   return (
-    <div className='flex h-11 w-11 items-center justify-center rounded-full border-4 border-neutral-900 bg-neutral-800'>
-      <svg
-        width='25'
-        height='24'
-        viewBox='0 0 25 24'
-        fill='none'
-        xmlns='http://www.w3.org/2000/svg'>
-        <path
-          d='M8.21062 3.77518L11.05 9.08404L16.3739 11.9154L11.05 14.7469L8.21062 20.0557L5.37122 14.7469L0.0473633 11.9154L5.37122 9.08404L8.21062 3.77518Z'
-          fill='url(#paint0_linear_18316_181)'
-        />
-        <path
-          d='M17.8806 0.590271L19.2848 3.21586L21.9178 4.61617L19.2848 6.01648L17.8806 8.64206L16.4762 6.01648L13.8433 4.61617L16.4762 3.21586L17.8806 0.590271Z'
-          fill='url(#paint1_linear_18316_181)'
-        />
-        <path
-          d='M20.7199 16.7845L18.9453 13.4665L17.1707 16.7845L13.8433 18.5541L17.1707 20.3237L18.9453 23.6418L20.7199 20.3237L24.0473 18.5541L20.7199 16.7845Z'
-          fill='url(#paint2_linear_18316_181)'
-        />
-        <defs>
-          <linearGradient
-            id='paint0_linear_18316_181'
-            x1='0.0473633'
-            y1='11.9154'
-            x2='16.3739'
-            y2='11.9154'
-            gradientUnits='userSpaceOnUse'>
-            <stop stopColor='#44D0FF' />
-            <stop offset='1' stopColor='#B48EFF' />
-          </linearGradient>
-          <linearGradient
-            id='paint1_linear_18316_181'
-            x1='13.8433'
-            y1='4.61617'
-            x2='21.9178'
-            y2='4.61617'
-            gradientUnits='userSpaceOnUse'>
-            <stop stopColor='#44D0FF' />
-            <stop offset='1' stopColor='#B48EFF' />
-          </linearGradient>
-          <linearGradient
-            id='paint2_linear_18316_181'
-            x1='13.8433'
-            y1='18.5541'
-            x2='24.0473'
-            y2='18.5541'
-            gradientUnits='userSpaceOnUse'>
-            <stop stopColor='#44D0FF' />
-            <stop offset='1' stopColor='#B48EFF' />
-          </linearGradient>
-        </defs>
-      </svg>
+    <div className={clsx('flex h-11 w-11 items-center justify-center', className)}>
+      <Icon name='ai-color' className='h-6 w-6' aria-label='AI avatar Icon' />
     </div>
   )
 }

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

@@ -1,15 +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 (
     <>
       <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,30 +1,10 @@
-import { Spinner } from '@/src/lib/components'
-import { useInitSparkie } 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 sparkieQuery = useInitSparkie(settings)
-  const [widgetTabs] = useWidgetTabsAtom()
-
-  if (!settings?.tutorName) return null
-
-  // TODO: change it for the general API error design from FIGMA as soon as it is available
-  if (sparkieQuery.isError)
-    return (
-      <div className='text-neutral-50'>
-        <span>Error initializing sparkie</span>
-        <button onClick={() => void sparkieQuery.refetch()}>Try again</button>
-      </div>
-    )
-
-  if (sparkieQuery.isLoading)
-    return (
-      <div className='flex flex-col items-center justify-center p-8'>
-        <Spinner className='inline-flex h-6 w-6 animate-spin text-neutral-200' />
-      </div>
-    )
+  const widgetTabs = useWidgetTabsValueAtom()
+  useSubscribeMessageReceivedEvent()
 
   return (
     <div className='flex min-h-svh flex-col items-center justify-center'>

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

@@ -13,7 +13,7 @@ const ScrollToBottomButton = forwardRef<HTMLButtonElement, IScrollToBottomButton
   ({ show = false, top = 0, onClick, className, ...props }, ref) => (
     <button
       {...props}
-      style={{ top }}
+      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',

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

@@ -1,3 +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-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
 }