@orbe-agro/client-core 5.6.262 → 5.6.264

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

@@ -0,0 +1,144 @@
+import { useState } from 'react'
+import { TbForms } from 'react-icons/tb'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+import Select from '@/components/ui/Select'
+import { opcoesDoCampo, rotularCampo, tipoDoCampo } from './toolPresentation'
+import type { PendingInput } from '../types'
+
+type DataRequestCardProps = {
+    input: PendingInput
+    /** `null` = o usuario fechou sem preencher. */
+    onSubmit: (dados: Record<string, unknown> | null) => void
+}
+
+/**
+ * Formulario dos campos que faltam para criar um registro no ERP.
+ *
+ * O agente fica PARADO enquanto este card estiver na tela — ele so volta a
+ * responder depois do envio. Por isso divide o visual do ApprovalCard: sao as
+ * duas paradas do fluxo, e o usuario deve reconhece-las como a mesma coisa.
+ *
+ * Os valores vao para o modelo, que monta a chamada final. Por isso o envio nao
+ * valida tipo: o `type=number` e o select sao conveniencia de digitacao, nao
+ * regra de negocio — quem valida de verdade e o backend do ERP.
+ */
+const DataRequestCard = ({ input, onSubmit }: DataRequestCardProps) => {
+    const [valores, setValores] = useState<Record<string, string>>({})
+    const [enviando, setEnviando] = useState<'enviar' | 'cancelar' | null>(null)
+
+    const preencher = (campo: string, valor: string) =>
+        setValores((atual) => ({ ...atual, [campo]: valor }))
+
+    // Exigir todos evita uma ida e volta: faltando um, o agente pediria de novo.
+    const completo = input.campos.every((campo) => valores[campo]?.trim())
+
+    const enviar = () => {
+        setEnviando('enviar')
+        // Numeros vao como number; o resto como texto. O modelo aceita os dois,
+        // mas o tipo certo evita que ele precise adivinhar.
+        const dados = Object.fromEntries(
+            input.campos.map((campo) => {
+                const bruto = valores[campo].trim()
+                const numero =
+                    tipoDoCampo(campo) === 'numero' ? Number(bruto) : NaN
+                return [campo, Number.isNaN(numero) ? bruto : numero]
+            }),
+        )
+        onSubmit(dados)
+    }
+
+    const cancelar = () => {
+        setEnviando('cancelar')
+        onSubmit(null)
+    }
+
+    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">
+                <TbForms 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">
+                    Dados necessários
+                </span>
+            </div>
+
+            <div className="px-4 py-3.5">
+                <div className="mb-3 text-sm text-gray-500 dark:text-gray-400">
+                    Preencha os campos abaixo para eu continuar.
+                </div>
+
+                <div className="flex flex-col gap-3">
+                    {input.campos.map((campo) => {
+                        const rotulo = rotularCampo(campo)
+                        const opcoes = opcoesDoCampo(campo)
+
+                        return (
+                            <label key={campo} className="flex flex-col gap-1">
+                                <span className="text-sm text-gray-600 dark:text-gray-300">
+                                    {rotulo}
+                                </span>
+                                {opcoes.length ? (
+                                    <Select
+                                        options={opcoes}
+                                        value={opcoes.filter(
+                                            (opcao) =>
+                                                opcao.value === valores[campo],
+                                        )}
+                                        placeholder={`Selecione ${rotulo.toLowerCase()}`}
+                                        isDisabled={enviando !== null}
+                                        onChange={(opcao) =>
+                                            preencher(
+                                                campo,
+                                                (opcao as { value: string } | null)
+                                                    ?.value ?? '',
+                                            )
+                                        }
+                                    />
+                                ) : (
+                                    <Input
+                                        type={
+                                            tipoDoCampo(campo) === 'numero'
+                                                ? 'number'
+                                                : 'text'
+                                        }
+                                        value={valores[campo] ?? ''}
+                                        disabled={enviando !== null}
+                                        placeholder={`Informe ${rotulo.toLowerCase()}`}
+                                        onChange={(evento) =>
+                                            preencher(campo, evento.target.value)
+                                        }
+                                    />
+                                )}
+                            </label>
+                        )
+                    })}
+                </div>
+
+                <div className="mt-4 flex items-center gap-2">
+                    <Button
+                        variant="solid"
+                        size="sm"
+                        loading={enviando === 'enviar'}
+                        disabled={!completo || enviando !== null}
+                        onClick={enviar}
+                    >
+                        Enviar
+                    </Button>
+                    <Button
+                        size="sm"
+                        loading={enviando === 'cancelar'}
+                        disabled={enviando !== null}
+                        onClick={cancelar}
+                    >
+                        Cancelar
+                    </Button>
+                    <span className="ml-auto text-xs text-gray-400 dark:text-gray-500">
+                        Você ainda confirma antes de gravar
+                    </span>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default DataRequestCard

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

@@ -0,0 +1,218 @@
+import { useState } from 'react'
+import {
+    TbAlertTriangle,
+    TbCheck,
+    TbChevronDown,
+    TbClock,
+    TbLoader2,
+} from 'react-icons/tb'
+import classNames from '@/components/ui/utils/classNames'
+import {
+    camposVisiveis,
+    iconeFerramenta,
+    rotularExecucao,
+    rotularFerramenta,
+} from './toolPresentation'
+import type { ToolCall } from '../types'
+
+/**
+ * Uma consulta ou operacao que o agente executou, no meio da conversa.
+ *
+ * Deliberadamente discreto: e informacao de apoio, nao a resposta. Por isso vive
+ * FORA do balao de fala (ver ChatView) e tem forma de pilula — contorno fino,
+ * largura do conteudo, letra menor — para nunca ser lido como uma segunda
+ * mensagem do agente. Fechado mostra so o que aconteceu e em que estado esta;
+ * aberto, os parametros ja traduzidos para a linguagem do negocio.
+ */
+
+type Estado = {
+    texto: string
+    Icone: typeof TbCheck
+    classe: string
+    /**
+     * Se o texto do estado acompanha o icone na pilula.
+     *
+     * So quando o icone sozinho nao basta: "aguardando confirmacao" e "nao
+     * concluida" pedem uma acao ou explicam uma falha. Em execucao o rotulo ja
+     * esta no gerundio ("Consultando contratos…") e o ✓ de concluida e obvio —
+     * escrever isso de novo so engorda a pilula.
+     */
+    mostrarTexto?: boolean
+}
+
+const estadoDe = (tool: ToolCall): Estado => {
+    if (tool.awaitingApproval) {
+        return {
+            texto: 'Aguardando confirmação',
+            Icone: TbClock,
+            classe: 'text-amber-600 dark:text-amber-400',
+            mostrarTexto: true,
+        }
+    }
+    if (tool.running) {
+        return {
+            texto: 'Em andamento',
+            Icone: TbLoader2,
+            classe: 'text-blue-600 dark:text-blue-400',
+        }
+    }
+    if (tool.isError) {
+        return {
+            texto: 'Não concluída',
+            Icone: TbAlertTriangle,
+            classe: 'text-red-600 dark:text-red-400',
+            mostrarTexto: true,
+        }
+    }
+    return {
+        texto: 'Concluída',
+        Icone: TbCheck,
+        classe: 'text-emerald-600 dark:text-emerald-400',
+    }
+}
+
+type ToolCallChipProps = {
+    tool: ToolCall
+}
+
+const ToolCallChip = ({ tool }: ToolCallChipProps) => {
+    const [aberto, setAberto] = useState(false)
+    const estado = estadoDe(tool)
+    const IconeFerramenta = iconeFerramenta(tool.name)
+    const emAndamento = tool.running && !tool.awaitingApproval
+    const campos = camposVisiveis(tool.args, tool.name)
+    const rotulo = emAndamento
+        ? `${rotularExecucao(tool.name)}…`
+        : rotularFerramenta(tool.name)
+
+    return (
+        // not-prose: o balao do agente e `prose`, que aplicaria margens de
+        // tipografia no dl/dt/dd/pre daqui e desmontaria a compactacao.
+        <div className="not-prose max-w-full">
+            <button
+                type="button"
+                className="inline-flex w-fit max-w-full items-center gap-1.5 rounded-full border border-gray-200 px-2.5 py-1 text-left transition-colors hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-800/60"
+                aria-expanded={aberto}
+                title={`${rotulo} — ${estado.texto}`}
+                onClick={() => setAberto((atual) => !atual)}
+            >
+                <IconeFerramenta
+                    size={13}
+                    className="shrink-0 text-gray-400 dark:text-gray-500"
+                />
+
+                <span className="truncate text-xs font-medium text-gray-600 dark:text-gray-300">
+                    {rotulo}
+                </span>
+
+                <span
+                    className={classNames(
+                        'flex shrink-0 items-center gap-1 text-xs font-medium',
+                        estado.classe,
+                    )}
+                >
+                    <estado.Icone
+                        size={12}
+                        className={emAndamento ? 'motion-safe:animate-spin' : ''}
+                    />
+                    {estado.mostrarTexto && estado.texto}
+                </span>
+
+                <TbChevronDown
+                    size={12}
+                    className={classNames(
+                        'shrink-0 text-gray-400 transition-transform',
+                        aberto && 'rotate-180',
+                    )}
+                />
+            </button>
+
+            {aberto && (
+                <div className="mt-1 rounded-lg border border-gray-200 px-2.5 py-2 dark:border-gray-700">
+                    {campos.length > 0 && (
+                        <dl className="grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs">
+                            {campos.map((campo) => (
+                                <div key={campo.chave} className="contents">
+                                    <dt className="text-gray-500 dark:text-gray-400">
+                                        {campo.rotulo}
+                                    </dt>
+                                    <dd className="truncate font-medium text-gray-800 dark:text-gray-100">
+                                        {campo.valor}
+                                    </dd>
+                                </div>
+                            ))}
+                        </dl>
+                    )}
+
+                    {tool.result !== undefined && (
+                        <Resultado
+                            texto={tool.result}
+                            erro={tool.isError}
+                            separar={campos.length > 0}
+                        />
+                    )}
+                </div>
+            )}
+        </div>
+    )
+}
+
+/**
+ * O retorno da ferramenta.
+ *
+ * Quando e JSON (uma listagem, por exemplo), fica atras de um toggle: e dado
+ * tecnico que so interessa para conferencia, e o usuario ja tem a resposta do
+ * agente logo abaixo. Mensagens em texto — erros de permissao, cancelamentos —
+ * aparecem direto, porque explicam o que aconteceu.
+ */
+const Resultado = ({
+    texto,
+    erro,
+    separar,
+}: {
+    texto: string
+    erro?: boolean
+    /** Linha divisoria: so faz sentido quando ha parametros logo acima. */
+    separar?: boolean
+}) => {
+    const [mostrarBruto, setMostrarBruto] = useState(false)
+    const ehJson = /^\s*[[{]/.test(texto)
+    const separador = separar
+        ? 'mt-2 border-t border-gray-200 pt-2 dark:border-gray-700'
+        : ''
+
+    if (!ehJson) {
+        return (
+            <p
+                className={classNames(
+                    'text-xs',
+                    separador,
+                    erro
+                        ? 'text-red-600 dark:text-red-400'
+                        : 'text-gray-600 dark:text-gray-300',
+                )}
+            >
+                {texto}
+            </p>
+        )
+    }
+
+    return (
+        <div className={separador}>
+            <button
+                type="button"
+                className="text-xs font-medium text-gray-500 underline-offset-2 hover:underline dark:text-gray-400"
+                onClick={() => setMostrarBruto((atual) => !atual)}
+            >
+                {mostrarBruto ? 'Ocultar' : 'Ver'} dados retornados
+            </button>
+            {mostrarBruto && (
+                <pre className="mt-1.5 max-h-40 overflow-auto whitespace-pre-wrap break-words rounded border border-gray-200 bg-white p-2 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">
+                    {texto}
+                </pre>
+            )}
+        </div>
+    )
+}
+
+export default ToolCallChip

package/lib/@ecme/views/concepts/ai/Chat/components/toolPresentation.ts

@@ -0,0 +1,283 @@
+import { formatQuantity } from '@base/utils/functions/stringUtils'
+import {
+    TbBriefcase,
+    TbBuildingPlus,
+    TbCalendarEvent,
+    TbFilePlus,
+    TbForms,
+    TbListSearch,
+    TbPackage,
+    TbPackages,
+    TbSearch,
+    TbTool,
+    TbUserSearch,
+} from 'react-icons/tb'
+import type { IconType } from 'react-icons'
+
+/**
+ * Como as ferramentas do agente sao apresentadas ao usuario.
+ *
+ * Compartilhado pelo chip de execucao e pelo card de aprovacao, para os dois
+ * falarem a mesma lingua: o usuario ve "Consulta de contratos" e "Mercado
+ * interno", nunca `listar_contratos_armazenagem_graos` ou `MERCADO_INTERNO`.
+ *
+ * Tudo tem fallback: uma ferramenta ou campo novo no backend nao quebra a tela,
+ * so aparece com o nome tecnico humanizado ate ganhar entrada aqui.
+ */
+
+type Ferramenta = {
+    rotulo: string
+    /** Frase no gerundio, para o estado "executando". */
+    executando: string
+    icone: IconType
+}
+
+const FERRAMENTAS: Record<string, Ferramenta> = {
+    buscar_contrato_armazenagem_graos: {
+        rotulo: 'Consulta de contrato',
+        executando: 'Consultando contrato',
+        icone: TbSearch,
+    },
+    listar_contratos_armazenagem_graos: {
+        rotulo: 'Consulta de contratos',
+        executando: 'Consultando contratos',
+        icone: TbListSearch,
+    },
+    criar_contrato_armazenagem_graos: {
+        rotulo: 'Criação de contrato de armazenagem',
+        executando: 'Criando contrato',
+        icone: TbFilePlus,
+    },
+    buscar_area: {
+        rotulo: 'Consulta de área',
+        executando: 'Consultando área',
+        icone: TbSearch,
+    },
+    listar_areas: {
+        rotulo: 'Consulta de áreas',
+        executando: 'Consultando áreas',
+        icone: TbListSearch,
+    },
+    criar_area: {
+        rotulo: 'Criação de área',
+        executando: 'Criando área',
+        icone: TbBuildingPlus,
+    },
+    buscar_usuario: {
+        rotulo: 'Consulta de usuário',
+        executando: 'Consultando usuário',
+        icone: TbUserSearch,
+    },
+    listar_safras: {
+        rotulo: 'Consulta de safras',
+        executando: 'Consultando safras',
+        icone: TbCalendarEvent,
+    },
+    listar_parceiros: {
+        rotulo: 'Consulta de parceiros de negócio',
+        executando: 'Consultando parceiros',
+        icone: TbBriefcase,
+    },
+    listar_produtos: {
+        rotulo: 'Consulta de produtos',
+        executando: 'Consultando produtos',
+        icone: TbPackages,
+    },
+    buscar_produto: {
+        rotulo: 'Consulta de produto',
+        executando: 'Consultando produto',
+        icone: TbPackage,
+    },
+    // Nao executa nada no ERP: e o sinal de que faltam campos. Mas o agente a
+    // pede como qualquer outra, entao um chip aparece junto do formulario.
+    solicitar_dados: {
+        rotulo: 'Dados necessários',
+        executando: 'Verificando os dados',
+        icone: TbForms,
+    },
+}
+
+const humanizar = (texto: string) =>
+    texto
+        .replaceAll('_', ' ')
+        .toLowerCase()
+        .replace(/^./, (letra) => letra.toUpperCase())
+
+export const rotularFerramenta = (nome: string) =>
+    FERRAMENTAS[nome]?.rotulo ?? humanizar(nome)
+
+export const rotularExecucao = (nome: string) =>
+    FERRAMENTAS[nome]?.executando ?? humanizar(nome)
+
+export const iconeFerramenta = (nome: string): IconType =>
+    FERRAMENTAS[nome]?.icone ?? TbTool
+
+/** Rotulos dos parametros, na linguagem do negocio. */
+const CAMPOS: Record<string, string> = {
+    business_partner_id: 'Parceiro de negócio',
+    produto_id: 'Produto',
+    safra_id: 'Safra',
+    saldo_negociado: 'Saldo negociado',
+    tipo_contrato: 'Tipo de contrato',
+    contrato_venda: 'Contrato de venda',
+    ordem_venda: 'Ordem de venda',
+    id: 'Código',
+    nome: 'Nome',
+    responsavel_id: 'Responsável',
+    responsavel_nome: 'Nome do responsável',
+    // Safra, produto e parceiro de negócio
+    safra: 'Safra',
+    ids: 'Códigos',
+    search: 'Busca',
+    codigo: 'Código',
+    descricao: 'Descrição',
+    tipo_produto: 'Tipo do produto',
+    is_cultura: 'É cultura',
+    status_material: 'Situação',
+    business_partner: 'Código do parceiro',
+    nome_completo: 'Nome do parceiro',
+    cpf_ou_cnpj: 'CPF ou CNPJ',
+    cpf: 'CPF',
+    cnpj: 'CNPJ',
+    is_cliente: 'É cliente',
+    is_produtor: 'É produtor',
+    is_transportadora: 'É transportadora',
+    is_armazem: 'É armazém',
+    status_elegibilidade: 'Elegibilidade',
+    page_number: 'Página',
+    page_size: 'Itens por página',
+    sort_field: 'Ordenar por',
+    sort_order: 'Ordem',
+    filtro: 'Filtro',
+}
+
+/**
+ * Rotulos que dependem da ferramenta.
+ *
+ * O `id` e o caso: o mesmo parametro nomeia entidades diferentes conforme quem
+ * o recebe. Sem isto, buscar o usuario 5 exibiria "Contrato: #5".
+ */
+const CAMPO_POR_FERRAMENTA: Record<string, Record<string, string>> = {
+    buscar_contrato_armazenagem_graos: { id: 'Contrato' },
+    buscar_area: { id: 'Área' },
+    listar_areas: { id: 'Área' },
+    buscar_usuario: { id: 'Usuário' },
+    listar_safras: { id: 'Safra' },
+    listar_parceiros: { id: 'Parceiro' },
+    listar_produtos: { id: 'Produto' },
+    buscar_produto: { id: 'Produto' },
+}
+
+export const rotularCampo = (chave: string, ferramenta?: string) =>
+    CAMPO_POR_FERRAMENTA[ferramenta ?? '']?.[chave] ??
+    CAMPOS[chave] ??
+    humanizar(chave)
+
+/** Campos que sao referencia a um registro: exibidos como "#123". */
+const REFERENCIAS = new Set([
+    'business_partner_id',
+    'produto_id',
+    'safra_id',
+    'contrato_venda',
+    'ordem_venda',
+    'responsavel_id',
+    'id',
+])
+
+const ORDENACAO: Record<string, string> = { ASC: 'Crescente', DESC: 'Decrescente' }
+
+/**
+ * Opcoes dos campos que sao enum no backend.
+ *
+ * O rotulo sai do mesmo `humanizar` usado na exibicao, entao o formulario e o
+ * card de confirmacao mostram exatamente o mesmo texto.
+ */
+const OPCOES: Record<string, string[]> = {
+    tipo_contrato: ['MERCADO_INTERNO', 'MERCADO_EXTERNO'],
+}
+
+export const opcoesDoCampo = (chave: string) =>
+    (OPCOES[chave] ?? []).map((valor) => ({
+        value: valor,
+        label: humanizar(valor),
+    }))
+
+/**
+ * Que tipo de controle o campo pede no formulario de coleta.
+ *
+ * E so UX (teclado numerico, lista em vez de texto livre): os valores voltam
+ * para o modelo, e e ele quem monta a chamada final — um tipo errado nao
+ * quebra, so piora o preenchimento.
+ */
+export const tipoDoCampo = (chave: string): 'numero' | 'enum' | 'texto' => {
+    if (OPCOES[chave]) return 'enum'
+    if (REFERENCIAS.has(chave) || chave === 'saldo_negociado') return 'numero'
+    return 'texto'
+}
+
+/** Converte o valor tecnico no que o usuario espera ler. */
+export const formatarValor = (
+    chave: string,
+    valor: unknown,
+    ferramenta?: string,
+): string => {
+    if (valor === null || valor === undefined || valor === '') {
+        return '—'
+    }
+    if (chave === 'saldo_negociado' && typeof valor === 'number') {
+        return formatQuantity(valor)
+    }
+    if (chave === 'sort_order' && typeof valor === 'string') {
+        return ORDENACAO[valor] ?? humanizar(valor)
+    }
+    if (typeof valor === 'number') {
+        return REFERENCIAS.has(chave) ? `#${valor}` : String(valor)
+    }
+    if (typeof valor === 'boolean') {
+        return valor ? 'Sim' : 'Não'
+    }
+    if (typeof valor === 'string') {
+        // Enums do backend chegam em CAIXA_ALTA_COM_UNDERSCORE.
+        return /^[A-Z][A-Z0-9_]+$/.test(valor) ? humanizar(valor) : valor
+    }
+    if (Array.isArray(valor)) {
+        return valor.length ? `${valor.length} item(ns)` : '—'
+    }
+    if (typeof valor === 'object') {
+        const entradas = Object.entries(valor as Record<string, unknown>)
+        if (!entradas.length) {
+            return '—'
+        }
+        return entradas
+            .map(
+                ([k, v]) =>
+                    `${rotularCampo(k, ferramenta)}: ${formatarValor(k, v, ferramenta)}`,
+            )
+            .join(', ')
+    }
+    return String(valor)
+}
+
+/**
+ * Pares (rotulo, valor) prontos para exibir, ignorando o que esta vazio.
+ *
+ * `ferramenta` resolve os rotulos ambiguos (ver CAMPO_POR_FERRAMENTA); quem nao
+ * a conhece — o formulario de coleta, por exemplo — pode omitir.
+ */
+export const camposVisiveis = (
+    args: Record<string, unknown>,
+    ferramenta?: string,
+) =>
+    Object.entries(args)
+        .filter(([, valor]) => {
+            if (valor === null || valor === undefined || valor === '') return false
+            if (typeof valor === 'object' && !Array.isArray(valor)) {
+                return Object.keys(valor as object).length > 0
+            }
+            return true
+        })
+        .map(([chave, valor]) => ({
+            chave,
+            rotulo: rotularCampo(chave, ferramenta),
+            valor: formatarValor(chave, valor, ferramenta),
+        }))