app-tutor-ai-consumer 1.24.2 → 1.25.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [1.25.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.24.3...v1.25.0) (2025-08-12)
+
+### Bug Fixes
+
+- cr issues ([ec25121](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/ec25121f4271f305c4b288586fcba125fa4f77e6))
+
+### Features
+
+- add Tutor voice messages support ([3024d7c](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/3024d7c74bb8e07593f28d4b5b554f0d5d6495d1))
+
+## [1.24.3](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.24.2...v1.24.3) (2025-08-12)
+
+### Bug Fixes
+
+- qa issues ([32bf6f9](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/32bf6f951b4b769a2ee2a90a566ebbcc0aded6c6))
+
 ## [1.24.2](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.24.1...v1.24.2) (2025-08-11)
 
 ## [1.24.1](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.24.0...v1.24.1) (2025-08-11)

package/package.json

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

package/src/lib/components/icons/icon-names.d.ts

@@ -24,3 +24,4 @@ export type ValidIconNames =
   | 'sparkle-tutor'
   | 'stop'
   | 'warning'
+  | 'waveforms'

package/src/lib/components/icons/waveforms.svg

@@ -0,0 +1,6 @@
+<svg aria-hidden="true" focusable="false"
+  role="img" xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 640 512">
+  <path fill="currentColor"
+    d="M328 0h-16a16 16 0 0 0-16 16v480a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16zm-96 96h-16a16 16 0 0 0-16 16v288a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16V112a16 16 0 0 0-16-16zm192 32h-16a16 16 0 0 0-16 16v224a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16V144a16 16 0 0 0-16-16zm96-64h-16a16 16 0 0 0-16 16v352a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zM136 192h-16a16 16 0 0 0-16 16v96a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-96a16 16 0 0 0-16-16zm-96 32H24a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm576 0h-16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"></path>
+</svg>

package/src/lib/hooks/use-media-query/use-media-query.tsx

@@ -9,6 +9,7 @@ function useMediaQuery({ maxSize }: { maxSize: keyof typeof SCREEN_SIZES }) {
     const mediaquery = window.matchMedia(`(max-width: ${SCREEN_SIZES[maxSize]}px)`)
     const listener = () => setMatches(mediaquery.matches)
 
+    listener()
     mediaquery.addEventListener('change', listener)
 
     return () => mediaquery.removeEventListener('change', listener)

package/src/lib/utils/index.ts

@@ -4,4 +4,6 @@ export * from './extract-text-from-react-nodes'
 export { default as HttpCodes } from './http-codes'
 export * from './languages'
 export * from './message-types'
+export * from './toast'
+export { default as ToastUtils } from './toast'
 export { default as URLutils } from './urls'

package/src/lib/utils/toast.ts

@@ -0,0 +1,37 @@
+export const ToastPosition = {
+  TOP_RIGHT: 'top right',
+  TOP_LEFT: 'top left',
+  BOTTOM_LEFT: 'bottom left',
+  BOTTOM_RIGHT: 'bottom right'
+} as const
+
+export const Toast = {
+  SUCCESS: 'success',
+  DANGER: 'danger',
+  WARNING: 'warning',
+  INFO: 'info'
+} as const
+
+export type DispatchToastParams = {
+  message: string
+  type?: (typeof Toast)[keyof typeof Toast]
+  position?: (typeof ToastPosition)[keyof typeof ToastPosition]
+}
+
+export const TOAST_EVENT_NAME = 'toasted'
+
+class ToastUtils {
+  dispatch({
+    message,
+    type = Toast.SUCCESS,
+    position = ToastPosition.TOP_RIGHT
+  }: DispatchToastParams) {
+    window.dispatchEvent(
+      new CustomEvent(TOAST_EVENT_NAME, {
+        detail: { message, type, position }
+      })
+    )
+  }
+}
+
+export default new ToastUtils()

package/src/modules/messages/components/message-actions/message-actions.tsx

@@ -7,6 +7,7 @@ import { DataHubService } from '@/src/config/datahub'
 import type { ButtonReactionsType } from '@/src/config/datahub/schemas/tutor'
 import { ButtonReactions, ClickHotmartTutor } from '@/src/config/datahub/schemas/tutor'
 import { Button, Icon } from '@/src/lib/components'
+import { ToastUtils } from '@/src/lib/utils'
 import type { ParsedMessage } from '../../types'
 
 export type MessageActionsProps = {
@@ -28,9 +29,14 @@ function MessageActions({ message, className, showActions = false }: MessageActi
 
     navigator.clipboard
       .writeText(message.text)
-      .then(() => setCopied(true))
+      .then(() => {
+        setCopied(true)
+        ToastUtils.dispatch({ message: t('general.buttons.copied') })
+      })
       .catch((err) => {
-        console.error('Failed to copy text: ', err)
+        const errorMessage = t('generic_error.title')
+        console.error(`${errorMessage}: `, err)
+        ToastUtils.dispatch({ message: errorMessage })
       })
       .finally(() => {
         setTimeout(() => setCopying(false), 1000)

package/src/modules/messages/components/message-content-type-renderer/index.ts

@@ -0,0 +1,2 @@
+export * from './message-content-type-renderer'
+export { default as MessageContentTypeRenderer } from './message-content-type-renderer'

package/src/modules/messages/components/message-content-type-renderer/message-content-type-renderer.tsx

@@ -0,0 +1,47 @@
+import { useTranslation } from 'react-i18next'
+import type { Components } from 'react-markdown'
+
+import { Icon, MarkdownRenderer } from '@/src/lib/components'
+import type { ParsedMessage } from '../../types'
+import { MessageImg } from '../message-img'
+
+export const imgComponent: Components['img'] = ({ src }) => {
+  return <MessageImg message={{ thumbnails: {}, url: src, dimensions: {} } as ParsedMessage} />
+}
+
+export function MediaVoiceMessage() {
+  const { t } = useTranslation()
+  return (
+    <div className='flex items-center gap-2 py-3 text-xs/normal'>
+      <Icon name='waveforms' className='inline-flex h-4 w-4 shrink-0' />
+      <span>{t('chat_page.messages.audio')}</span>
+    </div>
+  )
+}
+
+export function TextMessage({ message }: { message: ParsedMessage }) {
+  return (
+    <MarkdownRenderer
+      content={message?.text ?? message?.name}
+      imgComponent={imgComponent}
+      className='w-full'
+    />
+  )
+}
+
+function MessageContentTypeRenderer({ message }: { message: ParsedMessage }) {
+  const messageFromAi = message.metadata.author === 'ai'
+  const messageType = message.type
+  const isMediaVoice = messageType === 'media/voice'
+
+  if (messageFromAi && isMediaVoice) return null
+
+  switch (message.type) {
+    case 'media/voice':
+      return <MediaVoiceMessage />
+    default:
+      return <TextMessage message={message} />
+  }
+}
+
+export default MessageContentTypeRenderer

package/src/modules/messages/components/message-item/message-item.tsx

@@ -1,18 +1,13 @@
 import clsx from 'clsx'
-import type { Components } from 'react-markdown'
 
-import { MarkdownRenderer } from '@/src/lib/components'
 import type { ParsedMessage } from '../../types'
 import { MessageActions } from '../message-actions'
-import { MessageImg } from '../message-img'
-
-const imgComponent: Components['img'] = ({ src }) => {
-  return <MessageImg message={{ thumbnails: {}, url: src, dimensions: {} } as ParsedMessage} />
-}
+import { MessageContentTypeRenderer } from '../message-content-type-renderer'
 
 function MessageItem({ message }: { message: ParsedMessage }) {
   const messageFromUser = message.metadata.author === 'user'
   const messageFromAi = message.metadata.author === 'ai'
+  const isMediaVoice = message.type === 'media/voice'
 
   return (
     <div
@@ -28,19 +23,17 @@ function MessageItem({ message }: { message: ParsedMessage }) {
           'max-w-max bg-[rgb(from_var(--hc-color-neutral-300)_r_g_b_/_0.8)]': messageFromUser,
           'bg-neutral-200': messageFromAi
         })}>
-        <MarkdownRenderer
-          content={message?.text ?? message?.name}
-          imgComponent={imgComponent}
-          className='w-full'
-        />
+        <MessageContentTypeRenderer message={message} />
       </div>
-      <MessageActions
-        className={clsx('flex items-center justify-between gap-2', {
-          'w-full': messageFromAi
-        })}
-        message={message}
-        showActions={messageFromAi}
-      />
+      {messageFromAi && isMediaVoice ? null : (
+        <MessageActions
+          className={clsx('flex items-center justify-between gap-2', {
+            'w-full': messageFromAi
+          })}
+          message={message}
+          showActions={messageFromAi}
+        />
+      )}
     </div>
   )
 }

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

@@ -66,7 +66,7 @@ const MessagesContainer = forwardRef<HTMLDivElement, MessagesContainerProps>(
         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'
+            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}>

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

@@ -25,7 +25,7 @@ function ChatPage() {
   const sendTextMessageMutation = useSendTextMessage()
   const limit = useMessagesMaxCount()
   const [value, setValue] = useChatInputValueAtom()
-  const [, setWidgetLoading] = useWidgetLoadingAtom()
+  const [widgetLoading, setWidgetLoading] = useWidgetLoadingAtom()
   const isMobile = useMediaQuery({ maxSize: 'md' })
 
   const conversationId = useMemo(() => settings?.conversationId, [settings?.conversationId])
@@ -70,7 +70,7 @@ function ChatPage() {
           onSend={widgetTabs.currentTab === 'chat' ? handleSendMessage : undefined}
           loading={sendTextMessageMutation.isPending}
           inputDisabled={messagesQuery?.isLoading}
-          buttonDisabled={messagesQuery?.isLoading || !value.trim()}
+          buttonDisabled={widgetLoading || messagesQuery?.isLoading || !value.trim()}
         />
       }>
       <div className='max-md:px-[1.125rem] max-md:pt-[1.125rem] md:px-5 md:pt-5'>

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

@@ -8,7 +8,7 @@ import { getAllMessagesQuery, useSendTextMessage } from '@/src/modules/messages/
 import { useMessagesMaxCount } from '@/src/modules/messages/store'
 import { useGetProfile } from '@/src/modules/profile'
 import { useInitSparkie } from '@/src/modules/sparkie/hooks/use-init-sparkie'
-import { useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
+import { useWidgetLoadingAtomValue, useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
 import { GreetingsCard } from '../greetings-card'
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
@@ -28,6 +28,7 @@ function WidgetStarterPage() {
   const isDarkTheme = settings?.config?.theme === 'dark'
   const isSparkieReady = useInitSparkie()
   const isMobile = useMediaQuery({ maxSize: 'md' })
+  const widgetLoading = useWidgetLoadingAtomValue()
 
   useRefEventListener<HTMLTextAreaElement>({
     config: {
@@ -83,7 +84,7 @@ function WidgetStarterPage() {
           name='new-chat-msg-input'
           ref={chatInputRef}
           onSend={handleSend}
-          buttonDisabled={!chatInputValue.trim() || !isSparkieReady}
+          buttonDisabled={widgetLoading || !chatInputValue.trim() || !isSparkieReady}
         />
       }>
       <div className='grid-areas-[a_b] grid h-full grid-cols-1 grid-rows-[1fr_auto]'>