app-tutor-ai-consumer 1.17.0 → 1.18.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.18.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.17.0...v1.18.0) (2025-07-24)
+
+### Features
+
+- add info button onclick ([84dda83](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/84dda83f12399fc785fecae8927a1404cb1d2dae))
+- add information page ([20996ab](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/20996ab224d07e6a44cf27037f7b35b7373aa307))
+
 # [1.17.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.16.0...v1.17.0) (2025-07-22)
 
 ### Features

package/package.json

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

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

@@ -0,0 +1,14 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_18455_21368)">
+<path d="M15.75 14.2358H4.5C4.08579 14.2358 3.75 14.5716 3.75 14.9858C3.75 15.4001 4.08579 15.7358 4.5 15.7358H15.75V17.2358H4.5C3.25736 17.2358 2.25 16.2285 2.25 14.9858V3.73584C2.25 2.90741 2.92157 2.23584 3.75 2.23584H15.75V14.2358ZM3.75 12.7733C3.87117 12.7487 3.99658 12.7358 4.125 12.7358H14.25V3.73584H3.75V12.7733ZM12 7.48584H6V5.98584H12V7.48584Z" fill="url(#paint0_linear_18455_21368)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_18455_21368" x1="2.25" y1="9.73584" x2="15.75" y2="9.73584" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44D0FF"/>
+<stop offset="1" stop-color="#B48EFF"/>
+</linearGradient>
+<clipPath id="clip0_18455_21368">
+<rect width="18" height="18" fill="white" transform="translate(0 0.73584)"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -9,3 +9,6 @@ export type ValidIconNames =
   | 'info'
   | 'send'
   | 'stop'
+  | 'warning'
+  | 'interrogation'
+  | 'book'

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

@@ -0,0 +1,9 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0.73584C3.5625 0.73584 0 4.32959 0 8.73584C0 13.1733 3.5625 16.7358 8 16.7358C12.4062 16.7358 16 13.1733 16 8.73584C16 4.32959 12.4062 0.73584 8 0.73584ZM8 15.7358C4.125 15.7358 1 12.6108 1 8.73584C1 4.89209 4.125 1.73584 8 1.73584C11.8438 1.73584 15 4.89209 15 8.73584C15 12.6108 11.8438 15.7358 8 15.7358ZM7.5 11.4858C7.0625 11.4858 6.75 11.8296 6.75 12.2358C6.75 12.6733 7.0625 12.9858 7.5 12.9858C7.90625 12.9858 8.25 12.6733 8.25 12.2358C8.25 11.8296 7.90625 11.4858 7.5 11.4858ZM8.90625 4.73584H7.0625C5.90625 4.73584 5 5.67334 5 6.82959V7.11084C5 7.39209 5.21875 7.61084 5.5 7.61084C5.75 7.61084 6 7.39209 6 7.11084V6.82959C6 6.23584 6.46875 5.73584 7.0625 5.73584H8.90625C9.5 5.73584 10 6.23584 10 6.82959C10 7.20459 9.78125 7.57959 9.4375 7.76709L7.5625 8.70459C7.21875 8.89209 7 9.26709 7 9.67334V10.2358C7 10.5171 7.21875 10.7358 7.5 10.7358C7.75 10.7358 8 10.5171 8 10.2358V9.67334C8 9.64209 8 9.61084 8.03125 9.57959L9.90625 8.64209C10.5625 8.26709 11 7.57959 11 6.82959C11 5.67334 10.0625 4.73584 8.90625 4.73584Z" fill="url(#paint0_linear_21475_7939)"/>
+<defs>
+<linearGradient id="paint0_linear_21475_7939" x1="0" y1="8.73584" x2="16" y2="8.73584" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44D0FF"/>
+<stop offset="1" stop-color="#B48EFF"/>
+</linearGradient>
+</defs>
+</svg>

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

@@ -0,0 +1,9 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 11.3193C7.5625 11.3193 7.25 11.6631 7.25 12.0693C7.25 12.5068 7.59375 12.8193 8 12.8193C8.40625 12.8193 8.71875 12.5068 8.71875 12.0693C8.75 11.6631 8.40625 11.3193 8 11.3193ZM8 10.0693C8.25 10.0693 8.46875 9.85059 8.46875 9.56934V5.06934C8.46875 4.81934 8.21875 4.56934 8 4.56934C7.75 4.56934 7.5 4.81934 7.5 5.06934V9.56934C7.5 9.85059 7.71875 10.0693 8 10.0693ZM15.75 12.5068L9.5 1.94434C9.1875 1.41309 8.625 1.10059 8 1.06934C7.34375 1.06934 6.78125 1.41309 6.46875 1.94434L0.21875 12.5068C-0.09375 13.0381 -0.09375 13.6631 0.21875 14.1943C0.53125 14.7568 1.09375 15.0693 1.75 15.0693H14.25C14.875 15.0693 15.4375 14.7568 15.75 14.1943C16.0625 13.6631 16.0625 13.0381 15.75 12.5068ZM14.875 13.6943C14.75 13.9443 14.5 14.0693 14.2188 14.0693H1.75C1.46875 14.0693 1.21875 13.9443 1.09375 13.6943C0.9375 13.4756 0.96875 13.2256 1.09375 13.0068L7.34375 2.44434C7.46875 2.22559 7.71875 2.06934 8 2.06934C8.25 2.10059 8.5 2.22559 8.625 2.44434L14.875 13.0068C15 13.2256 15.0312 13.4756 14.875 13.6943Z" fill="url(#paint0_linear_21475_9749)"/>
+<defs>
+<linearGradient id="paint0_linear_21475_9749" x1="-0.015625" y1="8.06934" x2="15.9844" y2="8.06934" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44D0FF"/>
+<stop offset="1" stop-color="#B48EFF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/modules/widget/components/constants.tsx

@@ -1,4 +1,5 @@
 import { ChatPage } from './chat-page'
+import { WidgetInformationPage } from './information-page'
 import { WidgetLoadingPage } from './loading-page'
 import { WidgetOnboardingPage } from './onboarding-page'
 import { WidgetStarterPage } from './starter-page'
@@ -7,5 +8,6 @@ export const WIDGET_TABS = {
   onboarding: <WidgetOnboardingPage />,
   starter: <WidgetStarterPage />,
   chat: <ChatPage />,
-  loading: <WidgetLoadingPage />
+  loading: <WidgetLoadingPage />,
+  information: <WidgetInformationPage />
 }

package/src/modules/widget/components/header/header.tsx

@@ -1,5 +1,6 @@
 import { Button, Icon } from '@/src/lib/components'
 import { TutorWidgetEvents } from '../../events'
+import { useWidgetTabsAtom } from '../../store'
 import { AIAvatar } from '../ai-avatar'
 
 import type { WidgetHeaderContentProps, WidgetHeaderProps } from './types'
@@ -36,6 +37,8 @@ function WidgetHeader({
   showContentWithoutMeta,
   showContent = true
 }: WidgetHeaderProps) {
+  const [, setWidgetTabs] = useWidgetTabsAtom()
+
   return (
     <div className='grid-areas-[a_b] mt-0.5 grid grid-cols-[1fr_auto] items-center text-neutral-1000'>
       <div className='grid-area-[a]'>
@@ -51,7 +54,10 @@ function WidgetHeader({
           <Button show={enabledButtons.includes('archive')} aria-label='Archive Icon'>
             <Icon name='archive' className='h-4 w-4' aria-hidden />
           </Button>
-          <Button show={enabledButtons.includes('info')} aria-label='Info Icon'>
+          <Button
+            show={enabledButtons.includes('info')}
+            aria-label='Info Icon'
+            onClick={() => setWidgetTabs('information')}>
             <Icon name='info' className='h-4 w-4' aria-hidden />
           </Button>
           <Button

package/src/modules/widget/components/information-page/constants.ts

@@ -0,0 +1,17 @@
+import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
+
+type InfoItem = {
+  icon: ValidIconNames
+  titleKey: string
+  descKey: string
+}
+
+export const infoItems: InfoItem[] = [
+  {
+    icon: 'interrogation',
+    titleKey: 'info.what_it_does_question',
+    descKey: 'info.what_it_does_answer'
+  },
+  { icon: 'book', titleKey: 'info.how_it_learns_question', descKey: 'info.how_it_learns_answer' },
+  { icon: 'warning', titleKey: 'info.limitations_question', descKey: 'info.limitations_answer' }
+]

package/src/modules/widget/components/information-page/index.ts

@@ -0,0 +1 @@
+export { default as WidgetInformationPage } from './information-page'

package/src/modules/widget/components/information-page/information-card/index.ts

@@ -0,0 +1 @@
+export { default as InformationCard } from './information-card'

package/src/modules/widget/components/information-page/information-card/information-card.tsx

@@ -0,0 +1,25 @@
+import { Icon } from '@/src/lib/components'
+import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
+
+export type InformationCardProps = {
+  icon: ValidIconNames
+  title: string
+  description: string
+}
+
+function InformationCard({ icon, title, description }: InformationCardProps) {
+  return (
+    <div className='flex gap-3 border-b border-white/10 pb-5 last:border-none'>
+      <div className='flex h-5 w-5 items-start justify-center'>
+        <Icon name={icon} width={16} height={16} />
+      </div>
+
+      <div className='flex flex-col gap-1'>
+        <p className='text-sm font-bold'>{title}</p>
+        <p className='text-xs text-gray-300'>{description}</p>
+      </div>
+    </div>
+  )
+}
+
+export default InformationCard

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

@@ -0,0 +1,50 @@
+import { useTranslation } from 'react-i18next'
+
+import { Icon } from '@/src/lib/components'
+import { useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
+import { AIAvatar } from '../ai-avatar'
+import { PageLayout } from '../page-layout'
+
+import { infoItems } from './constants'
+import { InformationCard } from './information-card'
+
+function WidgetInformationPage() {
+  const { t } = useTranslation()
+  const [, setWidgetTabs] = useWidgetTabsAtom()
+  const [settings] = useWidgetSettingsAtom()
+
+  return (
+    <PageLayout className='p-5 text-white'>
+      <div className='relative mb-8 flex h-12 items-center justify-center'>
+        <button
+          className='absolute left-0'
+          aria-label='Return Button'
+          onClick={() => setWidgetTabs('chat')}>
+          <Icon name='arrow-left' width={16} height={16} />
+        </button>
+        <h1 className='mx-auto font-bold'>{t('info.title')}</h1>
+      </div>
+
+      <div className='mb-8 flex justify-center'>
+        <div className='flex flex-col items-center gap-2'>
+          <AIAvatar />
+
+          <h3 className='font-bold'>{settings?.tutorName ?? ''}</h3>
+        </div>
+      </div>
+
+      <div className='flex flex-col gap-5'>
+        {infoItems.map((item) => (
+          <InformationCard
+            key={item.titleKey}
+            icon={item.icon}
+            title={t(item.titleKey)}
+            description={t(item.descKey)}
+          />
+        ))}
+      </div>
+    </PageLayout>
+  )
+}
+
+export default WidgetInformationPage