Initial commit

templates/nextjs/app-page.tsx

@@ -0,0 +1,128 @@
+/**
+ * Next.js App Router - Page Component with C1Chat
+ *
+ * File: app/page.tsx
+ *
+ * Simplest possible integration - just drop in C1Chat and point to API route.
+ *
+ * Features:
+ * - Pre-built C1Chat component
+ * - Automatic state management
+ * - Thread support (optional)
+ * - Responsive design
+ */
+
+"use client";
+
+import { C1Chat } from "@thesysai/genui-sdk";
+import { themePresets } from "@crayonai/react-ui";
+import "@crayonai/react-ui/styles/index.css";
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="container mx-auto p-4">
+        <C1Chat
+          apiUrl="/api/chat"
+          agentName="AI Assistant"
+          logoUrl="https://placehold.co/100x100/3b82f6/ffffff?text=AI"
+          theme={themePresets.default}
+        />
+      </div>
+    </main>
+  );
+}
+
+/**
+ * Alternative: With custom theme and dark mode
+ *
+ * import { useState, useEffect } from "react";
+ *
+ * function useSystemTheme() {
+ *   const [theme, setTheme] = useState<"light" | "dark">("light");
+ *
+ *   useEffect(() => {
+ *     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+ *     setTheme(mediaQuery.matches ? "dark" : "light");
+ *
+ *     const handler = (e: MediaQueryListEvent) => {
+ *       setTheme(e.matches ? "dark" : "light");
+ *     };
+ *
+ *     mediaQuery.addEventListener("change", handler);
+ *     return () => mediaQuery.removeEventListener("change", handler);
+ *   }, []);
+ *
+ *   return theme;
+ * }
+ *
+ * export default function Home() {
+ *   const systemTheme = useSystemTheme();
+ *
+ *   return (
+ *     <C1Chat
+ *       apiUrl="/api/chat"
+ *       theme={{ ...themePresets.candy, mode: systemTheme }}
+ *     />
+ *   );
+ * }
+ */
+
+/**
+ * Alternative: With thread management
+ *
+ * import {
+ *   useThreadListManager,
+ *   useThreadManager,
+ * } from "@thesysai/genui-sdk";
+ *
+ * export default function Home() {
+ *   const threadListManager = useThreadListManager({
+ *     fetchThreadList: async () => {
+ *       const res = await fetch("/api/threads");
+ *       return res.json();
+ *     },
+ *     deleteThread: async (threadId: string) => {
+ *       await fetch(`/api/threads/${threadId}`, { method: "DELETE" });
+ *     },
+ *     updateThread: async (thread) => {
+ *       const res = await fetch(`/api/threads/${thread.threadId}`, {
+ *         method: "PUT",
+ *         body: JSON.stringify(thread),
+ *       });
+ *       return res.json();
+ *     },
+ *     createThread: async (firstMessage) => {
+ *       const res = await fetch("/api/threads", {
+ *         method: "POST",
+ *         body: JSON.stringify({ title: firstMessage.message }),
+ *       });
+ *       return res.json();
+ *     },
+ *     onSwitchToNew: () => {
+ *       window.history.replaceState(null, "", "/");
+ *     },
+ *     onSelectThread: (threadId) => {
+ *       window.history.replaceState(null, "", `/?threadId=${threadId}`);
+ *     },
+ *   });
+ *
+ *   const threadManager = useThreadManager({
+ *     threadListManager,
+ *     loadThread: async (threadId) => {
+ *       const res = await fetch(`/api/threads/${threadId}/messages`);
+ *       return res.json();
+ *     },
+ *     onUpdateMessage: async ({ message }) => {
+ *       // Handle message updates
+ *     },
+ *   });
+ *
+ *   return (
+ *     <C1Chat
+ *       threadManager={threadManager}
+ *       threadListManager={threadListManager}
+ *     />
+ *   );
+ * }
+ */