{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-chat-widget-shadcnui",
  "type": "registry:component",
  "title": "Floating Chat Widget",
  "description": "Floating chat widget with AI agent selection dropdown and animations",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/chat/floating-chat-widget.tsx",
      "content": "\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion, type Variants } from \"framer-motion\";\nimport {\n  Brain,\n  Code,\n  MessageSquare,\n  Send,\n  Sparkles,\n  X,\n  Zap,\n} from \"lucide-react\";\nimport { useCallback, useId, useState } from \"react\";\n\ninterface Agent {\n  id: string;\n  name: string;\n  role: string;\n  avatar: string;\n  status: \"online\" | \"busy\" | \"offline\";\n  icon: React.ElementType;\n  gradient: string;\n}\n\nconst AI_AGENTS: Agent[] = [\n  {\n    id: \"gpt4\",\n    name: \"GPT-4\",\n    role: \"Advanced Reasoning\",\n    avatar: \"https://github.com/shadcn.png\",\n    status: \"online\",\n    icon: Sparkles,\n    gradient: \"from-green-500/20 to-emerald-500/20\",\n  },\n  {\n    id: \"claude\",\n    name: \"Claude 3.5\",\n    role: \"Creative Writing\",\n    avatar: \"https://github.com/shadcn.png\",\n    status: \"online\",\n    icon: Brain,\n    gradient: \"from-orange-500/20 to-amber-500/20\",\n  },\n  {\n    id: \"gemini\",\n    name: \"Gemini Pro\",\n    role: \"Multimodal Analysis\",\n    avatar: \"https://github.com/shadcn.png\",\n    status: \"busy\",\n    icon: Zap,\n    gradient: \"from-blue-500/20 to-cyan-500/20\",\n  },\n  {\n    id: \"copilot\",\n    name: \"Copilot\",\n    role: \"Code Assistant\",\n    avatar: \"https://github.com/shadcn.png\",\n    status: \"online\",\n    icon: Code,\n    gradient: \"from-purple-500/20 to-violet-500/20\",\n  },\n];\n\nconst containerVariants: Variants = {\n  hidden: {\n    opacity: 0,\n    y: 20,\n    scale: 0.95,\n    transformOrigin: \"bottom right\",\n  },\n  visible: {\n    opacity: 1,\n    y: 0,\n    scale: 1,\n    transition: {\n      type: \"spring\",\n      damping: 25,\n      stiffness: 300,\n      staggerChildren: 0.05,\n    },\n  },\n  exit: {\n    opacity: 0,\n    y: 20,\n    scale: 0.95,\n    transition: {\n      duration: 0.2,\n    },\n  },\n};\n\nconst messageVariants: Variants = {\n  hidden: { opacity: 0, y: 10, x: -10 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    x: 0,\n    transition: { type: \"spring\", stiffness: 500, damping: 30 },\n  },\n};\n\nexport function FloatingChatWidget() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selectedAgent, setSelectedAgent] = useState<string>(AI_AGENTS[0].id);\n  const [message, setMessage] = useState(\"\");\n  const widgetId = useId();\n\n  const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);\n\n  const currentAgent =\n    AI_AGENTS.find((a) => a.id === selectedAgent) || AI_AGENTS[0];\n  const AgentIcon = currentAgent.icon;\n\n  return (\n    <div className=\"fixed bottom-6 right-6 z-50 flex flex-col items-end gap-4\">\n      <AnimatePresence>\n        {isOpen && (\n          <motion.div\n            key=\"chat-window\"\n            variants={containerVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"exit\"\n            className=\"w-[380px] overflow-hidden rounded-2xl border border-border/40 bg-background/60 shadow-2xl backdrop-blur-xl ring-1 ring-white/10\"\n          >\n            {/* Header */}\n            <div className=\"relative border-b border-border/40 bg-muted/30 p-4 overflow-hidden\">\n              <div\n                className={cn(\n                  \"absolute inset-0 bg-gradient-to-br opacity-50\",\n                  currentAgent.gradient\n                )}\n              />\n              <div className=\"relative flex items-center justify-between z-10\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"relative\">\n                    <Avatar className=\"h-10 w-10 border-2 border-background shadow-sm\">\n                      <AvatarImage\n                        src={currentAgent.avatar}\n                        alt={currentAgent.name}\n                      />\n                      <AvatarFallback>AI</AvatarFallback>\n                    </Avatar>\n                    <span\n                      className={cn(\n                        \"absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-background\",\n                        currentAgent.status === \"online\"\n                          ? \"bg-emerald-500\"\n                          : currentAgent.status === \"busy\"\n                            ? \"bg-amber-500\"\n                            : \"bg-slate-400\"\n                      )}\n                    />\n                  </div>\n                  <div>\n                    <h3 className=\"text-sm font-semibold text-foreground\">\n                      {currentAgent.name}\n                    </h3>\n                    <div className=\"flex items-center gap-1.5\">\n                      <span className=\"text-xs text-muted-foreground\">\n                        {currentAgent.role}\n                      </span>\n                    </div>\n                  </div>\n                </div>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-8 w-8 rounded-full hover:bg-background/50\"\n                  onClick={() => setIsOpen(false)}\n                >\n                  <X className=\"h-4 w-4\" />\n                </Button>\n              </div>\n            </div>\n\n            {/* Agent Selector */}\n            <div className=\"border-b border-border/40 p-3\">\n              <Select value={selectedAgent} onValueChange={setSelectedAgent}>\n                <SelectTrigger className=\"w-full border-none bg-transparent shadow-none focus:ring-0 focus:ring-offset-0 text-lg font-medium h-auto hover:bg-transparent px-2 py-6 cursor-pointer\">\n                  <SelectValue placeholder=\"Select an agent\" />\n                </SelectTrigger>\n                <SelectContent className=\"backdrop-blur-xl bg-background/90 border-border/40\">\n                  {AI_AGENTS.map((agent) => {\n                    const Icon = agent.icon;\n                    return (\n                      <SelectItem\n                        key={agent.id}\n                        value={agent.id}\n                        className=\"cursor-pointer focus:bg-primary/10\"\n                      >\n                        <div className=\"flex items-center gap-3 py-1\">\n                          <div\n                            className={cn(\n                              \"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br\",\n                              agent.gradient\n                            )}\n                          >\n                            <Icon className=\"h-4 w-4 text-foreground/80\" />\n                          </div>\n                          <div className=\"flex flex-col text-left\">\n                            <span className=\"text-sm font-medium\">\n                              {agent.name}\n                            </span>\n                            <span className=\"text-[10px] text-muted-foreground\">\n                              {agent.role}\n                            </span>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    );\n                  })}\n                </SelectContent>\n              </Select>\n            </div>\n\n            {/* Chat Area */}\n            <div className=\"flex h-[320px] flex-col gap-4 overflow-y-auto p-4 bg-gradient-to-b from-background/20 to-background/40\">\n              <motion.div variants={messageVariants} className=\"flex gap-3\">\n                <Avatar className=\"h-8 w-8 border border-border/40 shadow-sm\">\n                  <AvatarImage src={currentAgent.avatar} />\n                  <AvatarFallback className=\"bg-primary/10 text-primary\">\n                    AI\n                  </AvatarFallback>\n                </Avatar>\n                <div className=\"flex max-w-[85%] flex-col gap-1\">\n                  <span className=\"text-xs font-medium text-muted-foreground\">\n                    {currentAgent.name}\n                  </span>\n                  <div className=\"rounded-2xl rounded-tl-none bg-muted/50 px-4 py-2.5 text-sm shadow-sm backdrop-blur-sm border border-border/20\">\n                    <p>\n                      Hello! I'm {currentAgent.name}. How can I assist you with\n                      your project today?\n                    </p>\n                  </div>\n                </div>\n              </motion.div>\n\n              {/* User Message Mock */}\n              <motion.div\n                variants={messageVariants}\n                className=\"flex flex-row-reverse gap-3 self-end\"\n              >\n                <Avatar className=\"h-8 w-8 border border-border/40 shadow-sm\">\n                  <AvatarImage src=\"https://github.com/shadcn.png\" />\n                  <AvatarFallback className=\"bg-primary text-primary-foreground font-semibold\">\n                    ME\n                  </AvatarFallback>\n                </Avatar>\n                <div className=\"flex max-w-[85%] flex-col items-end gap-1\">\n                  <div className=\"rounded-2xl rounded-tr-none bg-primary px-4 py-2.5 text-sm text-primary-foreground shadow-md\">\n                    <p>I need help optimizing my dashboard performance.</p>\n                  </div>\n                </div>\n              </motion.div>\n\n              {/* Typing Indicator Mock */}\n              <motion.div\n                initial={{ opacity: 0, y: 10 }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={{ delay: 0.5 }}\n                className=\"flex gap-3\"\n              >\n                <Avatar className=\"h-8 w-8 border border-border/40 shadow-sm\">\n                  <AvatarImage src={currentAgent.avatar} />\n                  <AvatarFallback className=\"bg-primary/10 text-primary\">\n                    AI\n                  </AvatarFallback>\n                </Avatar>\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"rounded-2xl rounded-tl-none bg-muted/50 px-4 py-3 shadow-sm backdrop-blur-sm border border-border/20 w-16 flex items-center justify-center gap-1\">\n                    <span className=\"h-1.5 w-1.5 rounded-full bg-foreground/40 animate-bounce [animation-delay:-0.3s]\" />\n                    <span className=\"h-1.5 w-1.5 rounded-full bg-foreground/40 animate-bounce [animation-delay:-0.15s]\" />\n                    <span className=\"h-1.5 w-1.5 rounded-full bg-foreground/40 animate-bounce\" />\n                  </div>\n                </div>\n              </motion.div>\n            </div>\n\n            {/* Input Area */}\n            <div className=\"border-t border-border/40 bg-background/60 p-3 backdrop-blur-md\">\n              <form\n                className=\"relative flex items-center gap-2\"\n                onSubmit={(e) => {\n                  e.preventDefault();\n                  setMessage(\"\");\n                }}\n              >\n                <input\n                  type=\"text\"\n                  value={message}\n                  onChange={(e) => setMessage(e.target.value)}\n                  placeholder={`Message ${currentAgent.name}...`}\n                  className=\"flex-1 rounded-full border border-border/40 bg-background/50 px-4 py-2.5 text-sm outline-none transition-all placeholder:text-muted-foreground focus:border-primary/50 focus:bg-background focus:ring-2 focus:ring-primary/10\"\n                />\n                <Button\n                  size=\"icon\"\n                  className=\"h-10 w-10 rounded-full bg-primary text-primary-foreground shadow-lg transition-transform hover:scale-105 hover:shadow-primary/25\"\n                  disabled={!message.trim()}\n                >\n                  <Send className=\"h-4 w-4\" />\n                </Button>\n              </form>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      <motion.button\n        whileHover={{ scale: 1.05 }}\n        whileTap={{ scale: 0.95 }}\n        onClick={toggleOpen}\n        className={cn(\n          \"cursor-pointer group relative flex h-14 w-14 items-center justify-center rounded-full shadow-2xl transition-all duration-300\",\n          isOpen\n            ? \"bg-destructive text-destructive-foreground rotate-90\"\n            : \"bg-primary text-primary-foreground hover:shadow-primary/25\"\n        )}\n      >\n        <span className=\"absolute inset-0 -z-10 rounded-full bg-inherit opacity-20 blur-xl transition-opacity duration-300 group-hover:opacity-40\" />\n        {isOpen ? (\n          <X className=\"h-6 w-6 text-white\" />\n        ) : (\n          <MessageSquare className=\"h-6 w-6\" />\n        )}\n      </motion.button>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/floating-chat-widget-shadcnui.tsx"
    }
  ]
}