{
  "title": "Chat Suggestions",
  "description": "Displays a horizontal list of clickable follow-up queries or suggested actions",
  "name": "native-ai-chat-suggestions",
  "dependencies": [],
  "registryDependencies": [
    "button"
  ],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/native-ai/chat-suggestions/index.tsx",
      "type": "registry:ui",
      "content": "import { useEffect, useState } from \"react\";\n\nimport { Sparkles, X } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils.ts\";\n\nimport { Button } from \"@/components/ui/button\";\n\nexport interface ChatSuggestionsProps {\n    suggestions?: string[];\n    onSelect: (suggestion: string) => void;\n    onClose?: () => void;\n    isLoading?: boolean;\n    className?: string;\n}\n\nexport const ChatSuggestions = ({ suggestions, onSelect, onClose, isLoading, className }: ChatSuggestionsProps) => {\n    const [isDismissed, setIsDismissed] = useState(false);\n\n    useEffect(() => {\n        setIsDismissed(false);\n    }, [suggestions, isLoading]);\n\n    if (isDismissed) return null;\n\n    const handleDismiss = () => {\n        setIsDismissed(true);\n        onClose?.();\n    };\n\n    if (isLoading) {\n        return (\n            <div className={cn(\"flex items-center gap-2 py-1\", className)}>\n                <div className=\"custom-scrollbar flex flex-1 items-center gap-2 overflow-x-auto\">\n                    <div className=\"text-muted-foreground flex shrink-0 animate-pulse items-center gap-1.5 px-1 text-xs font-medium\">\n                        <Sparkles className=\"text-primary size-3.5\" />\n                        <span className=\"hidden sm:inline\">Generating follow-ups...</span>\n                    </div>\n                    <div className=\"bg-muted/60 h-7 w-28 shrink-0 animate-pulse rounded-md\" />\n                    <div className=\"bg-muted/60 h-7 w-36 shrink-0 animate-pulse rounded-md\" />\n                    <div className=\"bg-muted/60 h-7 w-24 shrink-0 animate-pulse rounded-md\" />\n                </div>\n                <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    onClick={handleDismiss}\n                    className=\"text-muted-foreground hover:text-foreground size-7 shrink-0\"\n                    title=\"Hide suggestions\"\n                    aria-label=\"Hide suggestions\">\n                    <X className=\"size-3.5\" />\n                </Button>\n            </div>\n        );\n    }\n\n    if (!suggestions || suggestions.length === 0) return null;\n\n    return (\n        <div className={cn(\"flex\", className)}>\n            <div className=\"custom-scrollbar flex grow gap-2 overflow-x-auto\">\n                {suggestions.map((e, index) => (\n                    <Button\n                        key={index}\n                        type=\"button\"\n                        variant=\"outline\"\n                        size=\"sm\"\n                        onClick={() => onSelect(e)}\n                        className=\"font-normal whitespace-nowrap\">\n                        {e}\n                    </Button>\n                ))}\n            </div>\n            <div className=\"flex h-8 justify-center\">\n                <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={handleDismiss}\n                    title=\"Hide suggestions\"\n                    aria-label=\"Hide suggestions\">\n                    <X className=\"size-3.5\" />\n                </Button>\n            </div>\n        </div>\n    );\n};\n"
    }
  ],
  "mcp": {
    "description": "Device-local AI-powered functionality. Displays a horizontal list of clickable follow-up queries or suggested actions Ideal for privacy-first AI interfaces, streaming text responses, and Chrome Gemini Nano integrations.",
    "tags": [
      "native-ai",
      "chat"
    ]
  }
}