app-tutor-ai-consumer 1.33.0 → 1.34.0

package/src/modules/messages/components/chat-file-preview/chat-file-preview.builder.ts

@@ -0,0 +1,121 @@
+import { chance } from '@/src/config/tests'
+
+import type { FilePreviewProps, FilePreviewTypes } from './types'
+
+class ChatFilePreviewBuilder implements FilePreviewProps {
+  name: string
+  size: number
+  type: FilePreviewTypes
+  showCloseButton: boolean
+  hasError: boolean
+  isLoading: boolean
+  imageUrl?: string
+  onClose?: () => void
+
+  constructor() {
+    this.name = chance.word() + '.pdf'
+    this.size = chance.integer({ min: 1000, max: 10000000 })
+    this.type = 'pdf'
+    this.showCloseButton = false
+    this.hasError = false
+    this.isLoading = false
+    this.onClose = vi.fn()
+  }
+
+  withName(name: typeof this.name) {
+    this.name = name
+
+    return this
+  }
+
+  withSize(size: typeof this.size) {
+    this.size = size
+
+    return this
+  }
+
+  withType(type: typeof this.type) {
+    this.type = type
+
+    return this
+  }
+
+  withShowCloseButton(showCloseButton: typeof this.showCloseButton) {
+    this.showCloseButton = showCloseButton
+
+    return this
+  }
+
+  withImageUrl(imageUrl: typeof this.imageUrl) {
+    this.imageUrl = imageUrl
+
+    return this
+  }
+
+  withHasError(hasError: typeof this.hasError) {
+    this.hasError = hasError
+
+    return this
+  }
+
+  withOnClose(onClose: typeof this.onClose) {
+    this.onClose = onClose
+
+    return this
+  }
+
+  withIsLoading(isLoading: typeof this.isLoading) {
+    this.isLoading = isLoading
+
+    return this
+  }
+
+  asPdf() {
+    this.type = 'pdf'
+    this.name = chance.word() + '.pdf'
+
+    return this
+  }
+
+  asDocument() {
+    this.type = 'document'
+    this.name = chance.word() + '.docx'
+
+    return this
+  }
+
+  asSpreadsheet() {
+    this.type = 'spreadsheet'
+    this.name = chance.word() + '.xlsx'
+
+    return this
+  }
+
+  asImage() {
+    this.type = 'image'
+    this.name = chance.word() + '.jpg'
+    this.imageUrl = chance.url()
+
+    return this
+  }
+
+  withError() {
+    this.hasError = true
+
+    return this
+  }
+
+  withLoading() {
+    this.isLoading = true
+
+    return this
+  }
+
+  withCloseButton() {
+    this.showCloseButton = true
+
+    return this
+  }
+}
+
+export default ChatFilePreviewBuilder

package/src/modules/messages/components/chat-file-preview/chat-file-preview.spec.tsx

@@ -0,0 +1,107 @@
+import { render, screen } from '@/src/config/tests'
+import { useMediaQuery } from '@/src/lib/hooks'
+import * as WidgetStore from '@/src/modules/widget/store'
+
+import ChatFilePreview from './chat-file-preview'
+import ChatFilePreviewBuilder from './chat-file-preview.builder'
+
+vi.mock('@/src/lib/hooks', async () => ({
+  ...(await vi.importActual('@/src/lib/hooks')),
+  useMediaQuery: vi.fn()
+}))
+
+describe('ChatFilePreview', () => {
+  const mockSettings = {
+    config: {
+      theme: 'dark'
+    }
+  }
+
+  const defaultProps = new ChatFilePreviewBuilder()
+
+  const renderComponent = (props = defaultProps) => render(<ChatFilePreview {...props} />)
+
+  beforeEach(() => {
+    vi.spyOn(WidgetStore, 'useWidgetSettingsAtom').mockReturnValue([mockSettings, vi.fn()] as never)
+    vi.mocked(useMediaQuery).mockReturnValue(false)
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Error state', () => {
+    it('should render error message when hasError is true', () => {
+      renderComponent(new ChatFilePreviewBuilder().withError())
+
+      expect(screen.getByText(/send_message.file_upload.error.load_file/i)).toBeInTheDocument()
+      expect(screen.getByText(/general.buttons.try_again/i)).toBeInTheDocument()
+    })
+
+    it('should render spinner when hasError and isLoading are both true', () => {
+      renderComponent(new ChatFilePreviewBuilder().withError().withLoading())
+
+      expect(screen.queryByText(/general.buttons.try_again/i)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Image type', () => {
+    it('should render image when type is image', () => {
+      const builder = new ChatFilePreviewBuilder().asImage()
+      renderComponent(builder)
+
+      const image = screen.getByRole('img', { name: builder.name })
+      expect(image).toHaveAttribute('src', builder.imageUrl)
+    })
+  })
+
+  describe('Document types (PDF, document, spreadsheet)', () => {
+    it('should render PDF file with correct icon and label', () => {
+      renderComponent()
+
+      expect(screen.getByText(defaultProps.name)).toBeInTheDocument()
+      expect(screen.getByText(/file_upload.file_type.pdf/i)).toBeInTheDocument()
+    })
+
+    it('should render document file with correct icon and label', () => {
+      const builder = new ChatFilePreviewBuilder().asDocument().withName('file.docx')
+      renderComponent(builder)
+
+      expect(screen.getByText('file.docx')).toBeInTheDocument()
+      expect(screen.getByText(/file_upload.file_type.document/i)).toBeInTheDocument()
+    })
+
+    it('should render spreadsheet file with correct icon and label', () => {
+      const builder = new ChatFilePreviewBuilder().asSpreadsheet().withName('data.xlsx')
+      renderComponent(builder)
+
+      expect(screen.getByText('data.xlsx')).toBeInTheDocument()
+      expect(screen.getByText(/file_upload.file_type.spreadsheet/i)).toBeInTheDocument()
+    })
+
+    it('should render spinner when isLoading is true', () => {
+      renderComponent(new ChatFilePreviewBuilder().withLoading())
+
+      expect(screen.queryByText(/file_upload.file_type/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('Close button behavior', () => {
+    it('should call onClose when close button is clicked', async () => {
+      const props = new ChatFilePreviewBuilder().withCloseButton()
+      const { user } = renderComponent(props)
+
+      await user.click(screen.getByRole('button', { name: 'general.buttons.remove_attachment' }))
+
+      expect(props.onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not render close button when showCloseButton is false', () => {
+      renderComponent()
+
+      expect(
+        screen.queryByRole('button', { name: 'general.buttons.remove_attachment' })
+      ).not.toBeInTheDocument()
+    })
+  })
+})

package/src/modules/messages/components/chat-file-preview/chat-file-preview.tsx

@@ -0,0 +1,45 @@
+import { DocumentPreview } from './components/document-preview'
+import { ErrorPreview } from './components/error-preview'
+import { ImagePreview } from './components/image-preview'
+import type { FilePreviewProps } from './types'
+
+function ChatFilePreview({
+  name,
+  size,
+  type,
+  showCloseButton = false,
+  onClose,
+  imageUrl,
+  onRetry,
+  hasError = false,
+  isLoading = false
+}: FilePreviewProps) {
+  if (hasError) {
+    return <ErrorPreview isLoading={isLoading} onRetry={onRetry} />
+  }
+
+  if (type === 'image') {
+    return (
+      <ImagePreview
+        imageUrl={imageUrl}
+        name={name}
+        isLoading={isLoading}
+        showCloseButton={showCloseButton}
+        onClose={onClose}
+      />
+    )
+  }
+
+  return (
+    <DocumentPreview
+      name={name}
+      size={size}
+      type={type}
+      isLoading={isLoading}
+      showCloseButton={showCloseButton}
+      onClose={onClose}
+    />
+  )
+}
+
+export default ChatFilePreview

package/src/modules/messages/components/chat-file-preview/components/close-button/close-button.tsx

@@ -0,0 +1,31 @@
+import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
+
+import { Icon } from '@/src/lib/components/icons'
+
+import type { CloseButtonProps } from './types'
+
+export default function CloseButton({ onClick, variant = 'overlay' }: CloseButtonProps) {
+  const { t } = useTranslation()
+  const baseClasses =
+    'flex items-center justify-center transition-colors duration-150 outline-none focus:outline-none'
+  const variantClasses = {
+    overlay: 'absolute right-1 top-1 h-6 w-6 rounded-full bg-white shadow-sm hover:bg-neutral-100',
+    inline: 'ml-7 shrink-0 cursor-pointer text-neutral-900 hover:text-neutral-500'
+  }
+
+  return (
+    <button
+      onClick={onClick}
+      className={clsx(baseClasses, variantClasses[variant])}
+      aria-label={t('general.buttons.remove_attachment')}>
+      <Icon
+        name='close'
+        className={clsx('h-3 w-3', {
+          'text-neutral-900': variant === 'overlay',
+          'mr-3': variant === 'inline'
+        })}
+      />
+    </button>
+  )
+}

package/src/modules/messages/components/chat-file-preview/components/close-button/index.ts

@@ -0,0 +1 @@
+export { default as CloseButton } from './close-button'

package/src/modules/messages/components/chat-file-preview/components/close-button/types.ts

@@ -0,0 +1,4 @@
+export type CloseButtonProps = {
+  onClick?: () => void
+  variant?: 'overlay' | 'inline'
+}

package/src/modules/messages/components/chat-file-preview/components/document-preview/document-preview.tsx

@@ -0,0 +1,63 @@
+import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
+
+import { Icon, Spinner } from '@/src/lib/components'
+import { useMediaQuery } from '@/src/lib/hooks'
+import { useWidgetSettingsAtom } from '@/src/modules/widget/store'
+import { CHAT_FILE_PREVIEW_CONFIG } from '../../constants'
+import { formatFileSize } from '../../utils'
+import { CloseButton } from '../close-button'
+
+import type { DocumentPreviewProps } from './types'
+
+export default function DocumentPreview({
+  name,
+  size,
+  type,
+  isLoading,
+  showCloseButton,
+  onClose
+}: DocumentPreviewProps) {
+  const { t } = useTranslation()
+  const [settings] = useWidgetSettingsAtom()
+  const isMobile = useMediaQuery({ maxSize: 'md' })
+  const formattedSize = formatFileSize(size)
+  const isDarkMode = settings?.config?.theme === 'dark'
+  const config = CHAT_FILE_PREVIEW_CONFIG[type]
+
+  return (
+    <div
+      className={clsx(
+        'flex max-w-[345px] items-center justify-between rounded-lg border border-neutral-200 p-3',
+        {
+          'bg-neutral-100': isDarkMode,
+          'bg-white': !isDarkMode,
+          'w-full max-w-full': isMobile && showCloseButton
+        }
+      )}>
+      <div className='flex min-w-0 flex-1 items-center gap-3 overflow-hidden'>
+        <div
+          className='flex h-10 w-10 shrink-0 items-center justify-center rounded-md'
+          style={{ backgroundColor: config.bgColor }}>
+          {isLoading ? (
+            <Spinner className='h-[18px] w-[18px] text-white' />
+          ) : (
+            <Icon name={config.icon} className='h-[18px] w-[18px] text-white' />
+          )}
+        </div>
+        <div className='min-w-0 flex-1 overflow-hidden'>
+          <p className='mb-0 mr-3 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-neutral-900'>
+            {name}
+          </p>
+          <div className='flex items-center gap-1 text-xs text-neutral-600'>
+            <span className='mb-0'>{t(config.label)}</span>
+            <span className='mb-0'>-</span>
+            <span className='mb-0'>{formattedSize}</span>
+          </div>
+        </div>
+      </div>
+
+      {showCloseButton && <CloseButton onClick={onClose} variant='inline' />}
+    </div>
+  )
+}

package/src/modules/messages/components/chat-file-preview/components/document-preview/index.ts

@@ -0,0 +1 @@
+export { default as DocumentPreview } from './document-preview'

package/src/modules/messages/components/chat-file-preview/components/document-preview/types.ts

@@ -0,0 +1,10 @@
+import type { FilePreviewProps } from '../../types'
+
+export type DocumentPreviewProps = {
+  name: string
+  size: number
+  type: Exclude<FilePreviewProps['type'], 'image'>
+  isLoading: boolean
+  showCloseButton: boolean
+  onClose?: () => void
+}

package/src/modules/messages/components/chat-file-preview/components/error-preview/error-preview.tsx

@@ -0,0 +1,37 @@
+import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
+
+import { Icon, Spinner } from '@/src/lib/components'
+import { useWidgetSettingsAtom } from '@/src/modules/widget/store'
+
+import type { ErrorPreviewProps } from './types'
+
+export default function ErrorPreview({ isLoading, onRetry }: ErrorPreviewProps) {
+  const { t } = useTranslation()
+  const [settings] = useWidgetSettingsAtom()
+  const isDarkMode = settings?.config?.theme === 'dark'
+
+  return (
+    <div
+      className={clsx('w-fit rounded-lg border border-neutral-200 px-3 py-2', {
+        'bg-neutral-100': isDarkMode,
+        'bg-white': !isDarkMode
+      })}>
+      {isLoading ? (
+        <Spinner className='h-[18px] w-[18px] text-neutral-900' />
+      ) : (
+        <div className='flex h-full w-full flex-col items-start'>
+          <p className='mb-1 text-xs text-red-700'>
+            {t('send_message.file_upload.error.load_file')}
+          </p>
+          <button
+            onClick={onRetry}
+            className='flex items-center gap-1 rounded border border-neutral-300 px-2 py-1 text-xs text-neutral-900 hover:bg-neutral-200'>
+            <Icon name='retry' className='h-4 w-3' />
+            {t('general.buttons.try_again')}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/modules/messages/components/chat-file-preview/components/error-preview/index.ts

@@ -0,0 +1 @@
+export { default as ErrorPreview } from './error-preview'

package/src/modules/messages/components/chat-file-preview/components/error-preview/types.ts

@@ -0,0 +1,4 @@
+export type ErrorPreviewProps = {
+  isLoading: boolean
+  onRetry?: () => void
+}

package/src/modules/messages/components/chat-file-preview/components/image-preview/image-preview.tsx

@@ -0,0 +1,32 @@
+import clsx from 'clsx'
+
+import { Spinner } from '@/src/lib/components/spinner'
+import { CloseButton } from '../close-button'
+
+import type { ImagePreviewProps } from './types'
+
+export default function ImagePreview({
+  imageUrl,
+  name,
+  isLoading,
+  showCloseButton,
+  onClose
+}: ImagePreviewProps) {
+  return (
+    <div className='relative h-16 w-16'>
+      <img
+        src={imageUrl}
+        alt={name}
+        className={clsx('h-full w-full rounded-lg object-cover', {
+          'backdrop-blur-sm': isLoading
+        })}
+      />
+      {isLoading && (
+        <div className='absolute inset-0 flex items-center justify-center rounded-lg bg-black/30 backdrop-blur-sm'>
+          <Spinner className='h-[18px] w-[18px] text-white' />
+        </div>
+      )}
+      {showCloseButton && !isLoading && <CloseButton onClick={onClose} variant='overlay' />}
+    </div>
+  )
+}

package/src/modules/messages/components/chat-file-preview/components/image-preview/index.ts

@@ -0,0 +1 @@
+export { default as ImagePreview } from './image-preview'

package/src/modules/messages/components/chat-file-preview/components/image-preview/types.ts

@@ -0,0 +1,6 @@
+import type { FilePreviewProps } from '../../types'
+
+export type ImagePreviewProps = Pick<
+  FilePreviewProps,
+  'imageUrl' | 'name' | 'isLoading' | 'showCloseButton' | 'onClose'
+>

package/src/modules/messages/components/chat-file-preview/constants.ts

@@ -0,0 +1,22 @@
+export const CHAT_FILE_PREVIEW_CONFIG = {
+  pdf: {
+    bgColor: '#D2444B',
+    label: 'send_message.file_upload.file_type.pdf',
+    icon: 'pdf'
+  },
+  document: {
+    bgColor: '#007EA8',
+    label: 'send_message.file_upload.file_type.document',
+    icon: 'document'
+  },
+  spreadsheet: {
+    bgColor: '#00992B',
+    label: 'send_message.file_upload.file_type.spreadsheet',
+    icon: 'spreadsheet'
+  }
+} as const
+
+export const FILE_SIZE_UNITS = {
+  KB: 1024,
+  MB: 1024 * 1024
+} as const

package/src/modules/messages/components/chat-file-preview/index.ts

@@ -0,0 +1 @@
+export { default as ChatFilePreview } from './chat-file-preview'

package/src/modules/messages/components/chat-file-preview/types.ts

@@ -0,0 +1,13 @@
+export type FilePreviewTypes = 'pdf' | 'document' | 'spreadsheet' | 'image'
+
+export type FilePreviewProps = {
+  name: string
+  size: number
+  type: FilePreviewTypes
+  showCloseButton?: boolean
+  imageUrl?: string
+  hasError?: boolean
+  onRetry?: () => void
+  onClose?: () => void
+  isLoading?: boolean
+}

package/src/modules/messages/components/chat-file-preview/utils.spec.ts

@@ -0,0 +1,38 @@
+import { formatFileSize } from './utils'
+
+describe('formatFileSize', () => {
+  it('should format bytes correctly when size is less than 1KB', () => {
+    expect(formatFileSize(0)).toBe('0B')
+    expect(formatFileSize(100)).toBe('100B')
+    expect(formatFileSize(512)).toBe('512B')
+    expect(formatFileSize(1023)).toBe('1023B')
+  })
+
+  it('should format kilobytes correctly when size is between 1KB and 1MB', () => {
+    expect(formatFileSize(1024)).toBe('1KB')
+    expect(formatFileSize(2048)).toBe('2KB')
+    expect(formatFileSize(1536)).toBe('1.5KB')
+    expect(formatFileSize(10240)).toBe('10KB')
+    expect(formatFileSize(102400)).toBe('100KB')
+  })
+
+  it('should format megabytes correctly when size is greater than or equal to 1MB', () => {
+    expect(formatFileSize(1048576)).toBe('1MB')
+    expect(formatFileSize(2097152)).toBe('2MB')
+    expect(formatFileSize(1572864)).toBe('1.5MB')
+    expect(formatFileSize(10485760)).toBe('10MB')
+  })
+
+  it('should round to one decimal place', () => {
+    expect(formatFileSize(1638)).toBe('1.6KB')
+    expect(formatFileSize(1740)).toBe('1.7KB')
+    expect(formatFileSize(1100000)).toBe('1MB')
+    expect(formatFileSize(1600000)).toBe('1.5MB')
+  })
+
+  it('should handle edge cases', () => {
+    expect(formatFileSize(1025)).toBe('1KB')
+    expect(formatFileSize(1048575)).toBe('1024KB')
+    expect(formatFileSize(1048577)).toBe('1MB')
+  })
+})

package/src/modules/messages/components/chat-file-preview/utils.ts

@@ -0,0 +1,13 @@
+import { FILE_SIZE_UNITS } from './constants'
+
+export function formatFileSize(size: number): string {
+  if (size < FILE_SIZE_UNITS.KB) {
+    return `${size}B`
+  }
+
+  if (size < FILE_SIZE_UNITS.MB) {
+    return `${Math.round((size / FILE_SIZE_UNITS.KB) * 10) / 10}KB`
+  }
+
+  return `${Math.round((size / FILE_SIZE_UNITS.MB) * 10) / 10}MB`
+}

package/src/modules/messages/components/chat-file-uploader/chat-file-uploader.builder.ts

@@ -0,0 +1,19 @@
+import type { ChatFileUploaderProps } from './types'
+
+export class ChatFileUploaderBuilder {
+  private props: ChatFileUploaderProps = {}
+
+  withDisabled(disabled: boolean): ChatFileUploaderBuilder {
+    this.props.disabled = disabled
+    return this
+  }
+
+  withLoading(loading: boolean): ChatFileUploaderBuilder {
+    this.props.loading = loading
+    return this
+  }
+
+  build(): ChatFileUploaderProps {
+    return this.props
+  }
+}

package/src/modules/messages/components/chat-file-uploader/chat-file-uploader.spec.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from '@/src/config/tests'
+
+import ChatFileUploader from './chat-file-uploader'
+import { ChatFileUploaderBuilder } from './chat-file-uploader.builder'
+
+vi.mock('@/src/lib/hooks/use-chat-file-upload', () => ({
+  useChatFileUpload: vi.fn(() => ({
+    handleSelectFile: vi.fn(),
+    selectedFile: null
+  }))
+}))
+
+const defaultProps = new ChatFileUploaderBuilder().build()
+const renderComponent = (props = defaultProps) => render(<ChatFileUploader {...props} />)
+
+describe('ChatFileUploader', () => {
+  it('should be disabled when disabled prop is true', () => {
+    const props = new ChatFileUploaderBuilder().withDisabled(true).build()
+    renderComponent(props)
+
+    const button = screen.getByRole('button', {
+      name: /general.buttons.open_options/i
+    })
+    expect(button).toBeDisabled()
+  })
+
+  it('should be disabled when loading prop is true', () => {
+    const props = new ChatFileUploaderBuilder().withLoading(true).build()
+    renderComponent(props)
+
+    const button = screen.getByRole('button', {
+      name: /general.buttons.open_options/i
+    })
+    expect(button).toBeDisabled()
+  })
+
+  it('should be enabled when both disabled and loading are false', () => {
+    const props = new ChatFileUploaderBuilder().withDisabled(false).withLoading(false).build()
+    renderComponent(props)
+
+    const button = screen.getByRole('button', {
+      name: /general.buttons.open_options/i
+    })
+    expect(button).toBeEnabled()
+  })
+
+  it('should trigger file input when clicking file option', async () => {
+    const { user } = renderComponent()
+
+    const button = screen.getByRole('button', {
+      name: /general.buttons.open_options/i
+    })
+    await user.click(button)
+
+    expect(screen.getByText('general.buttons.file')).toBeInTheDocument()
+    expect(screen.getByText('general.buttons.image')).toBeInTheDocument()
+  })
+})