fix: use public v2 API, add Escape key support, extract shared GridIcon

Replace internal useCopilotChatInternal hook with public useAgent +
useCopilotKit from @copilotkit/react-core/v2. Add Escape key handler
to close the demo gallery drawer. Extract duplicated grid SVG into a
shared GridIcon component.

Author: GeneralJerel

apps/app/src/app/page.tsx

@@ -5,19 +5,21 @@ import { ExampleLayout } from "@/components/example-layout";
 import { useGenerativeUIExamples, useExampleSuggestions } from "@/hooks";
 import { ExplainerCardsPortal } from "@/components/explainer-cards";
 import { DemoGallery, type DemoItem } from "@/components/demo-gallery";
-import { CopilotChat } from "@copilotkit/react-core/v2";
-import { useCopilotChatInternal } from "@copilotkit/react-core";
+import { GridIcon } from "@/components/demo-gallery/grid-icon";
+import { CopilotChat, useAgent, useCopilotKit } from "@copilotkit/react-core/v2";
 
 export default function HomePage() {
   useGenerativeUIExamples();
   useExampleSuggestions();
 
   const [demoDrawerOpen, setDemoDrawerOpen] = useState(false);
-  const { sendMessage } = useCopilotChatInternal();
+  const { agent } = useAgent();
+  const { copilotkit } = useCopilotKit();
 
   const handleTryDemo = (demo: DemoItem) => {
     setDemoDrawerOpen(false);
-    sendMessage({ id: crypto.randomUUID(), content: demo.prompt, role: "user" });
+    agent.addMessage({ id: crypto.randomUUID(), content: demo.prompt, role: "user" });
+    copilotkit.runAgent({ agent });
   };
 
   // Widget bridge: handle messages from widget iframes
@@ -76,12 +78,7 @@ export default function HomePage() {
                   }}
                   title="Open Demo Gallery"
                 >
-                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <rect width="7" height="7" x="3" y="3" rx="1" />
-                    <rect width="7" height="7" x="14" y="3" rx="1" />
-                    <rect width="7" height="7" x="14" y="14" rx="1" />
-                    <rect width="7" height="7" x="3" y="14" rx="1" />
-                  </svg>
+                  <GridIcon size={15} />
                   Demos
                 </button>
                 <a

apps/app/src/components/demo-gallery/grid-icon.tsx

@@ -0,0 +1,27 @@
+import type { CSSProperties } from "react";
+
+interface GridIconProps {
+  size?: number;
+  style?: CSSProperties;
+}
+
+export function GridIcon({ size = 18, style }: GridIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={style}
+    >
+      <rect width="7" height="7" x="3" y="3" rx="1" />
+      <rect width="7" height="7" x="14" y="3" rx="1" />
+      <rect width="7" height="7" x="14" y="14" rx="1" />
+      <rect width="7" height="7" x="3" y="14" rx="1" />
+    </svg>
+  );
+}

apps/app/src/components/demo-gallery/index.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { DEMO_EXAMPLES, type DemoCategory, type DemoItem } from "./demo-data";
 import { DemoCard } from "./demo-card";
 import { CategoryFilter } from "./category-filter";
+import { GridIcon } from "./grid-icon";
 
 export type { DemoItem } from "./demo-data";
 
@@ -21,6 +22,15 @@ export function DemoGallery({ open, onClose, onTryDemo }: DemoGalleryProps) {
     ? DEMO_EXAMPLES.filter((d) => d.category === selectedCategory)
     : DEMO_EXAMPLES;
 
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+
   return (
     <>
       {/* Backdrop */}
@@ -53,22 +63,7 @@ export function DemoGallery({ open, onClose, onTryDemo }: DemoGalleryProps) {
           }}
         >
           <div className="flex items-center gap-2">
-            <svg
-              width="18"
-              height="18"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              style={{ color: "var(--text-secondary, #666)" }}
-            >
-              <rect width="7" height="7" x="3" y="3" rx="1" />
-              <rect width="7" height="7" x="14" y="3" rx="1" />
-              <rect width="7" height="7" x="14" y="14" rx="1" />
-              <rect width="7" height="7" x="3" y="14" rx="1" />
-            </svg>
+            <GridIcon size={18} style={{ color: "var(--text-secondary, #666)" }} />
             <h2
               className="text-base font-semibold"
               style={{ color: "var(--text-primary, #1a1a1a)" }}