app-tutor-ai-consumer 1.24.3 → 1.25.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.24.3",
+  "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/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}>