app-tutor-ai-consumer 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# [1.7.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.6.0...v1.7.0) (2025-07-11)
+
+### Features
+
+- add send text message validation ([4f242ca](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/4f242caf92ec3cdab2ae5866d67abd6f1b5d864f))
+
 # [1.6.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.5.0...v1.6.0) (2025-07-11)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",
@@ -121,6 +121,7 @@
     "react-dom": "~19.1.0",
     "react-i18next": "~15.5.2",
     "react-markdown": "~10.1.0",
+    "react-textarea-autosize": "~8.5.9",
     "rehype-raw": "~7.0.0",
     "rehype-sanitize": "~6.0.0",
     "remark-breaks": "~4.0.0",

package/src/config/styles/global.css

@@ -79,14 +79,15 @@
   --ai-color-chat-response: #1e1926;
 
   /* Size */
+  --hc-size-spacing-1: 0.25rem;
   --hc-size-spacing-2: 0.5rem;
   --hc-size-border-medium: 0.5rem;
 }
 
 #hotmart-app-tutor-ai-consumer-root {
   & *::-webkit-scrollbar {
-    width: var(--hc-size-spacing-2);
-    height: var(--hc-size-spacing-2);
+    width: var(--custom-scrollbar-width, var(--hc-size-spacing-2));
+    height: var(--custom-scrollbar-width, var(--hc-size-spacing-2));
   }
 
   & *::-webkit-scrollbar-track {

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

@@ -1,2 +1,2 @@
 // Auto-generated file - DO NOT EDIT
-export type ValidIconNames = 'ai-color' | 'arrow-down' | 'chevron-down' | 'send'
+export type ValidIconNames = 'ai-color' | 'arrow-down' | 'chevron-down' | 'send' | 'stop'

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

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+>
+  <rect x="7" y="7" width="10" height="10" rx="1.25" fill="currentColor"></rect>
+</svg>

package/src/modules/messages/components/chat-input/chat-input.spec.tsx

@@ -8,7 +8,7 @@ import { useChatInputValueAtom } from './chat-input.atom'
 vi.mock('./chat-input.atom', () => ({ useChatInputValueAtom: vi.fn() }))
 
 describe('ChatInput', () => {
-  const ref = createRef<HTMLInputElement>()
+  const ref = createRef<HTMLTextAreaElement>()
   const chatInputValueAtomMock = { val: '', setVal: vi.fn() }
   const defaultProps = { name: chance.name() }
 
@@ -53,20 +53,24 @@ describe('ChatInput', () => {
     expect(onSend).toHaveBeenCalledTimes(1)
   })
 
-  it('should disable the button when there is no value', () => {
-    renderComponent()
+  it('should disable the button when buttonDisabled prop is true', () => {
+    renderComponent({ buttonDisabled: true } as never)
 
     expect(screen.getByRole('button', { name: /Submit Button/i })).toBeDisabled()
   })
 
-  it('should the button be enabled and input have defaultValue when there is value', () => {
+  it('should enable the button when buttonDisabled prop is falsy', () => {
+    renderComponent()
+
+    expect(screen.getByRole('button', { name: /Submit Button/i })).toBeEnabled()
+  })
+
+  it('should set textarea value correctly', () => {
     const name = chance.name()
     vi.mocked(useChatInputValueAtom).mockReturnValue([name, vi.fn()])
 
     renderComponent()
 
-    expect(ref.current?.defaultValue).toBe(name)
-
-    expect(screen.getByRole('button', { name: /Submit Button/i })).toBeEnabled()
+    expect(ref.current?.value).toBe(name)
   })
 })

package/src/modules/messages/components/chat-input/chat-input.tsx

@@ -2,77 +2,108 @@ import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
 import clsx from 'clsx'
 import type { ChangeEvent, KeyboardEvent } from 'react'
 import { useTranslation } from 'react-i18next'
+import TextareaAutosize from 'react-textarea-autosize'
 
-import { Icon } from '@/src/lib/components'
+import { Icon, Spinner } from '@/src/lib/components'
 
 import { useChatInputValueAtom } from './chat-input.atom'
 import type { ChatInputProps } from './types'
 
-const ChatInput = forwardRef<HTMLInputElement, ChatInputProps>(({ name, onSend }, forwardedRef) => {
-  const { t } = useTranslation()
-  const [value, setValue] = useChatInputValueAtom()
-  const ref = useRef<HTMLInputElement>(null)
+import styles from './styles.module.css'
 
-  useImperativeHandle(forwardedRef, () => ref?.current as HTMLInputElement)
+const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
+  (
+    { name, onSend, loading = false, inputDisabled = false, buttonDisabled = false },
+    forwardedRef
+  ) => {
+    const { t } = useTranslation()
+    const [value, setValue] = useChatInputValueAtom()
+    const ref = useRef<HTMLTextAreaElement>(null)
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value?.trim())
-  }
+    useImperativeHandle(forwardedRef, () => ref?.current as HTMLTextAreaElement)
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    const isEnterKey = e.code === 'Enter'
-    const isShiftKey = e.shiftKey
+    const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+      if (inputDisabled) return
 
-    if (isEnterKey && !isShiftKey) {
-      e.preventDefault()
-      onSend?.()
+      setValue(e.target.value)
     }
-  }
 
-  useEffect(() => {
-    const input = ref?.current
+    const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (loading || buttonDisabled) return
+
+      const isEnterKey = e.code === 'Enter'
+      const isShiftKey = e.shiftKey
 
-    if (input) {
-      input.focus()
+      if (isEnterKey && !isShiftKey) {
+        e.preventDefault()
+        onSend?.()
+      }
     }
-  }, [])
-
-  return (
-    <div className='flex items-center rounded-full border-neutral-800 bg-neutral-800 px-4 py-2'>
-      <input
-        id={name}
-        name={name}
-        ref={ref}
-        type='text'
-        className='h-6 w-full border-none bg-transparent text-neutral-400 outline-none outline-0 placeholder:text-neutral-400'
-        placeholder={t('send_message.field.placeholder')}
-        defaultValue={value}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-      />
-      <button
-        onClick={onSend}
-        disabled={!value}
+
+    useEffect(() => {
+      if (inputDisabled) return
+
+      const input = ref?.current
+
+      if (input) {
+        input.focus()
+
+        const position = input.textLength ?? 0
+        input.setSelectionRange(position, position)
+      }
+    }, [inputDisabled])
+
+    return (
+      <div
         className={clsx(
-          'flex size-8 flex-col items-center justify-center rounded-full outline-none transition-colors duration-300 ease-in',
-          {
-            'cursor-pointer hover:scale-110 hover:bg-neutral-600 focus:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2':
-              Boolean(value),
-            'cursor-not-allowed': !value
-          }
-        )}
-        aria-label='Submit Button'>
-        <Icon
-          name='send'
-          className={clsx('h-4 w-4 pr-0.5 pt-0.5 transition-colors duration-150', {
-            'text-neutral-50': Boolean(value),
-            'text-neutral-500': !value
-          })}
+          'flex items-center rounded-full border border-neutral-800 bg-neutral-900 px-4 py-2',
+          { 'cursor-not-allowed opacity-40': inputDisabled }
+        )}>
+        <TextareaAutosize
+          id={name}
+          name={name}
+          ref={ref}
+          className={clsx(
+            clsx(
+              'max-h-12 w-full resize-none border-none bg-transparent text-neutral-100 outline-none outline-0 placeholder:text-neutral-400',
+              styles.textArea
+            ),
+            { 'cursor-not-allowed': inputDisabled, 'opacity-40': inputDisabled || loading }
+          )}
+          placeholder={t('send_message.field.placeholder')}
+          value={value}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          disabled={inputDisabled}
         />
-      </button>
-    </div>
-  )
-})
+        <button
+          onClick={onSend}
+          disabled={buttonDisabled || loading}
+          className={clsx(
+            'flex size-8 flex-col items-center justify-center rounded-full outline-none transition-colors duration-300 ease-in',
+            {
+              'cursor-pointer hover:scale-110 hover:bg-neutral-600 focus:bg-neutral-700 focus:outline-none focus:ring-1 focus:ring-neutral-500 focus:ring-offset-2':
+                !buttonDisabled,
+              'cursor-not-allowed': buttonDisabled
+            }
+          )}
+          aria-label='Submit Button'>
+          {loading ? (
+            <Spinner className='h-5 w-5 text-neutral-500' />
+          ) : (
+            <Icon
+              name='send'
+              className={clsx('h-4 w-4 pr-0.5 pt-0.5 transition-colors duration-150', {
+                'text-neutral-50': !buttonDisabled,
+                'text-neutral-500': buttonDisabled
+              })}
+            />
+          )}
+        </button>
+      </div>
+    )
+  }
+)
 
 ChatInput.displayName = 'ChatInput'
 

package/src/modules/messages/components/chat-input/styles.module.css

@@ -0,0 +1,3 @@
+.textArea {
+  --custom-scrollbar-width: var(--hc-size-spacing-1);
+}

package/src/modules/messages/components/chat-input/types.ts

@@ -1,4 +1,7 @@
 export type ChatInputProps = {
   name: string
   onSend?: () => void
+  loading?: boolean
+  inputDisabled?: boolean
+  buttonDisabled?: boolean
 }

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

@@ -1,14 +1,17 @@
 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'
+import { ChatInput, MessagesList, useChatInputValueAtom } from '@/src/modules/messages/components'
+import { useAllMessages, useSendTextMessage } from '@/src/modules/messages/hooks'
+import { useWidgetLoadingAtomValue, useWidgetTabsValueAtom } from '../../store'
 
 function ChatPage() {
   const widgetTabs = useWidgetTabsValueAtom()
-  const chatInputRef = useRef<HTMLInputElement>(null)
+  const chatInputRef = useRef<HTMLTextAreaElement>(null)
   const sendTextMessageMutation = useSendTextMessage()
+  const { messagesQuery } = useAllMessages()
+  const widgetLoading = useWidgetLoadingAtomValue()
+  const [value, setValue] = useChatInputValueAtom()
 
   const handleSendMessage = () => {
     const text = chatInputRef.current?.value ?? ''
@@ -18,6 +21,7 @@ function ChatPage() {
     sendTextMessageMutation.mutate(text, {
       onSuccess() {
         if (chatInputRef.current?.value) chatInputRef.current.value = ''
+        setValue('')
       }
     })
   }
@@ -30,6 +34,9 @@ function ChatPage() {
           name='new-chat-msg-input'
           ref={chatInputRef}
           onSend={widgetTabs.currentTab === 'chat' ? handleSendMessage : undefined}
+          loading={widgetLoading || sendTextMessageMutation.isPending}
+          inputDisabled={messagesQuery?.isLoading}
+          buttonDisabled={messagesQuery?.isLoading || !value.trim()}
         />
       </div>
     </>

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

@@ -7,16 +7,16 @@ import { GreetingsCard } from '../greetings-card'
 
 function WidgetStarterPage() {
   const [settings] = useWidgetSettingsAtom()
-  const chatInputRef = useRef<HTMLInputElement>(null)
+  const chatInputRef = useRef<HTMLTextAreaElement>(null)
   const [, setChatInputValue] = useChatInputValueAtom()
   const [, setWidgetTabs] = useWidgetTabsAtom()
 
-  useRefEventListener<HTMLInputElement>({
+  useRefEventListener<HTMLTextAreaElement>({
     config: {
       ref: chatInputRef,
       eventTypes: ['input', 'change'],
       handler: (e) => {
-        const target = e.target as HTMLInputElement
+        const target = e.target as HTMLTextAreaElement
         setChatInputValue(target.value)
       }
     }