fix: use v2 sendMessage API for demo gallery prompts

Replace deprecated appendMessage/useCopilotChat with
sendMessage/useCopilotChatInternal to fix "isResultMessage is not a
function" error when clicking demo cards.

Author: GeneralJerel

apps/app/src/app/page.tsx

@@ -1,15 +1,25 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 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";
 
 export default function HomePage() {
   useGenerativeUIExamples();
   useExampleSuggestions();
 
+  const [demoDrawerOpen, setDemoDrawerOpen] = useState(false);
+  const { sendMessage } = useCopilotChatInternal();
+
+  const handleTryDemo = (demo: DemoItem) => {
+    setDemoDrawerOpen(false);
+    sendMessage({ id: crypto.randomUUID(), content: demo.prompt, role: "user" });
+  };
+
   // Widget bridge: handle messages from widget iframes
   useEffect(() => {
     const handler = (e: MessageEvent) => {
@@ -55,6 +65,25 @@ export default function HomePage() {
                 </p>
               </div>
               <div className="flex items-center gap-2">
+                <button
+                  onClick={() => setDemoDrawerOpen(true)}
+                  className="inline-flex items-center gap-1.5 px-3 py-2 rounded-full text-sm font-medium no-underline whitespace-nowrap transition-all duration-150 hover:-translate-y-px cursor-pointer"
+                  style={{
+                    color: "var(--text-secondary)",
+                    border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
+                    background: "var(--surface-primary, rgba(255,255,255,0.6))",
+                    fontFamily: "var(--font-family)",
+                  }}
+                  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>
+                  Demos
+                </button>
                 <a
                   href="https://github.com/CopilotKit/OpenGenerativeUI"
                   target="_blank"
@@ -84,6 +113,11 @@ export default function HomePage() {
         </div>
       </div>
 
+      <DemoGallery
+        open={demoDrawerOpen}
+        onClose={() => setDemoDrawerOpen(false)}
+        onTryDemo={handleTryDemo}
+      />
     </>
   );
 }