@orbe-agro/client-core 5.6.262 → 5.6.264

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

@@ -0,0 +1,155 @@
+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, { 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'
+
+const OrbeAiWidget = () => {
+    const [open, setOpen] = useState(false)
+    const [fullscreen, setFullscreen] = useState(false)
+    const [drawerOpen, setDrawerOpen] = useState(false)
+    const { rect, startResize, anchor } = useResizablePanel()
+
+    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: 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
+        : {
+              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'
+        : 'origin-bottom-right rounded-2xl border shadow-2xl'
+
+    return (
+        <div
+            className={`fixed bottom-6 right-6 flex flex-col items-end gap-3 print:hidden ${
+                fullscreen ? 'z-[9999]' : 'z-40'
+            }`}
+        >
+            <AnimatePresence>
+                {open && (
+                    <motion.div
+                        key="orbe-ai-panel"
+                        initial={{ opacity: 0, y: 24, scale: 0.96 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: 24, scale: 0.96 }}
+                        transition={{ duration: 0.2, ease: 'easeOut' }}
+                        style={panelStyle}
+                        className={`fixed flex flex-col overflow-hidden border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800 ${panelVariantClass}`}
+                    >
+                        {!fullscreen && (
+                            <ResizeHandles onResizeStart={startResize} />
+                        )}
+
+                        <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="truncate font-semibold text-gray-900 dark:text-gray-100">
+                                    Orbe AI
+                                </span>
+                            </div>
+                            <div className="flex shrink-0 items-center gap-1 sm:gap-2">
+                                <button
+                                    type="button"
+                                    className={iconButtonClass}
+                                    onClick={toggleFullscreen}
+                                    aria-label={
+                                        fullscreen
+                                            ? 'Sair da tela cheia'
+                                            : 'Tela cheia'
+                                    }
+                                >
+                                    {fullscreen ? (
+                                        <TbArrowsMinimize size={18} />
+                                    ) : (
+                                        <TbArrowsMaximize size={18} />
+                                    )}
+                                </button>
+                                <button
+                                    type="button"
+                                    className={iconButtonClass}
+                                    onClick={close}
+                                    aria-label="Fechar chat Orbe AI"
+                                >
+                                    <HiX size={18} />
+                                </button>
+                            </div>
+                        </div>
+
+                        <div className="min-h-0 flex-1 p-2">
+                            <ChatView showMobileNav={false} />
+                            <ChatHistoryRenameDialog overlayClassName="!z-[10000]" />
+                        </div>
+
+                        <OrbeAiChatDrawer
+                            open={drawerOpen}
+                            onClose={closeDrawer}
+                        />
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            {!fullscreen && (
+                <button
+                    type="button"
+                    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}
+                >
+                    {open ? <HiX size={24} /> : <TbMessageChatbot size={26} />}
+                </button>
+            )}
+        </div>
+    )
+}
+
+export default OrbeAiWidget

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

@@ -0,0 +1,47 @@
+import type { PointerEvent as ReactPointerEvent } from 'react'
+import type { ResizeDirection } from './useResizablePanel'
+
+type ResizeHandlesProps = {
+    onResizeStart: (
+        event: ReactPointerEvent,
+        direction: ResizeDirection,
+    ) => void
+}
+
+const EDGES: { direction: ResizeDirection; className: string }[] = [
+    { direction: 'top', className: 'left-0 right-0 top-0 h-1.5 cursor-ns-resize' },
+    { direction: 'bottom', className: 'bottom-0 left-0 right-0 h-1.5 cursor-ns-resize' },
+    { direction: 'left', className: 'bottom-0 left-0 top-0 w-1.5 cursor-ew-resize' },
+    { direction: 'right', className: 'bottom-0 right-0 top-0 w-1.5 cursor-ew-resize' },
+]
+
+const CORNERS: { direction: ResizeDirection; className: string }[] = [
+    { direction: 'top-left', className: 'left-0 top-0 cursor-nwse-resize' },
+    { direction: 'top-right', className: 'right-0 top-0 cursor-nesw-resize' },
+    { direction: 'bottom-left', className: 'bottom-0 left-0 cursor-nesw-resize' },
+    { direction: 'bottom-right', className: 'bottom-0 right-0 cursor-nwse-resize' },
+]
+
+/** Alças transparentes de redimensionamento nas 4 bordas + 4 cantos do painel. */
+const ResizeHandles = ({ onResizeStart }: ResizeHandlesProps) => (
+    <>
+        {EDGES.map(({ direction, className }) => (
+            <span
+                key={direction}
+                aria-hidden
+                onPointerDown={(event) => onResizeStart(event, direction)}
+                className={`absolute z-20 ${className}`}
+            />
+        ))}
+        {CORNERS.map(({ direction, className }) => (
+            <span
+                key={direction}
+                aria-hidden
+                onPointerDown={(event) => onResizeStart(event, direction)}
+                className={`absolute z-30 h-3 w-3 ${className}`}
+            />
+        ))}
+    </>
+)
+
+export default ResizeHandles

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

@@ -0,0 +1 @@
+export { default } from './OrbeAiWidget'

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

@@ -0,0 +1,143 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { PointerEvent as ReactPointerEvent } from 'react'
+
+/**
+ * `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'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right'
+
+const MIN = { width: 360, height: 420 }
+const DEFAULT = { width: 480, height: 720 }
+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)
+
+/** Á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, 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>({ ...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) => {
+            event.preventDefault()
+            event.stopPropagation()
+
+            const startX = event.clientX
+            const startY = event.clientY
+            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'
+
+            const handleMove = (moveEvent: PointerEvent) => {
+                const dx = moveEvent.clientX - startX
+                const dy = moveEvent.clientY - startY
+                const next: Rect = { ...start }
+
+                // Esquerda/topo: a borda ancorada fica fixa, só o tamanho muda.
+                if (direction.includes('left')) {
+                    next.width = clamp(
+                        start.width - dx,
+                        MIN.width,
+                        viewport.width - start.right - MARGIN,
+                    )
+                }
+                if (direction.includes('top')) {
+                    next.height = clamp(
+                        start.height - dy,
+                        MIN.height,
+                        viewport.height - start.bottom - MARGIN,
+                    )
+                }
+                // 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,
+                        MIN.height,
+                        start.height + start.bottom - MARGIN,
+                    )
+                    next.bottom = start.bottom - (next.height - start.height)
+                }
+
+                setRect(next)
+            }
+
+            const stopResize = () => {
+                document.body.style.userSelect = previousUserSelect
+                window.removeEventListener('pointermove', handleMove)
+                window.removeEventListener('pointerup', stopResize)
+            }
+
+            window.addEventListener('pointermove', handleMove)
+            window.addEventListener('pointerup', stopResize)
+        },
+        [rect],
+    )
+
+    return { rect, startResize, anchor }
+}
+
+export default useResizablePanel

package/lib/@ecme/components/template/Search.stories.tsx

@@ -22,7 +22,7 @@ const collectAuthorityPaths = (navTree: NavigationTree[]): string[] => {
 
 const allAuthority = Array.from(new Set(collectAuthorityPaths(navigationConfig)))
 
-const WithSimulatedAuthorities = ({
+const WithSimulatedUser = ({
     children,
 }: {
     children: React.ReactNode
@@ -33,6 +33,8 @@ const WithSimulatedAuthorities = ({
         useSessionUser.setState({
             user: {
                 ...previousUser,
+                userId: '1',
+                userName: 'Demo User',
                 authority: allAuthority,
             },
         })
@@ -45,7 +47,7 @@ const WithSimulatedAuthorities = ({
     return <>{children}</>
 }
 
-const meta = {
+const meta: Meta<typeof Search> = {
     title: '@ecme/Template/Search',
     component: Search,
     parameters: {
@@ -55,9 +57,9 @@ const meta = {
     decorators: [
         (Story) => (
             <BrowserRouter>
-                <WithSimulatedAuthorities>
+                <WithSimulatedUser>
                     <Story />
-                </WithSimulatedAuthorities>
+                </WithSimulatedUser>
             </BrowserRouter>
         ),
     ],
@@ -66,7 +68,7 @@ const meta = {
             control: 'text',
         },
     },
-} satisfies Meta<typeof Search>
+}
 
 export default meta
 
@@ -77,3 +79,16 @@ export const Default: TStory = {
         className: '',
     },
 }
+
+export const FavoritesMenu: TStory = {
+    args: {
+        className: '',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Clique no ícone de estrela (★) para abrir o dialog de favoritos. Os favoritos são mockados: Gestão de Processos > Cadastros, Performance e Originação. Use a lupa para buscar menus e veja a estrela ao lado de cada resultado — itens já favoritados aparecem com ★ amarela; itens não favoritados com ☆ cinza. Clique na estrela para adicionar/remover.',
+            },
+        },
+    },
+}