feat(templates): inline template chip in chat input and fix state loss

Pass template context via agent state (pending_template) instead of
embedding the template ID in the chat message text. The user's message
stays clean — just their data description — while a dismissible chip
renders inline inside the CopilotChat input pill.

- Add PendingTemplate type and pending_template field to AgentState
- Add clear_pending_template tool for agent to reset after applying
- Update system prompt to read pending_template from state
- Create TemplateChip portal component that injects into textarea column
- Spread full agent.state on all setState calls to prevent field loss
- Add chipIn keyframe animation

Author: GeneralJerel

apps/agent/main.py

@@ -55,11 +55,16 @@
         You have backend tools: `save_template`, `list_templates`, `apply_template`, `delete_template`.
 
         **When a user asks to apply/recreate a template with new data:**
-        The message includes the template name and ID in the format: "template name" (template-id)
-        1. Call `apply_template(template_id="...")` with the ID from the message
+        Check `pending_template` in state — the frontend sets this when the user picks a template.
+        If `pending_template` is present (has `id` and `name`):
+        1. Call `apply_template(template_id=pending_template["id"])` to retrieve the HTML
         2. Take the returned HTML and COPY IT EXACTLY, only replacing the data values
-           (names, numbers, dates, labels, amounts) to match the user's new data
+           (names, numbers, dates, labels, amounts) to match the user's message
         3. Render the modified HTML using `widgetRenderer`
+        4. Call `clear_pending_template` to reset the pending state
+
+        If no `pending_template` is set but the user mentions a template by name, use
+        `apply_template(name="...")` instead.
 
         CRITICAL: Do NOT rewrite or generate HTML from scratch. Take the original HTML string,
         find-and-replace ONLY the data values, and pass the result to widgetRenderer.

apps/agent/src/templates.py

@@ -154,9 +154,27 @@ def delete_template(template_id: str, runtime: ToolRuntime) -> Command:
     })
 
 
+@tool
+def clear_pending_template(runtime: ToolRuntime) -> Command:
+    """
+    Clear the pending_template from state after applying it.
+    Call this after you have finished applying a template.
+    """
+    return Command(update={
+        "pending_template": None,
+        "messages": [
+            ToolMessage(
+                content="Pending template cleared",
+                tool_call_id=runtime.tool_call_id,
+            )
+        ],
+    })
+
+
 template_tools = [
     save_template,
     list_templates,
     apply_template,
     delete_template,
+    clear_pending_template,
 ]

apps/agent/src/todos.py

@@ -2,7 +2,7 @@
 from langchain.tools import ToolRuntime, tool
 from langchain.messages import ToolMessage
 from langgraph.types import Command
-from typing import TypedDict, Literal
+from typing import Optional, TypedDict, Literal
 import uuid
 
 from src.templates import UITemplate
@@ -14,9 +14,14 @@ class Todo(TypedDict):
     emoji: str
     status: Literal["pending", "completed"]
 
+class PendingTemplate(TypedDict, total=False):
+    id: str
+    name: str
+
 class AgentState(BaseAgentState):
     todos: list[Todo]
     templates: list[UITemplate]
+    pending_template: Optional[PendingTemplate]
 
 @tool
 def manage_todos(todos: list[Todo], runtime: ToolRuntime) -> Command:

apps/app/src/app/globals.css

@@ -637,3 +637,8 @@ body, html {
   from { transform: translateY(-4px) scale(0.97); opacity: 0; }
   to   { transform: translateY(0) scale(1); opacity: 1; }
 }
+
+@keyframes chipIn {
+  from { transform: scale(0.9); opacity: 0; }
+  to   { transform: scale(1); opacity: 1; }
+}

apps/app/src/app/page.tsx

@@ -5,6 +5,7 @@ import { ExampleLayout } from "@/components/example-layout";
 import { useGenerativeUIExamples, useExampleSuggestions } from "@/hooks";
 import { ExplainerCardsPortal } from "@/components/explainer-cards";
 import { TemplateLibrary } from "@/components/template-library";
+import { TemplateChip } from "@/components/template-library/template-chip";
 
 import { CopilotChat } from "@copilotkit/react-core/v2";
 
@@ -108,6 +109,9 @@ export default function HomePage() {
         </div>
       </div>
 
+      {/* Template chip — portal renders above chat input */}
+      <TemplateChip />
+
       {/* Template Library Drawer */}
       <TemplateLibrary
         open={templateDrawerOpen}

apps/app/src/components/generative-ui/save-template-overlay.tsx

@@ -50,7 +50,7 @@ export function SaveTemplateOverlay({
       created_at: new Date().toISOString(),
       version: 1,
     };
-    agent.setState({ templates: [...templates, newTemplate] });
+    agent.setState({ ...agent.state, templates: [...templates, newTemplate] });
 
     setTemplateName("");
     setTimeout(() => {

apps/app/src/components/template-library/index.tsx

@@ -63,21 +63,20 @@ export function TemplateLibrary({ open, onClose }: TemplateLibraryProps) {
     const dataDesc = applyData.trim();
     if (!dataDesc) return;
 
-    const isChart =
-      applyingTemplate.component_type === "barChart" ||
-      applyingTemplate.component_type === "pieChart";
-
-    const chartType = applyingTemplate.component_type === "pieChart" ? "pie chart" : "bar chart";
-    const message = isChart
-      ? `Apply ${chartType} template "${applyingTemplate.name}" (${applyingTemplate.id}) with: ${dataDesc}`
-      : `Apply template "${applyingTemplate.name}" (${applyingTemplate.id}) with: ${dataDesc}`;
+    // Set pending_template in agent state so the agent knows which template to apply.
+    // Spread full state to guard against replace-style setState.
+    agent.setState({
+      ...agent.state,
+      pending_template: { id: applyingTemplate.id, name: applyingTemplate.name },
+    });
 
-    submitChatPrompt(message);
+    // Send only the user's data description — no template ID in the message
+    submitChatPrompt(dataDesc);
 
     setApplyingTemplate(null);
     setApplyData("");
     onClose();
-  }, [applyingTemplate, applyData, onClose]);
+  }, [agent, applyingTemplate, applyData, onClose]);
 
   const handleApplyCancel = () => {
     setApplyingTemplate(null);
@@ -86,6 +85,7 @@ export function TemplateLibrary({ open, onClose }: TemplateLibraryProps) {
 
   const handleDelete = (id: string) => {
     agent.setState({
+      ...agent.state,
       templates: templates.filter((t) => t.id !== id),
     });
   };

apps/app/src/components/template-library/template-chip.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { useAgent } from "@copilotkit/react-core/v2";
+
+/**
+ * Renders a dismissible chip inside the CopilotChat input pill when a template
+ * is attached (pending_template is set in agent state). Uses a portal to insert
+ * itself inside the textarea's column container.
+ */
+export function TemplateChip() {
+  const { agent } = useAgent();
+  const pending = agent.state?.pending_template as
+    | { id: string; name: string }
+    | null
+    | undefined;
+
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!pending?.name) {
+      // Clean up existing container
+      document.querySelector("[data-template-chip]")?.remove();
+      setContainer(null);
+      return;
+    }
+
+    const textarea = document.querySelector<HTMLElement>(
+      '[data-testid="copilot-chat-textarea"]'
+    );
+    // The textarea sits inside a column div inside the grid
+    const textareaColumn = textarea?.parentElement;
+    if (!textareaColumn) {
+      setContainer(null);
+      return;
+    }
+
+    // Reuse existing or create chip container
+    let el = textareaColumn.querySelector<HTMLElement>("[data-template-chip]");
+    if (!el) {
+      el = document.createElement("div");
+      el.setAttribute("data-template-chip", "");
+      el.style.cssText = "display: flex; padding: 4px 0 0 0;";
+      textareaColumn.insertBefore(el, textarea);
+    }
+    setContainer(el);
+  }, [pending?.name]);
+
+  const handleDismiss = useCallback(() => {
+    agent.setState({ ...agent.state, pending_template: null });
+  }, [agent]);
+
+  if (!pending?.name || !container) return null;
+
+  return createPortal(
+    <div
+      className="inline-flex items-center gap-1.5 pl-2 pr-1 py-0.5 rounded-md text-xs font-medium select-none"
+      style={{
+        background:
+          "linear-gradient(135deg, rgba(99,102,241,0.12), rgba(16,185,129,0.12))",
+        border: "1px solid rgba(99,102,241,0.22)",
+        color: "var(--copilot-kit-contrast-color, #1a1a1a)",
+        animation: "chipIn 0.15s ease-out",
+      }}
+    >
+      <svg
+        width="11"
+        height="11"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{ opacity: 0.55, flexShrink: 0 }}
+      >
+        <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
+      </svg>
+      <span className="max-w-[140px] truncate" style={{ lineHeight: "16px" }}>
+        {pending.name}
+      </span>
+      <button
+        onClick={handleDismiss}
+        className="p-0.5 rounded transition-colors duration-100 hover:bg-black/10 dark:hover:bg-white/10"
+        style={{ lineHeight: 0 }}
+        aria-label="Remove template"
+        type="button"
+      >
+        <svg
+          width="11"
+          height="11"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+      </button>
+    </div>,
+    container
+  );
+}