UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Contract Redline Diff

blocklegal
Boilerplate repo

Ironclad and DocuSign CLM style legal contract redline diff viewer with clause additions, deletions, liability super-cap shift analysis, and attorney comments negotiations sidebar.

Installation

$npx uipkge-ng@latest add contract-redline-diff
Manifest:https://uipkge.dev/r/angular/contract-redline-diff.jsonInstalls to:src/app/components/blocks/contract-redline-diff/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

CommentItem
interface CommentItem {
  id: string
  clauseId: string
  clauseTitle: string
  authorName: string
  authorRole: string
  authorInitials: string
  timestamp: string
  commentText: string
  proposedChange: string
  status: 'pending' | 'resolved'
  severity?: 'critical' | 'moderate' | 'standard'
}
RedlineStats
interface RedlineStats {
  additions: string
  additionsSub: string
  deletions: string
  deletionsSub: string
  openComments: number
  resolvedComments: number
  liabilityCap: string
  liabilityCapSub: string
}

npm dependencies

lucide-angular

Files installed (2)

  • src/app/components/blocks/contract-redline-diff/contract-redline-diff.component.ts41.8 kB
    // Ironclad and DocuSign CLM style legal contract redline diff viewer with clause additions,
// deletions, liability super-cap shift analysis, and attorney comments negotiations sidebar.
// Port of the Vue/React block 1:1 — same four counsel comments, same pending/resolved
// filter pills, same accept-tweak / accept-all / reject-all actions, same inline reply draft.
import { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'
import {
  Check,
  CheckCircle2,
  Clock,
  FileMinus2,
  FilePlus2,
  FileText,
  History,
  LucideAngularModule,
  MessageSquare,
  MessageSquareReply,
  Scale,
  Send,
  X,
  XCircle,
} from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'
import {
  UiCardComponent,
  UiCardContentComponent,
  UiCardFooterComponent,
  UiCardHeaderComponent,
  UiCardTitleComponent,
} from '@/ui/card/card.component'
import { UiSeparatorComponent } from '@/ui/separator/separator.component'

export interface CommentItem {
  id: string
  clauseId: string
  clauseTitle: string
  authorName: string
  authorRole: string
  authorInitials: string
  timestamp: string
  commentText: string
  proposedChange: string
  status: 'pending' | 'resolved'
  severity?: 'critical' | 'moderate' | 'standard'
}

export interface RedlineStats {
  additions: string
  additionsSub: string
  deletions: string
  deletionsSub: string
  openComments: number
  resolvedComments: number
  liabilityCap: string
  liabilityCapSub: string
}

const defaultComments: CommentItem[] = [
  {
    id: 'c-1',
    clauseId: 'clause-4-2',
    clauseTitle: 'Section 4.2 · Service Level Agreement Credits',
    authorName: 'Sarah Lin',
    authorRole: 'Senior Counsel, Davis Polk & Wardwell LLP',
    authorInitials: 'SL',
    timestamp: '2 hours ago',
    commentText:
      'Acme enterprise infrastructure requires a 25% credit for downtime exceeding 4 hours given Tier-1 mission-critical workload dependency. We also propose extending the scheduled maintenance notice window to 7 business days.',
    proposedChange: '25% monthly fee credit (was 10%) · 7 business days notice (was 48 hours)',
    status: 'pending',
    severity: 'critical',
  },
  {
    id: 'c-2',
    clauseId: 'clause-8-1',
    clauseTitle: 'Section 8.1 · Limitation of Liability & Super-Cap',
    authorName: 'Marcus Vance',
    authorRole: 'VP Legal & AGC, Acme Enterprise Corp',
    authorInitials: 'MV',
    timestamp: '4 hours ago',
    commentText:
      'We cannot agree to a standard 12-month trailing fee liability cap due to GDPR Article 82 joint-controller exposure and confidential IP storage. A $2.5M aggregate super-cap is our committee floor for cloud vendor onboarding.',
    proposedChange: 'Super-cap of $2,500,000 or 2.5x total contract value for data protection breaches',
    status: 'pending',
    severity: 'critical',
  },
  {
    id: 'c-3',
    clauseId: 'clause-12-3',
    clauseTitle: 'Section 12.3 · Governing Law & Commercial Arbitration',
    authorName: 'Elena Rostova',
    authorRole: 'Partner, Technology Transactions Counsel',
    authorInitials: 'ER',
    timestamp: 'Yesterday at 17:45',
    commentText:
      'Replaced Delaware Chancery court litigation with AAA expedited commercial arbitration seated in New York to contain cross-border litigation exposure, expedite timeline, and guarantee reciprocal fee shifting.',
    proposedChange: 'AAA Commercial Arbitration (New York, NY) + Prevailing party attorney fee shifting',
    status: 'pending',
    severity: 'moderate',
  },
  {
    id: 'c-4',
    clauseId: 'clause-2-4',
    clauseTitle: 'Section 2.4 · Customer Data & AI Model Training',
    authorName: 'David Kim',
    authorRole: 'Lead In-House Commercial Counsel',
    authorInitials: 'DK',
    timestamp: 'Resolved 5 hours ago',
    commentText:
      'Provider confirmed in writing that customer telemetry is strictly quarantined and excluded from foundation LLM model training. Mutually agreed language inserted.',
    proposedChange: 'Explicit carve-out prohibiting Customer Data ingestion into generative AI training sets',
    status: 'resolved',
    severity: 'standard',
  },
]

export type RedlineFilter = 'all' | 'pending' | 'resolved'

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-contract-redline-diff, [ui-contract-redline-diff]',
  standalone: true,
  // The block renders its own root <div>: keep this wrapper out of the layout.
  host: { '[attr.class]': '"contents"' },
  imports: [
    LucideAngularModule,
    UiAvatarComponent,
    UiAvatarFallbackComponent,
    UiBadgeComponent,
    UiButtonComponent,
    UiCardComponent,
    UiCardContentComponent,
    UiCardFooterComponent,
    UiCardHeaderComponent,
    UiCardTitleComponent,
    UiSeparatorComponent,
  ],
  template: `
    <div data-slot="contract-redline-diff" [class]="rootClass">
      <!-- Header Section -->
      <header class="border-border bg-card rounded-xl border p-5 shadow-xs sm:p-6">
        <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
          <div class="space-y-2">
            <div class="flex flex-wrap items-center gap-2.5">
              <span class="text-muted-foreground font-mono text-xs tracking-wider uppercase">
                CLM Contract Workspace &bull; MSA-2026-0882
              </span>
              @if (pendingCount() > 0) {
                <span
                  ui-badge
                  wrap
                  variant="outline"
                  class="border-warning/30 bg-warning/10 text-warning font-mono text-xs font-semibold whitespace-normal"
                >
                  <span class="bg-warning mr-1.5 size-1.5 rounded-full"></span>
                  {{ pendingCount() }} Pending Redlines &bull; {{ resolvedCount() }} Resolved
                </span>
              } @else {
                <span
                  ui-badge
                  wrap
                  variant="outline"
                  class="border-success/30 bg-success/10 text-success font-mono text-xs font-semibold"
                >
                  <lucide-icon [img]="CheckCircle2" class="text-success mr-1 size-3" aria-hidden="true" />
                  All Changes Accepted &bull; Ready for Execution
                </span>
              }
            </div>

            <h1 class="text-foreground text-2xl font-bold tracking-tight sm:text-3xl">
              {{ contractTitle }}
            </h1>

            <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs sm:text-sm">
              <div class="text-muted-foreground flex items-center gap-1.5">
                <span class="text-foreground font-medium">Counterparty:</span>
                <span>{{ counterparty }}</span>
              </div>
              <span class="text-muted-foreground/40 hidden sm:inline">&bull;</span>
              <div class="text-muted-foreground flex items-center gap-1.5">
                <span class="text-foreground font-medium">Outside Counsel:</span>
                <span>{{ counselFirm }}</span>
              </div>
              <span class="text-muted-foreground/40 hidden sm:inline">&bull;</span>
              <div class="text-muted-foreground flex items-center gap-1.5">
                <lucide-icon [img]="History" class="size-3.5" aria-hidden="true" />
                <span>{{ versionComparison }}</span>
              </div>
            </div>
          </div>

          <!-- Header Action Controls -->
          <div class="flex flex-wrap items-center gap-3">
            <button
              ui-button
              variant="outline"
              size="sm"
              class="gap-1.5 text-xs font-medium"
              (click)="handleRejectAll()"
            >
              <lucide-icon [img]="XCircle" class="text-muted-foreground size-4" aria-hidden="true" />
              <span>Reject Changes</span>
            </button>

            <button
              ui-button
              variant="default"
              size="sm"
              class="gap-1.5 text-xs font-semibold shadow-xs"
              (click)="handleAcceptAll()"
            >
              <lucide-icon [img]="Check" class="size-4" aria-hidden="true" />
              <span>Accept All Changes</span>
            </button>
          </div>
        </div>

        <!-- Action Feedback Banner -->
        @if (actionBannerMessage(); as banner) {
          <div
            class="border-primary/20 bg-primary/5 mt-4 flex items-center justify-between rounded-lg border px-4 py-2.5 text-xs"
          >
            <div class="text-foreground flex items-center gap-2 font-medium">
              <lucide-icon [img]="CheckCircle2" class="text-primary size-4 shrink-0" aria-hidden="true" />
              <span>{{ banner }}</span>
            </div>
            <button
              type="button"
              class="text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded p-1 focus-visible:ring-2 focus-visible:outline-none"
              (click)="actionBannerMessage.set(null)"
              aria-label="Dismiss notification"
            >
              <lucide-icon [img]="X" class="size-3.5" />
            </button>
          </div>
        }
      </header>

      <!-- 4 Redline Summary Metric Cards -->
      <section aria-label="Redline metrics overview" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <!-- Metric 1: Additions / Insertions -->
        <div ui-card class="border-border bg-card shadow-xs">
          <div ui-card-header class="p-4 pb-2">
            <div class="flex items-center justify-between">
              <h3 ui-card-title class="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                Additions / Insertions
              </h3>
              <div class="bg-success/10 text-success rounded-md p-1.5">
                <lucide-icon [img]="FilePlus2" class="size-4" aria-hidden="true" />
              </div>
            </div>
          </div>
          <div ui-card-content class="space-y-1 p-4 pt-0">
            <p class="text-success font-mono text-2xl font-bold tracking-tight">+14 Clauses / Sentences</p>
            <p class="text-muted-foreground text-xs leading-relaxed">
              +620 words &bull; Enhanced SLA credits, audit rights &amp; ML carve-outs
            </p>
          </div>
        </div>

        <!-- Metric 2: Deletions / Removals -->
        <div ui-card class="border-border bg-card shadow-xs">
          <div ui-card-header class="p-4 pb-2">
            <div class="flex items-center justify-between">
              <h3 ui-card-title class="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                Deletions / Removals
              </h3>
              <div class="bg-destructive/10 text-destructive rounded-md p-1.5">
                <lucide-icon [img]="FileMinus2" class="size-4" aria-hidden="true" />
              </div>
            </div>
          </div>
          <div ui-card-content class="space-y-1 p-4 pt-0">
            <p class="text-destructive font-mono text-2xl font-bold tracking-tight">-8 Clauses Struck Through</p>
            <p class="text-muted-foreground text-xs leading-relaxed">
              -310 words &bull; Excised unilateral termination &amp; uncapped liability
            </p>
          </div>
        </div>

        <!-- Metric 3: Pending Review Comments -->
        <div ui-card class="border-border bg-card shadow-xs">
          <div ui-card-header class="p-4 pb-2">
            <div class="flex items-center justify-between">
              <h3 ui-card-title class="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                Review Comments
              </h3>
              <div class="bg-warning/10 text-warning rounded-md p-1.5">
                <lucide-icon [img]="MessageSquare" class="size-4" aria-hidden="true" />
              </div>
            </div>
          </div>
          <div ui-card-content class="space-y-1 p-4 pt-0">
            <p class="text-warning font-mono text-2xl font-bold tracking-tight">
              {{ pendingCount() }} Open Counsel Comments
            </p>
            <p class="text-muted-foreground text-xs leading-relaxed">
              {{ resolvedCount() }} resolved &bull; 2 require General Counsel sign-off
            </p>
          </div>
        </div>

        <!-- Metric 4: Liability Cap Shift -->
        <div ui-card class="border-border bg-card shadow-xs">
          <div ui-card-header class="p-4 pb-2">
            <div class="flex items-center justify-between">
              <h3 ui-card-title class="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                Liability Cap Shift
              </h3>
              <div class="bg-primary/10 text-primary rounded-md p-1.5">
                <lucide-icon [img]="Scale" class="size-4" aria-hidden="true" />
              </div>
            </div>
          </div>
          <div ui-card-content class="space-y-1 p-4 pt-0">
            <p class="text-primary font-mono text-2xl font-bold tracking-tight">$1.0M &rarr; $2.5M Super-Cap</p>
            <p class="text-muted-foreground text-xs leading-relaxed">
              Shifted from 1x annual fees to 2.5x aggregate contract liability
            </p>
          </div>
        </div>
      </section>

      <!-- 2-Column Redline Workspace -->
      <div class="grid grid-cols-1 gap-6 lg:grid-cols-12 lg:items-start">
        <!-- Left Column: Redlined Document Prose -->
        <main class="space-y-6 lg:col-span-8">
          <div class="border-border bg-card rounded-xl border shadow-xs">
            <!-- Document Controls & Legend Top Bar -->
            <div
              class="border-border bg-muted/40 flex flex-wrap items-center justify-between gap-3 border-b px-5 py-3.5"
            >
              <div class="flex items-center gap-2">
                <lucide-icon [img]="FileText" class="text-primary size-4" aria-hidden="true" />
                <span class="text-foreground text-xs font-semibold sm:text-sm">
                  Master Services Agreement (MSA) &bull; Draft v3.2
                </span>
              </div>

              <!-- Visual Legend -->
              <div class="flex flex-wrap items-center gap-3 text-xs">
                <div class="flex items-center gap-1.5">
                  <span class="border-success/30 bg-success/20 inline-block h-3 w-5 rounded border"></span>
                  <span class="text-muted-foreground">Insertion (Acme Counsel)</span>
                </div>
                <div class="flex items-center gap-1.5">
                  <span class="border-destructive/30 bg-destructive/20 inline-block h-3 w-5 rounded border"></span>
                  <span class="text-muted-foreground">Deletion (Struck Out)</span>
                </div>
              </div>
            </div>

            <!-- Document Content Body -->
            <div class="divide-border space-y-8 divide-y px-5 py-6 sm:px-8">
              <!-- Section 2: Intellectual Property & Data Ownership -->
              <section id="clause-2-4" class="scroll-mt-6 space-y-3 pt-6 first:pt-0">
                <div class="flex flex-wrap items-center justify-between gap-2">
                  <div class="flex items-center gap-2">
                    <h2 class="text-foreground text-sm font-bold tracking-tight sm:text-base">
                      Section 2 &bull; Intellectual Property &amp; Customer Data
                    </h2>
                    <span
                      ui-badge
                      wrap
                      variant="outline"
                      class="border-success/30 bg-success/10 text-success font-mono text-xs"
                    >
                      [RESOLVED] &bull; § 2.4 ML Carve-out
                    </span>
                  </div>
                  <button
                    ui-button
                    variant="ghost"
                    size="sm"
                    class="text-muted-foreground hover:text-foreground h-7 gap-1 px-2 text-xs"
                    (click)="selectComment('c-4', 'clause-2-4')"
                  >
                    <lucide-icon [img]="MessageSquare" class="text-success size-3.5" />
                    <span>View Resolution</span>
                  </button>
                </div>

                <div
                  class="border-border bg-muted/20 space-y-3 rounded-lg border p-4 text-xs leading-relaxed sm:text-sm"
                >
                  <p class="text-foreground">
                    <strong class="text-foreground font-semibold">2.4 Proprietary Rights &amp; Restrictions.</strong>
                    Customer retains all right, title, and interest in and to Customer Data, including all Intellectual
                    Property Rights therein. Provider shall not acquire any ownership interest in or rights to Customer
                    Data, except for the limited license granted herein to perform the Services.
                    <span
                      class="bg-success/10 text-success text-success rounded px-1 py-0.5 font-medium underline decoration-emerald-500/40"
                    >
                      Under no circumstances shall Provider utilize, parse, vectorize, or ingest Customer Data,
                      confidential telemetry, or user communications to train, fine-tune, or benchmark any public or
                      proprietary artificial intelligence, large language, or algorithmic model without express prior
                      written addendum.
                    </span>
                  </p>
                </div>
              </section>

              <!-- Section 4: Service Level Agreements -->
              <section id="clause-4-2" class="scroll-mt-6 space-y-3 pt-8">
                <div class="flex flex-wrap items-center justify-between gap-2">
                  <div class="flex items-center gap-2">
                    <h2 class="text-foreground text-sm font-bold tracking-tight sm:text-base">
                      Section 4 &bull; Service Level Agreements &amp; Availability Commitments
                    </h2>
                    <span
                      ui-badge
                      wrap
                      variant="outline"
                      class="border-warning/30 bg-warning/10 text-warning font-mono text-xs"
                    >
                      [DIFF-4.2] &bull; 2 Pending Redlines
                    </span>
                  </div>
                  <button
                    ui-button
                    variant="outline"
                    size="sm"
                    [class]="clauseButtonClass('c-1')"
                    (click)="selectComment('c-1', 'clause-4-2')"
                  >
                    <lucide-icon [img]="MessageSquare" class="text-warning size-3.5" />
                    <span>Comment #1 &bull; Sarah Lin</span>
                  </button>
                </div>

                <div [class]="clauseBoxClass('c-1')">
                  <p class="text-foreground">
                    <strong class="text-foreground font-semibold">4.1 Monthly Uptime Commitment.</strong>
                    Provider warrants that the Production Cloud Service will achieve a Monthly Uptime Percentage of no
                    less than
                    <span
                      class="bg-destructive/10 text-destructive text-destructive rounded px-1 py-0.5 font-medium line-through decoration-rose-500/60"
                    >
                      ninety-nine and one-half percent (99.5%)
                    </span>
                    <span
                      class="bg-success/10 text-success text-success rounded px-1 py-0.5 font-medium underline decoration-emerald-500/40"
                    >
                      ninety-nine and ninety-five hundredths percent (99.95%)
                    </span>
                    during each calendar billing month of the applicable Order Term (&ldquo;Service Level
                    Standard&rdquo;).
                  </p>

                  <p class="text-foreground">
                    <strong class="text-foreground font-semibold"
                      >4.2 SLA Failure Remedies &amp; Maintenance Notice.</strong
                    >
                    If Provider fails to meet the Service Level Standard for any calendar month, Customer shall be
                    entitled to an immediate credit against future invoices equal to
                    <span
                      class="bg-destructive/10 text-destructive text-destructive rounded px-1 py-0.5 font-medium line-through decoration-rose-500/60"
                    >
                      ten percent (10%)
                    </span>
                    <span
                      class="bg-success/10 text-success text-success rounded px-1 py-0.5 font-medium underline decoration-emerald-500/40"
                    >
                      twenty-five percent (25%)
                    </span>
                    of the prorated monthly fees for such month. Scheduled Maintenance windows shall occur solely
                    between 01:00 and 04:00 UTC on Sunday mornings and require no less than
                    <span
                      class="bg-destructive/10 text-destructive text-destructive rounded px-1 py-0.5 font-medium line-through decoration-rose-500/60"
                    >
                      forty-eight (48) hours
                    </span>
                    <span
                      class="bg-success/10 text-success text-success rounded px-1 py-0.5 font-medium underline decoration-emerald-500/40"
                    >
                      seven (7) business days
                    </span>
                    advance electronic notice to Customer&rsquo;s Lead SRE contact.
                  </p>
                </div>
              </section>

              <!-- Section 8: Limitation of Liability -->
              <section id="clause-8-1" class="scroll-mt-6 space-y-3 pt-8">
                <div class="flex flex-wrap items-center justify-between gap-2">
                  <div class="flex items-center gap-2">
                    <h2 class="text-foreground text-sm font-bold tracking-tight sm:text-base">
                      Section 8 &bull; Limitation of Liability &amp; Super-Cap Allocation
                    </h2>
                    <span
                      ui-badge
                      wrap
                      variant="outline"
                      class="border-destructive/30 bg-destructive/10 text-destructive font-mono text-xs font-semibold"
                    >
                      [DIFF-8.1] &bull; HIGH IMPACT SHIFT
                    </span>
                  </div>
                  <button
                    ui-button
                    variant="outline"
                    size="sm"
                    [class]="clauseButtonClass('c-2')"
                    (click)="selectComment('c-2', 'clause-8-1')"
                  >
                    <lucide-icon [img]="MessageSquare" class="text-destructive size-3.5" />
                    <span>Comment #2 &bull; Marcus Vance</span>
                  </button>
                </div>

                <div [class]="clauseBoxClass('c-2')">
                  <p class="text-foreground font-mono text-xs leading-relaxed uppercase">
                    <strong class="text-foreground font-bold">8.1 AGGREGATE LIABILITY CAP.</strong>
                    EXCEPT FOR LIABILITIES ARISING FROM A BREACH OF CONFIDENTIALITY UNDER SECTION 6, FRAUD, OR
                    INDEMNIFICATION OBLIGATIONS UNDER SECTION 10, NEITHER PARTY&rsquo;S MAXIMUM AGGREGATE LIABILITY
                    UNDER THIS AGREEMENT SHALL EXCEED
                    <span
                      class="bg-destructive/10 text-destructive text-destructive rounded px-1 py-0.5 font-medium line-through decoration-rose-500/60"
                    >
                      THE TOTAL FEES ACTUALLY PAID BY CUSTOMER TO PROVIDER IN THE TWELVE (12) MONTHS PRECEDING THE EVENT
                      GIVING RISE TO LIABILITY.
                    </span>
                    <span
                      class="bg-success/10 text-success text-success rounded px-1 py-0.5 font-medium underline decoration-emerald-500/40"
                    >
                      THE GREATER OF TWO MILLION FIVE HUNDRED THOUSAND UNITED STATES DOLLARS ($2,500,000 USD) OR TWO AND
                      ONE-HALF TIMES (2.5X) THE AGGREGATE FEES PAYABLE OVER THE ENTIRE ORDER FORM DURATION
                      (&ldquo;SUPER-CAP&rdquo;).
                    </span>
                  </p>

                  <p class="text-foreground">
                    <strong class="text-foreground font-semibold">8.2 Direct Damages Carve-Out.</strong>
                    Notwithstanding anything to the contrary, the mutual waiver of consequential damages in Section 8.3
                    shall not preclude or limit recovery of
                    <span
                      class="bg-success/10 text-success text-success rounded px-1 py-0.5 font-medium underline decoration-emerald-500/40"
                    >
                      reasonable third-party forensic incident investigation expenses, statutory breach notification
                      mailings, and credit monitoring services required under GDPR, HIPAA, or State Data Privacy laws.
                    </span>
                  </p>
                </div>
              </section>

              <!-- Section 12: Governing Law & Arbitration -->
              <section id="clause-12-3" class="scroll-mt-6 space-y-3 pt-8">
                <div class="flex flex-wrap items-center justify-between gap-2">
                  <div class="flex items-center gap-2">
                    <h2 class="text-foreground text-sm font-bold tracking-tight sm:text-base">
                      Section 12 &bull; Governing Law, Venue &amp; Arbitration
                    </h2>
                    <span
                      ui-badge
                      wrap
                      variant="outline"
                      class="border-primary/30 bg-primary/10 text-primary font-mono text-xs"
                    >
                      [DIFF-12.3] &bull; Modified Venue
                    </span>
                  </div>
                  <button
                    ui-button
                    variant="outline"
                    size="sm"
                    [class]="clauseButtonClass('c-3')"
                    (click)="selectComment('c-3', 'clause-12-3')"
                  >
                    <lucide-icon [img]="MessageSquare" class="text-primary size-3.5" />
                    <span>Comment #3 &bull; Elena Rostova</span>
                  </button>
                </div>

                <div [class]="clauseBoxClass('c-3')">
                  <p class="text-foreground">
                    <strong class="text-foreground font-semibold">12.1 Applicable Law.</strong>
                    This Agreement shall be governed by, construed, and enforced in accordance with the substantive laws
                    of the State of Delaware, without reference to its conflict-of-law principles.
                  </p>

                  <p class="text-foreground">
                    <strong class="text-foreground font-semibold"
                      >12.3 Binding Commercial Arbitration &amp; Fee Recovery.</strong
                    >
                    Any controversy, dispute, or claim arising out of or relating to this Agreement, or the breach
                    thereof, shall be resolved by
                    <span
                      class="bg-destructive/10 text-destructive text-destructive rounded px-1 py-0.5 font-medium line-through decoration-rose-500/60"
                    >
                      the state or federal courts situated in Wilmington, Delaware.
                    </span>
                    <span
                      class="bg-success/10 text-success text-success rounded px-1 py-0.5 font-medium underline decoration-emerald-500/40"
                    >
                      binding arbitration administered by the American Arbitration Association (AAA) in accordance with
                      its Commercial Arbitration Rules, before a single neutral arbitrator seated in the City and State
                      of New York.
                    </span>
                    <span
                      class="bg-success/10 text-success text-success rounded px-1 py-0.5 font-medium underline decoration-emerald-500/40"
                    >
                      The prevailing party in any proceeding to enforce or interpret this Agreement shall be entitled to
                      recover from the non-prevailing party all reasonable attorneys&rsquo; fees, arbitrator
                      compensation, and expert witness disbursements incurred in connection therewith.
                    </span>
                  </p>
                </div>
              </section>
            </div>
          </div>
        </main>

        <!-- Right Column: Attorney Comments & Negotiations Sidebar -->
        <aside class="space-y-4 lg:sticky lg:top-6 lg:col-span-4">
          <div class="border-border bg-card space-y-4 rounded-xl border p-4 shadow-xs">
            <!-- Sidebar Header -->
            <div class="flex items-center justify-between pb-1">
              <div class="flex items-center gap-2">
                <lucide-icon [img]="MessageSquare" class="text-primary size-4" aria-hidden="true" />
                <h2 class="text-foreground text-sm font-bold tracking-tight">Counsel Comments &amp; Markups</h2>
              </div>
              <span class="text-muted-foreground font-mono text-xs font-medium">
                {{ filteredComments().length }} items
              </span>
            </div>

            <!-- Filter Pills -->
            <div class="bg-muted/60 flex items-center gap-1.5 rounded-lg p-1">
              <button type="button" [class]="filterPillClass('all')" (click)="selectedFilter.set('all')">
                All ({{ comments().length }})
              </button>
              <button type="button" [class]="filterPillClass('pending')" (click)="selectedFilter.set('pending')">
                Pending ({{ pendingCount() }})
              </button>
              <button type="button" [class]="filterPillClass('resolved')" (click)="selectedFilter.set('resolved')">
                Resolved ({{ resolvedCount() }})
              </button>
            </div>

            <ui-separator />

            <!-- Comments Feed -->
            <div class="space-y-3.5">
              @for (comment of filteredComments(); track comment.id) {
                <div
                  ui-card
                  role="button"
                  tabindex="0"
                  [attr.aria-pressed]="activeCommentId() === comment.id"
                  [class]="commentCardClass(comment)"
                  (click)="selectComment(comment.id, comment.clauseId)"
                  (keydown.enter)="selectComment(comment.id, comment.clauseId)"
                  (keydown.space)="$event.preventDefault(); selectComment(comment.id, comment.clauseId)"
                >
                  <div ui-card-header class="p-3.5 pb-2">
                    <div class="flex flex-wrap items-start justify-between gap-2">
                      <div class="flex items-center gap-2.5">
                        <ui-avatar class="border-border size-7 border">
                          <ui-avatar-fallback class="bg-primary/10 text-primary font-mono text-xs font-bold">
                            {{ comment.authorInitials }}
                          </ui-avatar-fallback>
                        </ui-avatar>
                        <div>
                          <p class="text-foreground text-xs leading-none font-semibold">
                            {{ comment.authorName }}
                          </p>
                          <p class="text-muted-foreground mt-0.5 max-w-[170px] truncate text-xs">
                            {{ comment.authorRole }}
                          </p>
                        </div>
                      </div>

                      <span ui-badge wrap variant="outline" [class]="commentStatusClass(comment)">
                        {{ comment.status === 'resolved' ? 'Resolved' : 'Pending' }}
                      </span>
                    </div>
                  </div>

                  <div ui-card-content class="space-y-2.5 p-3.5 pt-0 text-xs">
                    <!-- Clause context pill -->
                    <div class="bg-muted/50 text-muted-foreground rounded px-2 py-1 font-mono text-xs">
                      {{ comment.clauseTitle }}
                    </div>

                    <!-- Comment narrative -->
                    <p class="text-foreground leading-relaxed">&ldquo;{{ comment.commentText }}&rdquo;</p>

                    <!-- Proposed change box -->
                    <div class="border-success/20 bg-success/5 rounded border p-2 text-xs">
                      <span class="text-success mb-0.5 block font-semibold"> Proposed Redline Tweak: </span>
                      <span class="text-muted-foreground">
                        {{ comment.proposedChange }}
                      </span>
                    </div>

                    <div class="text-muted-foreground flex items-center justify-between pt-1 text-xs">
                      <span class="flex items-center gap-1">
                        <lucide-icon [img]="Clock" class="size-3" aria-hidden="true" />
                        {{ comment.timestamp }}
                      </span>
                    </div>
                  </div>

                  <div
                    ui-card-footer
                    class="border-border bg-muted/10 flex items-center justify-between gap-2 border-t p-2.5"
                  >
                    <button
                      ui-button
                      variant="outline"
                      size="sm"
                      class="h-7 gap-1 text-xs"
                      (click)="toggleReply(comment.id); $event.stopPropagation()"
                    >
                      <lucide-icon [img]="MessageSquareReply" class="text-muted-foreground size-3" aria-hidden="true" />
                      <span>Reply</span>
                    </button>

                    <button
                      ui-button
                      [variant]="comment.status === 'resolved' ? 'outline' : 'default'"
                      size="sm"
                      [class]="acceptButtonClass(comment)"
                      (click)="toggleAcceptTweak(comment.id); $event.stopPropagation()"
                    >
                      <lucide-icon [img]="Check" class="size-3" aria-hidden="true" />
                      <span>{{ comment.status === 'resolved' ? 'Reopen' : 'Accept Tweak' }}</span>
                    </button>
                  </div>

                  <!-- Inline Thread Reply Input -->
                  @if (replyingCommentId() === comment.id) {
                    <div class="border-border bg-background space-y-2 border-t p-3" (click)="$event.stopPropagation()">
                      <textarea
                        [value]="replyDraftText()"
                        (input)="replyDraftText.set($any($event.target).value)"
                        placeholder="Draft reply to counsel thread..."
                        class="border-border bg-card placeholder:text-muted-foreground focus-visible:ring-ring w-full resize-none rounded-md border p-2 text-xs focus-visible:ring-2 focus-visible:outline-none"
                        rows="2"
                      ></textarea>
                      <div class="flex items-center justify-end gap-2">
                        <button
                          ui-button
                          variant="ghost"
                          size="sm"
                          class="h-6 px-2 text-xs"
                          (click)="replyingCommentId.set(null)"
                        >
                          Cancel
                        </button>
                        <button
                          ui-button
                          variant="default"
                          size="sm"
                          class="h-6 gap-1 px-2.5 text-xs font-semibold"
                          (click)="submitReply(comment.id)"
                        >
                          <lucide-icon [img]="Send" class="size-3" aria-hidden="true" />
                          <span>Send</span>
                        </button>
                      </div>
                    </div>
                  }
                </div>
              }
            </div>
          </div>
        </aside>
      </div>
    </div>
  `,
})
export class UiContractRedlineDiffComponent {
  protected readonly Check = Check
  protected readonly CheckCircle2 = CheckCircle2
  protected readonly Clock = Clock
  protected readonly FileMinus2 = FileMinus2
  protected readonly FilePlus2 = FilePlus2
  protected readonly FileText = FileText
  protected readonly History = History
  protected readonly MessageSquare = MessageSquare
  protected readonly MessageSquareReply = MessageSquareReply
  protected readonly Scale = Scale
  protected readonly Send = Send
  protected readonly X = X
  protected readonly XCircle = XCircle

  @Input() contractTitle = 'Master Services Agreement · Redline Review v3.2 vs v3.1'
  @Input() counterparty = 'Acme Enterprise Corp'
  @Input() counselFirm = 'Davis Polk & Wardwell LLP'
  @Input() versionComparison = 'v3.2 (Counterparty Redlines) vs v3.1 (Baseline Executed)'
  @Input() initialStats?: RedlineStats
  @Input() set initialComments(v: CommentItem[] | undefined) {
    if (v) this.comments.set(v.map((c) => ({ ...c })))
  }
  @Input('class') className?: string

  readonly comments = signal<CommentItem[]>(defaultComments.map((c) => ({ ...c })))
  readonly activeCommentId = signal('c-1')
  readonly selectedFilter = signal<RedlineFilter>('all')
  readonly replyingCommentId = signal<string | null>(null)
  readonly replyDraftText = signal('')
  readonly actionBannerMessage = signal<string | null>(null)

  readonly pendingCount = computed(() => this.comments().filter((c) => c.status === 'pending').length)
  readonly resolvedCount = computed(() => this.comments().filter((c) => c.status === 'resolved').length)

  readonly filteredComments = computed(() => {
    const filter = this.selectedFilter()
    if (filter === 'pending') return this.comments().filter((c) => c.status === 'pending')
    if (filter === 'resolved') return this.comments().filter((c) => c.status === 'resolved')
    return this.comments()
  })

  get rootClass(): string {
    return cn('bg-background text-foreground w-full space-y-6', this.className)
  }

  clauseButtonClass(id: string): string {
    return cn(
      'h-7 gap-1.5 px-2.5 text-xs',
      this.activeCommentId() === id
        ? 'border-primary bg-primary/10 text-primary font-semibold'
        : 'text-muted-foreground',
    )
  }

  clauseBoxClass(id: string): string {
    return cn(
      'border-border bg-card space-y-4 rounded-lg border p-4 text-xs leading-relaxed transition-colors sm:p-5 sm:text-sm',
      this.activeCommentId() === id && 'ring-primary/40 ring-2',
    )
  }

  filterPillClass(filter: RedlineFilter): string {
    return cn(
      'focus-visible:ring-ring flex-1 rounded-md px-2 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',
      this.selectedFilter() === filter
        ? 'bg-background text-foreground font-semibold shadow-xs'
        : 'text-muted-foreground hover:text-foreground',
    )
  }

  commentCardClass(comment: CommentItem): string {
    return cn(
      'border-border hover:border-primary/40 focus-visible:ring-ring cursor-pointer transition-colors focus-visible:ring-2 focus-visible:outline-none',
      this.activeCommentId() === comment.id ? 'border-primary/60 bg-muted/20 ring-primary/30 ring-1' : 'bg-card',
      comment.status === 'resolved' && 'opacity-75',
    )
  }

  commentStatusClass(comment: CommentItem): string {
    return cn(
      'shrink-0 font-mono text-xs',
      comment.status === 'resolved'
        ? 'border-success/30 bg-success/10 text-success'
        : 'border-warning/30 bg-warning/10 text-warning',
    )
  }

  acceptButtonClass(comment: CommentItem): string {
    return cn('h-7 gap-1 text-xs', comment.status === 'resolved' ? 'text-muted-foreground' : 'font-medium')
  }

  selectComment(id: string, clauseId?: string): void {
    this.activeCommentId.set(id)
    if (clauseId && typeof document !== 'undefined') {
      const el = document.getElementById(clauseId)
      // jsdom and hidden containers have no scrollIntoView: selecting must still work.
      if (el && typeof el.scrollIntoView === 'function') {
        el.scrollIntoView({ behavior: 'smooth', block: 'center' })
      }
    }
  }

  toggleAcceptTweak(id: string): void {
    const comment = this.comments().find((c) => c.id === id)
    if (!comment) return
    const nextStatus = comment.status === 'pending' ? 'resolved' : 'pending'
    this.comments.update((prev) => prev.map((c) => (c.id === id ? { ...c, status: nextStatus } : c)))
    this.actionBannerMessage.set(
      nextStatus === 'resolved'
        ? `Accepted proposed language for "${comment.clauseTitle}"`
        : `Reopened review for "${comment.clauseTitle}"`,
    )
  }

  handleAcceptAll(): void {
    this.comments.update((prev) => prev.map((c) => ({ ...c, status: 'resolved' as const })))
    this.actionBannerMessage.set('All 3 pending redlines and attorney comments have been accepted into draft v3.3')
  }

  handleRejectAll(): void {
    this.comments.update((prev) => prev.map((c) => ({ ...c, status: 'pending' as const })))
    this.actionBannerMessage.set('Redline proposals flagged for revision. Counterparty notified of rejection.')
  }

  toggleReply(id: string): void {
    if (this.replyingCommentId() === id) {
      this.replyingCommentId.set(null)
      this.replyDraftText.set('')
    } else {
      this.replyingCommentId.set(id)
      this.replyDraftText.set('')
    }
  }

  submitReply(id: string): void {
    if (!this.replyDraftText().trim()) return
    const target = this.comments().find((c) => c.id === id)
    this.actionBannerMessage.set(`Reply posted to counsel thread on ${target?.clauseTitle}`)
    this.replyingCommentId.set(null)
    this.replyDraftText.set('')
  }
}
  • src/app/components/blocks/contract-redline-diff/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/angular/contract-redline-diff.json