app-tutor-ai-consumer 1.6.0 → 1.8.0

package/.github/workflows/production.yml

@@ -95,7 +95,7 @@ jobs:
         uses: newrelic/deployment-marker-action@v2.5.1
         env:
           VERSION: ${{ env.VERSION }}
-          NEW_RELIC_API_KEY: NRAK-NX0XDEQLIGCEWTLWS6EQ17B4VY1
+          NEW_RELIC_API_KEY: ${{ secrets.NEW_RELIC_API_KEY }}
           NEW_RELIC_DEPLOYMENT_ENTITY_GUID: Mjc1MDN8QVBNfEFQUExJQ0FUSU9OfDEwOTUyNjI4MTc
         with:
           apiKey: ${{ env.NEW_RELIC_API_KEY }}
@@ -139,7 +139,7 @@ jobs:
                               "textButton": {
                                 "onClick": {
                                   "openLink": {
-                                    "url": "https://github.com/Hotmart-Org/app-club-consumer/actions/runs/${{ github.run_id }}"
+                                    "url": "https://github.com/Hotmart-Org/app-tutor-ai-consumer/actions/runs/${{ github.run_id }}"
                                   }
                                 },
                                 "text": "Follow this deploy"

package/.github/workflows/rollback.yml

@@ -57,7 +57,7 @@ jobs:
         uses: newrelic/deployment-marker-action@v2.5.1
         env:
           ROLLBACK_VERSION: ${{ github.event.inputs.rollbackVersion }}
-          NEW_RELIC_API_KEY: NRAK-14TLYFWRA5RCKUGK4A3TJSAPU78
+          NEW_RELIC_API_KEY: ${{ secrets.NEW_RELIC_API_KEY }}
           NEW_RELIC_DEPLOYMENT_ENTITY_GUID: Mjc1MDN8QVBNfEFQUExJQ0FUSU9OfDEwOTE1MDMzMTE
         with:
           apiKey: ${{ env.NEW_RELIC_API_KEY }}
@@ -104,7 +104,7 @@ jobs:
         uses: newrelic/deployment-marker-action@v2.5.1
         env:
           ROLLBACK_VERSION: ${{ github.event.inputs.rollbackVersion }}
-          NEW_RELIC_API_KEY: NRAK-NX0XDEQLIGCEWTLWS6EQ17B4VY1
+          NEW_RELIC_API_KEY: ${{ secrets.NEW_RELIC_API_KEY }}
           NEW_RELIC_DEPLOYMENT_ENTITY_GUID: Mjc1MDN8QVBNfEFQUExJQ0FUSU9OfDEwOTUyNjI4MTc
         with:
           apiKey: ${{ env.NEW_RELIC_API_KEY }}

package/.github/workflows/staging.yml

@@ -123,12 +123,17 @@ jobs:
                 cdn-url: ${{ env.CLOUDFRONT_URL }}
 
     staging-notification:
-        name: 'Staging Notification'
-        runs-on: [buildstaging-iac]
-        needs: ['deploy-staging']
-        steps:
+      name: 'Staging Notification'
+      runs-on: [buildstaging-iac]
+      needs: ['deploy-staging']
+      steps:
         - name: Checkout
           uses: actions/checkout@v4
+          with:
+            token: ${{ secrets.CI_GH_TOKEN }}
+            fetch-depth: 0
+            ref: ${{ env.BRANCH_REF }}
+            fetch-tags: true
 
         - name: Extract version from package.json
           run: |
@@ -146,7 +151,57 @@ jobs:
             apiKey: ${{ env.NEW_RELIC_API_KEY }}
             guid: ${{ env.NEW_RELIC_DEPLOYMENT_ENTITY_GUID }}
             version: ${{ env.VERSION }}
-            user: '${{ github.actor }}'
-            changelog: 'https://github.com/${{ github.repository }}/blob/main/CHANGELOG.md'
-            commit: '${{ github.sha }}'
-            description: 'Deploy: ${{env.APP_NAME}} v${{env.VERSION}} - ${{ github.ref_name }}'
+            user: "${{ github.actor }}"
+            changelog: "https://github.com/${{ github.repository }}/blob/master/CHANGELOG.md"
+            commit: "${{ github.sha }}"
+            description: "Deploy: ${{env.APP_NAME}} v${{ env.VERSION }} - ${{ github.ref_name }}"
+
+        - name: Notify Google Chat
+          uses: Hotmart-Org/actions/notification@master
+          env:
+            VERSION: ${{ env.VERSION }}
+          with:
+            type: 'Original'
+            author: true
+            webhook-chat: 'https://chat.googleapis.com/v1/spaces/AAAA1nvOyjo/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=uuL7DA8zTxUkJjQa39HIM0TYVZV0DvneZ0mklNhEr5M'
+            body: |
+              {
+                "text": "📦 *[STAGING] app-tutor-ai-consumer v${{ env.VERSION }}*: staging deploy: ${{ github.ref_name }}",
+                "cards": [
+                  {
+                    "header": {
+                      "title": "Started by ${{ github.actor }}"
+                    },
+                    "sections": [
+                      {
+                        "widgets": [
+                          {
+                            "buttons": [
+                              {
+                                "textButton": {
+                                  "onClick": {
+                                    "openLink": {
+                                      "url": "${{ github.server_url }}/${{ github.repository }}/commit/${{ github.sha }}"
+                                    }
+                                  },
+                                  "text": "View commit"
+                                }
+                              },
+                              {
+                                "textButton": {
+                                  "onClick": {
+                                    "openLink": {
+                                      "url": "https://github.com/Hotmart-Org/app-tutor-ai-consumer/actions/runs/${{ github.run_id }}"
+                                    }
+                                  },
+                                  "text": "Follow this deploy"
+                                }
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [1.8.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.7.0...v1.8.0) (2025-07-14)
+
+### Features
+
+- changing notifications and keys ([57312bc](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/57312bc069bc1f9ba0fefde00f252f615e52efa4))
+
+# [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.8.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)
       }
     }