copilotkit__copilotkit/docs/components/react/link-to-copilot-cloud.tsx

"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import posthog from "posthog-js";
import { CloudIcon } from "lucide-react";

export function LinkToCopilotCloud({
  className,
  subPath,
  asButton = true,
  children,
}: {
  className?: string;
  subPath?: string;
  asButton?: boolean;
  children?: React.ReactNode;
}) {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  // Build base URL without PostHog session ID to avoid hydration issues
  const baseUrl = new URL(`https://go.copilotkit.ai/copilot-cloud-button-docs`);
  baseUrl.searchParams.set("ref", "docs");

  if (subPath) {
    baseUrl.pathname += subPath;
  }

  // Only add PostHog session ID on client side after hydration
  const [href, setHref] = useState(baseUrl.toString());

  useEffect(() => {
    if (isClient) {
      const sessionId = posthog.get_session_id();
      if (sessionId) {
        const url = new URL(baseUrl.toString());
        url.searchParams.set("session_id", sessionId);
        setHref(url.toString());
      }
    }
  }, [isClient, baseUrl.toString()]);

  let cn = "";

  if (asButton) {
    cn =
      "text-indigo-800 dark:text-indigo-300 ring-1 ring-indigo-200 dark:ring-indigo-900 text-sm items-center bg-gradient-to-r from-indigo-200/50 to-purple-200/80 dark:from-indigo-900/40 dark:to-purple-900/50 flex p-3 px-4 no-underline whitespace-nowrap";
    cn +=
      " transition-all duration-100 hover:ring-2 hover:ring-indigo-400 hover:dark:text-indigo-200 rounded-lg";
  } else {
    cn =
      "_text-primary-600 decoration-from-font underline [text-underline-position:from-font]";
  }

  if (className) {
    cn += ` ${className}`;
  }
  return (
    <Link href={href} target="_blank" className={cn} suppressHydrationWarning>
      {asButton ? <CloudIcon className="w-5 h-5 mr-2" /> : null}
      {children ? children : "Copilot Cloud"}
    </Link>
  );
}