@consilioweb/payload-support 0.9.12 → 0.10.0

package/dist/views/shared/StatusPill.module.scss

@@ -0,0 +1,66 @@
+// StatusPill — sémantique unique des statuts ticket
+// Tous les fonds/couleurs sont mappés sur les --theme-* Payload natifs
+// via color-mix() pour rester cohérent en light/dark.
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  line-height: 1;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+// ---------- Variants ----------
+// Each variant uses color-mix on Payload's theme tokens so dark/light just works.
+
+.open {
+  background: color-mix(in srgb, var(--theme-success-500, #2dbf86) 12%, transparent);
+  color: var(--theme-success-500, #16a34a);
+}
+
+.pending {
+  background: color-mix(in srgb, var(--theme-warning-500, #e9a23a) 14%, transparent);
+  color: var(--theme-warning-500, #c97a0a);
+}
+
+.resolved {
+  background: color-mix(in srgb, var(--theme-elevation-500, #7a7a7a) 14%, transparent);
+  color: var(--theme-elevation-600, #5e5e5e);
+}
+
+.neutral {
+  background: var(--theme-elevation-100, #f3f3f3);
+  color: var(--theme-elevation-600, #5e5e5e);
+}
+
+.escalated {
+  background: color-mix(in srgb, var(--theme-error-500, #c4392c) 14%, transparent);
+  color: var(--theme-error-500, #c4392c);
+}
+
+.breach {
+  background: color-mix(in srgb, var(--theme-error-500, #c4392c) 14%, transparent);
+  color: var(--theme-error-500, #c4392c);
+  border-color: color-mix(in srgb, var(--theme-error-500, #c4392c) 30%, transparent);
+}
+
+[data-theme='dark'] {
+  .open     { color: var(--theme-success-500, #2dbf86); }
+  .pending  { color: var(--theme-warning-500, #e9a23a); }
+  .escalated, .breach { color: var(--theme-error-500, #ed5f51); }
+}

package/dist/views/shared/index.cjs

@@ -5,6 +5,8 @@ var adminTokens = require('./adminTokens');
 var AdminViewHeader = require('./AdminViewHeader');
 var Skeleton = require('./Skeleton');
 var config = require('./config');
+var StatusPill = require('./StatusPill');
+var sla = require('./sla');
 
 
 
@@ -56,3 +58,15 @@ Object.defineProperty(exports, "saveFeatures", {
   enumerable: true,
   get: function () { return config.saveFeatures; }
 });
+Object.defineProperty(exports, "StatusPill", {
+  enumerable: true,
+  get: function () { return StatusPill.StatusPill; }
+});
+Object.defineProperty(exports, "computeSlaState", {
+  enumerable: true,
+  get: function () { return sla.computeSlaState; }
+});
+Object.defineProperty(exports, "formatSlaRemaining", {
+  enumerable: true,
+  get: function () { return sla.formatSlaRemaining; }
+});

package/dist/views/shared/index.js

@@ -3,3 +3,5 @@ export { V, btnStyle } from './adminTokens.js';
 export { AdminViewHeader } from './AdminViewHeader.js';
 export { Skeleton, SkeletonCard, SkeletonDashboard, SkeletonTable, SkeletonText } from './Skeleton.js';
 export { DEFAULT_FEATURES, getFeatures, saveFeatures } from './config.js';
+export { StatusPill } from './StatusPill.js';
+export { computeSlaState, formatSlaRemaining } from './sla.js';

package/dist/views/shared/sla.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+const HOUR_MS = 36e5;
+const MINUTE_MS = 6e4;
+function computeSlaState(t, now = /* @__PURE__ */ new Date()) {
+  const hasFirstResponse = !!t.firstResponseAt;
+  const dueRaw = hasFirstResponse ? t.slaResolutionDue : t.slaFirstResponseDue;
+  const breached = hasFirstResponse ? !!t.slaResolutionBreached : !!t.slaFirstResponseBreached;
+  if (!dueRaw) return { state: "none", remainingMs: null, due: null };
+  const dueDate = new Date(dueRaw);
+  if (Number.isNaN(dueDate.getTime())) return { state: "none", remainingMs: null, due: null };
+  const remaining = dueDate.getTime() - now.getTime();
+  if (breached || remaining < 0) {
+    return { state: "breach", remainingMs: remaining, due: dueRaw };
+  }
+  if (remaining < HOUR_MS) {
+    return { state: "warn", remainingMs: remaining, due: dueRaw };
+  }
+  return { state: "ok", remainingMs: remaining, due: dueRaw };
+}
+function formatSlaRemaining(remainingMs) {
+  if (remainingMs == null) return "\u2014";
+  const abs = Math.abs(remainingMs);
+  const sign = remainingMs < 0 ? "\u2212" : "";
+  if (abs < HOUR_MS) {
+    const m2 = Math.floor(abs / MINUTE_MS);
+    return `${sign}${m2}m`;
+  }
+  const h = Math.floor(abs / HOUR_MS);
+  const m = Math.floor(abs % HOUR_MS / MINUTE_MS);
+  if (h < 24) return `${sign}${h}h${m > 0 ? ` ${String(m).padStart(2, "0")}` : ""}`;
+  const d = Math.floor(h / 24);
+  return `${sign}${d}j`;
+}
+
+exports.computeSlaState = computeSlaState;
+exports.formatSlaRemaining = formatSlaRemaining;

package/dist/views/shared/sla.js

@@ -0,0 +1,34 @@
+const HOUR_MS = 36e5;
+const MINUTE_MS = 6e4;
+function computeSlaState(t, now = /* @__PURE__ */ new Date()) {
+  const hasFirstResponse = !!t.firstResponseAt;
+  const dueRaw = hasFirstResponse ? t.slaResolutionDue : t.slaFirstResponseDue;
+  const breached = hasFirstResponse ? !!t.slaResolutionBreached : !!t.slaFirstResponseBreached;
+  if (!dueRaw) return { state: "none", remainingMs: null, due: null };
+  const dueDate = new Date(dueRaw);
+  if (Number.isNaN(dueDate.getTime())) return { state: "none", remainingMs: null, due: null };
+  const remaining = dueDate.getTime() - now.getTime();
+  if (breached || remaining < 0) {
+    return { state: "breach", remainingMs: remaining, due: dueRaw };
+  }
+  if (remaining < HOUR_MS) {
+    return { state: "warn", remainingMs: remaining, due: dueRaw };
+  }
+  return { state: "ok", remainingMs: remaining, due: dueRaw };
+}
+function formatSlaRemaining(remainingMs) {
+  if (remainingMs == null) return "\u2014";
+  const abs = Math.abs(remainingMs);
+  const sign = remainingMs < 0 ? "\u2212" : "";
+  if (abs < HOUR_MS) {
+    const m2 = Math.floor(abs / MINUTE_MS);
+    return `${sign}${m2}m`;
+  }
+  const h = Math.floor(abs / HOUR_MS);
+  const m = Math.floor(abs % HOUR_MS / MINUTE_MS);
+  if (h < 24) return `${sign}${h}h${m > 0 ? ` ${String(m).padStart(2, "0")}` : ""}`;
+  const d = Math.floor(h / 24);
+  return `${sign}${d}j`;
+}
+
+export { computeSlaState, formatSlaRemaining };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consilioweb/payload-support",
-  "version": "0.9.12",
+  "version": "0.10.0",
   "description": "Payload CMS plugin — professional support & ticketing system with AI, SLA, time tracking, live chat, and more",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/TicketConversation/locales/en.json

@@ -108,8 +108,16 @@
       "all": "All",
       "open": "Open",
       "waiting": "Waiting",
+      "slaBreach": "SLA breached",
       "resolved": "Resolved"
     },
+    "slaColumn": "SLA",
+    "slaBanner": {
+      "breached": "SLA breached",
+      "responseAwaitedFor": "Response awaited for {{duration}}",
+      "target": "Target: {{target}}",
+      "escalate": "Escalate"
+    },
     "sort": {
       "newest": "Sort by: Newest",
       "oldest": "Sort by: Oldest",

package/src/components/TicketConversation/locales/fr.json

@@ -108,7 +108,15 @@
       "all": "Tous",
       "open": "Ouverts",
       "waiting": "Attente",
-      "resolved": "Resolus"
+      "slaBreach": "SLA dépassé",
+      "resolved": "Résolus"
+    },
+    "slaColumn": "SLA",
+    "slaBanner": {
+      "breached": "SLA dépassé",
+      "responseAwaitedFor": "Réponse attendue depuis {{duration}}",
+      "target": "Cible : {{target}}",
+      "escalate": "Escalader"
     },
     "sort": {
       "newest": "Tri : Recents",

package/src/index.ts

@@ -25,6 +25,8 @@ export { readSupportSettings, readUserPrefs, DEFAULT_SETTINGS, DEFAULT_USER_PREF
 export type { SupportSettings, UserPrefs } from './utils/readSettings'
 export { createAdminNotification } from './utils/adminNotification'
 export { dispatchWebhook } from './utils/webhookDispatcher'
+export { generateTicketSynthesis } from './utils/generateTicketSynthesis'
+export type { TicketSynthesisResult } from './utils/generateTicketSynthesis'
 
 // Hooks
 export { createAssignSlaDeadlines, createCheckSlaOnResolve, createCheckSlaOnReply, calculateBusinessHoursDeadline } from './hooks/checkSLA'

package/src/styles/TicketDetail.module.scss

@@ -273,15 +273,39 @@
   padding: 14px 12px;
   border-radius: 10px;
   position: relative;
-  transition: background 80ms;
+  transition: background 80ms ease;
 
   &:hover { background: var(--theme-elevation-50); }
 }
 
+// Client bubble — warm tint for fast scanning (left side of the convo).
+.messageClient {
+  background: color-mix(in srgb, var(--theme-warning-500, #c97a0a) 5%, transparent);
+  border-left: 3px solid color-mix(in srgb, var(--theme-warning-500, #c97a0a) 35%, transparent);
+
+  &:hover {
+    background: color-mix(in srgb, var(--theme-warning-500, #c97a0a) 10%, transparent);
+  }
+}
+
+// Admin/support bubble — neutral, the user expects to author here.
+.messageAdmin {
+  background: var(--theme-elevation-0, #fff);
+  border-left: 3px solid color-mix(in srgb, var(--theme-info-500, #2a6bd8) 35%, transparent);
+
+  &:hover {
+    background: var(--theme-elevation-50);
+  }
+}
+
+// Internal note — visible to agents only, takes precedence over admin styles.
 .messageInternal {
-  background: #fefce8;
-  border-left: 3px dashed #d97706;
-  &:hover { background: #fef9c3; }
+  background: color-mix(in srgb, var(--theme-warning-500, #c97a0a) 12%, transparent) !important;
+  border-left: 3px dashed var(--theme-warning-500, #c97a0a) !important;
+
+  &:hover {
+    background: color-mix(in srgb, var(--theme-warning-500, #c97a0a) 18%, transparent) !important;
+  }
 }
 
 .avatar {
@@ -402,25 +426,30 @@
   position: relative;
   background: var(--theme-elevation-0, #fff);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
-  transition: border-color 150ms, box-shadow 150ms;
+  transition: border-color 150ms, box-shadow 150ms, background 150ms;
 
   &:focus-within {
-    border-color: #2563eb;
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
+    border-color: var(--theme-info-500, #2a6bd8);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-info-500, #2a6bd8) 18%, transparent);
   }
 }
 
 .composerInternal {
-  border-color: #d97706;
+  background: color-mix(in srgb, var(--theme-warning-500, #c97a0a) 8%, var(--theme-elevation-0, #fff));
+  border-color: var(--theme-warning-500, #c97a0a);
   border-style: dashed;
-  &:focus-within { border-color: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.08); }
+
+  &:focus-within {
+    border-color: var(--theme-warning-500, #c97a0a);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-warning-500, #c97a0a) 18%, transparent);
+  }
 }
 
 // #5 — Drag & drop highlight
 .composerDragOver {
-  border-color: #2563eb;
-  background: rgba(37, 99, 235, 0.04);
-  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
+  border-color: var(--theme-info-500, #2a6bd8);
+  background: color-mix(in srgb, var(--theme-info-500, #2a6bd8) 6%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-info-500, #2a6bd8) 18%, transparent);
 }
 
 .composerToolbar {
@@ -452,6 +481,27 @@
   }
 
   &:disabled { opacity: 0.3; cursor: not-allowed; }
+}
+
+// AI variant — promoted, distinct color so it doesn't blend with toolbar icons.
+.toolbarBtnAi {
+  width: auto;
+  height: 28px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 600;
+  background: color-mix(in srgb, var(--theme-accent-500, #6b46e8) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--theme-accent-500, #6b46e8) 30%, transparent);
+  color: var(--theme-accent-500, #6b46e8);
+  gap: 4px;
+
+  &:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--theme-accent-500, #6b46e8) 18%, transparent);
+    color: var(--theme-accent-500, #6b46e8);
+  }
+}
+
+.toolbarBtn {
 
   // Tooltip
   &::after {
@@ -550,27 +600,61 @@
   }
 }
 
+.sendShortcut {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  color: var(--theme-elevation-400);
+  font-size: 11px;
+  margin-right: 8px;
+
+  kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 4px;
+    border-radius: 3px;
+    background: var(--theme-elevation-100);
+    border: 1px solid var(--theme-elevation-200);
+    font-family: inherit;
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--theme-elevation-600);
+  }
+}
+
 .sendBtn {
   padding: 8px 22px;
   border-radius: 8px;
-  border: none;
-  background: #2563eb;
-  color: #fff;
+  border: 1px solid var(--theme-text);
+  background: var(--theme-text);
+  color: var(--theme-bg, #fff);
   font-size: 13px;
-  font-weight: 700;
+  font-weight: 600;
   cursor: pointer;
-  transition: background 100ms;
+  transition: background 100ms, border-color 100ms;
   display: flex;
   align-items: center;
   gap: 6px;
 
-  &:hover { background: #1d4ed8; }
+  &:hover {
+    background: var(--theme-elevation-800);
+    border-color: var(--theme-elevation-800);
+  }
   &:disabled { opacity: 0.4; cursor: not-allowed; }
 }
 
 .sendBtnInternal {
-  background: #d97706;
-  &:hover { background: #b45309; }
+  background: var(--theme-warning-500, #c97a0a);
+  border-color: var(--theme-warning-500, #c97a0a);
+  color: #fff;
+
+  &:hover {
+    background: color-mix(in srgb, var(--theme-warning-500, #c97a0a) 80%, black);
+    border-color: color-mix(in srgb, var(--theme-warning-500, #c97a0a) 80%, black);
+  }
 }
 
 // ─── ATTACHMENTS ───
@@ -1048,3 +1132,169 @@
     font-size: 12px;
   }
 }
+
+// ─── SLA BREACH BANNER ───
+// Top-of-ticket alert when first-response or resolution SLA is exceeded.
+// Uses --theme-error-* tokens for light/dark coherence.
+.slaBanner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  margin: 0 0 16px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--theme-error-500, #c4392c) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--theme-error-500, #c4392c) 30%, transparent);
+  color: var(--theme-error-500, #c4392c);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.slaBannerIcon {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--theme-elevation-0, #fff);
+  color: var(--theme-error-500, #c4392c);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.slaBannerBody {
+  flex: 1;
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 6px;
+  color: var(--theme-text);
+
+  strong {
+    color: var(--theme-error-500, #c4392c);
+    font-weight: 700;
+  }
+}
+
+.slaBannerSep {
+  color: var(--theme-elevation-400);
+}
+
+.slaBannerTarget {
+  color: var(--theme-elevation-500);
+  font-weight: 400;
+}
+
+.slaBannerCta {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--theme-error-500, #c4392c);
+  background: var(--theme-elevation-0, #fff);
+  color: var(--theme-error-500, #c4392c);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 100ms ease;
+
+  &:hover {
+    background: var(--theme-error-500, #c4392c);
+    color: var(--theme-elevation-0, #fff);
+  }
+
+  &:focus-visible {
+    outline: 0;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-error-500, #c4392c) 25%, transparent);
+  }
+}
+
+// ─── AI SYNTHESIS CARD (promoted top of sidebar) ───
+.aiCard {
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--theme-accent-500, #6b46e8) 10%, transparent) 0%,
+    var(--theme-elevation-0, #fff) 70%);
+  border: 1px solid color-mix(in srgb, var(--theme-accent-500, #6b46e8) 25%, transparent);
+}
+
+.aiCardTitle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--theme-accent-500, #6b46e8);
+  margin-bottom: 10px;
+}
+
+.aiCardIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--theme-accent-500, #6b46e8);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.aiCardLead {
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--theme-text);
+  margin: 0 0 10px;
+  text-wrap: pretty;
+}
+
+.aiCardChips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 10px;
+}
+
+.aiChip {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--theme-text);
+  background: var(--theme-elevation-0, #fff);
+  border: 1px solid var(--theme-elevation-200);
+}
+
+.aiCardFacts {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.aiCardFact {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--theme-text);
+}
+
+.aiCardDot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-top: 6px;
+  background: var(--theme-accent-500, #6b46e8);
+  flex-shrink: 0;
+}