129 lines
3.3 KiB
TypeScript
129 lines
3.3 KiB
TypeScript
/**
|
|
* 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}
|
|
* />
|
|
* );
|
|
* }
|
|
*/
|