@consilioweb/payload-support 0.9.13 → 0.10.0

package/dist/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/dist/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/dist/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;
+}

package/dist/styles/TicketInbox.module.scss

@@ -18,9 +18,21 @@
 
 .title {
   font-size: 24px;
-  font-weight: 800;
+  font-weight: 700;
   color: var(--theme-text);
   margin: 0;
+  line-height: 1.2;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: var(--theme-elevation-500);
+  margin: 2px 0 0;
+}
+
+.subtitleBreach {
+  color: var(--theme-error-500, #c4392c);
+  font-weight: 600;
 }
 
 .headerRight {
@@ -56,8 +68,8 @@
 
   &:focus {
     outline: none;
-    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);
   }
 
   &::placeholder { color: var(--theme-elevation-400); }
@@ -78,50 +90,84 @@
 .newTicketBtn {
   padding: 8px 18px;
   border-radius: 8px;
-  border: 1px solid var(--theme-elevation-200);
-  background: var(--theme-elevation-0, #fff);
-  color: var(--theme-text);
+  border: 1px solid var(--theme-text);
+  background: var(--theme-text);
+  color: var(--theme-bg, #fff);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   transition: all 100ms;
   text-decoration: none;
-  &:hover { background: var(--theme-elevation-100); }
+  &:hover {
+    background: var(--theme-elevation-800);
+    border-color: var(--theme-elevation-800);
+  }
 }
 
-// Filter tabs
+// Filter tabs / segments
 .tabs {
-  display: flex;
+  display: inline-flex;
+  align-items: center;
   gap: 0;
-  border-bottom: 1px solid var(--theme-elevation-150, #f1f5f9);
-  margin-bottom: 0;
+  background: var(--theme-elevation-100);
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 8px;
+  padding: 2px;
+  margin: 4px 0 6px;
+  flex-wrap: wrap;
 }
 
 .tab {
-  padding: 10px 16px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 12px;
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--theme-elevation-500);
   background: none;
   border: none;
-  border-bottom: 2px solid transparent;
+  border-radius: 6px;
   cursor: pointer;
-  transition: all 100ms;
+  transition: background 100ms, color 100ms;
   white-space: nowrap;
 
   &:hover { color: var(--theme-text); }
 
   &.tabActive {
     color: var(--theme-text);
-    border-bottom-color: #2563eb;
+    background: var(--theme-elevation-0, #fff);
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
+  }
+
+  &.tabAlert:not(.tabActive) {
+    color: var(--theme-error-500, #c4392c);
   }
 }
 
 .tabCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 6px;
   font-size: 11px;
-  font-weight: 700;
-  color: var(--theme-elevation-400);
-  margin-left: 4px;
+  font-weight: 600;
+  color: var(--theme-elevation-500);
+  background: var(--theme-elevation-200);
+  border-radius: 999px;
+}
+
+.tabActive .tabCount {
+  background: var(--theme-elevation-100);
+  color: var(--theme-text);
+}
+
+.tabCountAlert {
+  color: var(--theme-error-500, #c4392c) !important;
+  background: color-mix(in srgb, var(--theme-error-500, #c4392c) 12%, transparent) !important;
 }
 
 .sortRow {
@@ -147,54 +193,73 @@
   flex-direction: column;
 }
 
+// Layout : check | priority-dot | StatusPill | ticket# | subject | client | sla | updated | unread
 .row {
   display: grid;
-  grid-template-columns: 18px 16px 70px 50px 1fr 180px 100px 80px 100px 12px;
-  gap: 10px;
+  grid-template-columns: 18px 12px 110px 80px 1fr 200px 90px 90px 12px;
+  gap: 12px;
   align-items: center;
-  padding: 11px 12px;
-  border-bottom: 1px solid var(--theme-elevation-100, #f8fafc);
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--theme-elevation-100, #f3f3f3);
   cursor: pointer;
-  transition: background 60ms;
+  transition: background 80ms ease;
   text-decoration: none;
   color: inherit;
+  position: relative;
 
   &:hover { background: var(--theme-elevation-50); }
 
   @media (max-width: 900px) {
-    grid-template-columns: 16px 60px 1fr 100px 80px;
+    grid-template-columns: 16px 110px 1fr 80px 80px;
   }
 }
 
 .rowSelected {
-  background: #eff6ff;
-  border-left: 3px solid #2563eb;
-  padding-left: 9px;
+  background: var(--theme-elevation-100);
+}
+
+.rowUnread {
+  background: linear-gradient(90deg, color-mix(in srgb, var(--theme-info-500, #2a6bd8) 8%, transparent) 0, transparent 6px);
+
+  .subject { font-weight: 700; }
 }
 
-.statusDot {
+.rowBreach::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--theme-error-500, #c4392c);
+}
+
+.rowCheck {
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  accent-color: var(--theme-text);
+}
+
+.priorityDot {
+  display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
 }
 
-.statusText {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--theme-elevation-500);
-}
-
 .ticketNum {
   font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
   font-size: 11px;
   color: var(--theme-elevation-400);
   font-weight: 500;
+  letter-spacing: 0.02em;
 }
 
 .subject {
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--theme-text);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -209,35 +274,32 @@
   white-space: nowrap;
 }
 
-.categoryChip {
+// SLA cell — color reflects state (computed in computeSlaState)
+.slaCell {
   font-size: 11px;
-  font-weight: 600;
-  color: var(--theme-elevation-500);
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: var(--theme-elevation-100);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  color: var(--theme-elevation-400);
   white-space: nowrap;
 }
-
-.priorityBar {
-  width: 4px;
-  height: 18px;
-  border-radius: 2px;
-  flex-shrink: 0;
-}
+.slaOk     { color: var(--theme-elevation-400); }
+.slaWarn   { color: var(--theme-warning-500, #c97a0a); font-weight: 600; }
+.slaBreach { color: var(--theme-error-500, #c4392c); font-weight: 700; }
 
 .timeAgo {
   font-size: 12px;
   color: var(--theme-elevation-400);
   white-space: nowrap;
   text-align: right;
+  font-variant-numeric: tabular-nums;
 }
 
 .unreadDot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
-  background: #2563eb;
+  background: var(--theme-info-500, #2a6bd8);
   flex-shrink: 0;
 }