app-tutor-ai-consumer 1.33.1 → 1.35.0

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# [1.35.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.34.0...v1.35.0) (2025-11-05)
+
+### Features
+
+- add retry question ([7b75aba](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/7b75aba715ade6d5a7fec04237f8f13e643d47f5))
+
+# [1.34.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.33.1...v1.34.0) (2025-11-04)
+
+### Bug Fixes
+
+- fix aria label ([5aa714d](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/5aa714da552e93349c1c030c026ecb4a14c132ba))
+- fix base branch ([96db93a](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/96db93a53c4a93d6e0800af9547ea81d118a6bb5))
+- fix chat input ([d686bc5](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/d686bc530cecb84fc80cbf2a8b9ff029a3572e53))
+- fix file types ([ee12680](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/ee12680db8c36307c4b067cb6460009c0509018e))
+- fix file uploader ([1110f11](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/1110f116a0276f3d34ebec6eea81aaa59e50e993))
+- fix pr request ([6ad4870](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/6ad4870cd2bd03f788eb10f00a65616d48c1087f))
+- fix pr request ([1556154](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/155615476be3fb61994a790dd4464b9f53968f78))
+- fix pr request ([17cd695](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/17cd69506c21b793ea05f634a07f987a125e3102))
+- fix svg ([c9165f7](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/c9165f74d2f592e0fccf27176768e2ae6a782fd0))
+- pr issues ([3f5b8ad](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/3f5b8ad54a657a4d95c66728c12559cd321b088d))
+- refactor code ([1b7b5cf](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/1b7b5cfafe6c8f902bf3514fd4e36996f2e705c8))
+- refactor component name ([a6c2a16](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/a6c2a16ab29733dd831bc88e3a6452c9e225af70))
+- remove console.log ([66645dc](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/66645dc72dac1bd667c5440cf59e45aecc9b321a))
+- update file uploader ([c12f347](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/c12f3472450a4afa214ebf87234e7eb3464c3f7d))
+
+### Features
+
+- add chat loading if is user message without response ([8ffe2a7](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/8ffe2a7bbf1d814f341855ec1efebd6e00f5cb65))
+- add default store ([75a07c4](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/75a07c451c99b526aea896b6f94b7deb1f0f1888))
+- change sparkie call to messages history page ([f5f3e73](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/f5f3e73d7ec147b7f5a4a5e76293cf29b2d0dd93))
+- create chat file preview ([885b744](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/885b744d76b62a7e387d2e820e8e8030f6e17f9a))
+- implement signed URLs functionality with hooks and service integration ([ff845fa](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/ff845fa34be2c28f55ec04b9a70522f3100a7bec))
+- refactor dropdown ([88bba02](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/88bba02ec9021f5294450eecfd6d6c92097d6690))
+- release branch for changing widget to support product agent ([ab39962](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/ab39962a5e2a35ee29056c329fe8a4038291ceaa))
+- update feature flag file upload ([bd3313b](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/bd3313b634b53ac5dfda2737155e718d570fb099))
+- update icon size ([2d77927](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/2d7792724ed1a1166b012da118b5ce3c44d9ad74))
+
 ## [1.33.1](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.33.0...v1.33.1) (2025-10-22)
 
 ### Bug Fixes

package/config/vitest/__mocks__/sparkie.tsx

@@ -4,9 +4,9 @@ import {
   SparkieMessageServiceMock,
   SparkieCursorServiceMock
 } from '@/src/modules/sparkie/__tests__/sparkie.mock'
-import MessageService from '@hotmart/sparkie/dist/MessageService'
+import MessageService from '@hotmart-org-ca/sparkie/dist/MessageService'
 
-vi.mock('@hotmart/sparkie', () => ({ default: SparkieMock }))
+vi.mock('@hotmart-org-ca/sparkie', () => ({ default: SparkieMock }))
 
 beforeEach(() => {
   vi.spyOn(SparkieService, 'getMessageService').mockResolvedValue(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.33.1",
+  "version": "1.35.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",
@@ -108,8 +108,8 @@
   "dependencies": {
     "@hot-observability-js/react": "~1.1.0",
     "@hotmart-org-ca/hot-observability-js": "~1.1.0",
+    "@hotmart-org-ca/sparkie": "~5.1.4",
     "@hotmart/event-agent-js": "~1.1.2",
-    "@hotmart/sparkie": "~5.1.0",
     "@optimizely/react-sdk": "~3.2.4",
     "@tanstack/query-sync-storage-persister": "~5.80.7",
     "@tanstack/react-query": "~5.80.6",

package/src/@types/index.d.ts

@@ -1,4 +1,4 @@
-import type { StartTutorWidgetProps } from '@/src/types'
+import type { StartTutorWidgetProps, WidgetInstance } from '@/src/types'
 
 export {}
 
@@ -13,7 +13,8 @@ declare global {
       elementId: StartTutorWidgetProps['elementId'],
       settings: StartTutorWidgetProps['settings']
     ) => Promise<void>
-    closeChatWidget: () => void
+    closeChatWidget: () => Promise<void>
+    __CHAT_WIDGET_INSTANCE__?: WidgetInstance
     TOKEN: string
   }
 }

package/src/bootstrap.ts

@@ -0,0 +1,40 @@
+import type { QueryClient } from '@tanstack/react-query'
+
+import { initTheme } from '@/src/config/theme'
+
+import { DataHubStore } from './config/datahub'
+import { initDayjs } from './config/dayjs'
+import { initLanguage } from './config/i18n'
+import { initAxios } from './config/request/api'
+import { getProfileQuery } from './modules/profile'
+import type { Theme, WidgetSettingProps } from './types'
+
+type BootstrapProps = {
+  settings: WidgetSettingProps
+  queryClient: QueryClient
+}
+
+export async function bootstrap({ queryClient, settings }: BootstrapProps) {
+  initAxios(settings.hotmartToken)
+  initTheme(settings.config?.theme as Theme)
+
+  const promises = [
+    initLanguage(settings.locale),
+    queryClient.prefetchQuery(getProfileQuery()),
+    initDayjs(settings.locale)
+  ] as const
+
+  await Promise.all(promises)
+
+  DataHubStore.initData({
+    ucode: settings.user?.ucode ?? '',
+    membershipId: settings.membershipId ?? '',
+    membershipSlug: settings.membershipSlug ?? '',
+    sessionId: settings.sessionId,
+    userId: Number(settings.userId),
+    product: {
+      id: Number(settings.productId) || 0,
+      category: settings.productType ?? ''
+    }
+  })
+}

package/src/config/tanstack/query-provider.tsx

@@ -1,14 +1,25 @@
+import type { Query, QueryClient } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
 import type { PropsWithChildren } from 'react'
 
-import { persister, queryClient } from './query-client'
+import { persister } from './query-client'
 
-export type QueryProviderProps = PropsWithChildren<{ showDevTools?: boolean }>
+export type QueryProviderProps = PropsWithChildren<{
+  showDevTools?: boolean
+  queryClient: QueryClient
+}>
 
-function QueryProvider({ children, showDevTools = true }: QueryProviderProps) {
+function QueryProvider({ children, queryClient, showDevTools = true }: QueryProviderProps) {
   return (
-    <PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={
+        {
+          persister,
+          shouldPersistQuery: (query: Query) => query.meta?.persist !== false
+        } as Parameters<typeof PersistQueryClientProvider>[0]['persistOptions']
+      }>
       {children}
       {showDevTools && <ReactQueryDevtools buttonPosition='top-right' />}
     </PersistQueryClientProvider>

package/src/config/tests/handlers.ts

@@ -1,8 +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 SignedUrlsResponseBuilder from '@/src/modules/messages/__tests__/signed-urls.builder'
 import { ProfileEndpoints } from '@/src/modules/profile'
 import ProfileAPIPropsBuilder from '@/src/modules/profile/__tests__/profile-api-props.builder'
 
@@ -19,13 +19,14 @@ export const handlers = [
   http.all(ProfileEndpoints.getProfile(), () => {
     return HttpResponse.json(new ProfileAPIPropsBuilder())
   }),
+  http.all(MessagesEndpoints.getSignedUrls(), () => {
+    return HttpResponse.json(new SignedUrlsResponseBuilder())
+  }),
   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[]
+      new IMessageWithSenderDataMock().getMany(isNaN(limit) ? MSG_MAX_COUNT : limit)
     )
   })
 ]

package/src/config/theme/init-theme.ts

@@ -1,3 +1,4 @@
+import { getTheme } from '@/src/lib/utils'
 import type { Theme } from '@/src/types'
 
 export function initTheme(theme: Theme) {
@@ -5,11 +6,16 @@ export function initTheme(theme: Theme) {
 
   if (!rootElement) return
 
-  if (theme === 'dark') {
-    rootElement.classList.remove('bg-neutral-100')
-    return rootElement.classList.add(theme, 'bg-ai-dark')
+  const currentTheme = getTheme(theme)
+
+  const darkClasses = ['dark', 'bg-ai-dark']
+  const lightClasses = ['bg-neutral-100']
+
+  rootElement.classList.remove(...darkClasses, ...lightClasses)
+
+  if (currentTheme === 'dark') {
+    return rootElement.classList.add(...darkClasses)
   }
 
-  rootElement.classList.remove('dark', 'bg-ai-dark')
-  return rootElement.classList.add('bg-neutral-100')
+  return rootElement.classList.add(...lightClasses)
 }

package/src/index.backup.tsx

@@ -0,0 +1,61 @@
+import './config/styles/global.css'
+import './config/styles/index.css'
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+import { initTheme } from '@/src/config/theme'
+import { version } from '../package.json'
+
+import { initLanguage } from './config/i18n'
+import { devMode, productionMode } from './lib/utils'
+import { Main } from './main'
+import { TutorWidgetEvents } from './modules/widget'
+import type { Theme, WidgetSettingProps } from './types'
+
+const loadMainStyles = () => {
+  const isProduction = productionMode
+  const bundlePath = !isProduction
+    ? `${process.env.BUNDLE_PATH}/`
+    : `${process.env.BUNDLE_PATH}/${process.env.APP_NAME}/_current/`
+
+  const cssPath = `${bundlePath}app-tutor-ai-consumer.css?v=${version}`
+
+  if (!document.querySelector(`link[href="${cssPath}"]`)) {
+    const linkElement = document.createElement('link')
+    linkElement.rel = 'stylesheet'
+    linkElement.href = cssPath
+    document.head.appendChild(linkElement)
+  }
+}
+
+window.startChatWidget = async (
+  elementId = 'tutor-chat-app-widget',
+  settings: WidgetSettingProps
+) => {
+  if (!devMode) {
+    loadMainStyles()
+  }
+
+  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)
+
+  await initLanguage(settings.locale)
+  initTheme(theme)
+
+  if (root) {
+    root.render(
+      <StrictMode>
+        <Main settings={{ ...settings, config: { ...settings.config, theme } }} />
+      </StrictMode>
+    )
+  }
+}
+
+window.closeChatWidget = () =>
+  Promise.resolve(TutorWidgetEvents['c3po-app-widget-close'].dispatch())

package/src/index.tsx

@@ -1,17 +1,18 @@
 import './config/styles/global.css'
 import './config/styles/index.css'
 
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 
-import { initTheme } from '@/src/config/theme'
+import { queryClient } from '@/src/config/tanstack'
 import { version } from '../package.json'
 
-import { initLanguage } from './config/i18n'
+import { bootstrap } from './bootstrap'
+import { initTheme } from './config/theme'
 import { devMode, productionMode } from './lib/utils'
-import { Main } from './main'
-import { TutorWidgetEvents } from './modules/widget'
+import { SparkieService } from './modules/sparkie'
+import { createStore } from './modules/widget/store'
 import type { Theme, WidgetSettingProps } from './types'
+import Wrapper from './wrapper'
 
 const loadMainStyles = () => {
   const isProduction = productionMode
@@ -33,28 +34,90 @@ window.startChatWidget = async (
   elementId = 'tutor-chat-app-widget',
   settings: WidgetSettingProps
 ) => {
+  if (window.__CHAT_WIDGET_INSTANCE__) {
+    await window.closeChatWidget()
+  }
+
   if (!devMode) {
     loadMainStyles()
   }
 
-  const rootElement = document.getElementById(elementId) as HTMLElement
-
-  if (!rootElement) return
+  const container = document.getElementById(elementId) as HTMLElement
 
-  rootElement.setAttribute('id', 'hotmart-app-tutor-ai-consumer-root')
-  const theme = (rootElement.getAttribute('data-theme') ?? 'dark') as Theme
-  const root = createRoot(rootElement)
+  if (!container) return
 
-  await initLanguage(settings.locale)
+  container.setAttribute('id', 'hotmart-app-tutor-ai-consumer-root')
+  const theme = (container.getAttribute('data-theme') ?? 'dark') as Theme
   initTheme(theme)
 
-  if (root) {
+  const root = createRoot(container)
+  const widgetSettings = { ...settings, config: { ...settings.config, theme } }
+  const store = createStore()
+
+  root.render(
+    <Wrapper settings={widgetSettings} store={store} queryClient={queryClient} state={'LOADING'} />
+  )
+
+  try {
+    await bootstrap({ queryClient, settings })
+
     root.render(
-      <StrictMode>
-        <Main settings={{ ...settings, config: { ...settings.config, theme } }} />
-      </StrictMode>
+      <Wrapper settings={widgetSettings} store={store} queryClient={queryClient} state={'READY'} />
     )
+
+    window.__CHAT_WIDGET_INSTANCE__ = { root, container, queryClient }
+  } catch (error) {
+    root.render(
+      <Wrapper settings={widgetSettings} store={store} queryClient={queryClient} state={'ERROR'} />
+    )
+
+    console.error('ERROR:Initializing Chat Widget', error)
+
+    window.__CHAT_WIDGET_INSTANCE__ = undefined
   }
 }
 
-window.closeChatWidget = () => TutorWidgetEvents['c3po-app-widget-close'].dispatch()
+window.closeChatWidget = async () => {
+  const chatWidgetInstance = window.__CHAT_WIDGET_INSTANCE__
+
+  if (!chatWidgetInstance) return
+
+  const { root, container, queryClient } = chatWidgetInstance
+
+  try {
+    await queryClient.cancelQueries()
+  } catch (err) {
+    console.error('Error cancelling queries on widget close', err)
+  }
+
+  try {
+    root.unmount()
+  } catch (err) {
+    console.warn('Error unmounting widget root', err)
+  }
+
+  if (typeof queryClient.clear === 'function') {
+    try {
+      queryClient.clear()
+    } catch {
+      queryClient.getQueryCache().clear()
+      queryClient.getMutationCache().clear()
+    }
+  } else {
+    queryClient.getQueryCache().clear()
+    queryClient.getMutationCache().clear()
+  }
+
+  try {
+    container.remove()
+  } catch {
+    // ignore
+  }
+
+  try {
+    await SparkieService.destroySparkie()
+    window.__CHAT_WIDGET_INSTANCE__ = undefined
+  } catch (err) {
+    console.error('Error destroying Sparkie instance', err)
+  }
+}

package/src/lib/components/dropdown-actions/dropdown-actions.tsx

@@ -0,0 +1,87 @@
+import { useRef, useState } from 'react'
+import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
+
+import { Button, Icon } from '@/src/lib/components'
+import ButtonDefault from '@/src/lib/components/button/button-default'
+import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
+import { useClickOutside } from '@/src/lib/hooks'
+
+import type { DropdownActionsProps } from './types'
+
+function DropdownActions({
+  triggerIcon,
+  items,
+  disabled = false,
+  triggerClassName,
+  triggerIconClassName
+}: DropdownActionsProps) {
+  const { t } = useTranslation()
+  const [visible, setVisibile] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  useClickOutside(dropdownRef, handleCloseDropdown)
+
+  function handleCloseDropdown() {
+    setVisibile(false)
+  }
+
+  function handleToggleVisibility() {
+    setVisibile((prevState) => !prevState)
+  }
+
+  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
+    event.preventDefault()
+    event.stopPropagation()
+    handleToggleVisibility()
+  }
+
+  function handleDropdownItemClick(
+    event: React.MouseEvent<HTMLButtonElement>,
+    callback: () => void
+  ) {
+    event.preventDefault()
+    event.stopPropagation()
+    handleCloseDropdown()
+    callback()
+  }
+
+  return (
+    <div ref={dropdownRef} className='relative'>
+      <Button
+        onClick={handleClick}
+        disabled={disabled}
+        aria-label={t('general.buttons.open_options')}
+        className={clsx(
+          triggerClassName,
+          'bg-neutral-100 p-0 hover:bg-neutral-200 focus:bg-neutral-200'
+        )}>
+        <Icon
+          name={triggerIcon as ValidIconNames}
+          className={clsx(triggerIconClassName, 'text-neutral-900')}
+        />
+      </Button>
+
+      {visible && (
+        <div className='absolute bottom-full mb-2 flex flex-col rounded-md border border-neutral-300 bg-neutral-100 shadow-lg'>
+          {items.map((item) => {
+            if (!item.visible) return null
+
+            return (
+              <ButtonDefault
+                key={item.label}
+                onClick={(event) => handleDropdownItemClick(event, item.callback)}
+                className='flex flex-row items-center justify-start rounded-md px-4 py-3 text-sm font-normal transition-colors duration-150 hover:bg-neutral-200'>
+                {item.icon && <Icon name={item.icon} className='mr-4 h-4 w-4 text-neutral-500' />}
+                <span className='line-clamp-1 min-w-[5rem] max-w-[10rem] break-words text-left text-neutral-700'>
+                  {t(item.label)}
+                </span>
+              </ButtonDefault>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DropdownActions

package/src/lib/components/dropdown-actions/dropdownActions.builder.ts

@@ -0,0 +1,58 @@
+import { chance } from '@/src/config/tests'
+
+import type { DropdownActionsProps } from './types'
+
+export class DropdownActionsBuilder implements DropdownActionsProps {
+  items: DropdownActionsProps['items']
+  triggerIcon?: DropdownActionsProps['triggerIcon']
+  disabled?: boolean
+  className?: string
+  triggerClassName?: string
+  dropdownClassName?: string
+
+  constructor() {
+    this.items = [
+      {
+        label: chance.word(),
+        visible: true,
+        callback: vi.fn() as () => void
+      }
+    ]
+    this.triggerIcon = 'plus'
+    this.disabled = false
+  }
+
+  withTriggerIcon(triggerIcon: DropdownActionsProps['triggerIcon']) {
+    this.triggerIcon = triggerIcon
+    return this
+  }
+
+  withItems(items: DropdownActionsProps['items']) {
+    this.items = items
+    return this
+  }
+
+  withDisabled(disabled: boolean) {
+    this.disabled = disabled
+    return this
+  }
+
+  withClassName(className: string) {
+    this.className = className
+    return this
+  }
+
+  withTriggerClassName(triggerClassName: string) {
+    this.triggerClassName = triggerClassName
+    return this
+  }
+
+  withDropdownClassName(dropdownClassName: string) {
+    this.dropdownClassName = dropdownClassName
+    return this
+  }
+
+  build() {
+    return this
+  }
+}

package/src/lib/components/dropdown-actions/dropdownActions.spec.tsx

@@ -0,0 +1,76 @@
+import { chance, render, screen } from '@/src/config/tests'
+import { DropdownActions } from '../dropdown-actions'
+
+import { DropdownActionsBuilder } from './dropdownActions.builder'
+import type { DropdownActionsProps } from './types'
+
+const defaultProps = new DropdownActionsBuilder().build()
+
+const renderComponent = (props: DropdownActionsProps = defaultProps) => {
+  return render(<DropdownActions {...props} />)
+}
+
+describe('DropdownActions', () => {
+  it('should render with success', async () => {
+    const { items } = defaultProps
+
+    const { user } = renderComponent()
+
+    const dropdown = screen.getByRole('button', { name: /general.buttons.open_options/i })
+
+    await user.click(dropdown)
+
+    expect(screen.getByText(items[0].label)).toBeInTheDocument()
+  })
+
+  describe('when `visible` is `false`', () => {
+    it('should not render dropdown item', async () => {
+      const label = chance.word()
+      const items = [
+        {
+          label,
+          visible: false,
+          callback: vi.fn() as () => void
+        }
+      ]
+
+      const props = new DropdownActionsBuilder().withItems(items).build()
+
+      const { user } = renderComponent(props)
+
+      const dropdown = screen.getByRole('button', { name: /general.buttons.open_options/i })
+
+      await user.click(dropdown)
+
+      expect(screen.queryByText(label)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('when item has icon', () => {
+    it('should render label with icon', async () => {
+      const label = chance.word()
+      const items = [
+        {
+          label,
+          visible: true,
+          icon: 'file' as const,
+          callback: vi.fn() as () => void
+        }
+      ]
+
+      const props = new DropdownActionsBuilder().withItems(items).build()
+
+      const { user } = renderComponent(props)
+
+      const dropdown = screen.getByRole('button', { name: /general.buttons.open_options/i })
+
+      await user.click(dropdown)
+
+      expect(screen.getByText(label)).toBeInTheDocument()
+
+      await user.click(screen.getByText(label))
+
+      expect(props.items[0].callback).toHaveBeenCalledTimes(1)
+    })
+  })
+})

package/src/lib/components/dropdown-actions/index.ts

@@ -0,0 +1 @@
+export { default as DropdownActions } from './dropdown-actions'

package/src/lib/components/dropdown-actions/types.ts

@@ -0,0 +1,16 @@
+import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
+
+export type DropdownItem = {
+  label: string
+  callback: () => void
+  icon?: ValidIconNames
+  visible?: boolean
+}
+
+export type DropdownActionsProps = {
+  items: DropdownItem[]
+  disabled?: boolean
+  triggerClassName?: string
+  triggerIcon?: ValidIconNames
+  triggerIconClassName?: string
+}