{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "support-ticket-detail", "title": "Support Ticket Detail", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/support-ticket-detail/support-ticket-detail.component.ts", "content": "// Edit this file to change the ticket, the thread, the canned macros or the copy.\n// Everything is local state: replies and internal notes are appended to the thread,\n// \"Resolve Ticket\" / \"Escalate\" / \"Send & Mark Solved\" set the status select.\nimport { Component, DestroyRef, inject, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n AlertCircle,\n AlertTriangle,\n ArrowUpRight,\n Bold,\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 LucideAngularModule,\n MessageSquare,\n Paperclip,\n Send,\n ShieldAlert,\n Tag,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiTabsComponent, UiTabsListComponent, UiTabsTriggerComponent } from '@/ui/tabs/tabs.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport type SupportTicketComposerTab = 'public' | 'internal'\n\nexport interface SupportTicketThreadMessage {\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\nexport interface SupportTicketMacro {\n id: string\n name: string\n text: string\n}\n\nconst cannedMacros: SupportTicketMacro[] = [\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\nconst errorLog = `[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 * Support ticket workbench (React `SupportTicketDetail` 1:1): ticket header with status select\n * and SLA pill, the conversation thread (customer message with error log + attachment, an\n * internal note, an agent reply, then anything sent from the composer), the public-reply /\n * internal-note composer with canned macros and a formatting toolbar, and the customer,\n * ticket-attribute and SLA sidebar cards.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-support-ticket-detail, [ui-support-ticket-detail]',\n standalone: true,\n host: { class: 'block' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiTabsComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n \n
\n
\n \n
\n
\n Support\n \n Tickets\n \n #TICK-8492\n
\n\n
\n \n \n Escalate\n \n \n
\n
\n\n \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 \n
\n \n \n High Priority\n \n\n
\n \n \n \n \n In Progress\n \n \n Waiting on Customer\n \n \n Escalated\n \n \n Resolved\n \n \n \n
\n\n \n \n SLA: 42m remaining\n
\n\n SSL & Custom Domains\n
\n
\n \n\n \n
\n \n
\n \n
\n
\n
\n \n SD\n \n
\n
\n Sarah Davis\n Customer\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 api.acme-corp.io\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 \n
\n \n
\n \n acme-provisioner-stderr.log\n
\n \n \n {{ copiedLog() ? 'Copied' : 'Copy log' }}\n \n
\n {{ errorLog }}\n
\n\n \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 \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 dig CAA acme-corp.io. Looks like their root zone has a CAA record restricting certificate issuance strictly to DigiCert\n (0 issue "digicert.com"), while our automated ACME pipeline requests Let's Encrypt certificates.\n

\n

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

\n
\n
\n\n \n
\n
\n
\n \n EM\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. Navigate to DNS Settings → Add Record.
    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. Return to your cluster settings dashboard and click Retry Verification.
    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 \n @for (msg of dynamicMessages(); track msg.id) {\n
\n
\n
\n \n {{ msg.avatarText }}\n \n
\n
\n {{ msg.authorName }}\n \n @if (msg.isInternal) {\n \n }\n {{ msg.badgeText }}\n \n
\n

{{ msg.authorRole }}

\n
\n
\n \n
\n
{{ msg.content }}
\n
\n }\n\n \n
\n
\n \n
\n
\n \n \n
\n\n \n
\n \n \n \n @for (macro of cannedMacros; track macro.id) {\n {{ macro.name }}\n }\n \n \n
\n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Markdown supported\n
\n\n \n \n\n \n
\n
\n \n Attachments up to 25MB\n
\n\n
\n @if (composerTab() === 'public') {\n \n \n Send & Mark Solved\n \n }\n \n
\n
\n
\n
\n
\n \n\n \n \n \n \n `,\n})\nexport class UiSupportTicketDetailComponent {\n private copyTimer?: ReturnType\n\n readonly ticketStatus = signal('in_progress')\n readonly ticketPriority = signal('high')\n readonly assignedAgent = signal('elena_martinez')\n readonly department = signal('platform')\n readonly composerTab = signal('public')\n readonly replyDraft = signal('')\n readonly selectedMacro = signal('')\n readonly copiedLog = signal(false)\n readonly tags = signal(['ssl-certificate', 'custom-domain', 'acme-challenge', 'enterprise-tier'])\n readonly newTagInput = signal('')\n readonly isAddingTag = signal(false)\n readonly dynamicMessages = signal([])\n\n protected readonly cannedMacros = cannedMacros\n protected readonly errorLog = errorLog\n\n protected readonly AlertCircle = AlertCircle\n protected readonly AlertTriangle = AlertTriangle\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly Bold = Bold\n protected readonly CheckCheck = CheckCheck\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ChevronRight = ChevronRight\n protected readonly Clock = Clock\n protected readonly Code = Code\n protected readonly Copy = Copy\n protected readonly Download = Download\n protected readonly Eye = Eye\n protected readonly FileCode2 = FileCode2\n protected readonly Globe = Globe\n protected readonly ImageIcon = ImageIcon\n protected readonly Italic = Italic\n protected readonly Link2 = Link2\n protected readonly Lock = Lock\n protected readonly MessageSquare = MessageSquare\n protected readonly Paperclip = Paperclip\n protected readonly Send = Send\n protected readonly ShieldAlert = ShieldAlert\n protected readonly Tag = Tag\n protected readonly X = X\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.copyTimer))\n }\n\n hasDraft(): boolean {\n return this.replyDraft().trim() !== ''\n }\n\n setComposerTab(value: string): void {\n this.composerTab.set(value === 'internal' ? 'internal' : 'public')\n }\n\n handleEscalate(): void {\n this.ticketStatus.set('escalated')\n }\n\n handleResolve(): void {\n this.ticketStatus.set('resolved')\n }\n\n handleSelectMacro(value: string): void {\n this.selectedMacro.set(value)\n const macro = cannedMacros.find((m) => m.id === value)\n if (macro) this.replyDraft.set(macro.text)\n }\n\n applyFormat(type: 'bold' | 'code' | 'link'): void {\n const prev = this.replyDraft()\n if (type === 'bold') {\n this.replyDraft.set(prev ? `${prev} **bold text**` : '**bold text**')\n } else if (type === 'code') {\n this.replyDraft.set(prev ? `${prev}\\n\\`\\`\\`\\ncode snippet\\n\\`\\`\\`` : '```\\ncode snippet\\n```')\n } else if (type === 'link') {\n this.replyDraft.set(prev ? `${prev} [link title](https://example.com)` : '[link title](https://example.com)')\n }\n }\n\n copyErrorLog(): void {\n this.copiedLog.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copiedLog.set(false), 2000)\n }\n\n sendReply(): void {\n const body = this.replyDraft().trim()\n if (!body) return\n const isInternal = this.composerTab() === 'internal'\n this.dynamicMessages.update((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 this.replyDraft.set('')\n this.selectedMacro.set('')\n }\n\n sendAndSolve(): void {\n this.sendReply()\n this.ticketStatus.set('resolved')\n }\n\n addTag(): void {\n const t = this.newTagInput().trim().toLowerCase()\n if (t && !this.tags().includes(t)) this.tags.update((prev) => [...prev, t])\n this.newTagInput.set('')\n this.isAddingTag.set(false)\n }\n\n removeTag(tagToRemove: string): void {\n this.tags.update((prev) => prev.filter((t) => t !== tagToRemove))\n }\n\n onTagKeydown(event: Event): void {\n if ((event as KeyboardEvent).key === 'Enter') {\n event.preventDefault()\n this.addTag()\n }\n }\n\n textareaClass(): string {\n return cn(\n 'resize-y text-sm',\n this.composerTab() === 'internal' && 'border-warning/30 bg-warning/5 focus-visible:ring-warning/20',\n )\n }\n\n articleClass(msg: SupportTicketThreadMessage): string {\n return cn('rounded-xl border p-5 shadow-xs sm:p-6', msg.isInternal ? 'border-warning/30 bg-warning/10' : 'bg-card')\n }\n\n avatarFallbackClass(msg: SupportTicketThreadMessage): string {\n return cn(\n 'text-xs font-semibold',\n msg.isInternal ? 'bg-warning/20 text-warning' : 'bg-primary text-primary-foreground',\n )\n }\n\n badgeClass(msg: SupportTicketThreadMessage): string {\n return msg.isInternal\n ? 'border-warning/40 bg-warning/20 text-warning gap-1 text-xs font-medium'\n : 'text-xs font-normal'\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/support-ticket-detail/support-ticket-detail.component.ts" }, { "path": "packages/registry-angular/blocks/support-ticket-detail/index.ts", "content": "export {\n UiSupportTicketDetailComponent,\n type SupportTicketComposerTab,\n type SupportTicketMacro,\n type SupportTicketThreadMessage,\n} from './support-ticket-detail.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/support-ticket-detail/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/tabs.json", "https://uipkge.dev/r/angular/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" ] }