app-tutor-ai-consumer 1.18.2 → 1.20.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [1.20.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.19.0...v1.20.0) (2025-07-29)
+
+### Features
+
+- add generic error page ([2ac19d0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/2ac19d0d033731508580778dcf679fb9c71ca24f))
+
+# [1.19.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.18.2...v1.19.0) (2025-07-29)
+
+### Features
+
+- add message actions ([3a8d5dc](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/3a8d5dcd1ae75ce40b7cbf6edf8629da921c9308))
+
 ## [1.18.2](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.18.1...v1.18.2) (2025-07-28)
 
 ## [1.18.1](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.18.0...v1.18.1) (2025-07-24)

package/package.json

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

package/public/assets/svg/error-dark.svg

@@ -0,0 +1,27 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.5" cx="80" cy="80" r="80" fill="#282C2F"/>
+<g filter="url(#filter0_d_22198_69476)">
+<path d="M32.8 47.9999C32.8 47.1162 33.5164 46.3999 34.4 46.3999H125.6C126.484 46.3999 127.2 47.1162 127.2 47.9999V55.9999H32.8V47.9999Z" fill="#464B52"/>
+<path d="M32.8 56H127.2V112C127.2 112.884 126.484 113.6 125.6 113.6H34.4001C33.5164 113.6 32.8 112.884 32.8 112V56Z" fill="white"/>
+<rect width="11.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 74.3999 91.2)" fill="#C9CED4"/>
+<rect width="4" height="4" rx="2" transform="matrix(1 0 0 -1 68 81.6001)" fill="#C9CED4"/>
+<rect width="4" height="4" rx="2" transform="matrix(1 0 0 -1 88 81.6001)" fill="#C9CED4"/>
+</g>
+<rect width="3.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 36 52.8)" fill="#E37570"/>
+<rect width="3.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 41.6001 52.8)" fill="#EFBA0F"/>
+<rect width="3.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 47.2 52.8)" fill="#4ACC82"/>
+<path d="M141.143 46.1714C141.143 53.9981 134.798 60.3429 126.971 60.3429C119.145 60.3429 112.8 53.9981 112.8 46.1714C112.8 38.3447 119.145 32 126.971 32C134.798 32 141.143 38.3447 141.143 46.1714Z" fill="#5981E3"/>
+<path d="M128.297 49.5064H125.566L124.993 38.562H128.87L128.297 49.5064ZM124.947 53.3381C124.947 52.6345 125.138 52.145 125.52 51.8697C125.903 51.579 126.369 51.4337 126.92 51.4337C127.455 51.4337 127.914 51.579 128.297 51.8697C128.679 52.145 128.87 52.6345 128.87 53.3381C128.87 54.0111 128.679 54.5006 128.297 54.8065C127.914 55.0971 127.455 55.2425 126.92 55.2425C126.369 55.2425 125.903 55.0971 125.52 54.8065C125.138 54.5006 124.947 54.0111 124.947 53.3381Z" fill="white"/>
+<defs>
+<filter id="filter0_d_22198_69476" x="24.8" y="44.7999" width="110.4" height="83.2002" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="4.8" operator="erode" in="SourceAlpha" result="effect1_dropShadow_22198_69476"/>
+<feOffset dy="6.4"/>
+<feGaussianBlur stdDeviation="6.4"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_22198_69476"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_22198_69476" result="shape"/>
+</filter>
+</defs>
+</svg>

package/public/assets/svg/error-light.svg

@@ -0,0 +1,27 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.5" cx="80" cy="80" r="80" fill="#E6E9ED"/>
+<g filter="url(#filter0_d_22198_92633)">
+<path d="M32.8 47.9999C32.8 47.1162 33.5164 46.3999 34.4 46.3999H125.6C126.484 46.3999 127.2 47.1162 127.2 47.9999V55.9999H32.8V47.9999Z" fill="#464B52"/>
+<path d="M32.8 56H127.2V112C127.2 112.884 126.484 113.6 125.6 113.6H34.4001C33.5164 113.6 32.8 112.884 32.8 112V56Z" fill="white"/>
+<rect width="11.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 74.3999 91.2002)" fill="#C9CED4"/>
+<rect width="4" height="4" rx="2" transform="matrix(1 0 0 -1 68 81.6001)" fill="#C9CED4"/>
+<rect width="4" height="4" rx="2" transform="matrix(1 0 0 -1 88 81.6001)" fill="#C9CED4"/>
+</g>
+<rect width="3.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 36 52.7998)" fill="#E37570"/>
+<rect width="3.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 41.6001 52.7998)" fill="#EFBA0F"/>
+<rect width="3.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 47.2 52.7998)" fill="#4ACC82"/>
+<path d="M141.143 46.1714C141.143 53.9981 134.798 60.3429 126.971 60.3429C119.145 60.3429 112.8 53.9981 112.8 46.1714C112.8 38.3447 119.145 32 126.971 32C134.798 32 141.143 38.3447 141.143 46.1714Z" fill="#5981E3"/>
+<path d="M128.297 49.5064H125.566L124.993 38.562H128.87L128.297 49.5064ZM124.947 53.3381C124.947 52.6345 125.138 52.145 125.52 51.8697C125.903 51.579 126.369 51.4337 126.92 51.4337C127.455 51.4337 127.914 51.579 128.297 51.8697C128.679 52.145 128.87 52.6345 128.87 53.3381C128.87 54.0111 128.679 54.5006 128.297 54.8065C127.914 55.0971 127.455 55.2425 126.92 55.2425C126.369 55.2425 125.903 55.0971 125.52 54.8065C125.138 54.5006 124.947 54.0111 124.947 53.3381Z" fill="white"/>
+<defs>
+<filter id="filter0_d_22198_92633" x="24.8" y="44.7999" width="110.4" height="83.2002" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="4.8" operator="erode" in="SourceAlpha" result="effect1_dropShadow_22198_92633"/>
+<feOffset dy="6.4"/>
+<feGaussianBlur stdDeviation="6.4"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_22198_92633"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_22198_92633" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/config/tests/handlers.ts

@@ -1,5 +1,8 @@
 import { http, HttpResponse } from 'msw'
 
+import type { IMessageWithSenderData } from '@/src/modules/messages'
+import { MessagesEndpoints, MSG_MAX_COUNT } from '@/src/modules/messages'
+import IMessageWithSenderDataMock from '@/src/modules/messages/__tests__/imessage-with-sender-data.mock'
 import { ProfileEndpoints } from '@/src/modules/profile'
 import ProfileAPIPropsBuilder from '@/src/modules/profile/__tests__/profile-api-props.builder'
 
@@ -12,5 +15,14 @@ export const handlers = [
   }),
   http.all(ProfileEndpoints.getProfile(), () => {
     return HttpResponse.json(new ProfileAPIPropsBuilder())
+  }),
+  http.all(MessagesEndpoints.getAll(':conversationId'), ({ request }) => {
+    const limit = Number(new URL(request.url)?.searchParams?.get?.('limit'))
+
+    return HttpResponse.json(
+      new IMessageWithSenderDataMock().getMany(
+        isNaN(limit) ? MSG_MAX_COUNT : limit
+      ) as IMessageWithSenderData[]
+    )
   })
 ]

package/src/development-bootstrap.tsx

@@ -1,10 +1,12 @@
 import './index'
 
+import Chance from 'chance'
 import { v4 } from 'uuid'
 
 import { LANGUAGES } from './config/i18n'
 import { devMode } from './lib/utils'
 
+const chance = new Chance()
 const rootId = 'app-tutor-ai-widget'
 
 if (devMode) {
@@ -36,8 +38,9 @@ if (devMode) {
       productName: 'Curso de Assinatura',
       productId: 4266504,
       sessionId: v4(),
-      config: {
-        theme: 'dark'
+      user: {
+        id: v4(),
+        name: chance.name()
       }
     })
   })()

package/src/index.tsx

@@ -37,6 +37,9 @@ window.startChatWidget = async (
   }
 
   const rootElement = document.getElementById(elementId) as HTMLElement
+
+  if (!rootElement) return
+
   rootElement.setAttribute('id', 'hotmart-app-tutor-ai-consumer-root')
   const theme = (rootElement.getAttribute('data-theme') ?? 'dark') as Theme
   const root = createRoot(rootElement)

package/src/lib/components/button/button.tsx

@@ -3,6 +3,8 @@ import type { ButtonHTMLAttributes, PropsWithChildren } from 'react'
 
 import { Spinner } from '../spinner'
 
+import styles from './styles.module.css'
+
 export type ButtonProps = PropsWithChildren<
   ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: 'brand' | 'secondary' | 'primary' | 'tertiary' | 'gradient-outline'
@@ -24,8 +26,7 @@ function Button({
   const defaultBorder = 'border border-transparent'
   const defaultPadding = 'px-4 py-2'
   const disabledClasses = 'cursor-not-allowed'
-
-  const content = loading ? <Spinner className='h-full w-full text-current' /> : children
+  const gridClasses = 'grid [grid-template-areas:stack]'
 
   if (!show) return null
 
@@ -34,6 +35,7 @@ function Button({
       return (
         <button
           className={clsx(
+            gridClasses,
             defaultClasses,
             'group relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-[var(--ai-color-gradient-primary)] to-[var(--ai-color-gradient-accent)] p-[1px] hover:text-neutral-1000 group-hover:from-[var(--ai-color-gradient-primary)] group-hover:to-[var(--ai-color-gradient-accent)]',
             className
@@ -43,15 +45,29 @@ function Button({
           aria-busy={loading}>
           <span
             data-label='text-content'
-            className='relative flex-1 rounded-lg bg-neutral-100 px-5 py-2.5 text-neutral-1000 transition-all duration-75 ease-in group-hover:bg-transparent'>
-            {content}
+            className={clsx(
+              'relative flex-1 rounded-lg bg-neutral-100 px-5 py-2.5 text-neutral-1000 transition-all duration-75 ease-in group-hover:bg-transparent',
+              'flex flex-nowrap gap-2 [grid-area:stack]',
+              {
+                visible: !loading,
+                invisible: loading
+              }
+            )}>
+            {children}
           </span>
+          <Spinner
+            className={clsx('mx-auto my-auto h-[1em] w-[1em] text-current', '[grid-area:stack]', {
+              visible: loading,
+              invisible: !loading
+            })}
+          />
         </button>
       )
     case 'primary':
       return (
         <button
           className={clsx(
+            gridClasses,
             defaultPadding,
             defaultClasses,
             defaultBorder,
@@ -61,13 +77,27 @@ function Button({
           {...props}
           disabled={props.disabled || loading}
           aria-busy={loading}>
-          {content}
+          <span
+            data-label='text-content'
+            className={clsx('flex flex-nowrap gap-2 [grid-area:stack]', {
+              visible: !loading,
+              invisible: loading
+            })}>
+            {children}
+          </span>
+          <Spinner
+            className={clsx('mx-auto my-auto h-[1em] w-[1em] text-current', '[grid-area:stack]', {
+              visible: loading,
+              invisible: !loading
+            })}
+          />
         </button>
       )
     case 'secondary':
       return (
         <button
           className={clsx(
+            gridClasses,
             defaultPadding,
             defaultClasses,
             defaultBorder,
@@ -77,29 +107,62 @@ function Button({
           {...props}
           disabled={props.disabled || loading}
           aria-busy={loading}>
-          {content}
+          <span
+            data-label='text-content'
+            className={clsx('flex flex-nowrap gap-2 [grid-area:stack]', {
+              visible: !loading,
+              invisible: loading
+            })}>
+            {children}
+          </span>
+          <Spinner
+            className={clsx('mx-auto my-auto h-[1em] w-[1em] text-current', '[grid-area:stack]', {
+              visible: loading,
+              invisible: !loading
+            })}
+          />
         </button>
       )
     case 'tertiary':
       return (
         <button
           className={clsx(
-            defaultPadding,
-            defaultClasses,
-            defaultBorder,
-            'text-1000 bg-transparent hover:bg-neutral-900',
+            `relative grid place-items-center rounded bg-transparent`,
+            styles.tertiary,
             className
           )}
           {...props}
           disabled={props.disabled || loading}
           aria-busy={loading}>
-          {content}
+          <span
+            data-label='text-content'
+            className={clsx(`col-start-1 row-start-1 flex flex-nowrap gap-2`, {
+              invisible: loading,
+              visible: !loading
+            })}>
+            {children}
+          </span>
+
+          {loading && (
+            <div className='col-start-1 row-start-1'>
+              <Spinner
+                className={clsx(
+                  'col-start-1 row-start-1 mx-auto my-auto h-[1em] w-[1em] text-current',
+                  {
+                    visible: loading,
+                    invisible: !loading
+                  }
+                )}
+              />
+            </div>
+          )}
         </button>
       )
     case 'brand':
       return (
         <button
           className={clsx(
+            gridClasses,
             defaultPadding,
             defaultClasses,
             defaultBorder,
@@ -109,25 +172,53 @@ function Button({
           {...props}
           disabled={props.disabled || loading}
           aria-busy={loading}>
-          {content}
+          <span
+            data-label='text-content'
+            className={clsx('flex flex-nowrap gap-2 [grid-area:stack]', {
+              visible: !loading,
+              invisible: loading
+            })}>
+            {children}
+          </span>
+          <Spinner
+            className={clsx('mx-auto my-auto h-[1em] w-[1em] text-current', '[grid-area:stack]', {
+              visible: loading,
+              invisible: !loading
+            })}
+          />
         </button>
       )
     default:
       return (
         <button
           className={clsx(
-            'rounded-full p-2 outline-none transition-colors duration-300 ease-in',
+            gridClasses,
+            'rounded-full outline-none transition-colors duration-300 ease-in',
             {
               'cursor-pointer ring-primary-500 hover:bg-neutral-300 focus:bg-neutral-300 focus-visible:ring-2':
                 !props.disabled,
               [disabledClasses]: props.disabled
             },
+            styles.defaultButton,
             className
           )}
           {...props}
           disabled={props.disabled || loading}
           aria-busy={loading}>
-          {content}
+          <span
+            data-label='text-content'
+            className={clsx('flex flex-nowrap gap-2 [grid-area:stack]', {
+              visible: !loading,
+              invisible: loading
+            })}>
+            {children}
+          </span>
+          <Spinner
+            className={clsx('mx-auto my-auto h-[1em] w-[1em] text-current', '[grid-area:stack]', {
+              visible: loading,
+              invisible: !loading
+            })}
+          />
         </button>
       )
   }

package/src/lib/components/button/styles.module.css

@@ -0,0 +1,9 @@
+.tertiary {
+  &:hover {
+    background-color: hsl(from currentColor h s calc(l - 30));
+  }
+}
+
+.defaultButton {
+  padding: var(--custom-btn-padding, var(--hc-size-spacing-2));
+}

package/src/lib/components/errors/generic/generic-error.tsx

@@ -1,12 +1,67 @@
+import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
+import ErrorDarkSVG from '@/public/assets/svg/error-dark.svg?url'
+import ErrorLightSVG from '@/public/assets/svg/error-light.svg?url'
+import { Button } from '@/src/lib/components'
+import { PageLayout, TutorWidgetEvents, useWidgetSettingsAtom } from '@/src/modules/widget'
+import { WidgetHeader } from '@/src/modules/widget/components/header'
+
 function GenericError() {
   const { t } = useTranslation()
+  const [settings] = useWidgetSettingsAtom()
+  const isDarkMode = settings?.config?.theme === 'dark'
 
   return (
-    <div>
-      <h4 className='text-xl font-bold'>{t('generic.error')}</h4>
-    </div>
+    <PageLayout className='p-5'>
+      <WidgetHeader enabledButtons={['close']} showContent={false} />
+
+      <div className='flex h-full flex-col items-center justify-center p-10'>
+        <div className='mb-8 flex flex-col items-center gap-1 text-center'>
+          <img
+            alt={t('generic_error.image_alt')}
+            className='mb-4'
+            src={isDarkMode ? ErrorDarkSVG : ErrorLightSVG}
+            width={200}
+            height={200}
+          />
+
+          <h2
+            className={clsx('text-xl font-bold', {
+              'text-white': isDarkMode,
+              'text-gray-800': !isDarkMode
+            })}>
+            {t('generic_error.title')}
+          </h2>
+
+          <p
+            className={clsx('text-sm', {
+              'text-gray-400': isDarkMode,
+              'text-gray-500': !isDarkMode
+            })}>
+            {t('generic_error.description')}
+          </p>
+        </div>
+
+        <div className='flex w-full flex-col gap-4'>
+          <Button
+            variant='brand'
+            className='w-full rounded-lg py-2'
+            onClick={() => window.location.reload()}
+            aria-label='Retry Button'>
+            <span className='font-light'>{t('general.buttons.try_again')}</span>
+          </Button>
+
+          <Button
+            variant='secondary'
+            className='w-full rounded-lg py-2'
+            onClick={() => TutorWidgetEvents['c3po-app-widget-hide'].dispatch()}
+            aria-label='Close Button'>
+            <span className='font-light'>{t('general.buttons.close')}</span>
+          </Button>
+        </div>
+      </div>
+    </PageLayout>
   )
 }
 

package/src/lib/components/icons/arrow-up.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M11.863 6.04013C11.7692 6.16499 11.6441 6.22743 11.519 6.22743C11.3939 6.22743 11.2689 6.16499 11.175 6.07135L6.51594 1.70123L6.51594 13.4693C6.51594 13.7503 6.26579 14 6.01563 14C5.76548 14 5.51533 13.7503 5.51533 13.4693L5.51533 1.70123L0.82495 6.07135C0.637335 6.25864 0.324643 6.25864 0.137028 6.04013C-0.0505867 5.82163 -0.0505867 5.50948 0.168298 5.32219L5.67167 0.140468C5.85929 -0.0468227 6.14071 -0.0468227 6.32833 0.140468L11.8317 5.32219C12.0506 5.50948 12.0506 5.82163 11.863 6.04013Z"
+    fill="currentColor" />
+</svg>

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

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M7.42886 11.1663C7.19494 11.1663 7.01301 11.3747 7.01301 11.583V11.9997C7.01301 12.4684 6.62314 12.833 6.1813 12.833H2.02275C1.55492 12.833 1.19104 12.4684 1.19104 11.9997V5.33301C1.19104 4.8903 1.55492 4.49967 2.02275 4.49967H4.93373C5.14166 4.49967 5.34959 4.31738 5.34959 4.08301C5.34959 3.87467 5.14166 3.66634 4.93373 3.66634H1.99676C1.08708 3.66634 0.333344 4.42155 0.333344 5.33301L0.359334 11.9997C0.359334 12.9372 1.08708 13.6663 2.02275 13.6663H6.1813C7.09098 13.6663 7.84471 12.9372 7.84471 11.9997V11.583C7.84471 11.3747 7.63679 11.1663 7.42886 11.1663ZM13.4068 2.59863L11.4055 0.593424C11.2495 0.437174 11.0416 0.333008 10.8077 0.333008H7.84471C6.90904 0.333008 6.1813 1.08822 6.1813 1.99967V8.66634C6.1813 9.60384 6.90904 10.333 7.84471 10.333H12.0033C12.9129 10.333 13.6667 9.60384 13.6667 8.66634V3.19759C13.6667 2.96322 13.5627 2.75488 13.4068 2.59863ZM11.1715 1.53092L12.4711 2.83301H11.1715V1.53092ZM12.835 8.66634C12.835 9.13509 12.4451 9.49967 12.0033 9.49967H7.84471C7.37688 9.49967 7.01301 9.13509 7.01301 8.66634V1.99967C7.01301 1.55697 7.37688 1.16634 7.84471 1.16634H10.3398V2.83301C10.3398 3.30176 10.7037 3.66634 11.1715 3.66634H12.835V8.66634Z"
+    fill="currentColor" />
+</svg>

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

@@ -4,9 +4,12 @@ export type ValidIconNames =
   | 'archive'
   | 'arrow-down'
   | 'arrow-left'
+  | 'arrow-up'
   | 'chevron-down'
+  | 'copy'
   | 'close'
   | 'info'
+  | 'like'
   | 'send'
   | 'stop'
   | 'warning'

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

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M2.62501 4.28571H1.37501C0.776052 4.28571 0.333344 4.76786 0.333344 5.35714V10.9286C0.333344 11.5446 0.776052 12 1.37501 12H2.62501C3.19793 12 3.66668 11.5446 3.66668 10.9286V5.35714C3.66668 4.76786 3.19793 4.28571 2.62501 4.28571ZM2.83334 10.9286C2.83334 11.0625 2.72918 11.1429 2.62501 11.1429H1.37501C1.2448 11.1429 1.16668 11.0625 1.16668 10.9286V5.35714C1.16668 5.25 1.2448 5.14286 1.37501 5.14286H2.62501C2.72918 5.14286 2.83334 5.25 2.83334 5.35714V10.9286ZM13.6667 5.08929C13.6667 4.17857 12.9375 3.42857 12.0521 3.42857H9.39584C9.6823 2.70536 9.86459 2.00893 9.86459 1.63393C9.86459 0.830357 9.26563 0 8.25001 0C7.1823 0 6.94793 0.803571 6.71355 1.47321C6.01043 3.75 4.50001 4.09821 4.50001 4.71429C4.50001 4.98214 4.6823 5.14286 4.91668 5.14286C5.02084 5.14286 5.12501 5.11607 5.20313 5.03571C6.5573 3.61607 6.94793 3.53571 7.52084 1.74107C7.75522 0.991071 7.83334 0.857143 8.25001 0.857143C8.79688 0.857143 9.03126 1.3125 9.03126 1.63393C9.03126 1.90179 8.79688 2.8125 8.35418 3.66964C8.30209 3.72321 8.30209 3.80357 8.30209 3.85714C8.30209 4.125 8.51043 4.28571 8.71876 4.28571H12.0521C12.4688 4.28571 12.8333 4.66071 12.8333 5.08929C12.8333 5.49107 12.4948 5.83929 12.1042 5.86607C11.8958 5.89286 11.7136 6.08036 11.7136 6.29464C11.7136 6.61607 12.0261 6.64286 12.0261 7.125C12.0261 7.5 11.7656 7.82143 11.4011 7.90179C11.2448 7.92857 11.0625 8.0625 11.0625 8.30357C11.0625 8.54464 11.2448 8.59821 11.2448 8.94643C11.2448 9.77679 10.4115 9.53571 10.4115 10.0982C10.4115 10.2054 10.4636 10.2321 10.4636 10.3661C10.4636 10.7946 10.099 11.1429 9.6823 11.1429H8.22397C6.08855 11.1429 5.41147 9.42857 4.91668 9.42857C4.6823 9.42857 4.50001 9.64286 4.50001 9.85714C4.47397 10.3125 6.16668 12 8.22397 12H9.6823C10.5677 12 11.2969 11.2768 11.2969 10.3661C11.7656 10.0714 12.0781 9.53571 12.0781 8.94643C12.0781 8.8125 12.0521 8.67857 12.0261 8.57143C12.5208 8.27679 12.8594 7.74107 12.8594 7.125C12.8594 6.9375 12.8333 6.72321 12.7552 6.5625C13.3021 6.29464 13.6667 5.73214 13.6667 5.08929Z"
+    fill="currentColor" />
+</svg>

package/src/modules/messages/components/message-actions/index.ts

@@ -0,0 +1,2 @@
+export * from './message-actions'
+export { default as MessageActions } from './message-actions'

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

@@ -0,0 +1,49 @@
+import clsx from 'clsx'
+import dayjs from 'dayjs'
+import type { CSSProperties } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Button, Icon } from '@/src/lib/components'
+import type { ParsedMessage } from '../../types'
+
+export type MessageActionsProps = {
+  message: ParsedMessage
+  className?: string
+  showActions?: boolean
+}
+
+function MessageActions({ message, className, showActions = false }: MessageActionsProps) {
+  const { t } = useTranslation()
+  const copyToClipboard = () => {
+    if (!message.text) return
+
+    navigator.clipboard.writeText(message.text).catch((err) => {
+      console.error('Failed to copy text: ', err)
+    })
+  }
+
+  return (
+    <div className={className}>
+      <span className='text-xs tracking-wide'>
+        {dayjs(message.timestamp).format('DD/MM [•] LT')}
+      </span>
+      <div
+        style={{ '--custom-btn-padding': '0.5rem' } as CSSProperties}
+        className={clsx('flex flex-nowrap gap-2 text-neutral-600', {
+          hidden: !showActions
+        })}>
+        <Button aria-label={t('general.buttons.like')}>
+          <Icon name='like' className='h-3 w-3.5' />
+        </Button>
+        <Button className='rotate-180 scale-x-[-1]' aria-label={t('general.buttons.dislike')}>
+          <Icon name='like' className='h-3 w-3.5' />
+        </Button>
+        <Button onClick={copyToClipboard} aria-label={t('general.buttons.copy')}>
+          <Icon name='copy' className='h-3 w-3.5' />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default MessageActions

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

@@ -3,6 +3,7 @@ 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 }) => {
@@ -10,17 +11,32 @@ const imgComponent: Components['img'] = ({ src }) => {
 }
 
 function MessageItem({ message }: { message: ParsedMessage }) {
+  const messageFromUser = message.metadata.author === 'user'
+  const messageFromAi = message.metadata.author === 'ai'
+
   return (
     <div
-      data-test='messages-item'
       className={clsx(
-        'max-w-[min(80%,52rem)] overflow-x-hidden rounded-lg px-3 text-sm/normal text-neutral-900',
+        'flex max-w-[min(90%,52rem)] flex-col items-end gap-2 text-sm/normal text-neutral-900',
         {
-          'self-end bg-neutral-200': message.metadata.author === 'user',
-          'border border-neutral-300 bg-neutral-100': message.metadata.author === 'ai'
+          'self-end': messageFromUser
         }
       )}>
-      <MarkdownRenderer content={message?.text ?? message?.name} imgComponent={imgComponent} />
+      <div
+        data-test='messages-item'
+        className={clsx('w-full overflow-x-hidden rounded-lg px-3', {
+          'bg-neutral-200': messageFromUser,
+          'border border-neutral-300 bg-neutral-100': messageFromAi
+        })}>
+        <MarkdownRenderer content={message?.text ?? message?.name} imgComponent={imgComponent} />
+      </div>
+      <MessageActions
+        className={clsx('flex items-center justify-between gap-2', {
+          'w-full': messageFromAi
+        })}
+        message={message}
+        showActions={messageFromAi}
+      />
     </div>
   )
 }

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

@@ -1,4 +1,8 @@
-import type { MouseEventHandler, ReactNode } from 'react'
+import { type MouseEventHandler, type ReactNode, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Button } from '@/src/lib/components'
+import { devMode } from '@/src/lib/utils'
 
 export type MessageItemErrorProps = {
   message?: ReactNode
@@ -6,18 +10,21 @@ export type MessageItemErrorProps = {
   show?: boolean
 }
 
-// TODO: [PLACEHOLDER] Refactor using the PD choice for Error Handling
 function MessageItemError({ message, retry, show = true }: MessageItemErrorProps) {
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    if (show && devMode) console.log(message)
+  }, [message, show])
+
   if (!show) return null
 
   return (
-    <div className='rounded bg-red-900/20 p-4 text-center text-red-400'>
-      {message}
-      <button
-        onClick={retry}
-        className='ml-2 cursor-pointer rounded bg-danger-600 px-3 py-1 text-sm text-danger-100 transition-colors hover:bg-danger-700'>
-        Retry
-      </button>
+    <div className='mt-2 flex justify-start gap-2 rounded border border-danger-500 bg-neutral-200 p-4 text-neutral-800'>
+      <span>{t('chat_page.error.loading.content')}</span>
+      <Button variant='tertiary' className='px-4 text-sm/relaxed text-danger-400' onClick={retry}>
+        {t('chat_page.error.loading.action')}
+      </Button>
     </div>
   )
 }

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

@@ -4,10 +4,7 @@ import { AIAvatarIcon } from '@/src/modules/widget'
 
 const MessageSkeleton = forwardRef<HTMLDivElement>((_, ref) => {
   return (
-    <div
-      ref={ref}
-      className='flex max-w-[86%] flex-col items-start gap-2'
-      aria-label='Loading Component'>
+    <div ref={ref} className='flex flex-col items-start gap-2' aria-label='Loading Component'>
       <AIAvatarIcon className='rounded-lg bg-ai-chat-response' />
       <div className='flex w-full flex-col items-start gap-2'>
         <div className='h-3 w-full animate-pulse rounded-full bg-neutral-200 transition-colors delay-0' />

package/src/modules/messages/components/messages-container/index.ts

@@ -0,0 +1,2 @@
+export * from './messages-container'
+export { default as MessagesContainer } from './messages-container'