@wealthx/shadcn 1.5.38 → 1.5.40

package/src/components/ui/policy-ai/policy-ai-primitives.tsx

@@ -0,0 +1,332 @@
+import * as React from "react";
+import { ChevronDown, ChevronUp, FileText, Tag } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type PolicyType =
+  | "Income"
+  | "Security"
+  | "Serviceability"
+  | "Loan Type"
+  | "Borrower";
+
+export type PolicyQueryType =
+  | "single_bank"
+  | "cross_bank_comparison"
+  | "threshold_filter"
+  | "ranking"
+  | "scenario_match"
+  | "general";
+
+export type PolicyVerdict = "yes" | "soft_no" | "no" | "unknown";
+
+/** What the Policy AI classifier detected about the broker's query. */
+export interface PolicyQueryContext {
+  policyType: PolicyType;
+  /** Fine-grained categories, e.g. ["Bonus Income", "Add Backs"] */
+  categories: string[];
+  queryType: PolicyQueryType;
+  /** Only set for single_bank queries. */
+  bankName?: string;
+}
+
+/** A single citation attached to a Policy AI response. */
+export interface PolicyCitationItem {
+  /** 1-based index used inline as [N] markers in the answer text. */
+  index: number;
+  bankName: string;
+  category: string;
+  /** Excerpt from the source policy document. */
+  excerpt: string;
+}
+
+/** A bank's verdict in a cross-bank comparison. */
+export interface PolicyBankVerdict {
+  bankName: string;
+  verdict: PolicyVerdict;
+  /** Brief human-readable explanation from the policy engine. */
+  details?: string;
+  citations?: number[];
+}
+
+/** A bank's entry in a TOPSIS-ranked list. */
+export interface PolicyRankedBankItem {
+  rank: number;
+  bankName: string;
+  /** TOPSIS closeness score 0.0–1.0 (higher = better). */
+  score: number;
+  verdict: PolicyVerdict;
+  /** Key policy highlights shown as bullets under the bank row. */
+  highlights: string[];
+  citations?: number[];
+}
+
+/**
+ * Discriminated union of the three response content formats that Policy AI
+ * can return, corresponding to retrieval tiers A / B / C.
+ */
+export type PolicyResponseContent =
+  | {
+      type: "single_bank";
+      bankName: string;
+      verdict: PolicyVerdict;
+      /** Prose answer with inline [N] citation markers. */
+      answer: string;
+      citations: PolicyCitationItem[];
+    }
+  | {
+      type: "cross_bank_comparison";
+      categories: string[];
+      banks: PolicyBankVerdict[];
+      summaryCounts: {
+        yes: number;
+        softNo: number;
+        no: number;
+        total: number;
+      };
+      citations: PolicyCitationItem[];
+    }
+  | {
+      type: "ranked_list";
+      categories: string[];
+      banks: PolicyRankedBankItem[];
+      citations: PolicyCitationItem[];
+    };
+
+/**
+ * A past conversation entry — reserved for the conversation history feature.
+ * Used when rendering a list of previous Policy AI sessions (inline mode).
+ */
+export interface PolicyConversationItem {
+  id: string;
+  /** First user query — used as the conversation title. */
+  title: string;
+  /** Human-readable timestamp, e.g. "Today, 10:24 AM". */
+  timestamp?: string;
+}
+
+/** A single message in the Policy AI chat. */
+export interface PolicyAIMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  /** Classification info shown above the response as a query chip. */
+  queryContext?: PolicyQueryContext;
+  /** Structured response payload (absent for user messages). */
+  responseContent?: PolicyResponseContent;
+}
+
+// ---------------------------------------------------------------------------
+// PolicyQueryChip props
+// ---------------------------------------------------------------------------
+
+export interface PolicyQueryChipProps {
+  context: PolicyQueryContext;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// PolicyVerdictBadge props
+// ---------------------------------------------------------------------------
+
+export interface PolicyVerdictBadgeProps {
+  verdict: PolicyVerdict;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// PolicyCitationPanel props
+// ---------------------------------------------------------------------------
+
+export interface PolicyCitationPanelProps {
+  citations: PolicyCitationItem[];
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
+
+const POLICY_TYPE_COLORS: Record<PolicyType, string> = {
+  Income: "text-primary",
+  Security: "text-warning",
+  Serviceability: "text-info",
+  "Loan Type": "text-secondary",
+  Borrower: "text-success",
+};
+
+const QUERY_TYPE_LABELS: Record<PolicyQueryType, string> = {
+  single_bank: "Single bank",
+  cross_bank_comparison: "Cross-bank",
+  threshold_filter: "Filter",
+  ranking: "Ranking",
+  scenario_match: "Scenario",
+  general: "General",
+};
+
+// ---------------------------------------------------------------------------
+// PolicyQueryChip (Atom)
+// ---------------------------------------------------------------------------
+
+/**
+ * Chip rendered above every Policy AI assistant response.
+ * Shows the detected policy type, categories, and query routing type —
+ * equivalent to Jira Rovo's "Searching Confluence…" context indicator.
+ *
+ * @example
+ * <PolicyQueryChip context={{ policyType: "Income", categories: ["Bonus Income"], queryType: "ranking" }} />
+ */
+export function PolicyQueryChip({ context, className }: PolicyQueryChipProps) {
+  const { policyType, categories, queryType, bankName } = context;
+  const typeColor = POLICY_TYPE_COLORS[policyType];
+
+  return (
+    <div
+      data-slot="policy-query-chip"
+      className={cn(
+        "inline-flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground",
+        className,
+      )}
+    >
+      <Tag className="size-3 shrink-0" aria-hidden="true" />
+
+      {/* Policy type */}
+      <span className={cn("font-medium", typeColor)}>{policyType}</span>
+
+      {/* Bank name (single_bank only) */}
+      {bankName && (
+        <>
+          <span className="text-border">·</span>
+          <span className="font-medium text-foreground">{bankName}</span>
+        </>
+      )}
+
+      {/* Categories */}
+      {categories.length > 0 && (
+        <>
+          <span className="text-border">·</span>
+          <span>{categories.join(", ")}</span>
+        </>
+      )}
+
+      {/* Query type badge */}
+      <Badge variant="outline" className="text-xs px-1.5 py-0 shrink-0">
+        {QUERY_TYPE_LABELS[queryType]}
+      </Badge>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PolicyVerdictBadge (Atom)
+// ---------------------------------------------------------------------------
+
+const VERDICT_CONFIG: Record<
+  PolicyVerdict,
+  {
+    variant: "success" | "warning" | "destructive" | "secondary";
+    label: string;
+  }
+> = {
+  yes: { variant: "success", label: "Yes" },
+  soft_no: { variant: "warning", label: "Soft No" },
+  no: { variant: "destructive", label: "No" },
+  unknown: { variant: "secondary", label: "—" },
+};
+
+/**
+ * Coloured badge indicating a bank's lending policy verdict.
+ * - Yes → success (green)
+ * - Soft No → warning (amber) — accepted on specialist/non-prime products
+ * - No → destructive (red) — not accepted
+ * - Unknown → secondary — data not available
+ */
+export function PolicyVerdictBadge({
+  verdict,
+  className,
+}: PolicyVerdictBadgeProps) {
+  const { variant, label } = VERDICT_CONFIG[verdict];
+  return (
+    <Badge
+      data-slot="policy-verdict-badge"
+      variant={variant}
+      className={cn("shrink-0", className)}
+    >
+      {label}
+    </Badge>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PolicyCitationPanel (Molecule)
+// ---------------------------------------------------------------------------
+
+/**
+ * Collapsible panel listing the policy document sources behind an AI response.
+ * Rendered below every response format (SingleBankAnswer, ComparisonTable, RankedList).
+ * Collapsed by default; expands on toggle.
+ */
+export function PolicyCitationPanel({
+  citations,
+  className,
+}: PolicyCitationPanelProps) {
+  const [open, setOpen] = React.useState(false);
+
+  if (citations.length === 0) return null;
+
+  return (
+    <div
+      data-slot="policy-citation-panel"
+      className={cn("border-t border-border", className)}
+    >
+      <Button
+        variant="ghost"
+        size="sm"
+        className="w-full justify-between px-0 text-xs text-muted-foreground hover:text-foreground hover:bg-transparent gap-1"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+      >
+        <span className="flex items-center gap-1.5">
+          <FileText className="size-3" aria-hidden="true" />
+          View sources ({citations.length})
+        </span>
+        {open ? (
+          <ChevronUp className="size-3" aria-hidden="true" />
+        ) : (
+          <ChevronDown className="size-3" aria-hidden="true" />
+        )}
+      </Button>
+
+      {open && (
+        <ol className="mt-1 flex flex-col gap-2 pb-1">
+          {citations.map((cite) => (
+            <li key={cite.index} className="flex gap-2 text-xs">
+              {/* Index chip */}
+              <span className="shrink-0 flex items-center justify-center size-4 bg-muted text-muted-foreground font-mono font-semibold text-xs">
+                {cite.index}
+              </span>
+              <div className="flex flex-col gap-0.5 min-w-0">
+                <div className="flex items-center gap-1.5 flex-wrap">
+                  <span className="font-medium text-foreground">
+                    {cite.bankName}
+                  </span>
+                  <Badge variant="secondary" className="text-xs px-1.5 py-0">
+                    {cite.category}
+                  </Badge>
+                </div>
+                <p className="text-muted-foreground leading-relaxed line-clamp-3">
+                  {cite.excerpt}
+                </p>
+              </div>
+            </li>
+          ))}
+        </ol>
+      )}
+    </div>
+  );
+}