ActivateAgentDialog() — ui Function Reference

Architecture documentation for the ActivateAgentDialog() function in vercel.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ActivateAgentDialog() — ui Function Reference

Dependency Diagram

graph TD
  b90bf00b_69f3_a28b_1d22_313e2dd3950e["ActivateAgentDialog()"]
  2038c283_e37d_b58c_c8d2_c03efe5b269c["vercel.tsx"]
  b90bf00b_69f3_a28b_1d22_313e2dd3950e -->|defined in| 2038c283_e37d_b58c_c8d2_c03efe5b269c
  style b90bf00b_69f3_a28b_1d22_313e2dd3950e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/vercel.tsx lines 598–659

function ActivateAgentDialog() {
  return (
    <Example title="Activate Agent" className="items-center justify-center">
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="outline">Activate Agent</Button>
        </DialogTrigger>
        <DialogContent showCloseButton={false}>
          <DialogHeader>
            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>
            <DialogDescription>
              Your use is subject to Vercel&apos;s{" "}
              <a href="#">Public Beta Agreement</a> and{" "}
              <a href="#">AI Product Terms</a>.
            </DialogDescription>
          </DialogHeader>
          <div className="no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto">
            <ItemGroup className="gap-0 pr-2">
              {agentFeatures.map((feature) => (
                <Item key={feature.id} size="xs" className="px-0">
                  <ItemMedia variant="icon" className="self-start">
                    <IconPlaceholder
                      lucide="CheckCircle2Icon"
                      tabler="IconCircleCheckFilled"
                      hugeicons="CheckmarkCircle02Icon"
                      phosphor="CheckCircleIcon"
                      remixicon="RiCheckboxCircleLine"
                      className="fill-primary text-primary-foreground size-5"
                    />
                  </ItemMedia>
                  <ItemContent>
                    <ItemTitle className="text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium">
                      {feature.content}
                    </ItemTitle>
                  </ItemContent>
                </Item>
              ))}
            </ItemGroup>
            <Alert className="hidden sm:grid">
              <IconPlaceholder
                lucide="CircleDollarSignIcon"
                hugeicons="DollarCircleIcon"
                tabler="IconCoin"
                phosphor="CurrencyCircleDollarIcon"
                remixicon="RiMoneyDollarCircleLine"
              />
              <AlertDescription>
                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.
              </AlertDescription>
            </Alert>
          </div>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            <Button>Enable with $100 credits</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Example>
  )
}