@orbe-agro/client-core 5.6.262 → 5.6.264

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

@@ -0,0 +1,103 @@
+import { useState } from 'react'
+import { TbLock } from 'react-icons/tb'
+import Button from '@/components/ui/Button'
+import { camposVisiveis, iconeFerramenta, rotularFerramenta } from './toolPresentation'
+import type { PendingApproval } from '../types'
+
+type ApprovalCardProps = {
+    approval: PendingApproval
+    onDecide: (approved: boolean) => void
+}
+
+/**
+ * Confirmacao de uma operacao que grava no ERP.
+ *
+ * O agente fica PARADO enquanto este card estiver na tela — so volta a
+ * responder depois do clique. Por isso ele nao usa a paleta de alerta: nao e um
+ * aviso de erro, e uma decisao de negocio que o usuario precisa tomar.
+ */
+const ApprovalCard = ({ approval, onDecide }: ApprovalCardProps) => {
+    const [decisao, setDecisao] = useState<'aprovar' | 'negar' | null>(null)
+
+    const decidir = (aprovado: boolean) => {
+        setDecisao(aprovado ? 'aprovar' : 'negar')
+        onDecide(aprovado)
+    }
+
+    return (
+        <div className="not-prose mt-1 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div className="flex items-center gap-2 border-b border-gray-200 px-4 py-2.5 dark:border-gray-700">
+                <TbLock size={16} className="text-gray-400 dark:text-gray-500" />
+                <span className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                    Confirmação necessária
+                </span>
+            </div>
+
+            <div className="px-4 py-3.5">
+                {approval.calls.map((call) => {
+                    const Icone = iconeFerramenta(call.name)
+                    const campos = camposVisiveis(call.args, call.name)
+
+                    return (
+                        <div key={call.id} className="mb-4 last:mb-0">
+                            <div className="mb-3 flex items-start gap-2.5">
+                                <span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary-subtle text-primary">
+                                    <Icone size={17} />
+                                </span>
+                                <div className="min-w-0">
+                                    <div className="font-semibold text-gray-900 dark:text-gray-100">
+                                        {rotularFerramenta(call.name)}
+                                    </div>
+                                    <div className="text-sm text-gray-500 dark:text-gray-400">
+                                        Revise os dados antes de confirmar.
+                                    </div>
+                                </div>
+                            </div>
+
+                            <dl className="divide-y divide-gray-100 rounded-lg border border-gray-100 dark:divide-gray-700 dark:border-gray-700">
+                                {campos.map((campo) => (
+                                    <div
+                                        key={campo.chave}
+                                        className="flex items-baseline justify-between gap-4 px-3 py-2"
+                                    >
+                                        <dt className="shrink-0 text-sm text-gray-500 dark:text-gray-400">
+                                            {campo.rotulo}
+                                        </dt>
+                                        <dd className="truncate text-sm font-medium text-gray-900 dark:text-gray-100">
+                                            {campo.valor}
+                                        </dd>
+                                    </div>
+                                ))}
+                            </dl>
+                        </div>
+                    )
+                })}
+
+                <div className="mt-4 flex items-center gap-2">
+                    <Button
+                        variant="solid"
+                        size="sm"
+                        loading={decisao === 'aprovar'}
+                        disabled={decisao !== null}
+                        onClick={() => decidir(true)}
+                    >
+                        Confirmar
+                    </Button>
+                    <Button
+                        size="sm"
+                        loading={decisao === 'negar'}
+                        disabled={decisao !== null}
+                        onClick={() => decidir(false)}
+                    >
+                        Cancelar
+                    </Button>
+                    <span className="ml-auto text-xs text-gray-400 dark:text-gray-500">
+                        Nada é gravado até você confirmar
+                    </span>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ApprovalCard

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/ChatLandingView.tsx

@@ -1,45 +1,47 @@
 import useChatSend from '../hooks/useChatSend'
-import {
-    PiLightbulbDuotone,
-    PiBookOpenTextDuotone,
-    PiCompassDuotone,
-    PiCodeDuotone,
-} from 'react-icons/pi'
-import type { ReactNode } from 'react'
-
-type PromptType = 'idea' | 'guide' | 'writing' | 'coding'
-
-const suggeustionIcon: Record<PromptType, ReactNode> = {
-    idea: <PiLightbulbDuotone className="text-blue-500" />,
-    guide: <PiCompassDuotone className="text-emerald-500" />,
-    writing: <PiBookOpenTextDuotone className="text-amber-500" />,
-    coding: <PiCodeDuotone className="text-indigo-500" />,
-}
+import { iconeFerramenta } from './toolPresentation'
 
+/**
+ * O que o agente sabe fazer, em quatro exemplos que executam de verdade.
+ *
+ * `title` e o rotulo curto do card; `prompt` e a frase enviada ao agente.
+ * `tool` nomeia a ferramenta que o exemplo exercita e de onde sai o icone —
+ * o MESMO que aparecera no chip quando ela rodar, entao o card e a execucao
+ * falam a mesma lingua e ha um registro so (ver toolPresentation.ts).
+ *
+ * Os dois exemplos de criacao mandam a intencao SEM os dados de proposito: o
+ * agente pede os campos que faltam por formulario e so entao abre a tela de
+ * aprovacao — o fluxo humano inteiro em um clique. Nada e gravado sem confirmar.
+ */
 const promptSuggestion: {
     title: string
     prompt: string
-    type: PromptType
+    tool: string
+    cor: string
 }[] = [
     {
-        title: 'Help me sound like an expert for an upcoming trip',
-        prompt: `I'm going whale watching this weekend and want to appear knowledgeable about killer whales. Tell me a few unique and interesting facts I can share.`,
-        type: 'guide',
+        title: 'Buscar um usuário pelo ID',
+        prompt: 'Quem é o usuário de um dado id?',
+        tool: 'buscar_usuario',
+        cor: 'text-blue-500',
     },
     {
-        title: 'Outline an logical sales pitch for a new product',
-        prompt: `Structure a sales pitch for a hair dryer that's also a microphone. Be concise and organize the sales pitch logically. `,
-        type: 'writing',
+        title: 'Consultar uma área pelo código',
+        prompt: 'Me mostra a área de um dado id?',
+        tool: 'buscar_area',
+        cor: 'text-emerald-500',
     },
     {
-        title: 'Help me get organized with a list of 10 tips',
-        prompt: `Give me 10 tips for room organization. `,
-        type: 'idea',
+        title: 'Criar uma nova área',
+        prompt: 'Quero criar uma área nova',
+        tool: 'criar_area',
+        cor: 'text-amber-500',
     },
     {
-        title: 'Write code for a specific task, including edge cases',
-        prompt: `Write a Java function that takes a path as an input and creates a file storing the current system date. Consider edge cases.`,
-        type: 'coding',
+        title: 'Criar um contrato de compra de grãos',
+        prompt: 'Quero criar um contrato de compra de armazenagem de grãos',
+        tool: 'criar_contrato_armazenagem_graos',
+        cor: 'text-indigo-500',
     },
 ]
 
@@ -47,33 +49,39 @@ const ChatLandingView = () => {
     const { handleSend } = useChatSend()
 
     return (
-        <div className="max-w-[900px] w-full mx-auto mt-20">
+        <div className="max-w-[900px] w-full mx-auto mt-6">
             <div>
-                <div className="heading-text text-4xl leading-snug">
-                    <span className="font-semibold bg-gradient-to-r from-indigo-500 to-red-400 bg-clip-text text-transparent text-5xl">
-                        Hello, there
+                <div className="heading-text text-2xl leading-snug">
+                    <span className="font-semibold bg-gradient-to-r from-indigo-500 to-red-400 bg-clip-text text-transparent text-3xl">
+                        Olá!
                     </span>
                     <br />
-                    <span>How can I help you today?</span>
+                    <span>Como posso te ajudar hoje?</span>
                 </div>
-                <div className="mt-8 grid grid-cols-2 xl:grid-cols-4 gap-4">
-                    {promptSuggestion.map((suggestion) => (
-                        <div
-                            key={suggestion.title}
-                            className="flex flex-col gap-4 justify-between rounded-xl bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 p-5 min-h-40 2xl:min-h-60 cursor-pointer"
-                            role="button"
-                            onClick={() => handleSend(suggestion.title)}
-                        >
-                            <h6 className="font-normal">{suggestion.title}</h6>
-                            <div>
-                                <div className="bg-white dark:bg-gray-800 rounded-full p-2 inline-flex">
-                                    <span className="text-2xl">
-                                        {suggeustionIcon[suggestion.type]}
-                                    </span>
+                <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    {promptSuggestion.map((suggestion) => {
+                        const Icone = iconeFerramenta(suggestion.tool)
+
+                        return (
+                            <div
+                                key={suggestion.title}
+                                className="flex flex-col gap-3 justify-between rounded-xl bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 p-4 min-h-28 cursor-pointer"
+                                role="button"
+                                onClick={() => handleSend(suggestion.prompt)}
+                            >
+                                <h6 className="font-normal">
+                                    {suggestion.title}
+                                </h6>
+                                <div>
+                                    <div className="bg-white dark:bg-gray-800 rounded-full p-2 inline-flex">
+                                        <span className="text-2xl">
+                                            <Icone className={suggestion.cor} />
+                                        </span>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    ))}
+                        )
+                    })}
                 </div>
             </div>
         </div>

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

@@ -5,15 +5,48 @@ import ChatLandingView from './ChatLandingView'
 import ChatMobileNav from './ChatMobileNav'
 import ChatCustomContent from './ChatCustomContent'
 import ChatCustomAction from './ChatCustomAction'
+import AiThinkingIndicator from './AiThinkingIndicator'
+import AiErrorMessage from './AiErrorMessage'
+import ToolCallChip from './ToolCallChip'
+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'
 
-const ChatView = () => {
+/**
+ * O balao de fala do agente, desenhado aqui em vez de vir do ChatBox.
+ *
+ * O `botBubbleClass` abaixo zera o balao que o Message desenharia, para os chips
+ * de ferramenta e o card de aprovacao ficarem FORA dele — antes tudo dividia a
+ * mesma caixa cinza e as ferramentas eram lidas como uma segunda mensagem.
+ * Usado tambem pelo indicador de "pensando", que passa pelo mesmo balao zerado.
+ *
+ * Repete `prose text-sm` do balao original de proposito: o reset de margem do
+ * @tailwindcss/typography e `.prose > :first-child`, filho DIRETO. Sem o `prose`
+ * aqui, o markdown ficaria um nivel abaixo do container e o primeiro paragrafo
+ * voltaria a ter margem, inflando todos os baloes.
+ */
+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'
+
+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 } = useChatSend()
+    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) {
@@ -51,18 +84,29 @@ const ChatView = () => {
 
     return (
         <Card className="flex-1 h-full" bodyClass="h-full">
-            <ChatMobileNav />
+            {showMobileNav && <ChatMobileNav />}
             <ChatBox
                 ref={scrollRef}
                 messageList={messageList}
-                placeholder="Enter a prompt here"
+                placeholder="Pergunte algo sobre o Orbe Agro…"
                 showMessageList={Boolean(selectedConversation)}
-                showAvatar={true}
-                avatarGap={true}
-                containerClass="h-[calc(100%-30px)] xl:h-full"
-                messageListClass="h-[calc(100%-100px)] xl:h-[calc(100%-70px)]"
+                showAvatar={false}
+                avatarGap={false}
+                myBubbleClass="bg-primary text-white"
+                botBubbleClass="bg-transparent dark:bg-transparent p-0 rounded-none"
+                errorBubbleClass="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20"
+                renderTyping={() => (
+                    <div className={BALAO_AGENTE}>
+                        <AiThinkingIndicator />
+                    </div>
+                )}
+                containerClass={
+                    showMobileNav ? 'h-[calc(100%-30px)] xl:h-full' : 'h-full'
+                }
+                // +24px sobre a altura do input: espaco da linha de aviso.
+                messageListClass="h-[calc(100%-124px)] xl:h-[calc(100%-94px)]"
                 typing={
-                    isTyping
+                    isTyping || carregando
                         ? {
                               id: 'ai',
                               name: 'Chat AI',
@@ -71,22 +115,73 @@ const ChatView = () => {
                         : false
                 }
                 customRenderer={(message) => {
+                    if (message.isError) {
+                        return <AiErrorMessage />
+                    }
+
                     if (message.sender.id === 'ai') {
+                        // As ferramentas e as pausas chegam pelo streaming e
+                        // vivem no Conversation; o tipo do ChatBox nao os conhece.
+                        const { tools, pendingApproval, pendingInput } =
+                            message as Conversation
+                        // Enquanto as ferramentas rodam o conteudo ainda e '':
+                        // sem esta guarda sobraria um balao cinza vazio.
+                        const temTexto = Boolean(
+                            (message.content as string)?.trim(),
+                        )
+
                         return (
-                            <ChatCustomContent
-                                content={message.content as string}
-                                triggerTyping={
-                                    message.fresh ? message.fresh : false
-                                }
-                                onFinish={() => handleFinish(message.id)}
-                            />
+                            <div className="flex flex-col items-start gap-1.5">
+                                {tools?.map((tool) => (
+                                    <ToolCallChip key={tool.id} tool={tool} />
+                                ))}
+                                {temTexto && (
+                                    <div className={BALAO_AGENTE}>
+                                        <ChatCustomContent
+                                            content={message.content as string}
+                                            triggerTyping={
+                                                message.fresh
+                                                    ? message.fresh
+                                                    : false
+                                            }
+                                            onFinish={() =>
+                                                handleFinish(message.id)
+                                            }
+                                        />
+                                    </div>
+                                )}
+                                {pendingInput && (
+                                    <DataRequestCard
+                                        input={pendingInput}
+                                        onSubmit={(dados) =>
+                                            handleDataSubmit(
+                                                selectedConversation,
+                                                message.id,
+                                                dados,
+                                            )
+                                        }
+                                    />
+                                )}
+                                {pendingApproval && (
+                                    <ApprovalCard
+                                        approval={pendingApproval}
+                                        onDecide={(aprovado) =>
+                                            handleApproval(
+                                                selectedConversation,
+                                                message.id,
+                                                aprovado,
+                                            )
+                                        }
+                                    />
+                                )}
+                            </div>
                         )
                     }
 
                     return message.content
                 }}
                 customAction={(message) => {
-                    if (message.sender.id === 'ai') {
+                    if (message.sender.id === 'ai' && !message.isError) {
                         return (
                             <ChatCustomAction
                                 content={message.content as string}
@@ -98,7 +193,18 @@ const ChatView = () => {
                 }}
                 onInputChange={handleInputChange}
             >
-                {!selectedConversation && <ChatLandingView />}
+                {/* Os children ficam entre a lista e o input: sem conversa e a
+                    landing com os cards; com conversa, o aviso sobre a IA. */}
+                {selectedConversation ? (
+                    <p className="py-1 text-center text-xs text-gray-500 dark:text-gray-400">
+                        Orbe-AI é uma inteligência artificial e pode cometer
+                        erros.
+                    </p>
+                ) : (
+                    <div className="flex-1 min-h-0 overflow-y-auto">
+                        <ChatLandingView />
+                    </div>
+                )}
             </ChatBox>
         </Card>
     )