ButtonGroupInputGroup() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ButtonGroupInputGroup() — ui Function Reference

Dependency Diagram

graph TD
  e23995c4_cbfa_42c7_6408_6b30a7269d19["ButtonGroupInputGroup()"]
  0779e9e9_46ad_e823_893b_e4dce92c2f63["button-group-input-group.tsx"]
  e23995c4_cbfa_42c7_6408_6b30a7269d19 -->|defined in| 0779e9e9_46ad_e823_893b_e4dce92c2f63
  style e23995c4_cbfa_42c7_6408_6b30a7269d19 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/(root)/components/button-group-input-group.tsx lines 19–57

export function ButtonGroupInputGroup() {
  const [voiceEnabled, setVoiceEnabled] = React.useState(false)
  return (
    <ButtonGroup className="[--radius:9999rem]">
      <ButtonGroup>
        <Button variant="outline" size="icon" aria-label="Add">
          <PlusIcon />
        </Button>
      </ButtonGroup>
      <ButtonGroup className="flex-1">
        <InputGroup>
          <InputGroupInput
            placeholder={
              voiceEnabled ? "Record and send audio..." : "Send a message..."
            }
            disabled={voiceEnabled}
          />
          <InputGroupAddon align="inline-end">
            <Tooltip>
              <TooltipTrigger asChild>
                <InputGroupButton
                  onClick={() => setVoiceEnabled(!voiceEnabled)}
                  data-active={voiceEnabled}
                  className="data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
                  aria-pressed={voiceEnabled}
                  size="icon-xs"
                  aria-label="Voice Mode"
                >
                  <AudioLinesIcon />
                </InputGroupButton>
              </TooltipTrigger>
              <TooltipContent>Voice Mode</TooltipContent>
            </Tooltip>
          </InputGroupAddon>
        </InputGroup>
      </ButtonGroup>
    </ButtonGroup>
  )
}