{
  "name": "social-components-compactmessagebutton",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/social/components/CompactMessageButton.tsx",
      "type": "registry:component",
      "content": "import {\n\tChatBubbleIcon,\n\tPaperPlaneIcon,\n\tPersonIcon,\n} from \"@radix-ui/react-icons\";\n// CompactMessageButton Component - Compact popover-based message creation\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useBitcoinAuth } from \"../../../hooks/useBitcoinAuth.js\";\nimport { CONTAINER_WIDTHS } from \"../../../lib/layout-constants.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"../../ui/avatar.js\";\nimport { Button } from \"../../ui/button.js\";\nimport { Checkbox } from \"../../ui/checkbox.js\";\nimport { Input } from \"../../ui/input.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../ui/popover.js\";\nimport { Textarea } from \"../../ui/textarea.js\";\nimport { useSocialMessage } from \"../hooks/useSocialMessage.js\";\nimport type { MessageButtonProps } from \"../types/social.js\";\n\nexport interface CompactMessageButtonProps extends MessageButtonProps {\n\trecipientName?: string;\n\trecipientAvatar?: string;\n\trecipientAddress?: string;\n\tplaceholder?: string;\n\tmaxLength?: number;\n\talign?: \"start\" | \"center\" | \"end\";\n\tside?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\ticonSize?: number;\n\tallowRecipientChange?: boolean;\n\tenableEncryption?: boolean;\n}\n\nexport function CompactMessageButton({\n\tonMessage,\n\trecipientName,\n\trecipientAvatar,\n\trecipientAddress,\n\tdefaultContent = \"\",\n\tplaceholder = \"Type a message...\",\n\tmaxLength = 500,\n\talign = \"end\",\n\tside = \"bottom\",\n\ticonSize = 16,\n\tallowRecipientChange = false,\n\tenableEncryption = false,\n\tclassName,\n\tvariant = \"ghost\",\n\tsize = \"default\",\n\tdisabled,\n\t...props\n}: CompactMessageButtonProps) {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst [content, setContent] = useState(defaultContent);\n\tconst [recipient, setRecipient] = useState(recipientAddress || \"\");\n\tconst [useEncryption, setUseEncryption] = useState(false);\n\n\tconst { isAuthenticated } = useBitcoinAuth();\n\n\tconst {\n\t\tmutate: sendMessage,\n\t\tisLoading,\n\t\terror,\n\t} = useSocialMessage({\n\t\tonSuccess: (result) => {\n\t\t\tsetIsOpen(false);\n\t\t\tsetContent(\"\");\n\t\t\tif (allowRecipientChange) {\n\t\t\t\tsetRecipient(\"\");\n\t\t\t}\n\t\t\tif (result.txid) {\n\t\t\t\tonMessage?.(result.txid);\n\t\t\t}\n\t\t},\n\t});\n\n\tconst handleSubmit = () => {\n\t\tif (!content.trim() || !recipient.trim()) return;\n\n\t\tsendMessage({\n\t\t\trecipient: recipient.trim(),\n\t\t\tcontent: content.trim(),\n\t\t\tencrypted: enableEncryption ? useEncryption : false,\n\t\t});\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\tif (e.key === \"Enter\" && (e.metaKey || e.ctrlKey)) {\n\t\t\te.preventDefault();\n\t\t\thandleSubmit();\n\t\t}\n\t};\n\n\tconst remainingChars = maxLength - content.length;\n\tconst isOverLimit = remainingChars < 0;\n\tconst canSubmit =\n\t\tcontent.trim().length > 0 &&\n\t\trecipient.trim().length > 0 &&\n\t\t!isOverLimit &&\n\t\t!isLoading;\n\n\tif (!isAuthenticated) {\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tvariant=\"ghost\"\n\t\t\t\tsize={size === \"default\" ? \"default\" : \"sm\"}\n\t\t\t\tdisabled\n\t\t\t\ttitle=\"Sign in to message\"\n\t\t\t\tclassName={cn(\"p-2\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ChatBubbleIcon className=\"h-4 w-4\" />\n\t\t\t</Button>\n\t\t);\n\t}\n\n\tconst getInitials = (name?: string) => {\n\t\tif (!name) return \"?\";\n\t\treturn name\n\t\t\t.split(\" \")\n\t\t\t.map((word) => word[0])\n\t\t\t.join(\"\")\n\t\t\t.toUpperCase()\n\t\t\t.slice(0, 2);\n\t};\n\n\treturn (\n\t\t<Popover open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tsize={size === \"default\" ? \"default\" : \"sm\"}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\ttitle={recipientName ? `Message ${recipientName}` : \"Send message\"}\n\t\t\t\t\tclassName={cn(\"p-2\", className)}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<ChatBubbleIcon className=\"h-4 w-4\" />\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\n\t\t\t<PopoverContent\n\t\t\t\talign={align}\n\t\t\t\tside={side}\n\t\t\t\tclassName=\"p-3\"\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: CONTAINER_WIDTHS.POPOVER_SMALL,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"flex flex-col gap-3\">\n\t\t\t\t\t{/* Header with Recipient */}\n\t\t\t\t\t<div className=\"flex flex-col gap-2\">\n\t\t\t\t\t\t<h4 className=\"text-sm font-bold\">Send Message</h4>\n\n\t\t\t\t\t\t{/* Recipient Display/Input */}\n\t\t\t\t\t\t{recipientName && !allowRecipientChange ? (\n\t\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t<span className=\"text-xs text-muted-foreground\">To:</span>\n\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t<Avatar className=\"h-4 w-4\">\n\t\t\t\t\t\t\t\t\t\t<AvatarImage src={recipientAvatar} />\n\t\t\t\t\t\t\t\t\t\t<AvatarFallback className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t\t\t{getInitials(recipientName)}\n\t\t\t\t\t\t\t\t\t\t</AvatarFallback>\n\t\t\t\t\t\t\t\t\t</Avatar>\n\t\t\t\t\t\t\t\t\t<span className=\"text-sm\">{recipientName}</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\tplaceholder=\"Recipient address or ID\"\n\t\t\t\t\t\t\t\t\tvalue={recipient}\n\t\t\t\t\t\t\t\t\tonChange={(e) => setRecipient(e.target.value)}\n\t\t\t\t\t\t\t\t\tclassName=\"text-xs pl-8\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<PersonIcon className=\"absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Message Input */}\n\t\t\t\t\t<Textarea\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\tvalue={content}\n\t\t\t\t\t\tonChange={(e) => setContent(e.target.value)}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\trows={4}\n\t\t\t\t\t\tclassName=\"text-sm resize-none\"\n\t\t\t\t\t\tautoFocus={!allowRecipientChange || !!recipientAddress}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{/* Encryption Option */}\n\t\t\t\t\t{enableEncryption && (\n\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\t\tchecked={useEncryption}\n\t\t\t\t\t\t\t\tonCheckedChange={(checked) =>\n\t\t\t\t\t\t\t\t\tsetUseEncryption(checked === true)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span className=\"text-sm\">Encrypt message</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Error Message */}\n\t\t\t\t\t{error && (\n\t\t\t\t\t\t<p className=\"text-xs text-destructive break-words\">\n\t\t\t\t\t\t\t{error.message}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Footer */}\n\t\t\t\t\t<div className=\"flex justify-between items-center\">\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"text-xs\",\n\t\t\t\t\t\t\t\tisOverLimit\n\t\t\t\t\t\t\t\t\t? \"text-destructive\"\n\t\t\t\t\t\t\t\t\t: remainingChars < 50\n\t\t\t\t\t\t\t\t\t\t? \"text-orange-500\"\n\t\t\t\t\t\t\t\t\t\t: \"text-muted-foreground\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{remainingChars} chars\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<div className=\"flex gap-2 items-center\">\n\t\t\t\t\t\t\t<span className=\"text-xs text-muted-foreground\">Cmd+Enter</span>\n\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\tonClick={handleSubmit}\n\t\t\t\t\t\t\t\tdisabled={!canSubmit || isLoading}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<PaperPlaneIcon className=\"h-3 w-3 mr-1\" />\n\t\t\t\t\t\t\t\tSend\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/compactmessagebutton.tsx"
    }
  ]
}