"use client"; import { useEffect, useState, useCallback, useRef, type ReactElement, } from "react"; import { Copy, Check, Terminal, ChevronDown } from "lucide-react"; import { COPY_FEEDBACK_DURATION_MS, PROMPT_INSTALL_COLLAPSE_LINE_THRESHOLD, PROMPT_INSTALL_MAX_HEIGHT_PX, } from "@/constants"; import { cn } from "@/utils/cn"; import { IconNextjs } from "./icons/icon-nextjs"; import { IconVite } from "./icons/icon-vite"; import { IconTanstack } from "./icons/icon-tanstack"; import { detectMobile } from "@/utils/detect-mobile"; import { hotkeyToString } from "@/utils/hotkey-to-string"; import type { RecordedHotkey } from "./grab-element-button"; import { useHotkey } from "./hotkey-context"; import { highlightCode } from "../lib/shiki"; interface InlineCodeProps { children: React.ReactNode; } const InlineCode = ({ children }: InlineCodeProps): ReactElement => (


    {children}

); InlineCode.displayName = "InlineCode"; interface InstallTab { id: string; label: string; description: React.ReactNode; variant: "code" | "command" | "prompt"; lang?: "tsx" | "bash"; getCode: (hotkey: RecordedHotkey | null) => string; getChangedLines: (hotkey: RecordedHotkey | null) => number[]; } const formatInitOptions = (hotkey: RecordedHotkey): string => { return `{ activationKey: "${hotkeyToString(hotkey)}" }`; }; const createPromptInstallInstructions = ( hotkey: RecordedHotkey | null, ): string => { const activationKeyInstruction = hotkey ? `Set the activation key to "${hotkeyToString(hotkey)}". For Next.js Script tags, set data-options='{"activationKey":"${hotkeyToString( hotkey, )}"}'. For Vite & TanStack Start, use react-grab/core and call init(${formatInitOptions( hotkey, )}).` : "Keep the default activation key."; return `Set up React Grab in this workspace. If this is a monorepo, ask me which package to install it in. 1. Find the React app package in this workspace. 2. If this is a monorepo, ask me which package to configure before making changes. 3. Detect the package manager from lockfiles and install react-grab@latest in the selected package. 4. Detect the framework and apply manual integration: - Next.js App Router: in app/layout.tsx, add next/script and include a development-only Script tag with src="//unpkg.com/react-grab/dist/index.global.js", crossOrigin="anonymous", and strategy="beforeInteractive". - Next.js Pages Router: in pages/_document.tsx, add the same development-only Script tag inside . - Vite: in index.html , add . - TanStack Start: in src/routes/__root.tsx, inside useEffect and an import.meta.env.DEV check, run void import("react-grab"). 5. ${activationKeyInstruction} 6. Keep all React Grab setup development-only. 7. Show me the edited files and the exact install command you ran. 8. If the setup does not work, suggest running the React Grab CLI: \`npx -y grab@latest init\`.`; }; const installTabsData: InstallTab[] = [ { id: "cli", label: "CLI", description: "Run this command at your project root", variant: "command", lang: "bash", getCode: (hotkey) => { if (hotkey) { return `npx -y grab@latest init --key "${hotkeyToString(hotkey)}"`; } return `npx -y grab@latest init`; }, getChangedLines: () => [], }, { id: "prompt", label: "Prompt", description: "Paste this full setup prompt in your coding agent's chat", variant: "prompt", getCode: (hotkey) => createPromptInstallInstructions(hotkey), getChangedLines: () => [], }, { id: "next-app", label: "Next.js", description: ( <> Add this inside of your app/layout.tsx ), variant: "code", getCode: (hotkey) => { const dataOptionsAttr = hotkey ? `\n data-options='{"activationKey":"${hotkeyToString( hotkey, )}"}'` : ""; return `import Script from "next/script"; export default function RootLayout({ children }) { return ( {process.env.NODE_ENV === "development" && (

`; } return `

`; }, getChangedLines: (hotkey) => hotkey ? [4, 5, 6, 7, 8, 9, 10, 11] : [4, 5, 6, 7, 8, 9, 10], }, { id: "tanstack", label: "TanStack Start", description: ( <> Add this inside your src/routes/__root.tsx ), variant: "code", getCode: (hotkey) => { if (hotkey) { return `import { useEffect } from "react"; import { Outlet, createRootRoute } from "@tanstack/react-router"; export const Route = createRootRoute({ component: RootComponent, }); function RootComponent() { useEffect(() => { if (import.meta.env.DEV) { import("react-grab/core").then(({ init }) => { init(${formatInitOptions(hotkey)}); }); } }, []); return ; }`; } return `import { useEffect } from "react"; import { Outlet, createRootRoute } from "@tanstack/react-router"; export const Route = createRootRoute({ component: RootComponent, }); function RootComponent() { useEffect(() => { if (import.meta.env.DEV) { void import("react-grab"); } }, []); return ; }`; }, getChangedLines: (hotkey) => hotkey ? [9, 10, 11, 12, 13, 14, 15] : [9, 10, 11, 12, 13], }, ]; const HEADING_TEXT_BY_VARIANT: Record = { prompt: "Copy this to your agent:", command: "Run this command to get started:", code: "It takes 1 script tag to get started:", }; interface InstallTabsProps { showHeading?: boolean; showAgentNote?: boolean; } export const InstallTabs = ({ showHeading = false, showAgentNote = false, }: InstallTabsProps): ReactElement | null => { const { customHotkey } = useHotkey(); const [activeTabId, setActiveTabId] = useState( installTabsData[0]?.id, ); const [didCopy, setDidCopy] = useState(false); const [isPromptExpanded, setIsPromptExpanded] = useState(false); const [promptExpandedMaxHeightPx, setPromptExpandedMaxHeightPx] = useState( PROMPT_INSTALL_MAX_HEIGHT_PX, ); const [highlightedCodes, setHighlightedCodes] = useState< Record >({}); const [isMobile, setIsMobile] = useState(false); const promptContentContainerRef = useRef(null); const activeTab = installTabsData.find((tab) => tab.id === activeTabId) ?? installTabsData[0]; const activeCode = activeTab.getCode(customHotkey ?? null); const activeChangedLines = activeTab.getChangedLines(customHotkey ?? null); const isPromptTab = activeTab.variant === "prompt"; const shouldShowPromptExpandButton = isPromptTab && activeCode.split("\n").length > PROMPT_INSTALL_COLLAPSE_LINE_THRESHOLD; useEffect(() => { // eslint-disable-next-line react-hooks/set-state-in-effect setIsMobile(detectMobile()); }, []); const updateHighlightedCodes = useCallback( async (hotkey: RecordedHotkey | null) => { const results = await Promise.all( installTabsData.map(async (tab) => ({ id: tab.id, html: tab.variant === "prompt" ? "" : await highlightCode({ code: tab.getCode(hotkey), lang: tab.lang ?? "tsx", changedLines: tab.getChangedLines(hotkey), }), })), ); const codes: Record = {}; results.forEach((result) => { codes[result.id] = result.html; }); setHighlightedCodes(codes); }, [], ); useEffect(() => { // eslint-disable-next-line react-hooks/set-state-in-effect updateHighlightedCodes(customHotkey ?? null); }, [customHotkey, updateHighlightedCodes]); useEffect(() => { setIsPromptExpanded(false); }, [activeTab.id, activeCode]); useEffect(() => { if (!isPromptTab || !promptContentContainerRef.current) { return; } const promptContentContainerElement = promptContentContainerRef.current; const updatePromptExpandedMaxHeightPx = () => { setPromptExpandedMaxHeightPx(promptContentContainerElement.scrollHeight); }; updatePromptExpandedMaxHeightPx(); const resizeObserver = new ResizeObserver(updatePromptExpandedMaxHeightPx); resizeObserver.observe(promptContentContainerElement); return () => { resizeObserver.disconnect(); }; }, [activeCode, isPromptTab]); const handleCopyClick = () => { if (typeof navigator === "undefined" || !navigator.clipboard) return; const textToCopy = activeChangedLines.length > 0 ? activeCode .split("\n") .filter((_, index) => activeChangedLines.includes(index + 1)) .join("\n") : activeCode; navigator.clipboard .writeText(textToCopy) .then(() => { setDidCopy(true); setTimeout(() => setDidCopy(false), COPY_FEEDBACK_DURATION_MS); }) .catch(() => {}); }; const highlightedCode = highlightedCodes[activeTab.id]; if (isMobile) { return null; } const headingText = HEADING_TEXT_BY_VARIANT[activeTab.variant]; return (

{showHeading && ( {headingText} {activeTab.variant !== "code" && ( )} )}

{installTabsData.map((tab) => { const isActive = tab.id === activeTab.id; return ( ); })}

{activeTab.variant !== "code" ? ( activeTab.variant === "prompt" ? (

{activeCode}

{shouldShowPromptExpandButton && !isPromptExpanded && (

)} {shouldShowPromptExpandButton && ( )}

) : ( ) ) : (

{highlightedCode ? (

) : (

                    {activeCode}

)}

{activeTab.variant === "code" && ( {activeTab.description} )} {showAgentNote && activeTab.variant === "code" && ( Want to connect directly to your coding agent?{" "} See our agent connection guide )}

); }; InstallTabs.displayName = "InstallTabs";