{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "suggestion",
  "title": "Suggestion",
  "author": "Jamie Thompson <jamie@jamiethompson.design> (https://jamiethompson.design)",
  "description": "Horizontally scrolling row of pill-shaped suggestion buttons (\"Summarize this repo\", \"Explain the auth flow\") shown under an empty conversation or above the prompt input to give users one-click starting prompts. Suggestions wraps children in a hidden-scrollbar scroll area; Suggestion is an outline button that calls onClick with its suggestion string. Pair with prompt-input to prefill the textarea. Composes button and scroll-area.",
  "dependencies": [
    "cn"
  ],
  "registryDependencies": [
    "button",
    "scroll-area"
  ],
  "files": [
    {
      "path": "registry/ai/suggestion.tsx",
      "content": "// Derived from Vercel AI Elements suggestion.tsx (Apache-2.0, Copyright 2023 Vercel, Inc.).\n// Modified for uifiles: ported from Radix UI to Base UI; dependencies point at @uifiles.\n\"use client\"\n\nimport { cn } from \"cn\"\nimport type { ComponentProps } from \"react\"\nimport { useCallback } from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\"\n\nexport type SuggestionsProps = ComponentProps<typeof ScrollArea>\n\nexport const Suggestions = ({\n  className,\n  children,\n  ...props\n}: SuggestionsProps) => (\n  <ScrollArea className=\"w-full overflow-x-auto whitespace-nowrap\" {...props}>\n    <div className={cn(\"flex w-max flex-nowrap items-center gap-2\", className)}>\n      {children}\n    </div>\n    <ScrollBar className=\"hidden\" orientation=\"horizontal\" />\n  </ScrollArea>\n)\n\nexport type SuggestionProps = Omit<ComponentProps<typeof Button>, \"onClick\"> & {\n  suggestion: string\n  onClick?: (suggestion: string) => void\n}\n\ntype SuggestionFocusEvent = Parameters<\n  NonNullable<ComponentProps<typeof Button>[\"onFocus\"]>\n>[0]\n\nexport const Suggestion = ({\n  suggestion,\n  onClick,\n  onFocus,\n  className,\n  variant = \"outline\",\n  size = \"sm\",\n  children,\n  ...props\n}: SuggestionProps) => {\n  const handleClick = useCallback(() => {\n    onClick?.(suggestion)\n  }, [onClick, suggestion])\n\n  // Sequential focus only scrolls a chip into view when it is fully hidden;\n  // one straddling the row's edge would keep focus half out of sight.\n  const handleFocus = useCallback(\n    (event: SuggestionFocusEvent) => {\n      onFocus?.(event)\n      event.currentTarget.scrollIntoView({\n        block: \"nearest\",\n        inline: \"nearest\",\n      })\n    },\n    [onFocus]\n  )\n\n  return (\n    <Button\n      className={cn(\"cursor-pointer rounded-full px-4\", className)}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      size={size}\n      type=\"button\"\n      variant={variant}\n      {...props}\n    >\n      {children || suggestion}\n    </Button>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ai/suggestion.tsx"
    }
  ],
  "docs": "Derived from Vercel AI Elements (Apache-2.0, Copyright 2023 Vercel, Inc.); ported to Base UI and maintained by uifiles. Built for the Base UI styles (base-nova): it composes the Base UI wrappers from components/ui and relies on their render prop and event signatures, so it does not work on Radix or React Aria styles. Same API as AI Elements. Built on the Base UI ScrollArea and Button wrappers; Suggestions accepts ScrollArea.Root props (Radix-only props such as `type` and `scrollHideDelay` no longer exist). Suggestion scrolls itself fully into view when it receives focus (browsers only do that for a chip that is entirely hidden, not one cut off at the row's edge) and still calls the `onFocus` you pass.",
  "categories": [
    "ai",
    "chat"
  ],
  "type": "registry:component"
}