ButtonGroupPopover() — ui Function Reference

Architecture documentation for the ButtonGroupPopover() function in button-group-popover.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ButtonGroupPopover() — ui Function Reference

Dependency Diagram

graph TD
  66044eb1_2fae_d207_3069_a42761bdf20c["ButtonGroupPopover()"]
  7d16561a_b95f_17c9_e503_180b6ee967e3["button-group-popover.tsx"]
  66044eb1_2fae_d207_3069_a42761bdf20c -->|defined in| 7d16561a_b95f_17c9_e503_180b6ee967e3
  style 66044eb1_2fae_d207_3069_a42761bdf20c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/(root)/components/button-group-popover.tsx lines 12–44

export function ButtonGroupPopover() {
  return (
    <ButtonGroup>
      <Button variant="outline" size="sm">
        <BotIcon /> Copilot
      </Button>
      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline" size="icon-sm" aria-label="Open Popover">
            <ChevronDownIcon />
          </Button>
        </PopoverTrigger>
        <PopoverContent align="end" className="gap-0 rounded-xl p-0 text-sm">
          <div className="px-4 py-3">
            <div className="text-sm font-medium">Agent Tasks</div>
          </div>
          <Separator />
          <div className="p-4 text-sm *:[p:not(:last-child)]:mb-2">
            <Textarea
              placeholder="Describe your task in natural language."
              className="mb-4 resize-none"
            />
            <p className="font-medium">Start a new task with Copilot</p>
            <p className="text-muted-foreground">
              Describe your task in natural language. Copilot will work in the
              background and open a pull request for your review.
            </p>
          </div>
        </PopoverContent>
      </Popover>
    </ButtonGroup>
  )
}