@orbe-agro/client-core 5.6.260 → 5.6.261

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>

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

@@ -4,6 +4,7 @@ import { Form, FormItem } from '@/components/ui/Form'
 import Input from '@/components/ui/Input'
 import Button from '@/components/ui/Button'
 import { usGenerativeChatStore } from '../store/generativeChatStore'
+import useChatConversations from '../hooks/useChatConversations'
 import { useForm, Controller } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
@@ -14,12 +15,19 @@ type FormSchema = {
 }
 
 const validationSchema: ZodType<FormSchema> = z.object({
-    title: z.string().min(1, 'Please do not leave chat title blank!'),
+    title: z.string().trim().min(1, 'Informe um título para a conversa.'),
 })
 
-const ChatHistoryRenameDialog = () => {
-    const { renameDialog, setRenameDialog, setChatHistoryName } =
-        usGenerativeChatStore()
+type ChatHistoryRenameDialogProps = {
+    /** Classes do overlay (ex.: subir o z-index acima do widget flutuante). */
+    overlayClassName?: string
+}
+
+const ChatHistoryRenameDialog = ({
+    overlayClassName,
+}: ChatHistoryRenameDialogProps) => {
+    const { renameDialog, setRenameDialog } = usGenerativeChatStore()
+    const { renomear } = useChatConversations()
 
     const {
         control,
@@ -51,16 +59,17 @@ const ChatHistoryRenameDialog = () => {
     }
 
     const onFormSubmit = async ({ title }: FormSchema) => {
-        setChatHistoryName({
-            id: renameDialog.id,
-            title,
-        })
+        // Fecha antes da resposta: o rename é otimista e desfaz sozinho se o
+        // backend recusar.
+        const { id } = renameDialog
         handleDialogClose()
+        await renomear(id, title.trim())
     }
 
     return (
         <Dialog
             isOpen={renameDialog.open}
+            overlayClassName={overlayClassName}
             onClose={handleDialogClose}
             onRequestClose={handleDialogClose}
         >

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

@@ -12,6 +12,7 @@ import ApprovalCard from './ApprovalCard'
 import DataRequestCard from './DataRequestCard'
 import { usGenerativeChatStore } from '../store/generativeChatStore'
 import useChatSend from '../hooks/useChatSend'
+import useConversationMessages from '../hooks/useConversationMessages'
 import type { Conversation } from '../types'
 import type { ScrollBarRef } from '@/components/ui/ScrollBar'
 
@@ -31,11 +32,21 @@ import type { ScrollBarRef } from '@/components/ui/ScrollBar'
 const BALAO_AGENTE =
     'prose rounded-xl bg-gray-100 px-5 py-2.5 text-sm text-gray-900 dark:bg-gray-700 dark:text-gray-100'
 
-const ChatView = () => {
+type ChatViewProps = {
+    /**
+     * Mostra o drawer de histórico do ChatMobileNav abaixo de xl. O widget
+     * flutuante desliga, porque tem o próprio drawer dentro do painel.
+     */
+    showMobileNav?: boolean
+}
+
+const ChatView = ({ showMobileNav = true }: ChatViewProps) => {
     const scrollRef = useRef<ScrollBarRef>(null)
     const { selectedConversation, chatHistory, isTyping, disabledChatFresh } =
         usGenerativeChatStore()
     const { handleSend, handleApproval, handleDataSubmit } = useChatSend()
+    // Conversa aberta da lista: as mensagens vêm do backend na primeira vez.
+    const { carregando } = useConversationMessages()
 
     const scrollToBottom = () => {
         if (scrollRef.current?.getScrollElement) {
@@ -73,7 +84,7 @@ const ChatView = () => {
 
     return (
         <Card className="flex-1 h-full" bodyClass="h-full">
-            <ChatMobileNav />
+            {showMobileNav && <ChatMobileNav />}
             <ChatBox
                 ref={scrollRef}
                 messageList={messageList}
@@ -89,10 +100,12 @@ const ChatView = () => {
                         <AiThinkingIndicator />
                     </div>
                 )}
-                containerClass="h-[calc(100%-30px)] xl:h-full"
+                containerClass={
+                    showMobileNav ? 'h-[calc(100%-30px)] xl:h-full' : 'h-full'
+                }
                 messageListClass="h-[calc(100%-100px)] xl:h-[calc(100%-70px)]"
                 typing={
-                    isTyping
+                    isTyping || carregando
                         ? {
                               id: 'ai',
                               name: 'Chat AI',