copilotkit__copilotkit/docs/components/react/subdocs-menu.tsx

"use client";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import {
  type HTMLAttributes,
  type ReactNode,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { PiGraph } from "react-icons/pi";
import { PlugIcon } from "lucide-react";

// sessionStorage utilities for managing user's connection type preference
// Using sessionStorage instead of localStorage so preference is tab-specific
// and doesn't persist across new tabs or browser sessions
const STORAGE_KEY = "copilotkit-nav-preference";
const DEFAULT_URL = "/";

function getStoredNavPreference(): string | null {
  if (typeof window === "undefined") return null;
  try {
    return sessionStorage.getItem(STORAGE_KEY);
  } catch {
    return null;
  }
}

function setStoredNavPreference(url: string): void {
  if (typeof window === "undefined") return;
  try {
    sessionStorage.setItem(STORAGE_KEY, url);
  } catch {
    // Ignore sessionStorage errors
  }
}

// Utility function to handle navigation scrolling
function handleNavigationScroll(fromPath: string, toPath: string) {
  // Check if this is an integration switch (different top-level path)
  const fromIntegration = fromPath.split('/')[1];
  const toIntegration = toPath.split('/')[1];
  const isIntegrationSwitch = fromIntegration !== toIntegration && toPath !== "/";

  // For both integration switches and internal navigation, scroll the main page to top
  setTimeout(() => {
    window.scrollTo({ top: 0, behavior: 'auto' });
  }, 100);
}

// Utility function to scroll sidebar to selected item
function scrollSidebarToSelectedItem(targetPath?: string) {
  setTimeout(() => {
    const normalize = (p?: string) => {
      if (!p) return '';
      try {
        // Ensure we compare pathname only, strip query/hash and trailing slash
        const url = p.startsWith('http') ? new URL(p) : new URL(p, window.location.origin);
        let path = url.pathname;
        if (path.length > 1 && path.endsWith('/')) path = path.slice(0, -1);
        return path;
      } catch {
        // Fallback for relative like ./generative-ui
        let path = p.split('?')[0].split('#')[0];
        if (path.startsWith('./')) path = path.slice(1);
        if (!path.startsWith('/')) {
          // Resolve against current path
          const base = window.location.pathname.replace(/\/$/, '');
          path = `${base}/${path}`.replace(/\/+/g, '/');
        }
        if (path.length > 1 && path.endsWith('/')) path = path.slice(0, -1);
        return path;
      }
    };

    const target = normalize(targetPath || window.location.pathname);

    // Gather all anchors and find best match
    const anchors = Array.from(document.querySelectorAll('a[href]')) as HTMLAnchorElement[];
    const candidates = anchors.filter(a => {
      const hrefNorm = normalize(a.href);
      return hrefNorm === target || hrefNorm === `${target}/` || hrefNorm.endsWith(target) || hrefNorm.endsWith(`${target}/`);
    });

    let selectedEl: HTMLElement | null = null;

    if (candidates.length > 0) {
      // Prefer the one closest to the left (likely the sidebar)
      candidates.sort((a, b) => a.getBoundingClientRect().left - b.getBoundingClientRect().left);
      selectedEl = candidates[0];
    }

    // Fallbacks based on aria-current or data attributes
    if (!selectedEl) {
      selectedEl = (document.querySelector('a[aria-current="page"]') || document.querySelector('[data-active="true"]')) as HTMLElement | null;
    }

    if (!selectedEl) return;

    // Find nearest scrollable ancestor
    function getScrollableAncestor(el: HTMLElement | null): HTMLElement | null {
      let node: HTMLElement | null = el;
      while (node && node !== document.body) {
        const style = window.getComputedStyle(node);
        const overflowY = style.overflowY;
        const canScroll = (overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight;
        if (canScroll) return node;
        node = node.parentElement as HTMLElement | null;
      }
      return null;
    }

    const container = getScrollableAncestor(selectedEl) || document.querySelector('aside, nav') as HTMLElement | null;

    if (container) {
      const containerRect = container.getBoundingClientRect();
      const elRect = selectedEl.getBoundingClientRect();

      const currentScrollTop = container.scrollTop;
      const offsetTop = (elRect.top - containerRect.top) + currentScrollTop;
      const targetScrollTop = Math.max(0, offsetTop - (container.clientHeight / 2) + (selectedEl.offsetHeight / 2));

      container.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
    } else if ('scrollIntoView' in selectedEl) {
      selectedEl.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
    }
  }, 350); // allow DOM/route transition
}

// Global navigation handler for use with any link
export function useNavigationScroll() {
  const pathname = usePathname();

  return (toPath: string) => {
    handleNavigationScroll(pathname, toPath);
    scrollSidebarToSelectedItem(toPath);
  };
}

// Custom Link component for MDX content with navigation scrolling
export function NavigationLink({
  href,
  children,
  className,
  ...props
}: {
  href: string;
  children: React.ReactNode;
  className?: string;
  [key: string]: any;
}) {
  const handleScroll = useNavigationScroll();
  const pathname = usePathname();

  // Convert absolute links that point within the same integration to relative
  const normalizeHref = (input: string): string => {
    if (!input || typeof input !== 'string') return input;
    if (!input.startsWith('/')) return input; // already relative or external

    const currentSplit = pathname.split('/').filter(x => x);
    const targetSplit = input.split('/').filter(x => x);
    while (currentSplit.length > 1 && targetSplit.length > 1 && currentSplit[0] === targetSplit[0]) {
      currentSplit.shift();
      targetSplit.shift();
    }

    let rel = '';
    for (let i = 0; i < currentSplit.length - 1; i++) {
      rel += '../';
    }
    if (rel === '') {
      rel = './';
    }
    rel += targetSplit.join('/');
    return rel;
  };

  const renderedHref = normalizeHref(href);

  return (
    <Link
      href={renderedHref}
      onClick={() => {
        // Use absolute path for scroll logic
        const absoluteTarget = href;
        handleScroll(absoluteTarget);
      }}
      className={className}
      {...props}
    >
      {children}
    </Link>
  );
}

export function isActive(
  url: string,
  pathname: string,
  nested = true,
  root = false
): boolean {
  // Exact match
  if (url === pathname) return true;

  // For nested matching
  if (nested) {
    // Special handling for root URL
    if (root && url === "/") {
      return pathname === "/";
    }

    // For non-root URLs, check if pathname starts with the URL followed by a slash
    // This ensures /direct-to-llm/guides/quickstart matches /direct-to-llm/guides/frontend-actions
    if (url !== "/" && pathname.startsWith(`${url}/`)) {
      return true;
    }

    // Special case for direct-to-llm: if the option URL is /direct-to-llm/guides/quickstart
    // and the current path is anywhere under /direct-to-llm/, consider it active
    if (url.includes('/direct-to-llm/') && pathname.startsWith('/direct-to-llm/')) {
      return true;
    }
  }

  return false;
}

export interface Option {
  /**
   * Redirect URL of the folder, usually the index page
   */
  url?: string;
  /**
   * External link URL
   */
  href?: string;
  icon?: ReactNode;
  title: ReactNode;
  description?: ReactNode;
  bgGradient: string;
  selectedStyle?: string;
  props?: HTMLAttributes<HTMLElement>;
}

export interface OptionDropdown {
  title: ReactNode;
  options: Option[];
}

export interface Separator {
  type: 'separator';
}

export interface Label {
  type: 'label';
  text: string;
}

function isOptionDropdown(
  item: Option | OptionDropdown | Separator | Label
): item is OptionDropdown {
  return "options" in item;
}

function isOption(item: Option | OptionDropdown | Separator | Label): item is Option {
  return !isOptionDropdown(item) && !isSeparator(item) && !isLabel(item);
}

function isSeparator(item: Option | OptionDropdown | Separator | Label): item is Separator {
  return (item as Separator).type === 'separator';
}

function isLabel(item: Option | OptionDropdown | Separator | Label): item is Label {
  return (item as Label).type === 'label';
}

export function SubdocsMenu({
  options,
  ...props
}: {
  options: (Option | OptionDropdown | Separator | Label)[];
} & HTMLAttributes<HTMLButtonElement>): React.ReactElement {
  const pathname = usePathname();

  // State for tracking user's explicit navigation preference
  const [storedPreference, setStoredPreference] = useState<string | null>(null);
  const [isInitialized, setIsInitialized] = useState(false);
  const [previousPath, setPreviousPath] = useState<string | null>(null);

  // Load stored preference on mount
  useEffect(() => {
    const preference = getStoredNavPreference();
    setStoredPreference(preference);
    setIsInitialized(true);
  }, []);

  // Handle navigation changes from external sources (browser back/forward) and any route change
  useEffect(() => {
    handleNavigationScroll(previousPath || pathname, pathname);
    scrollSidebarToSelectedItem(pathname);
    setPreviousPath(pathname);
  }, [pathname, previousPath]);

  const selected: Option | undefined = useMemo(() => {
    // Don't calculate selection until we've loaded the stored preference
    if (!isInitialized) return undefined;

    // Get all available options for easier searching
    const allOptions = options.filter(isOption) as Option[];
    const dropDowns = options.filter((item) => isOptionDropdown(item)) as OptionDropdown[];
    let dropdownOptions: Option[] = [];

    if (dropDowns.length > 0) {
      const dropDown = dropDowns[0];
      dropdownOptions = dropDown.options;
    }

    // PRIORITY 1: Check if current pathname matches any option (highest priority)
    const activeDropdownOption = dropdownOptions.find(
      (item) => isActive(item.url || DEFAULT_URL, pathname, true)
    );
    if (activeDropdownOption) {
      return activeDropdownOption;
    }

    const activeMainOption = allOptions.find(
      (item) => isActive(item.url || DEFAULT_URL, pathname, true, item.url === "/")
    );
    if (activeMainOption) {
      return activeMainOption;
    }

    // PRIORITY 2: If no current pathname match, check stored preference
    if (storedPreference) {
      // Check if stored preference matches any main option
      const storedOption = allOptions.find(option => option.url === storedPreference);
      if (storedOption) {
        return storedOption;
      }

      // Check if stored preference matches any dropdown option
      const storedDropdownOption = dropdownOptions.find(option => option.url === storedPreference);
      if (storedDropdownOption) {
        return storedDropdownOption;
      }
    }

    // Default fallback
    return undefined;
  }, [options, pathname, storedPreference, isInitialized]);

  // Handle explicit upper nav clicks to store preference
  const handleExplicitNavClick = useCallback((url: string) => {
    setStoredNavPreference(url);
    setStoredPreference(url);
    //closeOnRedirect.current = false;
  }, []);

  const onClick = useCallback(() => {
    // Navigation click handler
  }, []);

      return (
      <div className="flex flex-col gap-1">
        {options.map((item, index) => {
          if (isSeparator(item)) {
            return <hr key={`separator-${index}`} className="my-2 border-t border-primary/40" />;
          } else if (isLabel(item)) {
            return (
              <div key={`label-${index}`} className="px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider">
                {item.text}
              </div>
            );
          } else {
            return (
              <SubdocsMenuItem
                key={index}
                item={item}
                selected={selected}
                onClick={onClick}
                onExplicitClick={handleExplicitNavClick}
              />
            );
          }
        })}
        <hr className="mt-2 border-t border-primary/40" />
      </div>
    );
}

function SubdocsMenuItem({
  item,
  selected,
  onClick,
  onExplicitClick,
}: {
  item: Option | OptionDropdown;
  selected?: Option;
  onClick?: () => void;
  onExplicitClick?: (url: string) => void;
}) {
  const pathname = usePathname();

  if (isOption(item)) {
    return (
      <Link
        href={item.url ? item.url : item.href ?? ""}
        target={item.href ? "_blank" : undefined}
        rel={item.href ? "noopener noreferrer" : undefined}
        onClick={() => {
          if (item.href) return;
          handleNavigationScroll(pathname, item.url || DEFAULT_URL);
          scrollSidebarToSelectedItem(item.url || DEFAULT_URL); // Scroll sidebar to selected item
          onClick?.();
          onExplicitClick?.(item.url || DEFAULT_URL);
        }}
        {...item.props}
        className={cn(
          "px-1 py-0.5 rounded-xl flex flex-row gap-3 items-center cursor-pointer group opacity-60 hover:opacity-100",
          item.props?.className,
          selected === item && `opacity-100 bg-primary/10 text-primary`
        )}
        suppressHydrationWarning
      >
        <div
          className={cn(
            "rounded-sm p-1 pr-0 text-primary opacity-100",
          )}
        >
          {item.icon}
        </div>
        <div>{item.title}</div>
      </Link>
    );
  } else if (isOptionDropdown(item)) {
    return (
      <SubdocsMenuItemDropdown
        item={item}
        selected={selected}
        onClick={onClick}
        onExplicitClick={onExplicitClick}
      />
    );
  }
}

function SubdocsMenuItemDropdown({
  item,
  selected,
  onClick,
  onExplicitClick,
}: {
  item: OptionDropdown;
  selected?: Option;
  onClick?: () => void;
  onExplicitClick?: (url: string) => void;
}) {
  const router = useRouter();
  const selectRef = useRef(null);
  const pathname = usePathname();

  const selectedOption = item.options.find(
    (option) => option.url === selected?.url
  );

  // Check if we're on a page that should reset the dropdown
  const topLevelPages = ["/", "/reference"];
  const shouldResetDropdown = topLevelPages.some(page =>
    page === "/" ? pathname === "/" : pathname.startsWith(page)
  );

  const isSelected = selectedOption !== undefined && !shouldResetDropdown;

  return (
    <div className="w-full">
      <Select
        key={shouldResetDropdown ? "reset" : "normal"}
        onValueChange={(url) => {
          handleNavigationScroll(pathname, url);
          scrollSidebarToSelectedItem(url); // Scroll sidebar to selected item
          router.push(url);
          onClick?.();
          onExplicitClick?.(url);
          if (selectRef.current) {
            setTimeout(() => {
              (selectRef.current as any).blur();
            }, 10);
          }
        }}
        value={shouldResetDropdown ? "" : (selectedOption?.url || "")}
      >
        <SelectTrigger
          className={cn(
            "pl-1 py-0.5 h-auto flex gap-3 items-center w-full shadow-none rounded-xl cursor-pointer opacity-60 hover:opacity-100",
            !isSelected && "border-2",
            isSelected && "border-0 opacity-100 bg-primary/10 text-primary"
          )}
          style={!isSelected ? { borderColor: 'oklch(0.65 0.15 285)' } : undefined}
          ref={selectRef}
        >
          <SelectValue
            placeholder={
              <div className="flex items-center">
                <div className={cn("rounded-sm mr-2 p-1 pr-0 text-primary opacity-100", selectedOption?.props?.className)}>
                  {selectedOption?.icon || (
                    <PlugIcon
                      className="w-4 h-4"
                      style={{ fontSize: '16px', width: '16px', height: '16px' }}
                    />
                  )}
                </div>
                <div>{item.title}</div>
              </div>
            }
          />
        </SelectTrigger>
        <SelectContent className="p-1 rounded-2xl max-h-[800px] shadow-lg">
          {item.options.map((option, index) => (
            <SelectItem
              key={`${option.url}-${index}`}
              value={option.url ?? DEFAULT_URL}
              className={cn(
                "pl-1 py-0.5 my-0 border-0 h-auto flex gap-3 items-center w-full shadow-none rounded-xl cursor-pointer opacity-60 hover:opacity-100 hover:bg-secondary/10",
                option.props?.className
              )}
            >
              <div className="flex items-center">
                <div className={cn("rounded-sm p-1 mr-2 text-primary")}>
                  {option.icon}
                </div>
                <span>{option.title}</span>
              </div>
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}