feat(templates): improve apply flow with ID-based lookup and chat submission

Submit template apply through CopilotChat textarea so components render
properly. Include template ID in the message for reliable lookup.
Update apply_template tool to support both name and ID-based lookup.
Improve agent prompt to copy original HTML and replace data values.

Author: breadoncee

apps/agent/main.py

@@ -51,15 +51,20 @@
 
         ## UI Templates
 
-        Users can save generated UIs as reusable templates and apply them later:
-
-        - When a user asks to save a widget as a template, call `save_template` with the
-          widget's HTML, a short name, description, and a description of the data shape.
-        - When a user asks to apply a template, first call `list_templates` to find the
-          right one, then call `apply_template` to get its HTML. Adapt the HTML with the
-          user's new data and render via `widgetRenderer`.
-        - When a user asks to see their templates, call `list_templates`.
-        - When a user asks to delete a template, call `delete_template`.
+        Users can save generated UIs as reusable templates and apply them later.
+        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
+        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
+        3. Render the modified HTML using `widgetRenderer`
+
+        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.
+        This preserves the exact layout and styling of the original template.
+        For bar/pie chart templates, use `barChart` or `pieChart` component instead.
     """,
 )
 

apps/agent/src/templates.py

@@ -77,24 +77,46 @@ def list_templates(runtime: ToolRuntime):
 
 
 @tool
-def apply_template(template_id: str, runtime: ToolRuntime):
+def apply_template(name: str = "", template_id: str = "", runtime: ToolRuntime = None):
     """
     Retrieve a saved template's HTML so you can adapt it with new data.
-    After calling this, modify the HTML to fit the user's new data and render it via widgetRenderer.
+    After calling this, generate a NEW widget in the same style and render via widgetRenderer.
+
+    You can look up by name or ID. If both are provided, ID takes priority.
+    When multiple templates share the same name, returns the most recently created one.
 
     Args:
-        template_id: The ID of the template to apply
+        name: The name of the template to apply (e.g. "Invoice")
+        template_id: The ID of the template to apply (optional)
     """
     templates = runtime.state.get("templates", [])
-    for t in templates:
-        if t["id"] == template_id:
+
+    # Look up by ID first
+    if template_id:
+        for t in templates:
+            if t["id"] == template_id:
+                return {
+                    "name": t["name"],
+                    "description": t["description"],
+                    "html": t["html"],
+                    "data_description": t.get("data_description", ""),
+                }
+        return {"error": f"Template with id '{template_id}' not found"}
+
+    # Look up by name (most recent match)
+    if name:
+        matches = [t for t in templates if t["name"].lower() == name.lower()]
+        if matches:
+            t = max(matches, key=lambda x: x.get("created_at", ""))
             return {
                 "name": t["name"],
                 "description": t["description"],
                 "html": t["html"],
-                "data_description": t["data_description"],
+                "data_description": t.get("data_description", ""),
             }
-    return {"error": f"Template with id '{template_id}' not found"}
+        return {"error": f"No template named '{name}' found"}
+
+    return {"error": "Provide either a name or template_id"}
 
 
 @tool

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

@@ -1,13 +1,31 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { useAgent } from "@copilotkit/react-core/v2";
 import { TemplateCard } from "./template-card";
 
+/** Submit a message through the CopilotChat textarea so it goes through the full rendering pipeline */
+function submitChatPrompt(text: string) {
+  const textarea = document.querySelector<HTMLTextAreaElement>(
+    '[data-testid="copilot-chat-textarea"]'
+  );
+  if (!textarea) return;
+
+  const setter = Object.getOwnPropertyDescriptor(
+    window.HTMLTextAreaElement.prototype, "value"
+  )?.set;
+  setter?.call(textarea, text);
+  textarea.dispatchEvent(new Event("input", { bubbles: true }));
+
+  setTimeout(() => {
+    const form = textarea.closest("form");
+    if (form) form.requestSubmit();
+  }, 150);
+}
+
 interface TemplateLibraryProps {
   open: boolean;
   onClose: () => void;
-  onSendPrompt: (text: string) => void;
 }
 
 interface Template {
@@ -16,10 +34,11 @@ interface Template {
   description: string;
   html: string;
   data_description: string;
+  component_type?: string;
   version: number;
 }
 
-export function TemplateLibrary({ open, onClose, onSendPrompt }: TemplateLibraryProps) {
+export function TemplateLibrary({ open, onClose }: TemplateLibraryProps) {
   const { agent } = useAgent();
   const templates: Template[] = agent.state?.templates || [];
 
@@ -35,21 +54,26 @@ export function TemplateLibrary({ open, onClose, onSendPrompt }: TemplateLibrary
     }
   };
 
-  const handleApplyConfirm = () => {
+  const handleApplyConfirm = useCallback(() => {
     if (!applyingTemplate) return;
     const dataDesc = applyData.trim();
     if (!dataDesc) return;
 
-    // Send the template HTML directly in the prompt so the agent doesn't
-    // need to look it up from state (frontend setState may not sync to backend)
-    onSendPrompt(
-      `Use this saved template called "${applyingTemplate.name}" as a base layout and adapt it for the following new data: ${dataDesc}\n\n` +
-      `Here is the template HTML to adapt:\n\n${applyingTemplate.html}`
-    );
+    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}`;
+
+    submitChatPrompt(message);
+
     setApplyingTemplate(null);
     setApplyData("");
     onClose();
-  };
+  }, [applyingTemplate, applyData, onClose]);
 
   const handleApplyCancel = () => {
     setApplyingTemplate(null);
@@ -153,6 +177,8 @@ export function TemplateLibrary({ open, onClose, onSendPrompt }: TemplateLibrary
                   name={t.name}
                   description={t.description}
                   html={t.html}
+                  componentType={(t as unknown as Record<string, unknown>).component_type as string | undefined}
+                  componentData={(t as unknown as Record<string, unknown>).component_data as Record<string, unknown> | undefined}
                   dataDescription={t.data_description}
                   version={t.version}
                   onApply={handleApplyClick}