Add Asistente chat page with A2UI render tools

Wires CopilotKit v2 chat into the SPA as the Asistente page,
declares a render_spending_summary action backed by a custom
SpendingSummaryCard, and configures static suggestions shown
before the first message.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Carlos Escalante
2026-04-29 22:02:12 -06:00
parent 140a75f706
commit 5d5727ec4e
3 changed files with 575 additions and 0 deletions

View File

@@ -0,0 +1,39 @@
"use client";
import { CopilotChat } from "@copilotkit/react-ui";
import { Sparkles } from "lucide-react";
const SUGGESTIONS = [
{ title: "¿Cuál es mi saldo neto hoy?", message: "¿Cuál es mi saldo neto hoy?" },
{ title: "¿Cuánto gasté en el ciclo anterior?", message: "¿Cuánto gasté en el ciclo anterior?" },
{ title: "Últimas 10 transacciones", message: "Muéstrame mis últimas 10 transacciones" },
{ title: "¿Cómo va mi pensión?", message: "¿Cómo va mi pensión?" },
];
export default function AgentHomeClient() {
return (
<div className="flex flex-col h-[calc(100vh-105px)]">
<div className="mb-4">
<h1 className="text-2xl font-bold tracking-tight font-heading flex items-center gap-2">
<Sparkles className="w-5 h-5 text-primary" />
Asistente
</h1>
<p className="text-sm text-muted-foreground">
Pregúntale a WealthySmart sobre tus finanzas.
</p>
</div>
<div className="flex-1 min-h-0 rounded-xl border border-border overflow-hidden bg-card">
<CopilotChat
className="h-full"
labels={{
title: "WealthySmart",
initial: "¿Qué quieres saber sobre tus finanzas?",
placeholder: "Escribe tu pregunta…",
}}
suggestions={SUGGESTIONS}
/>
</div>
</div>
);
}