chore: import upstream snapshot with attribution

2026-07-13 12:58:18 +08:00
commit 6d5d58c1a9
18293 changed files with 3502153 additions and 0 deletions
@@ -0,0 +1,40 @@
+import {
+  CopilotRuntime,
+  CopilotKitIntelligence,
+  createCopilotEndpoint,
+  InMemoryAgentRunner,
+} from "@copilotkit/runtime/v2";
+import { HttpAgent } from "@ag-ui/client";
+import { handle } from "hono/vercel";
+
+const runtime = new CopilotRuntime({
+  agents: {
+    default: new HttpAgent({
+      url: process.env.AGENT_URL || "http://localhost:8000/",
+    }),
+  },
+  // --- copilotkit:intelligence (remove this block to opt out) ---
+  ...(process.env.COPILOTKIT_LICENSE_TOKEN
+    ? {
+        intelligence: new CopilotKitIntelligence({
+          apiKey: process.env.INTELLIGENCE_API_KEY ?? "",
+          apiUrl: process.env.INTELLIGENCE_API_URL ?? "http://localhost:4201",
+          wsUrl:
+            process.env.INTELLIGENCE_GATEWAY_WS_URL ?? "ws://localhost:4401",
+        }),
+        identifyUser: () => ({ id: "demo-user", name: "Demo User" }),
+        licenseToken: process.env.COPILOTKIT_LICENSE_TOKEN,
+      }
+    : { runner: new InMemoryAgentRunner() }),
+  // --- /copilotkit:intelligence ---
+});
+
+const app = createCopilotEndpoint({
+  runtime,
+  basePath: "/api/copilotkit",
+});
+
+export const GET = handle(app);
+export const POST = handle(app);
+export const PATCH = handle(app);
+export const DELETE = handle(app);
@@ -0,0 +1,74 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+
+  /* Threads-panel theme-map — values pulled verbatim from CopilotKit's V2
+     design system (the same one this example's CopilotSidebar renders with;
+     see @copilotkit/react-core/src/v2/styles/globals.css). The drawer is a
+     left-side companion to that LIGHT sidebar, so it inherits the sidebar's
+     exact neutral-gray palette, charcoal "primary" (NOT a brand accent — the
+     sidebar's primary buttons are near-black), and 0.625rem radius scale.
+     This keeps the threads panel reading as one product with the chat. */
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  /* Match the V2 sidebar's radius scale exactly (--radius: 0.625rem there). */
+  --radius: 0.625rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Drawer typography follows this example's app font stack (Arial — this
+     example does not load a custom webfont; see layout.tsx + body below). */
+  --font-body: Arial, Helvetica, sans-serif;
+  --font-code: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+/* This example's CopilotSidebar (CopilotKit's V2 chat) stays LIGHT regardless of
+   the OS color scheme, so the threads panel is held light too — otherwise it
+   would clash with the sidebar it sits beside. The panel reads --foreground for
+   its titles/body text, which the dark-mode block above flips. The demo content
+   (CopilotSidebar + ProverbsCard) uses its own colors, not these tokens, so
+   re-pinning a stable light foreground/background on the threads layout wrapper
+   keeps the panel readable without affecting anything else. The confirm dialog
+   renders in a portal on <body>, so re-pin there as well. Values mirror the V2
+   light theme (oklch(0.145 0 0) / oklch(1 0 0)). */
+.threadsLayout,
+body > [role="presentation"] {
+  --foreground: oklch(0.145 0 0);
+  --background: oklch(1 0 0);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+body,
+html {
+  height: 100%;
+}
@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+
+import { CopilotKit } from "@copilotkit/react-core/v2";
+import "./globals.css";
+import "@copilotkit/react-core/v2/styles.css";
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      {/*
+        suppressHydrationWarning: browser extensions (e.g. Grammarly) inject
+        attributes like data-gr-ext-installed onto <body> before React hydrates,
+        which would otherwise surface as a hydration mismatch on first load.
+        This only relaxes the check for <body>'s own attributes (one level deep);
+        everything rendered inside <body> is still fully hydration-checked.
+      */}
+      <body className={"antialiased"} suppressHydrationWarning>
+        {/* Force REST transport so runtime-info + threads both hit the multi-route endpoint (auto-detect races the lazily-compiled API route in next dev). */}
+        <CopilotKit runtimeUrl="/api/copilotkit" useSingleEndpoint={false}>
+          {children}
+        </CopilotKit>
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,50 @@
+.layout {
+  display: grid;
+  /*
+    Reserve the desktop drawer's width (its default 320px) as a fixed first
+    column so the layout doesn't shift when the client-only <CopilotThreadsDrawer>
+    mounts after hydration. On mobile the drawer is an off-canvas overlay (out
+    of flow), so the column collapses and the content fills the width.
+  */
+  grid-template-columns: var(--cpk-drawer-reserved-width, 320px) minmax(0, 1fr);
+  /* Drawer sets --cpk-drawer-reserved-width to 0 on desktop-collapse, so the
+     reserved column collapses and the chat reclaims the space. */
+  transition: grid-template-columns 0.2s ease;
+  /*
+    Bound the single grid row to the viewport (minmax(0,1fr) lets it shrink
+    below content) so a long thread list scrolls INTERNALLY in the drawer with
+    the header pinned, instead of the drawer growing past the viewport and the
+    page scrolling the header away.
+  */
+  grid-template-rows: minmax(0, 1fr);
+  height: 100dvh;
+  width: 100%;
+  overflow: hidden;
+}
+
+.mainPanel {
+  /*
+    Pin the content to the SECOND track explicitly. The client-only drawer
+    renders nothing during SSR, so without this the content would flow into the
+    reserved first column at first paint and then jump once the drawer mounts.
+  */
+  grid-column: 2;
+  min-width: 0;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+/*
+  Mobile (≤768px): the drawer is an off-canvas overlay — collapse to a single
+  track. MUST come after the base rules (media queries add no specificity, so a
+  later same-specificity base rule would otherwise win and leak the two-column
+  desktop layout onto mobile).
+*/
+@media (max-width: 768px) {
+  .layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .mainPanel {
+    grid-column: auto;
+  }
+}
@@ -0,0 +1,134 @@
+"use client";
+
+import { ProverbsCard } from "@/components/proverbs";
+import { WeatherCard } from "@/components/weather";
+import { MoonCard } from "@/components/moon";
+import {
+  useAgent,
+  useFrontendTool,
+  useHumanInTheLoop,
+  CopilotSidebar,
+  CopilotChatConfigurationProvider,
+  CopilotThreadsDrawer,
+} from "@copilotkit/react-core/v2";
+import { useEffect, useState } from "react";
+import { z } from "zod";
+import type { AgentState } from "@/lib/types";
+
+import styles from "./page.module.css";
+
+export default function CopilotKitPage() {
+  const [themeColor, setThemeColor] = useState("#6366f1");
+
+  // 🪁 Frontend Actions: https://docs.copilotkit.ai/microsoft-agent-framework/frontend-actions
+  useFrontendTool({
+    name: "setThemeColor",
+    description: "Set the theme color of the application",
+    parameters: z.object({
+      themeColor: z
+        .string()
+        .describe("The theme color to set. Make sure to pick nice colors."),
+    }),
+    handler: async ({ themeColor }) => {
+      setThemeColor(themeColor);
+      return `Changing background to ${themeColor}`;
+    },
+  });
+
+  return (
+    /*
+      One UNCONTROLLED CopilotChatConfigurationProvider (no `threadId` prop) owns
+      the active thread for the whole surface. The SDK <CopilotThreadsDrawer> drives it
+      directly — selecting a row sets the active thread, "+ New" resets to a
+      fresh thread — with no host thread-state. The proverbs/weather/moon content
+      and the CopilotSidebar read the same active thread from the provider (the
+      content's `useAgent()` falls back to it). A *controlled* provider would
+      block "+ New" from resetting, so uncontrolled-inside-provider is required.
+      `.threadsLayout` (globals.css) pins the light theme vars the drawer +
+      sidebar inherit; the SDK drawer follows them by token inheritance.
+    */
+    <CopilotChatConfigurationProvider agentId="default">
+      <div className={`${styles.layout} threadsLayout`}>
+        {/* SDK threads drawer (replaces the hand-rolled fork). License-gated: the locked view's Upgrade CTA opens the Intelligence docs by default. */}
+        <CopilotThreadsDrawer agentId="default" />
+        <div className={styles.mainPanel}>
+          <main
+            style={
+              {
+                "--copilot-kit-primary-color": themeColor,
+              } as React.CSSProperties
+            }
+          >
+            <YourMainContent themeColor={themeColor} />
+            <CopilotSidebar
+              defaultOpen={true}
+              labels={{
+                modalHeaderTitle: "Popup Assistant",
+                welcomeMessageText:
+                  "👋 Hi, there! You're chatting with an agent.",
+              }}
+            />
+          </main>
+        </div>
+      </div>
+    </CopilotChatConfigurationProvider>
+  );
+}
+
+function YourMainContent({ themeColor }: { themeColor: string }) {
+  // 🪁 Shared State: https://docs.copilotkit.ai/microsoft-agent-framework/shared-state
+  // V2: useAgent returns the agent; read agent.state and write via agent.setState.
+  const { agent } = useAgent({ agentId: "default" });
+  const state = (agent.state as AgentState | undefined) ?? { proverbs: [] };
+  const setState = (next: AgentState) => agent.setState(next);
+
+  // Seed an initial proverb once (the V2 agent starts with empty state).
+  useEffect(() => {
+    if ((agent.state as AgentState | undefined)?.proverbs === undefined) {
+      agent.setState({
+        proverbs: [
+          "CopilotKit may be new, but it's the best thing since sliced bread.",
+        ],
+      });
+    }
+  }, [agent]);
+
+  //🪁 Generative UI: https://docs.copilotkit.ai/microsoft-agent-framework/generative-ui
+  useFrontendTool(
+    {
+      name: "get_weather",
+      description: "Get the weather for a given location.",
+      available: false,
+      parameters: z.object({
+        location: z.string(),
+      }),
+      render: ({ args }) => {
+        return <WeatherCard location={args.location} themeColor={themeColor} />;
+      },
+    },
+    [themeColor],
+  );
+
+  // 🪁 Human In the Loop: https://docs.copilotkit.ai/microsoft-agent-framework/human-in-the-loop/frontend-tool-based
+  useHumanInTheLoop(
+    {
+      name: "go_to_moon",
+      description: "Go to the moon on request.",
+      render: ({ respond, status }) => {
+        return (
+          <MoonCard themeColor={themeColor} status={status} respond={respond} />
+        );
+      },
+    },
+    [themeColor],
+  );
+
+  return (
+    <div
+      style={{ backgroundColor: themeColor }}
+      className="h-screen flex justify-center items-center flex-col transition-colors duration-300"
+    >
+      <ProverbsCard state={state} setState={setState} />
+    </div>
+  );
+}
@@ -0,0 +1,84 @@
+import { useState } from "react";
+
+export interface MoonCardProps {
+  themeColor: string;
+  status: "inProgress" | "executing" | "complete";
+  respond?: (response: string) => void;
+}
+
+export function MoonCard({ themeColor, status, respond }: MoonCardProps) {
+  const [decision, setDecision] = useState<"launched" | "aborted" | null>(null);
+
+  const handleLaunch = () => {
+    setDecision("launched");
+    respond?.("You have permission to go to the moon.");
+  };
+
+  const handleAbort = () => {
+    setDecision("aborted");
+    respond?.(
+      "You do not have permission to go to the moon. The user you're talking to rejected the request.",
+    );
+  };
+
+  return (
+    <div
+      style={{ backgroundColor: themeColor }}
+      className="rounded-2xl shadow-xl max-w-md w-full mt-6"
+    >
+      <div className="bg-white/20 backdrop-blur-md p-8 w-full rounded-2xl">
+        {/* Show decision or prompt */}
+        {decision === "launched" ? (
+          <div className="text-center">
+            <div className="text-7xl mb-4">🌕</div>
+            <h2 className="text-2xl font-bold text-white mb-2">
+              Mission Launched
+            </h2>
+            <p className="text-white/90">We made it to the moon!</p>
+          </div>
+        ) : decision === "aborted" ? (
+          <div className="text-center">
+            <div className="text-7xl mb-4">✋</div>
+            <h2 className="text-2xl font-bold text-white mb-2">
+              Mission Aborted
+            </h2>
+            <p className="text-white/90">Staying on Earth 🌍</p>
+          </div>
+        ) : (
+          <>
+            <div className="text-center mb-6">
+              <div className="text-7xl mb-4">🚀</div>
+              <h2 className="text-2xl font-bold text-white mb-2">
+                Ready for Launch?
+              </h2>
+              <p className="text-white/90">Mission to the Moon 🌕</p>
+            </div>
+
+            {/* Launch Buttons */}
+            {status === "executing" && (
+              <div className="flex gap-3">
+                <button
+                  onClick={handleLaunch}
+                  className="flex-1 px-6 py-4 rounded-xl bg-white text-black font-bold
+                    shadow-lg hover:shadow-xl transition-all
+                    hover:scale-105 active:scale-95"
+                >
+                  🚀 Launch!
+                </button>
+                <button
+                  onClick={handleAbort}
+                  className="flex-1 px-6 py-4 rounded-xl bg-black/20 text-white font-bold
+                    border-2 border-white/30 shadow-lg
+                    transition-all hover:scale-105 active:scale-95
+                    hover:bg-black/30"
+                >
+                  ✋ Abort
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,49 @@
+import { AgentState } from "@/lib/types";
+
+export interface ProverbsCardProps {
+  state: AgentState;
+  setState: (state: AgentState) => void;
+}
+
+export function ProverbsCard({ state, setState }: ProverbsCardProps) {
+  // `state` is undefined until the agent syncs (V2 useAgent), so guard it.
+  const proverbs = state?.proverbs ?? [];
+  return (
+    <div className="bg-white/20 backdrop-blur-md p-8 rounded-2xl shadow-xl max-w-2xl w-full">
+      <h1 className="text-4xl font-bold text-white mb-2 text-center">
+        Proverbs
+      </h1>
+      <p className="text-gray-200 text-center italic mb-6">
+        This is a demonstrative page, but it could be anything you want! 🪁
+      </p>
+      <hr className="border-white/20 my-6" />
+      <div className="flex flex-col gap-3">
+        {proverbs.map((proverb, index) => (
+          <div
+            key={index}
+            className="bg-white/15 p-4 rounded-xl text-white relative group hover:bg-white/20 transition-all"
+          >
+            <p className="pr-8">{proverb}</p>
+            <button
+              onClick={() =>
+                setState({
+                  ...state,
+                  proverbs: proverbs.filter((_, i) => i !== index),
+                })
+              }
+              className="absolute right-3 top-3 opacity-0 group-hover:opacity-100 transition-opacity 
+                bg-red-500 hover:bg-red-600 text-white rounded-full h-6 w-6 flex items-center justify-center"
+            >
+              ✕
+            </button>
+          </div>
+        ))}
+      </div>
+      {proverbs.length === 0 && (
+        <p className="text-center text-white/80 italic my-8">
+          No proverbs yet. Ask the assistant to add some!
+        </p>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,52 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90",
+        secondary:
+          "bg-[var(--secondary)] text-[var(--secondary-foreground)] hover:opacity-80",
+        outline:
+          "border border-[var(--border)] bg-[var(--background)] hover:bg-[var(--secondary)]",
+        ghost:
+          "hover:bg-[var(--secondary)] hover:text-[var(--secondary-foreground)]",
+        destructive:
+          "bg-[var(--destructive)] text-[var(--destructive-foreground)] hover:opacity-90",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-6",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button
+      className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
@@ -0,0 +1,85 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-[var(--radius)] border border-[var(--border)] bg-[var(--card)] text-[var(--card-foreground)] shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-[var(--muted-foreground)]", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+};
@@ -0,0 +1,69 @@
+// Simple sun icon for the weather card
+function SunIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className="w-14 h-14 text-yellow-200"
+    >
+      <circle cx="12" cy="12" r="5" />
+      <path
+        d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
+        strokeWidth="2"
+        stroke="currentColor"
+      />
+    </svg>
+  );
+}
+
+// Weather card component where the location and themeColor are based on what the agent
+// sets via tool calls.
+export function WeatherCard({
+  location,
+  themeColor,
+}: {
+  location?: string;
+  themeColor: string;
+}) {
+  return (
+    <div
+      style={{ backgroundColor: themeColor }}
+      className="rounded-xl shadow-xl mt-6 mb-4 max-w-md w-full"
+    >
+      <div className="bg-white/20 p-4 w-full">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-xl font-bold text-white capitalize">
+              {location}
+            </h3>
+            <p className="text-white">Current Weather</p>
+          </div>
+          <SunIcon />
+        </div>
+
+        <div className="mt-4 flex items-end justify-between">
+          <div className="text-3xl font-bold text-white">70°</div>
+          <div className="text-sm text-white">Clear skies</div>
+        </div>
+
+        <div className="mt-4 pt-4 border-t border-white">
+          <div className="grid grid-cols-3 gap-2 text-center">
+            <div>
+              <p className="text-white text-xs">Humidity</p>
+              <p className="text-white font-medium">45%</p>
+            </div>
+            <div>
+              <p className="text-white text-xs">Wind</p>
+              <p className="text-white font-medium">5 mph</p>
+            </div>
+            <div>
+              <p className="text-white text-xs">Feels Like</p>
+              <p className="text-white font-medium">72°</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,4 @@
+// State of the agent, make sure this aligns with your agent's state.
+export type AgentState = {
+  proverbs: string[];
+};
@@ -0,0 +1,7 @@
+import { clsx } from "clsx";
+import type { ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}