@orbe-agro/client-core 5.6.259 → 5.6.261

package/lib/@ecme/components/template/OrbeAiWidget/OrbeAiChatDrawer.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useMemo, useState } from 'react'
+import debounce from 'lodash/debounce'
+import { AnimatePresence, motion } from 'framer-motion'
+import { TbPlus, TbSearch } from 'react-icons/tb'
+import { HiX } from 'react-icons/hi'
+import Button from '@/components/ui/Button'
+import ChatHistory from '@/views/concepts/ai/Chat/components/ChatHistory'
+import { usGenerativeChatStore } from '@/views/concepts/ai/Chat/store/generativeChatStore'
+import type { ChangeEvent } from 'react'
+
+type OrbeAiChatDrawerProps = {
+    open: boolean
+    onClose: () => void
+}
+
+const iconButtonClass =
+    'flex h-8 w-8 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200'
+
+/**
+ * Drawer de conversas DENTRO do painel do widget.
+ *
+ * Não usa o Drawer do ui: ele é portalizado no body com overlay em z-30 e
+ * abriria atrás do widget (z-40 / z-[9999]), cobrindo a página inteira. Aqui é
+ * `absolute`, então fica recortado pelo painel em qualquer tamanho.
+ */
+const OrbeAiChatDrawer = ({ open, onClose }: OrbeAiChatDrawerProps) => {
+    const [queryText, setQueryText] = useState('')
+    const { setSelectedConversation } = usGenerativeChatStore()
+
+    // Memoizado: o store re-renderiza o drawer a cada token do streaming, e um
+    // debounce recriado a cada render perderia a busca pendente.
+    const debounceFn = useMemo(
+        () =>
+            debounce((e: ChangeEvent<HTMLInputElement>) => {
+                setQueryText(e.target.value)
+            }, 500),
+        [],
+    )
+
+    useEffect(() => () => debounceFn.cancel(), [debounceFn])
+
+    // O input desmonta ao fechar e volta vazio; o filtro precisa acompanhar.
+    useEffect(() => {
+        if (!open) {
+            debounceFn.cancel()
+            setQueryText('')
+        }
+    }, [open, debounceFn])
+
+    useEffect(() => {
+        if (!open) return
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') onClose()
+        }
+        window.addEventListener('keydown', handleKeyDown)
+        return () => window.removeEventListener('keydown', handleKeyDown)
+    }, [open, onClose])
+
+    const handleNewChat = () => {
+        setSelectedConversation('')
+        onClose()
+    }
+
+    return (
+        <AnimatePresence>
+            {open && (
+                <>
+                    <motion.div
+                        key="orbe-ai-drawer-backdrop"
+                        aria-hidden
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="absolute inset-0 z-40 bg-black/40"
+                        onClick={onClose}
+                    />
+                    <motion.aside
+                        key="orbe-ai-drawer"
+                        role="dialog"
+                        aria-modal="true"
+                        aria-label="Conversas"
+                        initial={{ x: '-100%' }}
+                        animate={{ x: 0 }}
+                        exit={{ x: '-100%' }}
+                        transition={{ duration: 0.2, ease: 'easeOut' }}
+                        className="absolute inset-y-0 left-0 z-50 flex w-[85%] max-w-[300px] flex-col border-r border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-800"
+                    >
+                        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700">
+                            <span className="font-semibold text-gray-900 dark:text-gray-100">
+                                Conversas
+                            </span>
+                            <button
+                                type="button"
+                                className={iconButtonClass}
+                                onClick={onClose}
+                                aria-label="Fechar conversas"
+                            >
+                                <HiX size={18} />
+                            </button>
+                        </div>
+
+                        <div className="flex flex-col gap-3 px-4 pt-4">
+                            <Button
+                                block
+                                variant="solid"
+                                size="sm"
+                                icon={<TbPlus />}
+                                onClick={handleNewChat}
+                            >
+                                Novo chat
+                            </Button>
+                            <label className="flex h-9 items-center gap-2 rounded-lg border border-gray-200 px-3 focus-within:border-primary dark:border-gray-600">
+                                <TbSearch className="shrink-0 text-lg text-gray-400" />
+                                <input
+                                    className="h-full min-w-0 flex-1 bg-transparent text-sm placeholder:text-gray-400 focus:outline-none heading-text"
+                                    placeholder="Buscar conversa"
+                                    onChange={debounceFn}
+                                />
+                            </label>
+                        </div>
+
+                        <div className="px-4 pb-1 pt-4 text-xs font-semibold uppercase tracking-wide text-gray-400">
+                            Histórico
+                        </div>
+                        <div className="min-h-0 flex-1">
+                            <ChatHistory
+                                queryText={queryText}
+                                onClick={onClose}
+                                dropdownFloatingClass="!z-[10000]"
+                            />
+                        </div>
+                    </motion.aside>
+                </>
+            )}
+        </AnimatePresence>
+    )
+}
+
+export default OrbeAiChatDrawer

package/lib/@ecme/components/template/OrbeAiWidget/OrbeAiWidget.tsx

@@ -1,15 +1,17 @@
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
 import {
     TbMessageChatbot,
     TbArrowsMaximize,
     TbArrowsMinimize,
+    TbMenu2,
 } from 'react-icons/tb'
 import { HiX } from 'react-icons/hi'
 import ChatView from '@/views/concepts/ai/Chat/components/ChatView'
 import ChatHistoryRenameDialog from '@/views/concepts/ai/Chat/components/ChatHistoryRenameDialog'
-import useResizablePanel from './useResizablePanel'
+import useResizablePanel, { MARGIN } from './useResizablePanel'
 import ResizeHandles from './ResizeHandles'
+import OrbeAiChatDrawer from './OrbeAiChatDrawer'
 
 const iconButtonClass =
     'flex h-8 w-8 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200'
@@ -17,27 +19,43 @@ const iconButtonClass =
 const OrbeAiWidget = () => {
     const [open, setOpen] = useState(false)
     const [fullscreen, setFullscreen] = useState(false)
-    const { rect, startResize } = useResizablePanel()
+    const [drawerOpen, setDrawerOpen] = useState(false)
+    const { rect, startResize, anchor } = useResizablePanel()
 
-    const toggleOpen = () => setOpen((prev) => !prev)
+    const toggleOpen = () => {
+        // Sempre abre colado no botão. No mesmo clique do setOpen: o React junta
+        // os dois updates e o painel não pisca na posição antiga.
+        if (!open) anchor()
+        setOpen((prev) => !prev)
+        setDrawerOpen(false)
+    }
     const toggleFullscreen = () => setFullscreen((prev) => !prev)
+    const toggleDrawer = () => setDrawerOpen((prev) => !prev)
+    // Estável: o drawer registra o listener de Esc com ela como dependência.
+    const closeDrawer = useCallback(() => setDrawerOpen(false), [])
     const close = () => {
         setOpen(false)
         setFullscreen(false)
+        setDrawerOpen(false)
     }
 
-    // Tela cheia: cobre o viewport inteiro (inset-0). Flutuante: usa o retângulo do resize.
+    // Tela cheia: cobre o viewport inteiro (inset-0). Flutuante: ancorado no
+    // canto do botão (right/bottom). O max-* limita só a exibição — o estado
+    // guarda o tamanho escolhido, então ao desfazer o zoom o painel volta igual.
+    // `100%` de um `fixed` é o viewport sem a barra de rolagem.
     const panelStyle = fullscreen
         ? undefined
         : {
-              top: rect.top,
-              left: rect.left,
+              right: rect.right,
+              bottom: rect.bottom,
               width: rect.width,
               height: rect.height,
+              maxWidth: `calc(100% - ${rect.right + MARGIN}px)`,
+              maxHeight: `calc(100% - ${rect.bottom + MARGIN}px)`,
           }
     const panelVariantClass = fullscreen
         ? 'inset-0 rounded-none border-0'
-        : 'rounded-2xl border shadow-2xl'
+        : 'origin-bottom-right rounded-2xl border shadow-2xl'
 
     return (
         <div
@@ -60,16 +78,25 @@ const OrbeAiWidget = () => {
                             <ResizeHandles onResizeStart={startResize} />
                         )}
 
-                        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700">
-                            <div className="flex items-center gap-2">
-                                <span className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-white">
+                        <div className="flex items-center justify-between gap-2 border-b border-gray-200 px-3 py-3 sm:px-4 dark:border-gray-700">
+                            <div className="flex min-w-0 items-center gap-1 sm:gap-2">
+                                <button
+                                    type="button"
+                                    className={iconButtonClass}
+                                    onClick={toggleDrawer}
+                                    aria-label="Abrir conversas"
+                                    aria-expanded={drawerOpen}
+                                >
+                                    <TbMenu2 size={20} />
+                                </button>
+                                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-white">
                                     <TbMessageChatbot size={20} />
                                 </span>
-                                <span className="font-semibold text-gray-900 dark:text-gray-100">
+                                <span className="truncate font-semibold text-gray-900 dark:text-gray-100">
                                     Orbe AI
                                 </span>
                             </div>
-                            <div className="flex items-center gap-2">
+                            <div className="flex shrink-0 items-center gap-1 sm:gap-2">
                                 <button
                                     type="button"
                                     className={iconButtonClass}
@@ -98,9 +125,14 @@ const OrbeAiWidget = () => {
                         </div>
 
                         <div className="min-h-0 flex-1 p-2">
-                            <ChatView />
-                            <ChatHistoryRenameDialog />
+                            <ChatView showMobileNav={false} />
+                            <ChatHistoryRenameDialog overlayClassName="!z-[10000]" />
                         </div>
+
+                        <OrbeAiChatDrawer
+                            open={drawerOpen}
+                            onClose={closeDrawer}
+                        />
                     </motion.div>
                 )}
             </AnimatePresence>
@@ -108,7 +140,7 @@ const OrbeAiWidget = () => {
             {!fullscreen && (
                 <button
                     type="button"
-                    className="flex h-14 w-14 items-center justify-center rounded-full bg-primary text-white shadow-lg transition-colors hover:bg-primary-deep focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+                    className="flex h-14 w-14 items-center justify-center rounded-full bg-primary text-neutral shadow-lg transition-colors hover:bg-primary-mild focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
                     onClick={toggleOpen}
                     aria-label={open ? 'Fechar chat Orbe AI' : 'Abrir chat Orbe AI'}
                     aria-expanded={open}

package/lib/@ecme/components/template/OrbeAiWidget/useResizablePanel.ts

@@ -1,7 +1,12 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import type { PointerEvent as ReactPointerEvent } from 'react'
 
-export type Rect = { top: number; left: number; width: number; height: number }
+/**
+ * `right`/`bottom` são offsets a partir das bordas direita/inferior do
+ * viewport — a mesma referência do botão (FAB, `bottom-6 right-6`). Assim,
+ * resolução e zoom movem painel e botão juntos.
+ */
+export type Rect = { right: number; bottom: number; width: number; height: number }
 
 export type ResizeDirection =
     | 'top'
@@ -15,31 +20,47 @@ export type ResizeDirection =
 
 const MIN = { width: 360, height: 420 }
 const DEFAULT = { width: 480, height: 720 }
-const MARGIN = 12 // distância mínima das bordas do viewport
-const ANCHOR = { right: 24, bottomOffset: 92 } // canto inferior-direito, acima do FAB
+export const MARGIN = 12 // distância mínima das bordas do viewport
 
+/**
+ * Canto inferior-direito do painel, logo acima do FAB:
+ * right = `right-6` (24); bottom = `bottom-6` (24) + `h-14` (56) + `gap-3` (12).
+ * Se as classes do botão no OrbeAiWidget mudarem, ajustar aqui.
+ */
+const ANCHOR = { right: 24, bottom: 92 }
+
+/** Em telas menores que o MIN o máximo vence: o painel nunca sai da tela. */
 const clamp = (value: number, min: number, max: number) =>
     Math.min(Math.max(value, min), max)
 
-/** Retângulo inicial: ancorado no canto inferior-direito, logo acima do FAB. */
-const getDefaultRect = (): Rect => {
-    const width = Math.min(DEFAULT.width, window.innerWidth - MARGIN * 2)
-    const height = Math.min(DEFAULT.height, window.innerHeight - MARGIN * 2)
-    return {
-        width,
-        height,
-        left: Math.max(MARGIN, window.innerWidth - width - ANCHOR.right),
-        top: Math.max(MARGIN, window.innerHeight - height - ANCHOR.bottomOffset),
-    }
-}
+/** Área útil do `fixed`: o viewport sem a barra de rolagem, igual ao `100%` do CSS. */
+const getViewport = () => ({
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight,
+})
 
 /**
- * Painel redimensionável por qualquer borda/canto. O painel é posicionado
- * livremente (`fixed` com top/left/width/height); cada direção move sua borda
- * mantendo a borda oposta fixa, com limites de mínimo e do viewport.
+ * Painel redimensionável por qualquer borda/canto, ancorado no botão. Cada
+ * direção move sua borda mantendo a oposta fixa. O tamanho nunca é alterado
+ * por mudança de viewport: quem limita é o max-width/max-height do painel.
  */
 const useResizablePanel = () => {
-    const [rect, setRect] = useState<Rect>(getDefaultRect)
+    const [rect, setRect] = useState<Rect>({ ...ANCHOR, ...DEFAULT })
+
+    /** Recola o painel acima do botão, mantendo o tamanho escolhido. */
+    const anchor = useCallback(() => {
+        setRect((prev) =>
+            prev.right === ANCHOR.right && prev.bottom === ANCHOR.bottom
+                ? prev
+                : { ...prev, ...ANCHOR },
+        )
+    }, [])
+
+    // Resolução e zoom disparam `resize`: o painel volta para cima do botão.
+    useEffect(() => {
+        window.addEventListener('resize', anchor)
+        return () => window.removeEventListener('resize', anchor)
+    }, [anchor])
 
     const startResize = useCallback(
         (event: ReactPointerEvent, direction: ResizeDirection) => {
@@ -48,9 +69,17 @@ const useResizablePanel = () => {
 
             const startX = event.clientX
             const startY = event.clientY
-            const start = rect
-            const right = start.left + start.width
-            const bottom = start.top + start.height
+            const viewport = getViewport()
+            // Parte do tamanho RENDERIZADO: se o CSS está limitando o painel, o
+            // valor guardado é maior que o visível e o arrasto teria zona morta.
+            const start: Rect = {
+                ...rect,
+                width: Math.min(rect.width, viewport.width - rect.right - MARGIN),
+                height: Math.min(
+                    rect.height,
+                    viewport.height - rect.bottom - MARGIN,
+                ),
+            }
 
             const previousUserSelect = document.body.style.userSelect
             document.body.style.userSelect = 'none'
@@ -60,31 +89,37 @@ const useResizablePanel = () => {
                 const dy = moveEvent.clientY - startY
                 const next: Rect = { ...start }
 
-                if (direction.includes('right')) {
+                // Esquerda/topo: a borda ancorada fica fixa, só o tamanho muda.
+                if (direction.includes('left')) {
                     next.width = clamp(
-                        start.width + dx,
+                        start.width - dx,
                         MIN.width,
-                        window.innerWidth - start.left - MARGIN,
+                        viewport.width - start.right - MARGIN,
                     )
                 }
-                if (direction.includes('left')) {
-                    next.width = clamp(start.width - dx, MIN.width, right - MARGIN)
-                    next.left = right - next.width
-                }
-                if (direction.includes('bottom')) {
+                if (direction.includes('top')) {
                     next.height = clamp(
-                        start.height + dy,
+                        start.height - dy,
                         MIN.height,
-                        window.innerHeight - start.top - MARGIN,
+                        viewport.height - start.bottom - MARGIN,
                     )
                 }
-                if (direction.includes('top')) {
+                // Direita/baixo: a borda oposta fica fixa, então o offset anda junto.
+                if (direction.includes('right')) {
+                    next.width = clamp(
+                        start.width + dx,
+                        MIN.width,
+                        start.width + start.right - MARGIN,
+                    )
+                    next.right = start.right - (next.width - start.width)
+                }
+                if (direction.includes('bottom')) {
                     next.height = clamp(
-                        start.height - dy,
+                        start.height + dy,
                         MIN.height,
-                        bottom - MARGIN,
+                        start.height + start.bottom - MARGIN,
                     )
-                    next.top = bottom - next.height
+                    next.bottom = start.bottom - (next.height - start.height)
                 }
 
                 setRect(next)
@@ -102,7 +137,7 @@ const useResizablePanel = () => {
         [rect],
     )
 
-    return { rect, startResize }
+    return { rect, startResize, anchor }
 }
 
 export default useResizablePanel

package/lib/@ecme/components/ui/Dropdown/DropdownMenu.tsx

@@ -47,6 +47,8 @@ export interface DropdownMenuProps
     activeKey?: string
     title?: string | ReactNode
     menuClass?: string
+    /** Classes do wrapper flutuante (portal). Útil para subir o z-index acima de painéis fixos. */
+    floatingClass?: string
     trigger?: 'click' | 'hover' | 'context'
     placement?: Placement
     onOpen?: (bool: boolean) => void
@@ -66,6 +68,7 @@ const DropdownMenu = (props: DropdownMenuProps & HTMLProps<HTMLElement>) => {
         disabled,
         toggleClassName,
         menuClass,
+        floatingClass,
         placement,
         trigger = 'click',
         onOpen,
@@ -302,7 +305,10 @@ const DropdownMenu = (props: DropdownMenuProps & HTMLProps<HTMLElement>) => {
                                     ref={refs.setFloating}
                                     style={floatingStyles}
                                     {...getFloatingProps()}
-                                    className="outline-none z-30"
+                                    className={classNames(
+                                        'outline-none z-30',
+                                        floatingClass,
+                                    )}
                                 >
                                     <ul
                                         className={classNames(

package/lib/@ecme/services/AiService.ts

@@ -49,6 +49,30 @@ export async function apiGetChatHistory<T>(conversationId?: string) {
     })
 }
 
+/** Conversas do usuário (só o resumo), a mais recente primeiro. */
+export async function apiGetConversations<T>() {
+    return aiRequest<T>({
+        url: '/ai/chat/conversations',
+        method: 'get',
+    })
+}
+
+export async function apiRenameConversation(conversationId: string, title: string) {
+    return aiRequest<void>({
+        url: `/ai/chat/conversations/${encodeURIComponent(conversationId)}`,
+        method: 'patch',
+        data: { title },
+    })
+}
+
+/** Apaga a conversa e toda a memória dela no backend. */
+export async function apiDeleteConversation(conversationId: string) {
+    return aiRequest<void>({
+        url: `/ai/chat/conversations/${encodeURIComponent(conversationId)}`,
+        method: 'delete',
+    })
+}
+
 export type StreamChatParams = {
     prompt: string
     /** Identifica a conversa; o backend usa como thread da memoria. */

package/lib/@ecme/views/concepts/ai/Chat/components/ChatHistory.tsx

@@ -2,46 +2,30 @@ import { Fragment } from 'react'
 import ScrollBar from '@/components/ui/ScrollBar'
 import ChatHistoryItem from './ChatHistoryItem'
 import { usGenerativeChatStore } from '../store/generativeChatStore'
-import { apiGetChatHistory } from '@/services/AiService'
-
-import useSWR from 'swr'
-import type { GetChatHistoryResponse } from '../types'
+import useChatConversations from '../hooks/useChatConversations'
 
 type ChatHistoryProps = {
     queryText?: string
     onClick?: () => void
+    /** Repassado ao menu de cada item (ex.: subir o z-index dentro do widget). */
+    dropdownFloatingClass?: string
 }
 
-const ChatHistory = ({ queryText = '', onClick }: ChatHistoryProps) => {
+const ChatHistory = ({
+    queryText = '',
+    onClick,
+    dropdownFloatingClass,
+}: ChatHistoryProps) => {
     const {
         chatHistory,
-        setChatHistory,
         setRenameDialog,
         setSelectedConversation,
         selectedConversation,
     } = usGenerativeChatStore()
-
-    useSWR(
-        ['/api/ai/chat/history'],
-        () => apiGetChatHistory<GetChatHistoryResponse>(),
-        {
-            revalidateOnFocus: false,
-            revalidateIfStale: false,
-            revalidateOnReconnect: false,
-            onSuccess: (data) => {
-                setChatHistory(data)
-            },
-        },
-    )
+    const { remover } = useChatConversations()
 
     const handleDelete = (id: string) => {
-        setChatHistory(chatHistory.filter((item) => item.id !== id))
-        setSelectedConversation('')
-    }
-
-    const handleArchive = (id: string) => {
-        setChatHistory(chatHistory.filter((item) => item.id !== id))
-        setSelectedConversation('')
+        remover(id)
     }
 
     const handleRename = (id: string, title: string) => {
@@ -77,8 +61,8 @@ const ChatHistory = ({ queryText = '', onClick }: ChatHistoryProps) => {
                                 title={item.title}
                                 conversation={item.lastConversation}
                                 active={selectedConversation === item.id}
+                                dropdownFloatingClass={dropdownFloatingClass}
                                 onDelete={() => handleDelete(item.id)}
-                                onArchive={() => handleArchive(item.id)}
                                 onRename={() =>
                                     handleRename(item.id, item.title)
                                 }

package/lib/@ecme/views/concepts/ai/Chat/components/ChatHistoryItem.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef } from 'react'
 import Dropdown from '@/components/ui/Dropdown'
 import classNames from 'classnames'
-import { TbDots, TbArchive, TbPencil, TbTrash } from 'react-icons/tb'
+import { TbDots, TbPencil, TbTrash } from 'react-icons/tb'
 import type { DropdownRef } from '@/components/ui/Dropdown'
 
 import type { MouseEvent, SyntheticEvent } from 'react'
@@ -11,9 +11,9 @@ type ChatHistoryItemProps = {
     conversation: string
     active?: boolean
     onDelete?: () => void
-    onArchive?: () => void
     onRename?: () => void
     onClick?: () => void
+    dropdownFloatingClass?: string
 }
 
 const ChatHistoryItem = (props: ChatHistoryItemProps) => {
@@ -26,9 +26,9 @@ const ChatHistoryItem = (props: ChatHistoryItemProps) => {
         conversation,
         active,
         onRename,
-        onArchive,
         onDelete,
         onClick,
+        dropdownFloatingClass,
         ...rest
     } = props
 
@@ -68,6 +68,7 @@ const ChatHistoryItem = (props: ChatHistoryItemProps) => {
                 <Dropdown
                     ref={dropdownRef}
                     placement="bottom-end"
+                    floatingClass={dropdownFloatingClass}
                     renderTitle={
                         <div
                             className={classNames(
@@ -88,22 +89,15 @@ const ChatHistoryItem = (props: ChatHistoryItemProps) => {
                         onClick={(e) => handleCallback(e, onRename)}
                     >
                         <TbPencil className="text-xl" />
-                        <span>Rename</span>
-                    </Dropdown.Item>
-                    <Dropdown.Item
-                        eventKey="rename"
-                        onClick={(e) => handleCallback(e, onArchive)}
-                    >
-                        <TbArchive className="text-xl" />
-                        <span>Archive</span>
+                        <span>Renomear</span>
                     </Dropdown.Item>
                     <Dropdown.Item
                         className="text-error"
-                        eventKey="rename"
+                        eventKey="delete"
                         onClick={(e) => handleCallback(e, onDelete)}
                     >
                         <TbTrash className="text-xl text-error" />
-                        <span className="text-error">Deleted</span>
+                        <span className="text-error">Excluir</span>
                     </Dropdown.Item>
                 </Dropdown>
             </div>