{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-suggestions",
  "type": "registry:component",
  "title": "Follow-up suggestions",
  "description": "Prompt pills that stagger in after a reply and invite the next turn.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/suggestions.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { paper } from \"./surfaces\";\n\nexport interface SuggestionsProps extends Omit<\n  ComponentProps<\"div\">,\n  \"children\"\n> {\n  suggestions: readonly string[];\n  selectedSuggestion: string | null;\n  cycle: number;\n  onSuggestion: (suggestion: string) => void;\n  variant?: \"pills\" | \"list\";\n}\n\nexport function Suggestions({\n  suggestions,\n  selectedSuggestion,\n  cycle,\n  onSuggestion,\n  variant = \"pills\",\n  className,\n  ...props\n}: SuggestionsProps) {\n  const list = variant === \"list\";\n\n  return (\n    <div\n      data-slot=\"suggestions\"\n      key={cycle}\n      className={cn(\n        list\n          ? \"flex w-full max-w-sm flex-col gap-2\"\n          : \"flex max-w-md flex-wrap justify-center gap-2\",\n        className,\n      )}\n\n      {...props}\n    >\n      {suggestions.map((suggestion, index) => (\n        <button\n          key={suggestion}\n          type=\"button\"\n          aria-pressed={selectedSuggestion === suggestion}\n          onClick={() => onSuggestion(suggestion)}\n          className={cn(\n            paper,\n            \"fade-in slide-in-from-bottom-2 animate-in fill-mode-both flex cursor-pointer items-center text-[13px] transition-transform duration-300 hover:-translate-y-px active:scale-[0.96] motion-reduce:animate-none\",\n            list\n              ? \"w-full rounded-2xl px-4 py-2.5 text-start\"\n              : \"rounded-full px-4 py-2\",\n            selectedSuggestion === suggestion &&\n              \"bg-foreground text-background\",\n          )}\n          style={{ animationDelay: `${index * 70}ms` }}\n        >\n          {suggestion}\n        </button>\n      ))}\n    </div>\n  );\n}\n"
    }
  ]
}