app-tutor-ai-consumer 1.18.2 → 1.19.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# [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.19.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",

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/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'

package/src/modules/messages/components/messages-container/messages-container.tsx

@@ -0,0 +1,91 @@
+import { forwardRef, useEffect } from 'react'
+import clsx from 'clsx'
+import type { MouseEventHandler, PropsWithChildren } from 'react'
+import { createPortal } from 'react-dom'
+import { useTranslation } from 'react-i18next'
+
+import { Button, Icon } from '@/src/lib/components'
+import { MessageSkeleton } from '@/src/modules/messages/components'
+import { useSkeletonRef } from '@/src/modules/messages/hooks/use-skeleton-ref'
+import {
+  ScrollToBottomButton,
+  usePageLayoutMainRefContext,
+  useWidgetLoadingAtom
+} from '@/src/modules/widget'
+import { useScroller } from '../../hooks'
+
+const MessagesContainer = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<{
+    showButton?: boolean
+    loading?: boolean
+    handleShowMore?: () => Promise<void>
+  }>
+>(({ children, handleShowMore, showButton = false, loading = false }, forwardedRef) => {
+  const { t } = useTranslation()
+  const skeletonRef = useSkeletonRef()
+  const [isLoadingNewMsg] = useWidgetLoadingAtom()
+  const mainLayoutRef = usePageLayoutMainRefContext()
+  const { scrollerRef, scrollToButtonRef, scrollToBottom, showScrollButton } =
+    useScroller(forwardedRef)
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [scrollToBottom])
+
+  const handleClickShowMore: MouseEventHandler<HTMLButtonElement> = (e) => {
+    const scroller = scrollerRef?.current
+    const heightBeforeRender = Number(e?.currentTarget?.scrollHeight)
+
+    void handleShowMore?.().then(() => {
+      if (scroller && !isNaN(heightBeforeRender)) {
+        setTimeout(
+          () =>
+            scroller.scrollTo({
+              top: heightBeforeRender + 10,
+              behavior: 'smooth'
+            }),
+          180
+        )
+      }
+    })
+  }
+
+  return (
+    <div ref={scrollerRef} className='mx-2 my-4 flex h-full flex-col gap-2 overflow-auto px-4'>
+      <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'
+          onClick={handleClickShowMore}
+          loading={loading}
+          show={showButton}>
+          <Icon name='arrow-up' className='h-4 w-3' aria-hidden />
+          <span className='text-nowrap'>{t('general.buttons.show_more')}</span>
+        </Button>
+      </div>
+      {children}
+
+      {mainLayoutRef.current &&
+        createPortal(
+          <ScrollToBottomButton
+            ref={scrollToButtonRef}
+            show={showScrollButton}
+            onClick={scrollToBottom}
+          />,
+          mainLayoutRef.current
+        )}
+      <div
+        className={clsx({
+          'pointer-events-none h-0 overflow-hidden opacity-0': !isLoadingNewMsg,
+          'mt-2 pb-4': isLoadingNewMsg
+        })}
+        ref={skeletonRef}>
+        <MessageSkeleton />
+      </div>
+    </div>
+  )
+})
+
+MessagesContainer.displayName = 'MessagesContainer'
+
+export default MessagesContainer