{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "support-ticket-detail", "title": "Support Ticket Detail", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/support-ticket-detail/SupportTicketDetail.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n AlertCircle,\n AlertTriangle,\n ArrowUpRight,\n Bold,\n Check,\n CheckCheck,\n CheckCircle2,\n ChevronRight,\n Clock,\n Code,\n Copy,\n Download,\n Eye,\n FileCode2,\n Globe,\n ImageIcon,\n Italic,\n Link2,\n Lock,\n MessageSquare,\n Paperclip,\n Plus,\n Send,\n ShieldAlert,\n Tag,\n X,\n} from 'lucide-react'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'\nimport { Textarea } from '@/components/ui/textarea'\n\ninterface ThreadMessage {\n id: string\n authorName: string\n authorRole: string\n avatarText: string\n badgeText: string\n badgeVariant?: 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'info'\n timestamp: string\n isInternal: boolean\n content: string\n}\n\nconst cannedMacros = [\n {\n id: 'ssl-guide',\n name: 'SSL Guide',\n text: `Hi Sarah,\\n\\nTo resolve the ACME challenge issue, please ensure your DNS provider includes the following CAA record:\\n\\n0 issue \"letsencrypt.org\"\\n\\nOnce added, DNS propagation typically takes 2-5 minutes, after which you can re-run verification in your domain dashboard.`,\n },\n {\n id: 'request-logs',\n name: 'Request logs',\n text: `Hi Sarah,\\n\\nCould you please provide the full HAR export and debug network logs from your browser console during the SSL verification attempt? This will help us trace the challenge request.`,\n },\n {\n id: 'refund-confirmation',\n name: 'Refund confirmation',\n text: `Hi Sarah,\\n\\nWe have processed the billing adjustment for your dedicated SSL add-on. You will see the credit reflected on your next statement.`,\n },\n]\n\nexport function SupportTicketDetail() {\n const [ticketStatus, setTicketStatus] = React.useState('in_progress')\n const [ticketPriority, setTicketPriority] = React.useState('high')\n const [assignedAgent, setAssignedAgent] = React.useState('elena_martinez')\n const [department, setDepartment] = React.useState('platform')\n const [composerTab, setComposerTab] = React.useState<'public' | 'internal'>('public')\n const [replyDraft, setReplyDraft] = React.useState('')\n const [selectedMacro, setSelectedMacro] = React.useState('')\n const [copiedLog, setCopiedLog] = React.useState(false)\n const [tags, setTags] = React.useState(['ssl-certificate', 'custom-domain', 'acme-challenge', 'enterprise-tier'])\n const [newTagInput, setNewTagInput] = React.useState('')\n const [isAddingTag, setIsAddingTag] = React.useState(false)\n const [dynamicMessages, setDynamicMessages] = React.useState([])\n\n function handleEscalate() {\n setTicketStatus('escalated')\n }\n\n function handleResolve() {\n setTicketStatus('resolved')\n }\n\n function handleSelectMacro(val: string) {\n setSelectedMacro(val)\n const macro = cannedMacros.find((m) => m.id === val)\n if (macro) {\n setReplyDraft(macro.text)\n }\n }\n\n function applyFormat(type: 'bold' | 'code' | 'link') {\n if (type === 'bold') {\n setReplyDraft((prev) => (prev ? `${prev} **bold text**` : '**bold text**'))\n } else if (type === 'code') {\n setReplyDraft((prev) => (prev ? `${prev}\\n\\`\\`\\`\\ncode snippet\\n\\`\\`\\`` : '```\\ncode snippet\\n```'))\n } else if (type === 'link') {\n setReplyDraft((prev) =>\n prev ? `${prev} [link title](https://example.com)` : '[link title](https://example.com)',\n )\n }\n }\n\n function copyErrorLog() {\n setCopiedLog(true)\n setTimeout(() => {\n setCopiedLog(false)\n }, 2000)\n }\n\n function sendReply() {\n const body = replyDraft.trim()\n if (!body) return\n const isInternal = composerTab === 'internal'\n setDynamicMessages((prev) => [\n ...prev,\n {\n id: `msg-${Date.now()}`,\n authorName: isInternal ? 'Alex Kim' : 'Elena Martinez',\n authorRole: isInternal ? 'Senior DevOps' : 'Lead Support Engineer',\n avatarText: isInternal ? 'AK' : 'EM',\n badgeText: isInternal ? 'Internal Note - Only visible to team' : 'Support Engineer',\n badgeVariant: isInternal ? 'warning' : 'default',\n timestamp: 'Just now',\n isInternal,\n content: body,\n },\n ])\n setReplyDraft('')\n setSelectedMacro('')\n }\n\n function sendAndSolve() {\n sendReply()\n setTicketStatus('resolved')\n }\n\n function addTag() {\n const t = newTagInput.trim().toLowerCase()\n if (t && !tags.includes(t)) {\n setTags((prev) => [...prev, t])\n }\n setNewTagInput('')\n setIsAddingTag(false)\n }\n\n function removeTag(tagToRemove: string) {\n setTags((prev) => prev.filter((t) => t !== tagToRemove))\n }\n\n return (\n
\n {/* Ticket Header */}\n
\n
\n {/* Top Breadcrumb & Actions Row */}\n
\n
\n Support\n \n Tickets\n \n #TICK-8492\n
\n\n
\n \n \n
\n
\n\n {/* Ticket Title & Metadata */}\n
\n
\n #TICK-8492\n

\n Cannot configure custom domain SSL certificate\n

\n
\n

\n Opened 2 hours ago by Sarah Davis (Acme Corp) via Web\n Portal\n

\n
\n\n \n\n {/* Status Badges & SLA Strip */}\n
\n \n \n High Priority\n \n\n
\n \n
\n\n
\n \n SLA: 42m remaining\n
\n\n \n SSL & Custom Domains\n \n
\n
\n
\n\n {/* 2-Column Workspace */}\n
\n {/* Left Column: Conversation Thread & Composer (2/3) */}\n
\n {/* Message 1: Customer Initial Request */}\n
\n
\n
\n \n SD\n \n
\n
\n Sarah Davis\n \n Customer\n \n
\n

VP of Engineering · Acme Corp (sarah@acme-corp.io)

\n
\n
\n \n
\n\n
\n

\n We are attempting to configure our custom apex domain{' '}\n \n api.acme-corp.io\n {' '}\n on our production cluster, but automated SSL certificate provisioning fails repeatedly during the ACME\n DNS-01 verification challenge.\n

\n

\n We verified that the CNAME and DNS TXT records exist in our Cloudflare dashboard, but the challenge\n validation daemon continues to time out after 10 minutes with the stderr log below:\n

\n\n {/* Error Code Block Placeholder */}\n
\n
\n
\n \n acme-provisioner-stderr.log\n
\n \n \n {copiedLog ? 'Copied' : 'Copy log'}\n \n
\n 
\n                  {`[2026-10-24T09:12:44Z] [SSL: CERTIFICATE_VERIFY_FAILED] ACME challenge failed for _acme-challenge.api.acme-corp.io\n[2026-10-24T09:13:58Z] DNS TXT record validation timed out after 600s. Response status: 400 Bad Request\n[2026-10-24T09:14:02Z] Detail: CAA record restriction on 'acme-corp.io' prevented Let's Encrypt issuance.`}\n
\n
\n\n {/* Screenshot / Attachment Placeholder */}\n
\n
\n
\n
\n \n
\n
\n

cloudflare-dns-settings.png

\n

1.4 MB · PNG Image Screenshot

\n
\n
\n
\n \n \n
\n
\n
\n
\n
\n\n {/* Message 2: Internal Staff Note (distinct yellow/amber tint background) */}\n
\n
\n
\n \n AK\n \n
\n
\n Alex Kim\n \n \n Internal Note - Only visible to team\n \n
\n

Senior DevOps Engineer · Tier 2 Infrastructure

\n
\n
\n \n
\n\n
\n

\n Checked Cloudflare DNS propagation on their nameservers via{' '}\n \n dig CAA acme-corp.io\n \n . Looks like their root zone has a CAA record restricting certificate issuance strictly to DigiCert (\n \n 0 issue "digicert.com"\n \n ), while our automated ACME pipeline requests Let's Encrypt certificates.\n

\n

\n If they add{' '}\n \n 0 issue "letsencrypt.org"\n {' '}\n to their DNS CAA records, the validation handshake will complete within 2 minutes.\n

\n
\n
\n\n {/* Message 3: Agent response */}\n
\n
\n
\n \n \n EM\n \n \n
\n
\n Elena Martinez\n Support Engineer\n
\n

Lead Support Engineer · UIPKGE Staff

\n
\n
\n \n
\n\n
\n

\n Hi Sarah, thank you for providing the detailed error log! We analyzed the ACME challenge failure and\n identified that your apex domain's DNS CAA records currently block Let's Encrypt certificate\n issuance.\n

\n

Please follow these step-by-step instructions to enable Let's Encrypt validation:

\n
    \n
  1. \n Log in to your Cloudflare DNS dashboard for{' '}\n acme-corp.io.\n
    2. \n
  2. \n Navigate to DNS Settings → Add Record.\n
    3. \n
  3. \n Select CAA, set Flag to{' '}\n 0, Tag to{' '}\n issue, and Value to{' '}\n "letsencrypt.org".\n
    4. \n
  4. Allow up to 2 minutes for DNS TTL cache propagation across edge resolvers.
    5. \n
  5. \n Return to your cluster settings dashboard and click Retry Verification.\n
    6. \n
\n

\n Feel free to reply directly once you've saved the record, and we'll monitor the validation\n handshake from our side!\n

\n
\n
\n\n {/* Dynamic User Messages */}\n {dynamicMessages.map((msg) => (\n \n
\n
\n \n \n {msg.avatarText}\n \n \n
\n
\n {msg.authorName}\n \n {msg.isInternal && }\n {msg.badgeText}\n \n
\n

{msg.authorRole}

\n
\n
\n \n
\n
{msg.content}
\n \n ))}\n\n {/* Reply Box Composer */}\n
\n setComposerTab(v as 'public' | 'internal')}\n defaultValue=\"public\"\n >\n {/* Composer Header with Tabs & Macro Dropdown */}\n
\n \n \n \n Public Reply\n \n \n \n Internal Note\n \n \n\n {/* Canned Responses / Macros Dropdown */}\n
\n \n
\n
\n\n
\n {/* Rich Formatting Toolbar */}\n
\n applyFormat('bold')}\n >\n \n \n applyFormat('bold')}\n >\n \n \n applyFormat('code')}\n >\n \n \n applyFormat('link')}\n >\n \n \n \n \n Markdown supported\n
\n\n {/* Textarea with dynamic background if internal note */}\n setReplyDraft(v)}\n placeholder={\n composerTab === 'public'\n ? 'Write a public reply to Sarah Davis...'\n : 'Add an internal note only visible to team members...'\n }\n rows={4}\n className={`resize-y text-sm ${\n composerTab === 'internal' ? 'border-warning/30 bg-warning/5 focus-visible:ring-warning/20' : ''\n }`}\n />\n\n {/* Composer Actions */}\n
\n
\n \n Attachments up to 25MB\n
\n\n
\n {composerTab === 'public' && (\n \n \n Send & Mark Solved\n \n )}\n \n
\n
\n
\n \n
\n
\n\n {/* Right Column: Customer & Ticket Metadata Sidebar (1/3) */}\n \n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/SupportTicketDetail.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/tabs.json", "https://uipkge.dev/r/react/textarea.json" ], "description": "Customer support ticket conversation thread, SLA monitor & staff workbench with internal notes, canned response macros, and customer metadata sidebar.", "categories": [ "communication", "app", "support" ] }