chordia-ui 3.4.7 → 3.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/components/UpdatedInteractionDetails.cjs.js +7 -2
  2. package/dist/components/UpdatedInteractionDetails.cjs.js.map +1 -1
  3. package/dist/components/UpdatedInteractionDetails.es.js +1282 -541
  4. package/dist/components/UpdatedInteractionDetails.es.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/UpdatedInteractionDetails/UpdatedCoachingSynthesisCard.jsx +41 -30
  7. package/src/components/UpdatedInteractionDetails/UpdatedInteractionContext.jsx +192 -77
  8. package/src/components/UpdatedInteractionDetails/UpdatedInteractionDetails.jsx +180 -125
  9. package/src/components/UpdatedInteractionDetails/UpdatedInteractionScores.jsx +21 -34
  10. package/src/components/UpdatedInteractionDetails/UpdatedThreads.jsx +739 -0
  11. package/src/components/UpdatedInteractionDetails/index.js +1 -0
  12. package/src/fonts/.DS_Store +0 -0
package/dist/components/UpdatedInteractionDetails.es.js CHANGED
@@ -1,8 +1,8 @@
1
- import { jsxs as t, jsx as e } from "react/jsx-runtime";
2
- import at, { useState as _, useRef as R } from "react";
3
- import { ShieldCheck as dt, TrendingUp as ct, Lightbulb as gt, ThumbsUp as We, ExternalLink as Ce, FileSignal as De, ChevronUp as Fe, ChevronDown as ze, ScrollText as pt, PauseCircle as ft, PlayCircle as ht, Info as yt, ArrowLeft as ye, ClipboardList as ut, CalendarDays as mt, PhoneIncoming as vt, Headset as xt, Repeat as bt, CircleUser as ue, History as St, ArrowRight as kt } from "lucide-react";
4
- import { U as wt } from "../UpdatedInteractionRecording.es.js";
5
- const c = {
1
+ import { jsxs as n, Fragment as ae, jsx as e } from "react/jsx-runtime";
2
+ import Dt, { useState as M, useRef as T, useMemo as le, useEffect as de } from "react";
3
+ import { ShieldCheck as It, TrendingUp as zt, Lightbulb as Gt, ThumbsUp as je, ChevronUp as ce, ChevronDown as fe, ThumbsDown as Mt, FileSignal as Oe, ScrollText as _t, PauseCircle as Et, PlayCircle as At, Info as Ht, MessagesSquare as Rt, CircleCheck as $e, MessageSquareMore as Tt, Ellipsis as Bt, CornerDownRight as Lt, ArrowLeft as _e, ClipboardList as Pt, CalendarDays as jt, PhoneIncoming as Ot, Headset as $t, Repeat as Nt, CircleUser as se, ExternalLink as qt, History as Kt, ArrowRight as Yt } from "lucide-react";
4
+ import { U as Vt } from "../UpdatedInteractionRecording.es.js";
5
+ const I = {
6
6
  strong: "var(--Grey-Strong, #2E3236)",
7
7
  muted: "var(--Grey-Muted, #808183)",
8
8
  absent: "var(--Grey-absent, #D9D9D9)",
@@ -11,17 +11,17 @@ const c = {
11
11
  quoteLine: "var(--border-warm, #B2AEA8)",
12
12
  quoteText: "var(--text-subtle-warm, #767473)",
13
13
  iconBg: "var(--surface-hover, #F3F7F7)"
14
- }, Wt = {
14
+ }, Qt = {
15
15
  effective: "Effective",
16
16
  strong: "Strong",
17
17
  needs_improvement: "Needs Improvement",
18
18
  mixed: "Mixed"
19
- }, me = "updated-coaching-synthesis-keyframes";
20
- function Ct() {
21
- if (typeof document > "u" || document.getElementById(me))
19
+ }, Ee = "updated-coaching-synthesis-keyframes";
20
+ function Xt() {
21
+ if (typeof document > "u" || document.getElementById(Ee))
22
22
  return;
23
- const n = document.createElement("style");
24
- n.id = me, n.textContent = `
23
+ const t = document.createElement("style");
24
+ t.id = Ee, t.textContent = `
25
25
  @keyframes updated-coaching-shimmer {
26
26
  0% { background-position: -200% 0; }
27
27
  100% { background-position: 200% 0; }
@@ -30,11 +30,11 @@ function Ct() {
30
30
  0%, 100% { opacity: 0.4; }
31
31
  50% { opacity: 1; }
32
32
  }
33
- `, document.head.appendChild(n);
33
+ `, document.head.appendChild(t);
34
34
  }
35
- function Dt({ overall: n }) {
36
- const i = Wt[n] || (n ? n.replace(/_/g, " ") : "");
37
- return /* @__PURE__ */ t("div", { style: {
35
+ function Zt({ overall: t }) {
36
+ const i = Qt[t] || (t ? t.replace(/_/g, " ") : "");
37
+ return /* @__PURE__ */ n("div", { style: {
38
38
  display: "flex",
39
39
  alignItems: "center",
40
40
  gap: 8,
@@ -43,37 +43,37 @@ function Dt({ overall: n }) {
43
43
  /* @__PURE__ */ e("span", { style: {
44
44
  fontSize: 13,
45
45
  fontWeight: 400,
46
- color: c.strong,
46
+ color: I.strong,
47
47
  fontFamily: "var(--font-sans)",
48
48
  lineHeight: 1.2
49
49
  }, children: "Overall:" }),
50
- /* @__PURE__ */ t("div", { style: {
50
+ /* @__PURE__ */ n("div", { style: {
51
51
  display: "flex",
52
52
  alignItems: "center",
53
53
  gap: 6
54
54
  }, children: [
55
- /* @__PURE__ */ e(We, { size: 14, color: c.strong, strokeWidth: 1.5 }),
55
+ /* @__PURE__ */ e(je, { size: 14, color: I.strong, strokeWidth: 1.5 }),
56
56
  /* @__PURE__ */ e("span", { style: {
57
57
  fontSize: 13,
58
58
  fontWeight: 600,
59
- color: c.strong,
59
+ color: I.strong,
60
60
  fontFamily: "var(--font-sans)",
61
61
  lineHeight: 1.2
62
62
  }, children: i })
63
63
  ] })
64
64
  ] });
65
65
  }
66
- function Ft({ item: n }) {
67
- const i = typeof n == "string" ? n : (n == null ? void 0 : n.text) || "", r = typeof n == "object" ? n == null ? void 0 : n.quote : null;
68
- return /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
66
+ function Jt({ item: t }) {
67
+ const i = typeof t == "string" ? t : (t == null ? void 0 : t.text) || "", o = typeof t == "object" ? t == null ? void 0 : t.quote : null;
68
+ return /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
69
69
  /* @__PURE__ */ e("div", { style: {
70
70
  fontSize: 14,
71
71
  fontWeight: 600,
72
- color: c.itemText,
72
+ color: I.itemText,
73
73
  fontFamily: "var(--font-sans)",
74
74
  lineHeight: 1.5
75
75
  }, children: i }),
76
- r && /* @__PURE__ */ t("div", { style: {
76
+ o && /* @__PURE__ */ n("div", { style: {
77
77
  display: "flex",
78
78
  gap: 10
79
79
  }, children: [
@@ -81,31 +81,31 @@ function Ft({ item: n }) {
81
81
  width: 1,
82
82
  flexShrink: 0,
83
83
  alignSelf: "stretch",
84
- background: c.quoteLine
84
+ background: I.quoteLine
85
85
  } }),
86
- /* @__PURE__ */ t("div", { style: {
86
+ /* @__PURE__ */ n("div", { style: {
87
87
  fontSize: 14,
88
88
  fontWeight: 400,
89
- color: c.quoteText,
89
+ color: I.quoteText,
90
90
  fontFamily: "var(--font-sans)",
91
91
  lineHeight: 1.5
92
92
  }, children: [
93
93
  "“",
94
- r,
94
+ o,
95
95
  "”"
96
96
  ] })
97
97
  ] })
98
98
  ] });
99
99
  }
100
- function ve({ icon: n, label: i, items: r }) {
101
- return !r || r.length === 0 ? null : /* @__PURE__ */ t("div", { style: {
100
+ function Ae({ icon: t, label: i, items: o }) {
101
+ return !o || o.length === 0 ? null : /* @__PURE__ */ n("div", { style: {
102
102
  flex: 1,
103
103
  display: "flex",
104
104
  flexDirection: "column",
105
105
  gap: 16,
106
106
  borderRadius: 12
107
107
  }, children: [
108
- /* @__PURE__ */ t("div", { style: {
108
+ /* @__PURE__ */ n("div", { style: {
109
109
  display: "flex",
110
110
  alignItems: "center",
111
111
  gap: 16
@@ -117,147 +117,170 @@ function ve({ icon: n, label: i, items: r }) {
117
117
  width: 24,
118
118
  height: 24,
119
119
  borderRadius: 9999,
120
- background: c.iconBg,
120
+ background: I.iconBg,
121
121
  flexShrink: 0
122
- }, children: n }),
122
+ }, children: t }),
123
123
  /* @__PURE__ */ e("span", { style: {
124
124
  fontSize: 16,
125
125
  fontWeight: 600,
126
- color: c.strong,
126
+ color: I.strong,
127
127
  fontFamily: "var(--font-sans)",
128
128
  lineHeight: "normal"
129
129
  }, children: i })
130
130
  ] }),
131
- /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: r.map((s, p) => /* @__PURE__ */ e(Ft, { item: s }, p)) })
131
+ /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: o.map((r, a) => /* @__PURE__ */ e(Jt, { item: r }, a)) })
132
132
  ] });
133
133
  }
134
- const zt = ({ data: n, loading: i, error: r }) => {
135
- var f, u;
136
- if (at.useEffect(() => {
137
- Ct();
134
+ const Ut = ({ data: t, loading: i, error: o }) => {
135
+ var c, h;
136
+ if (Dt.useEffect(() => {
137
+ Xt();
138
138
  }, []), i)
139
- return /* @__PURE__ */ t("div", { style: {
140
- display: "flex",
141
- flexDirection: "column",
142
- gap: 12
143
- }, children: [
144
- /* @__PURE__ */ t("div", { style: {
139
+ return /* @__PURE__ */ n(ae, { children: [
140
+ /* @__PURE__ */ e("style", { children: `
141
+ @keyframes coaching-spinner-spin {
142
+ from { transform: rotate(0deg); }
143
+ to { transform: rotate(360deg); }
144
+ }
145
+ ` }),
146
+ /* @__PURE__ */ n("div", { style: {
145
147
  display: "flex",
148
+ flexDirection: "column",
146
149
  alignItems: "center",
147
- gap: 8
150
+ justifyContent: "center",
151
+ gap: 12,
152
+ padding: "48px 24px"
148
153
  }, children: [
149
- /* @__PURE__ */ e("div", { style: {
150
- width: 6,
151
- height: 6,
152
- borderRadius: "50%",
153
- background: c.accent,
154
- animation: "updated-coaching-pulse 1.5s ease-in-out infinite"
155
- } }),
154
+ /* @__PURE__ */ n(
155
+ "svg",
156
+ {
157
+ width: 48,
158
+ height: 48,
159
+ viewBox: "0 0 48 48",
160
+ fill: "none",
161
+ xmlns: "http://www.w3.org/2000/svg",
162
+ style: { animation: "coaching-spinner-spin 1.2s linear infinite" },
163
+ children: [
164
+ /* @__PURE__ */ e(
165
+ "path",
166
+ {
167
+ d: "M43 24C43 26.4951 42.5086 28.9658 41.5537 31.271C40.5989 33.5762 39.1993 35.6707 37.435 37.435C35.6707 39.1993 33.5762 40.5989 31.271 41.5537C28.9658 42.5086 26.4951 43 24 43C21.5049 43 19.0342 42.5086 16.729 41.5537C14.4238 40.5989 12.3293 39.1993 10.565 37.435C8.80066 35.6707 7.40113 33.5762 6.44629 31.271C5.49145 28.9658 5 26.4951 5 24",
168
+ stroke: "#F3E7C7",
169
+ strokeWidth: "4",
170
+ strokeLinecap: "round"
171
+ }
172
+ ),
173
+ /* @__PURE__ */ e(
174
+ "path",
175
+ {
176
+ d: "M12 24C12 22.4241 12.3104 20.8637 12.9134 19.4078C13.5165 17.9519 14.4004 16.629 15.5147 15.5147C16.629 14.4004 17.9519 13.5165 19.4078 12.9134C20.8637 12.3104 22.4241 12 24 12C25.5759 12 27.1363 12.3104 28.5922 12.9134C30.0481 13.5165 31.371 14.4004 32.4853 15.5147C33.5996 16.629 34.4835 17.9519 35.0866 19.4078C35.6896 20.8637 36 22.4241 36 24",
177
+ stroke: "#00A66E",
178
+ strokeWidth: "4",
179
+ strokeLinecap: "round"
180
+ }
181
+ ),
182
+ /* @__PURE__ */ e(
183
+ "path",
184
+ {
185
+ d: "M20 24C20 24.5253 20.1035 25.0454 20.3045 25.5307C20.5055 26.016 20.8001 26.457 21.1716 26.8284C21.543 27.1999 21.984 27.4945 22.4693 27.6955C22.9546 27.8965 23.4747 28 24 28C24.5253 28 25.0454 27.8965 25.5307 27.6955C26.016 27.4945 26.457 27.1999 26.8284 26.8284C27.1999 26.457 27.4945 26.016 27.6955 25.5307C27.8965 25.0454 28 24.5253 28 24",
186
+ stroke: "#F3E7C7",
187
+ strokeWidth: "4",
188
+ strokeLinecap: "round"
189
+ }
190
+ )
191
+ ]
192
+ }
193
+ ),
156
194
  /* @__PURE__ */ e("span", { style: {
157
195
  fontSize: 14,
158
- color: c.muted,
159
- fontWeight: 500
196
+ color: I.muted,
197
+ fontWeight: 500,
198
+ textAlign: "center"
160
199
  }, children: "Synthesizing coaching summary..." })
161
- ] }),
162
- [180, 260, 220].map((b, k) => /* @__PURE__ */ e(
163
- "div",
164
- {
165
- style: {
166
- height: 10,
167
- width: b,
168
- maxWidth: "100%",
169
- borderRadius: 4,
170
- background: `linear-gradient(90deg, ${c.absent} 25%, var(--shimmer-mid, #ECECEC) 50%, ${c.absent} 75%)`,
171
- backgroundSize: "200% 100%",
172
- animation: "updated-coaching-shimmer 1.8s ease-in-out infinite",
173
- animationDelay: `${k * 0.2}s`
174
- }
175
- },
176
- k
177
- ))
200
+ ] })
178
201
  ] });
179
- if (r)
202
+ if (o)
180
203
  return /* @__PURE__ */ e("div", { style: {
181
204
  fontSize: 14,
182
- color: c.muted
205
+ color: I.muted
183
206
  }, children: "Unable to generate coaching summary." });
184
- if (!n)
207
+ if (!t)
185
208
  return null;
186
- const s = n.strengths || [], p = n.improvements || [], y = typeof n.one_liner == "string" ? n.one_liner : ((f = n.one_liner) == null ? void 0 : f.text) || "", v = typeof n.context == "string" ? n.context : ((u = n.context) == null ? void 0 : u.text) || "";
187
- return /* @__PURE__ */ t("div", { style: {
209
+ const r = t.strengths || [], a = t.improvements || [], d = typeof t.one_liner == "string" ? t.one_liner : ((c = t.one_liner) == null ? void 0 : c.text) || "", g = typeof t.context == "string" ? t.context : ((h = t.context) == null ? void 0 : h.text) || "";
210
+ return /* @__PURE__ */ n("div", { style: {
188
211
  display: "flex",
189
212
  flexDirection: "column",
190
213
  gap: 16,
191
214
  background: "#FFF"
192
215
  }, children: [
193
- /* @__PURE__ */ t("div", { style: {
216
+ /* @__PURE__ */ n("div", { style: {
194
217
  display: "flex",
195
218
  alignItems: "center",
196
219
  gap: 8
197
220
  }, children: [
198
- /* @__PURE__ */ e(dt, { size: 20, color: c.accent, strokeWidth: 2 }),
221
+ /* @__PURE__ */ e(It, { size: 20, color: I.accent, strokeWidth: 2 }),
199
222
  /* @__PURE__ */ e("span", { style: {
200
223
  fontSize: 16,
201
224
  fontWeight: 600,
202
- color: c.strong,
225
+ color: I.strong,
203
226
  fontFamily: "var(--font-sans)",
204
227
  lineHeight: 1.2,
205
228
  textTransform: "uppercase"
206
229
  }, children: "Coaching Summary" })
207
230
  ] }),
208
- y && /* @__PURE__ */ e("div", { style: {
231
+ d && /* @__PURE__ */ e("div", { style: {
209
232
  fontSize: 14,
210
233
  fontWeight: 500,
211
- color: c.strong,
234
+ color: I.strong,
212
235
  fontFamily: "var(--font-sans)",
213
236
  lineHeight: 1.5
214
- }, children: y }),
215
- /* @__PURE__ */ t("div", { style: {
237
+ }, children: d }),
238
+ /* @__PURE__ */ n("div", { style: {
216
239
  display: "flex",
217
240
  alignItems: "flex-start",
218
241
  gap: 16,
219
242
  justifyContent: "space-between"
220
243
  }, children: [
221
- v && /* @__PURE__ */ e("div", { style: {
244
+ g && /* @__PURE__ */ e("div", { style: {
222
245
  fontSize: 14,
223
246
  fontWeight: 400,
224
- color: c.muted,
247
+ color: I.muted,
225
248
  fontFamily: "var(--font-sans)",
226
249
  lineHeight: 1.5,
227
250
  flex: 1
228
- }, children: v }),
229
- n.overall && /* @__PURE__ */ e(Dt, { overall: n.overall })
251
+ }, children: g }),
252
+ t.overall && /* @__PURE__ */ e(Zt, { overall: t.overall })
230
253
  ] }),
231
- (s.length > 0 || p.length > 0) && /* @__PURE__ */ t("div", { style: {
254
+ (r.length > 0 || a.length > 0) && /* @__PURE__ */ n("div", { style: {
232
255
  display: "flex",
233
256
  gap: 24,
234
257
  paddingTop: 24,
235
- borderTop: `1px solid ${c.absent}`
258
+ borderTop: `1px solid ${I.absent}`
236
259
  }, children: [
237
260
  /* @__PURE__ */ e(
238
- ve,
261
+ Ae,
239
262
  {
240
- icon: /* @__PURE__ */ e(ct, { size: 14, color: c.strong, strokeWidth: 1.5 }),
263
+ icon: /* @__PURE__ */ e(zt, { size: 14, color: I.strong, strokeWidth: 1.5 }),
241
264
  label: "Key Strengths",
242
- items: s
265
+ items: r
243
266
  }
244
267
  ),
245
268
  /* @__PURE__ */ e(
246
- ve,
269
+ Ae,
247
270
  {
248
- icon: /* @__PURE__ */ e(gt, { size: 14, color: c.strong, strokeWidth: 1.5 }),
271
+ icon: /* @__PURE__ */ e(Gt, { size: 14, color: I.strong, strokeWidth: 1.5 }),
249
272
  label: "Improvements",
250
- items: p
273
+ items: a
251
274
  }
252
275
  )
253
276
  ] })
254
277
  ] });
255
278
  };
256
- function It(n) {
257
- const i = Math.floor(n / 60), r = Math.round(n % 60);
258
- return `${i}:${r.toString().padStart(2, "0")}`;
279
+ function en(t) {
280
+ const i = Math.floor(t / 60), o = Math.round(t % 60);
281
+ return `${i}:${o.toString().padStart(2, "0")}`;
259
282
  }
260
- const _t = {
283
+ const tn = {
261
284
  display: "flex",
262
285
  justifyContent: "space-between",
263
286
  padding: "8px 8px 12px 8px",
@@ -268,91 +291,203 @@ const _t = {
268
291
  fontWeight: 400,
269
292
  lineHeight: "normal",
270
293
  borderBottom: "1px solid var(--Grey-absent, #D9D9D9)"
271
- }, xe = {
294
+ }, He = {
272
295
  display: "flex",
273
296
  flexDirection: "column",
274
297
  flex: "1 0 0",
275
- gap: 12,
298
+ gap: 0,
276
299
  minWidth: 0
277
- }, At = ({
278
- meta: n = {},
300
+ }, nn = ({
301
+ meta: t = {},
279
302
  callPurpose: i = {},
280
- classification: r = {},
281
- dimensions: s = [],
282
- outcomeQuality: p = "Neutral",
283
- onMoreDetails: y
303
+ classification: o = {},
304
+ dimensions: r = [],
305
+ outcomeQuality: a = "Neutral",
306
+ onMoreDetails: d,
307
+ moreDetails: g = [],
308
+ resolutionOutcome: c,
309
+ customerIntent: h,
310
+ interactionId: u
284
311
  }) => {
285
- const v = n.duration_seconds != null ? It(n.duration_seconds) : null, f = n.message_count, u = i.interaction_driver, b = r.interaction_paradigm, k = [
286
- v != null && { label: "Duration", value: v },
287
- u != null && { label: "Driver", value: u },
288
- ...s.filter((l, h) => h % 2 === 0).map((l) => ({ label: l.label || l.key, value: l.value })),
289
- { label: "Outcome Quality", value: p }
290
- ].filter(Boolean), C = [
291
- f != null && { label: "Messages", value: f },
292
- b != null && { label: "Paradigm", value: b },
293
- ...s.filter((l, h) => h % 2 === 1).map((l) => ({ label: l.label || l.key, value: l.value }))
294
- // { label: 'More Details', isLink: true },
295
- ].filter(Boolean), d = (l) => l.isLink ? /* @__PURE__ */ t(
312
+ const [F, x] = M(!1), f = t.duration_seconds != null ? en(t.duration_seconds) : null, k = t.message_count, v = i.interaction_driver, m = o.interaction_paradigm, G = [], W = [
313
+ [
314
+ f != null ? { label: "Duration", value: f } : null,
315
+ k != null ? { label: "Messages", value: k } : null
316
+ ],
317
+ [
318
+ v != null ? { label: "Driver", value: v } : null,
319
+ m != null ? { label: "Paradigm", value: m } : null
320
+ ]
321
+ ];
322
+ for (let s = 0; s < r.length; s += 2) {
323
+ const R = r[s] ? { label: r[s].label || r[s].key, value: r[s].value } : null, A = r[s + 1] ? { label: r[s + 1].label || r[s + 1].key, value: r[s + 1].value } : null;
324
+ W.push([R, A]);
325
+ }
326
+ W.push([
327
+ { label: "Outcome Quality", value: a },
328
+ { isMoreDetails: !0 }
329
+ ]), W.forEach((s) => G.push(s));
330
+ const D = [
331
+ c != null && { label: "Resolution Outcome", value: c },
332
+ h != null && { label: "Customer Intent", value: h },
333
+ u != null && { label: "Number", value: u },
334
+ ...g || []
335
+ ].filter(Boolean), H = (s) => /* @__PURE__ */ n(
296
336
  "div",
297
337
  {
298
- onClick: y,
338
+ style: tn,
339
+ children: [
340
+ /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Strong, #2E3236)", whiteSpace: "nowrap", flexShrink: 0 }, children: s.label }),
341
+ /* @__PURE__ */ e("span", { style: {
342
+ color: "var(--Grey-Muted, #808183)",
343
+ textAlign: "right",
344
+ overflow: "hidden",
345
+ textOverflow: "ellipsis",
346
+ whiteSpace: "nowrap",
347
+ minWidth: 0
348
+ }, children: s.value })
349
+ ]
350
+ },
351
+ s.label
352
+ ), E = () => /* @__PURE__ */ n(
353
+ "div",
354
+ {
355
+ onClick: () => {
356
+ x((s) => !s), d && !F && d();
357
+ },
299
358
  style: {
300
359
  display: "flex",
301
360
  alignItems: "center",
302
361
  gap: 6,
303
- padding: "8px 0 8px 0",
362
+ padding: "8px 8px 12px 8px",
304
363
  cursor: "pointer",
305
- fontFamily: "var(--font-sans)"
364
+ fontFamily: "var(--font-sans)",
365
+ borderBottom: "1px solid var(--Grey-absent, #D9D9D9)"
306
366
  },
307
367
  children: [
308
- /* @__PURE__ */ e(Ce, { size: 16, color: "#808183", strokeWidth: 1.5 }),
309
- /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Strong, #2E3236)", fontSize: 13, fontWeight: 400 }, children: l.label })
310
- ]
311
- },
312
- l.label
313
- ) : /* @__PURE__ */ t(
314
- "div",
315
- {
316
- style: _t,
317
- children: [
318
- /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Strong, #2E3236)", whiteSpace: "nowrap", flexShrink: 0 }, children: l.label }),
319
- /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Muted, #808183)", textAlign: "right" }, children: l.value })
368
+ /* @__PURE__ */ e("span", { style: {
369
+ color: "var(--Grey-Strong, #2E3236)",
370
+ fontSize: 13,
371
+ fontWeight: 500,
372
+ lineHeight: "normal"
373
+ }, children: "More Details" }),
374
+ F ? /* @__PURE__ */ e(ce, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }) : /* @__PURE__ */ e(fe, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 })
320
375
  ]
321
376
  },
322
- l.label
377
+ "more-details"
323
378
  );
324
- return /* @__PURE__ */ t(
379
+ return /* @__PURE__ */ n(
325
380
  "div",
326
381
  {
327
382
  style: {
328
383
  display: "flex",
329
- alignItems: "flex-start",
330
- gap: 24,
331
- alignSelf: "stretch"
384
+ flexDirection: "column",
385
+ alignSelf: "stretch",
386
+ gap: 0,
387
+ position: "relative",
388
+ overflow: "visible"
332
389
  },
333
390
  children: [
334
- /* @__PURE__ */ e("div", { style: xe, children: k.map((l) => d(l)) }),
335
- /* @__PURE__ */ e("div", { style: xe, children: C.map((l) => d(l)) })
391
+ G.map((s, R) => {
392
+ var A;
393
+ return /* @__PURE__ */ n(
394
+ "div",
395
+ {
396
+ style: {
397
+ display: "flex",
398
+ alignItems: "flex-start",
399
+ gap: 24,
400
+ alignSelf: "stretch"
401
+ },
402
+ children: [
403
+ /* @__PURE__ */ e("div", { style: He, children: s[0] && !s[0].isMoreDetails ? H(s[0]) : /* @__PURE__ */ e("div", { style: { flex: 1 } }) }),
404
+ /* @__PURE__ */ e("div", { style: He, children: s[1] && !s[1].isMoreDetails ? H(s[1]) : (A = s[1]) != null && A.isMoreDetails ? E() : /* @__PURE__ */ e("div", { style: { flex: 1 } }) })
405
+ ]
406
+ },
407
+ R
408
+ );
409
+ }),
410
+ F && D.length > 0 && /* @__PURE__ */ n(
411
+ "div",
412
+ {
413
+ style: {
414
+ position: "absolute",
415
+ top: "100%",
416
+ right: 0,
417
+ marginTop: 4,
418
+ display: "flex",
419
+ width: 340,
420
+ flexDirection: "column",
421
+ alignItems: "flex-start",
422
+ borderRadius: 4,
423
+ border: "1px solid var(--Grey-absent, #D9D9D9)",
424
+ background: "var(--Grey-White, #FFF)",
425
+ boxShadow: "-2px 2px 2px 0 rgba(0, 0, 0, 0.25)",
426
+ overflow: "hidden",
427
+ fontFamily: "var(--font-sans)",
428
+ zIndex: 50
429
+ },
430
+ children: [
431
+ /* @__PURE__ */ e("div", { style: {
432
+ padding: "12px 16px",
433
+ fontSize: 13,
434
+ fontWeight: 600,
435
+ color: "var(--Grey-Strong, #2E3236)",
436
+ borderBottom: "1px solid var(--Grey-absent, #D9D9D9)",
437
+ alignSelf: "stretch"
438
+ }, children: "More details" }),
439
+ D.map((s) => /* @__PURE__ */ n(
440
+ "div",
441
+ {
442
+ style: {
443
+ display: "flex",
444
+ justifyContent: "space-between",
445
+ alignItems: "center",
446
+ padding: "12px 16px",
447
+ gap: 24,
448
+ fontSize: 13,
449
+ fontWeight: 400,
450
+ lineHeight: "normal",
451
+ borderBottom: "1px solid var(--Grey-absent, #D9D9D9)",
452
+ alignSelf: "stretch"
453
+ },
454
+ children: [
455
+ /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Strong, #2E3236)", whiteSpace: "nowrap", flexShrink: 0 }, children: s.label }),
456
+ /* @__PURE__ */ e("span", { style: {
457
+ color: "var(--Grey-Muted, #808183)",
458
+ fontSize: 13,
459
+ fontStyle: "normal",
460
+ fontWeight: 400,
461
+ lineHeight: "120%",
462
+ textAlign: "right"
463
+ }, children: s.value })
464
+ ]
465
+ },
466
+ s.label
467
+ ))
468
+ ]
469
+ }
470
+ )
336
471
  ]
337
472
  }
338
473
  );
339
- }, a = {
474
+ }, y = {
340
475
  strong: "var(--Grey-Strong, #2E3236)",
341
476
  muted: "var(--Grey-Muted, #808183)",
342
477
  absent: "var(--Grey-absent, #D9D9D9)",
343
478
  white: "var(--Grey-White, #FFF)",
344
479
  cardBg: "var(--surface-warm-40, rgba(243, 241, 229, 0.40))"
345
- }, x = 1.2, be = 3, Se = (n) => n != null ? Math.round(n * 100) + "%" : "—", ke = (n) => {
346
- if (n == null)
480
+ }, z = 1.2, Re = 3, Te = (t) => t != null ? Math.round(t * 100) + "%" : "—", Be = (t) => {
481
+ if (t == null)
347
482
  return "—";
348
- const i = (n * 100).toFixed(1);
349
- return n > 0 ? `+${i}pp` : `${i}pp`;
350
- }, Gt = ({ outcomeLift: n, driverLabels: i = [] }) => {
351
- var k;
352
- if (!n || n.lift == null)
483
+ const i = (t * 100).toFixed(1);
484
+ return t > 0 ? `+${i}pp` : `${i}pp`;
485
+ }, on = ({ outcomeLift: t, driverLabels: i = [] }) => {
486
+ var f;
487
+ if (!t || t.lift == null)
353
488
  return null;
354
- const r = n.p_expected, s = n.p_full, p = n.lift_raw ?? (s != null && r != null ? s - r : null), y = n.lift, v = (k = n.interpretation) != null && k.lift_band ? n.interpretation.lift_band.replace(/_/g, " ") : y >= 0 ? "Positive" : "Negative", f = v.charAt(0).toUpperCase() + v.slice(1), u = i.slice(0, be), b = i.length - be;
355
- return /* @__PURE__ */ t(
489
+ const o = t.p_expected, r = t.p_full, a = t.lift_raw ?? (r != null && o != null ? r - o : null), d = t.lift, g = (f = t.interpretation) != null && f.lift_band ? t.interpretation.lift_band.replace(/_/g, " ") : d >= 0 ? "Positive" : "Negative", c = g.charAt(0).toUpperCase() + g.slice(1), u = /negative/i.test(g) ? Mt : je, F = i.slice(0, Re), x = i.length - Re;
490
+ return /* @__PURE__ */ n(
356
491
  "div",
357
492
  {
358
493
  style: {
@@ -361,13 +496,13 @@ const _t = {
361
496
  padding: 24,
362
497
  gap: 24,
363
498
  borderRadius: 8,
364
- border: `1px solid ${a.absent}`,
365
- background: a.cardBg,
499
+ border: `1px solid ${y.absent}`,
500
+ background: y.cardBg,
366
501
  alignSelf: "stretch"
367
502
  },
368
503
  children: [
369
- /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 32 }, children: [
370
- /* @__PURE__ */ t(
504
+ /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 32 }, children: [
505
+ /* @__PURE__ */ n(
371
506
  "div",
372
507
  {
373
508
  style: {
@@ -384,14 +519,14 @@ const _t = {
384
519
  style: {
385
520
  fontSize: 15,
386
521
  fontWeight: 600,
387
- color: a.strong,
522
+ color: y.strong,
388
523
  fontFamily: "var(--font-sans)",
389
- lineHeight: x
524
+ lineHeight: z
390
525
  },
391
526
  children: "Agent Lift Analysis"
392
527
  }
393
528
  ),
394
- /* @__PURE__ */ t(
529
+ /* @__PURE__ */ n(
395
530
  "div",
396
531
  {
397
532
  style: {
@@ -401,9 +536,9 @@ const _t = {
401
536
  fontFamily: "var(--font-sans)"
402
537
  },
403
538
  children: [
404
- /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: a.strong, lineHeight: x }, children: "vs. Average Agent:" }),
405
- /* @__PURE__ */ e("span", { style: { fontSize: 14, fontWeight: 600, color: a.strong, lineHeight: x }, children: ke(y) }),
406
- /* @__PURE__ */ t(
539
+ /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: y.strong, lineHeight: z }, children: "vs. Average Agent:" }),
540
+ /* @__PURE__ */ e("span", { style: { fontSize: 14, fontWeight: 600, color: y.strong, lineHeight: z }, children: Be(d) }),
541
+ /* @__PURE__ */ n(
407
542
  "div",
408
543
  {
409
544
  style: {
@@ -411,11 +546,11 @@ const _t = {
411
546
  alignItems: "center",
412
547
  gap: 6,
413
548
  paddingLeft: 8,
414
- borderLeft: `1px solid ${a.absent}`
549
+ borderLeft: `1px solid ${y.absent}`
415
550
  },
416
551
  children: [
417
- /* @__PURE__ */ e(We, { size: 14, color: a.strong }),
418
- /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: a.strong, lineHeight: x }, children: f })
552
+ /* @__PURE__ */ e(u, { size: 14, color: y.strong }),
553
+ /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: y.strong, lineHeight: z }, children: c })
419
554
  ]
420
555
  }
421
556
  )
@@ -425,7 +560,7 @@ const _t = {
425
560
  ]
426
561
  }
427
562
  ),
428
- /* @__PURE__ */ t(
563
+ /* @__PURE__ */ n(
429
564
  "div",
430
565
  {
431
566
  style: {
@@ -434,61 +569,65 @@ const _t = {
434
569
  gap: 24
435
570
  },
436
571
  children: [
437
- /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 16, alignItems: "center" }, children: [
438
- /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: a.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: Se(r) }),
439
- /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
440
- /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: a.strong, fontFamily: "var(--font-sans)", lineHeight: x }, children: "Expected Outcome" }),
441
- /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: a.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: "Based on call type & difficulty" })
572
+ /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 16, alignItems: "center", flex: 1, minWidth: 0 }, children: [
573
+ /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: y.muted, fontFamily: "var(--font-sans)", lineHeight: z }, children: Te(o) }),
574
+ /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 8, alignItems: "center" }, children: [
575
+ /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: y.strong, fontFamily: "var(--font-sans)", lineHeight: z, whiteSpace: "nowrap" }, children: "Expected Outcome" }),
576
+ /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: y.muted, fontFamily: "var(--font-sans)", lineHeight: z, textAlign: "center" }, children: "Based on call type & difficulty" })
442
577
  ] })
443
578
  ] }),
444
- /* @__PURE__ */ t("div", { style: {
579
+ /* @__PURE__ */ n("div", { style: {
445
580
  display: "flex",
446
581
  flexDirection: "column",
447
582
  gap: 16,
448
583
  alignItems: "center",
449
584
  paddingLeft: 24,
450
- borderLeft: `1px solid ${a.absent}`
585
+ borderLeft: `1px solid ${y.absent}`,
586
+ flex: 1,
587
+ minWidth: 0
451
588
  }, children: [
452
- /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: a.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: ke(p) }),
453
- /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
454
- /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: a.strong, fontFamily: "var(--font-sans)", lineHeight: x }, children: "Agent Impact" }),
455
- /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: a.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: "Behavior-driven change" })
589
+ /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: y.muted, fontFamily: "var(--font-sans)", lineHeight: z }, children: Be(a) }),
590
+ /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 8, alignItems: "center" }, children: [
591
+ /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: y.strong, fontFamily: "var(--font-sans)", lineHeight: z, whiteSpace: "nowrap" }, children: "Agent Impact" }),
592
+ /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: y.muted, fontFamily: "var(--font-sans)", lineHeight: z, textAlign: "center" }, children: "Behavior-driven change" })
456
593
  ] })
457
594
  ] }),
458
- /* @__PURE__ */ t("div", { style: {
595
+ /* @__PURE__ */ n("div", { style: {
459
596
  display: "flex",
460
597
  flexDirection: "column",
461
598
  gap: 16,
462
599
  alignItems: "center",
463
600
  paddingLeft: 24,
464
- borderLeft: `1px solid ${a.absent}`
601
+ borderLeft: `1px solid ${y.absent}`,
602
+ flex: 1,
603
+ minWidth: 0
465
604
  }, children: [
466
- /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: a.strong, fontFamily: "var(--font-sans)", lineHeight: x }, children: Se(s) }),
467
- /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
468
- /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: a.strong, fontFamily: "var(--font-sans)", lineHeight: x }, children: "Predicted Outcome" }),
469
- /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: a.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: "With agent behaviors" })
605
+ /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: y.strong, fontFamily: "var(--font-sans)", lineHeight: z }, children: Te(r) }),
606
+ /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 8, alignItems: "center" }, children: [
607
+ /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: y.strong, fontFamily: "var(--font-sans)", lineHeight: z, whiteSpace: "nowrap" }, children: "Predicted Outcome" }),
608
+ /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: y.muted, fontFamily: "var(--font-sans)", lineHeight: z, textAlign: "center" }, children: "With agent behaviors" })
470
609
  ] })
471
610
  ] })
472
611
  ]
473
612
  }
474
613
  )
475
614
  ] }),
476
- i.length > 0 && /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignSelf: "stretch" }, children: [
615
+ i.length > 0 && /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignSelf: "stretch" }, children: [
477
616
  /* @__PURE__ */ e(
478
617
  "span",
479
618
  {
480
619
  style: {
481
620
  fontSize: 12,
482
621
  fontWeight: 600,
483
- color: a.strong,
622
+ color: y.strong,
484
623
  fontFamily: "var(--font-sans)",
485
- lineHeight: x
624
+ lineHeight: z
486
625
  },
487
626
  children: "Key Drivers"
488
627
  }
489
628
  ),
490
- /* @__PURE__ */ t("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: [
491
- u.map((C, d) => /* @__PURE__ */ e(
629
+ /* @__PURE__ */ n("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: [
630
+ F.map((k, v) => /* @__PURE__ */ e(
492
631
  "div",
493
632
  {
494
633
  style: {
@@ -497,8 +636,8 @@ const _t = {
497
636
  alignItems: "center",
498
637
  justifyContent: "center",
499
638
  borderRadius: 4,
500
- border: `1px solid ${a.absent}`,
501
- background: a.white
639
+ border: `1px solid ${y.absent}`,
640
+ background: y.white
502
641
  },
503
642
  children: /* @__PURE__ */ e(
504
643
  "span",
@@ -506,21 +645,21 @@ const _t = {
506
645
  style: {
507
646
  fontSize: 12,
508
647
  fontWeight: 400,
509
- color: a.strong,
648
+ color: y.strong,
510
649
  fontFamily: "var(--font-sans)",
511
- lineHeight: x,
650
+ lineHeight: z,
512
651
  whiteSpace: "nowrap",
513
652
  overflow: "hidden",
514
653
  textOverflow: "ellipsis",
515
654
  maxWidth: 200
516
655
  },
517
- children: C
656
+ children: k
518
657
  }
519
658
  )
520
659
  },
521
- d
660
+ v
522
661
  )),
523
- b > 0 && /* @__PURE__ */ e(
662
+ x > 0 && /* @__PURE__ */ e(
524
663
  "div",
525
664
  {
526
665
  style: {
@@ -529,23 +668,23 @@ const _t = {
529
668
  alignItems: "center",
530
669
  justifyContent: "center",
531
670
  borderRadius: 4,
532
- border: `1px solid ${a.absent}`,
533
- background: a.white
671
+ border: `1px solid ${y.absent}`,
672
+ background: y.white
534
673
  },
535
- children: /* @__PURE__ */ t(
674
+ children: /* @__PURE__ */ n(
536
675
  "span",
537
676
  {
538
677
  style: {
539
678
  fontSize: 12,
540
679
  fontWeight: 400,
541
- color: a.strong,
680
+ color: y.strong,
542
681
  fontFamily: "var(--font-sans)",
543
- lineHeight: x,
682
+ lineHeight: z,
544
683
  whiteSpace: "nowrap"
545
684
  },
546
685
  children: [
547
686
  "+ ",
548
- b
687
+ x
549
688
  ]
550
689
  }
551
690
  )
@@ -556,15 +695,15 @@ const _t = {
556
695
  ]
557
696
  }
558
697
  );
559
- }, we = ({ children: n, size: i = 28, onClick: r, title: s }) => {
560
- const [p, y] = _(!1);
698
+ }, Le = ({ children: t, size: i = 28, onClick: o, title: r }) => {
699
+ const [a, d] = M(!1);
561
700
  return /* @__PURE__ */ e(
562
701
  "div",
563
702
  {
564
- title: s,
565
- onClick: r,
566
- onMouseEnter: () => y(!0),
567
- onMouseLeave: () => y(!1),
703
+ title: r,
704
+ onClick: o,
705
+ onMouseEnter: () => d(!0),
706
+ onMouseLeave: () => d(!1),
568
707
  style: {
569
708
  display: "flex",
570
709
  alignItems: "center",
@@ -572,33 +711,33 @@ const _t = {
572
711
  width: i,
573
712
  height: i,
574
713
  borderRadius: 9999,
575
- background: p ? "var(--surface-hover, #F3F7F7)" : "transparent",
714
+ background: a ? "var(--surface-hover, #F3F7F7)" : "transparent",
576
715
  cursor: "pointer",
577
716
  flexShrink: 0,
578
717
  transition: "background 0.15s"
579
718
  },
580
- children: n
719
+ children: t
581
720
  }
582
721
  );
583
- }, Mt = ({
584
- signals: n = { signals: [], present_count: 0, total_signals_evaluated: 0 },
722
+ }, rn = ({
723
+ signals: t = { signals: [], present_count: 0, total_signals_evaluated: 0 },
585
724
  expandedSignals: i = /* @__PURE__ */ new Set(),
586
- toggleSignal: r = () => {
725
+ toggleSignal: o = () => {
587
726
  },
588
- playEvidence: s = () => {
727
+ playEvidence: r = () => {
589
728
  },
590
- highlightTurns: p = () => {
729
+ highlightTurns: a = () => {
591
730
  },
592
- onShowInTranscript: y = () => {
731
+ onShowInTranscript: d = () => {
593
732
  },
594
- timelinePlaying: v = !1,
595
- currentTimeSeconds: f = 0
733
+ timelinePlaying: g = !1,
734
+ currentTimeSeconds: c = 0
596
735
  }) => {
597
- const u = (n == null ? void 0 : n.signals) ?? [], b = (n == null ? void 0 : n.present_count) ?? u.length, k = (d) => {
598
- const l = Math.floor(d / 6e4), h = Math.floor(d % 6e4 / 1e3);
599
- return `${l.toString().padStart(2, "0")}:${h.toString().padStart(2, "0")}`;
600
- }, C = (d) => v && d.start_ms != null && f * 1e3 >= d.start_ms && f * 1e3 <= (d.end_ms ?? d.start_ms + 5e3);
601
- return /* @__PURE__ */ t("div", { style: {
736
+ const h = (t == null ? void 0 : t.signals) ?? [], u = (t == null ? void 0 : t.present_count) ?? h.length, F = (f) => {
737
+ const k = Math.floor(f / 6e4), v = Math.floor(f % 6e4 / 1e3);
738
+ return `${k.toString().padStart(2, "0")}:${v.toString().padStart(2, "0")}`;
739
+ }, x = (f) => g && f.start_ms != null && c * 1e3 >= f.start_ms && c * 1e3 <= (f.end_ms ?? f.start_ms + 5e3);
740
+ return /* @__PURE__ */ n("div", { style: {
602
741
  display: "flex",
603
742
  flexDirection: "column",
604
743
  alignItems: "flex-start",
@@ -606,7 +745,7 @@ const _t = {
606
745
  width: "100%",
607
746
  gap: 16
608
747
  }, children: [
609
- /* @__PURE__ */ t("div", { style: {
748
+ /* @__PURE__ */ n("div", { style: {
610
749
  display: "flex",
611
750
  alignItems: "center",
612
751
  gap: 16,
@@ -621,8 +760,8 @@ const _t = {
621
760
  borderRadius: 9999,
622
761
  background: "var(--surface-hover, #F3F7F7)",
623
762
  flexShrink: 0
624
- }, children: /* @__PURE__ */ e(De, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
625
- /* @__PURE__ */ t("div", { style: {
763
+ }, children: /* @__PURE__ */ e(Oe, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
764
+ /* @__PURE__ */ n("div", { style: {
626
765
  display: "flex",
627
766
  alignItems: "center",
628
767
  justifyContent: "space-between",
@@ -633,35 +772,35 @@ const _t = {
633
772
  fontWeight: 500,
634
773
  color: "var(--Grey-Strong, #2E3236)"
635
774
  }, children: "Signals" }),
636
- /* @__PURE__ */ t("span", { style: {
775
+ /* @__PURE__ */ n("span", { style: {
637
776
  fontSize: 14,
638
777
  fontWeight: 500,
639
778
  color: "var(--Grey-Strong, #2E3236)"
640
779
  }, children: [
641
- b,
780
+ u,
642
781
  " Signals Detected"
643
782
  ] })
644
783
  ] })
645
784
  ] }),
646
- /* @__PURE__ */ t("div", { style: {
785
+ /* @__PURE__ */ n("div", { style: {
647
786
  display: "flex",
648
787
  flexDirection: "column",
649
788
  alignSelf: "stretch",
650
789
  background: "var(--Grey-White, #FFF)",
651
790
  gap: 8
652
791
  }, children: [
653
- u.length === 0 && /* @__PURE__ */ e("div", { style: {
792
+ h.length === 0 && /* @__PURE__ */ e("div", { style: {
654
793
  padding: "8px 0",
655
794
  fontSize: 14,
656
795
  color: "var(--Grey-Muted, #808183)"
657
796
  }, children: "No signals detected." }),
658
- u.map((d, l) => {
659
- var F, I, P;
660
- const h = d.key ?? d.id ?? l, m = i.has(h), D = ((F = d.observations) == null ? void 0 : F.length) ?? 0;
661
- return /* @__PURE__ */ t(
797
+ h.map((f, k) => {
798
+ var W, D, H;
799
+ const v = f.key ?? f.id ?? k, m = i.has(v), G = ((W = f.observations) == null ? void 0 : W.length) ?? 0;
800
+ return /* @__PURE__ */ n(
662
801
  "div",
663
802
  {
664
- id: `signal-${h}`,
803
+ id: `signal-${v}`,
665
804
  style: {
666
805
  display: "flex",
667
806
  flexDirection: "column",
@@ -669,10 +808,10 @@ const _t = {
669
808
  gap: 8
670
809
  },
671
810
  children: [
672
- /* @__PURE__ */ t(
811
+ /* @__PURE__ */ n(
673
812
  "button",
674
813
  {
675
- onClick: () => r(h),
814
+ onClick: () => o(v),
676
815
  style: {
677
816
  display: "flex",
678
817
  padding: "8px 0",
@@ -686,7 +825,7 @@ const _t = {
686
825
  cursor: "pointer"
687
826
  },
688
827
  children: [
689
- /* @__PURE__ */ t("span", { style: {
828
+ /* @__PURE__ */ n("span", { style: {
690
829
  flex: 1,
691
830
  textAlign: "left",
692
831
  fontSize: 14,
@@ -694,29 +833,29 @@ const _t = {
694
833
  color: "var(--text-dark, #0B0A0A)",
695
834
  lineHeight: 1.71
696
835
  }, children: [
697
- d.display_name || ((I = d.key) == null ? void 0 : I.replace(/_/g, " ")),
698
- D > 0 && /* @__PURE__ */ t("span", { style: {
836
+ f.display_name || ((D = f.key) == null ? void 0 : D.replace(/_/g, " ")),
837
+ G > 0 && /* @__PURE__ */ n("span", { style: {
699
838
  fontWeight: 600,
700
839
  color: "var(--text-dark, #0B0A0A)",
701
840
  marginLeft: 6
702
841
  }, children: [
703
842
  "(",
704
- D,
843
+ G,
705
844
  ")"
706
845
  ] })
707
846
  ] }),
708
- m ? /* @__PURE__ */ e(Fe, { size: 20, color: "#767473" }) : /* @__PURE__ */ e(ze, { size: 20, color: "#767473" })
847
+ m ? /* @__PURE__ */ e(ce, { size: 20, color: "#767473" }) : /* @__PURE__ */ e(fe, { size: 20, color: "#767473" })
709
848
  ]
710
849
  }
711
850
  ),
712
- m && ((P = d.observations) == null ? void 0 : P.length) > 0 && /* @__PURE__ */ e("div", { style: {
851
+ m && ((H = f.observations) == null ? void 0 : H.length) > 0 && /* @__PURE__ */ e("div", { style: {
713
852
  display: "flex",
714
853
  flexDirection: "column",
715
854
  alignSelf: "stretch",
716
855
  gap: 0
717
- }, children: d.observations.map((z, j) => {
718
- var H, E, L;
719
- return /* @__PURE__ */ t(
856
+ }, children: f.observations.map((E, s) => {
857
+ var R, A, p;
858
+ return /* @__PURE__ */ n(
720
859
  "div",
721
860
  {
722
861
  style: {
@@ -726,7 +865,7 @@ const _t = {
726
865
  gap: 8
727
866
  },
728
867
  children: [
729
- /* @__PURE__ */ t("div", { style: {
868
+ /* @__PURE__ */ n("div", { style: {
730
869
  display: "flex",
731
870
  alignItems: "center",
732
871
  gap: 12,
@@ -739,8 +878,8 @@ const _t = {
739
878
  fontWeight: 400,
740
879
  color: "var(--text-subtle-warm, #767473)",
741
880
  lineHeight: 1.5
742
- }, children: z.reason || z.explanation }),
743
- ((E = (H = z.evidence) == null ? void 0 : H[0]) == null ? void 0 : E.start_ms) != null && /* @__PURE__ */ t(
881
+ }, children: E.reason || E.explanation }),
882
+ ((A = (R = E.evidence) == null ? void 0 : R[0]) == null ? void 0 : A.start_ms) != null && /* @__PURE__ */ n(
744
883
  "div",
745
884
  {
746
885
  style: {
@@ -751,14 +890,14 @@ const _t = {
751
890
  },
752
891
  children: [
753
892
  /* @__PURE__ */ e(
754
- we,
893
+ Le,
755
894
  {
756
895
  size: 28,
757
896
  title: "Show in transcript",
758
- onClick: (W) => {
759
- W.stopPropagation(), y(z.evidence[0].start_ms);
897
+ onClick: (b) => {
898
+ b.stopPropagation(), d(E.evidence[0].start_ms);
760
899
  },
761
- children: /* @__PURE__ */ e(pt, { size: 16, color: "#808183", strokeWidth: 1.5 })
900
+ children: /* @__PURE__ */ e(_t, { size: 16, color: "#808183", strokeWidth: 1.5 })
762
901
  }
763
902
  ),
764
903
  /* @__PURE__ */ e("span", { style: {
@@ -767,72 +906,72 @@ const _t = {
767
906
  color: "var(--Grey-Muted, #808183)",
768
907
  lineHeight: 1.2,
769
908
  whiteSpace: "nowrap"
770
- }, children: k(z.evidence[0].start_ms) })
909
+ }, children: F(E.evidence[0].start_ms) })
771
910
  ]
772
911
  }
773
912
  )
774
913
  ] }),
775
- (L = z.evidence) == null ? void 0 : L.map((W, O) => {
776
- const A = W.start_ms != null && W.end_ms != null;
777
- return W.text && /* @__PURE__ */ t(
914
+ (p = E.evidence) == null ? void 0 : p.map((b, w) => {
915
+ const B = b.start_ms != null && b.end_ms != null;
916
+ return b.text && /* @__PURE__ */ n(
778
917
  "div",
779
918
  {
780
- onClick: (Y) => {
781
- Y.stopPropagation(), A && s(W);
919
+ onClick: (Q) => {
920
+ Q.stopPropagation(), B && r(b);
782
921
  },
783
- onMouseEnter: () => p(W.turn_ids ?? []),
784
- onMouseLeave: () => p([]),
922
+ onMouseEnter: () => a(b.turn_ids ?? []),
923
+ onMouseLeave: () => a([]),
785
924
  style: {
786
925
  display: "flex",
787
926
  alignItems: "center",
788
927
  gap: 8,
789
928
  padding: "8px 0",
790
- cursor: A ? "pointer" : "default"
929
+ cursor: B ? "pointer" : "default"
791
930
  },
792
931
  children: [
793
- A && /* @__PURE__ */ e(we, { size: 28, children: C(W) ? /* @__PURE__ */ e(
794
- ft,
932
+ B && /* @__PURE__ */ e(Le, { size: 28, children: x(b) ? /* @__PURE__ */ e(
933
+ Et,
795
934
  {
796
935
  size: 17,
797
936
  color: "var(--Grey-Muted, #808183)",
798
937
  strokeWidth: 1.5
799
938
  }
800
939
  ) : /* @__PURE__ */ e(
801
- ht,
940
+ At,
802
941
  {
803
942
  size: 17,
804
943
  color: "var(--Grey-Muted, #808183)",
805
944
  strokeWidth: 1
806
945
  }
807
946
  ) }),
808
- /* @__PURE__ */ t("span", { style: {
947
+ /* @__PURE__ */ n("span", { style: {
809
948
  fontSize: 13,
810
949
  fontWeight: 400,
811
950
  color: "var(--Grey-Strong, #2E3236)",
812
951
  lineHeight: 1.2
813
952
  }, children: [
814
953
  "“",
815
- W.text,
954
+ b.text,
816
955
  "”"
817
956
  ] })
818
957
  ]
819
958
  },
820
- O
959
+ w
821
960
  );
822
961
  })
823
962
  ]
824
963
  },
825
- z.key ?? j
964
+ E.key ?? s
826
965
  );
827
966
  }) })
828
967
  ]
829
968
  },
830
- h
969
+ v
831
970
  );
832
971
  })
833
972
  ] })
834
973
  ] });
835
- }, w = {
974
+ }, _ = {
836
975
  strong: "var(--Grey-Strong, #2E3236)",
837
976
  muted: "var(--Grey-Muted, #808183)",
838
977
  absent: "var(--Grey-absent, #D9D9D9)",
@@ -840,24 +979,24 @@ const _t = {
840
979
  accent: "var(--rail-orange, #C98A5A)",
841
980
  track: "var(--rail-surface-2, #E3E1D7)",
842
981
  infoIcon: "var(--color-input-border, #ACACAD)"
843
- }, Ht = ({ score: n = 4, maxScore: i = 10 }) => {
844
- const b = Math.min(Math.round(n / i * 5), 5), k = 180 / 5, C = (h) => {
845
- const m = h * Math.PI / 180;
982
+ }, ln = ({ score: t = 4, maxScore: i = 10 }) => {
983
+ const u = Math.min(Math.round(t / i * 5), 5), F = 180 / 5, x = (v) => {
984
+ const m = v * Math.PI / 180;
846
985
  return {
847
986
  x: 121.5 + 85 * Math.cos(m),
848
987
  y: 123 - 85 * Math.sin(m)
849
988
  };
850
- }, d = (h, m) => {
851
- const D = C(h), F = C(m), I = h - m > 180 ? 1 : 0;
852
- return `M ${D.x} ${D.y} A 85 85 0 ${I} 1 ${F.x} ${F.y}`;
853
- }, l = 2;
854
- return /* @__PURE__ */ e("svg", { width: "100%", viewBox: "0 0 243 130", fill: "none", style: { maxWidth: 243 }, children: Array.from({ length: 5 }, (h, m) => {
855
- const D = 180 - m * k - (m > 0 ? l / 2 : 0), F = 180 - (m + 1) * k + (m < 5 - 1 ? l / 2 : 0), I = m < b;
989
+ }, f = (v, m) => {
990
+ const G = x(v), W = x(m), D = v - m > 180 ? 1 : 0;
991
+ return `M ${G.x} ${G.y} A 85 85 0 ${D} 1 ${W.x} ${W.y}`;
992
+ }, k = 2;
993
+ return /* @__PURE__ */ e("svg", { width: "100%", viewBox: "0 0 243 130", fill: "none", style: { maxWidth: 243 }, children: Array.from({ length: 5 }, (v, m) => {
994
+ const G = 180 - m * F - (m > 0 ? k / 2 : 0), W = 180 - (m + 1) * F + (m < 5 - 1 ? k / 2 : 0), D = m < u;
856
995
  return /* @__PURE__ */ e(
857
996
  "path",
858
997
  {
859
- d: d(D, F),
860
- stroke: I ? w.strong : w.track,
998
+ d: f(G, W),
999
+ stroke: D ? _.strong : _.track,
861
1000
  strokeWidth: 30,
862
1001
  strokeLinecap: "butt",
863
1002
  fill: "none"
@@ -865,33 +1004,33 @@ const _t = {
865
1004
  m
866
1005
  );
867
1006
  }) });
868
- }, Et = ({ value: n = 0, maxValue: i = 5 }) => /* @__PURE__ */ e("div", { style: { display: "flex", gap: 2 }, children: Array.from({ length: i }, (r, s) => /* @__PURE__ */ e(
1007
+ }, sn = ({ value: t = 0, maxValue: i = 5 }) => /* @__PURE__ */ e("div", { style: { display: "flex", gap: 2 }, children: Array.from({ length: i }, (o, r) => /* @__PURE__ */ e(
869
1008
  "div",
870
1009
  {
871
1010
  style: {
872
1011
  width: 22,
873
1012
  height: 6,
874
1013
  borderRadius: 1,
875
- background: s < n ? w.strong : w.track
1014
+ background: r < t ? _.strong : _.track
876
1015
  }
877
1016
  },
878
- s
879
- )) }), Tt = {
1017
+ r
1018
+ )) }), an = {
880
1019
  CSAT: "Predicted Customer Satisfaction",
881
1020
  Resolution: "Predicted Resolution: was the issue fully resolved?",
882
1021
  "Process Adherence": "Process Adherence: Did the agent follow procedures?",
883
1022
  Communication: "Predicted Communication Quality: Clarity, Empathy, Professionalism"
884
- }, Rt = ({ text: n, children: i }) => {
885
- const [r, s] = _(!1);
886
- return /* @__PURE__ */ t(
1023
+ }, dn = ({ text: t, children: i }) => {
1024
+ const [o, r] = M(!1);
1025
+ return /* @__PURE__ */ n(
887
1026
  "div",
888
1027
  {
889
1028
  style: { position: "relative", display: "inline-flex" },
890
- onMouseEnter: () => s(!0),
891
- onMouseLeave: () => s(!1),
1029
+ onMouseEnter: () => r(!0),
1030
+ onMouseLeave: () => r(!1),
892
1031
  children: [
893
1032
  i,
894
- r && /* @__PURE__ */ e("div", { style: {
1033
+ o && /* @__PURE__ */ e("div", { style: {
895
1034
  position: "absolute",
896
1035
  bottom: "100%",
897
1036
  left: "50%",
@@ -914,18 +1053,18 @@ const _t = {
914
1053
  fontSize: 12,
915
1054
  fontWeight: 400,
916
1055
  lineHeight: "normal"
917
- }, children: n }) })
1056
+ }, children: t }) })
918
1057
  ]
919
1058
  }
920
1059
  );
921
- }, Pt = ({ label: n, value: i = 0, maxValue: r = 5 }) => /* @__PURE__ */ t("div", { style: {
1060
+ }, cn = ({ label: t, value: i = 0, maxValue: o = 5 }) => /* @__PURE__ */ n("div", { style: {
922
1061
  display: "flex",
923
1062
  flexDirection: "column",
924
1063
  gap: 8,
925
1064
  padding: 8,
926
1065
  alignItems: "center"
927
1066
  }, children: [
928
- /* @__PURE__ */ t("div", { style: {
1067
+ /* @__PURE__ */ n("div", { style: {
929
1068
  display: "flex",
930
1069
  alignItems: "center",
931
1070
  gap: 8
@@ -933,39 +1072,39 @@ const _t = {
933
1072
  /* @__PURE__ */ e("span", { style: {
934
1073
  fontSize: 12,
935
1074
  fontWeight: 400,
936
- color: w.strong,
1075
+ color: _.strong,
937
1076
  fontFamily: "var(--font-sans)",
938
1077
  lineHeight: "normal"
939
- }, children: n }),
940
- /* @__PURE__ */ e(Rt, { text: Tt[n] || n, children: /* @__PURE__ */ e(yt, { size: 14, color: w.infoIcon, strokeWidth: 1, style: { cursor: "pointer" } }) })
1078
+ }, children: t }),
1079
+ /* @__PURE__ */ e(dn, { text: an[t] || t, children: /* @__PURE__ */ e(Ht, { size: 14, color: _.infoIcon, strokeWidth: 1, style: { cursor: "pointer" } }) })
941
1080
  ] }),
942
- /* @__PURE__ */ e(Et, { value: i, maxValue: r })
943
- ] }), Lt = ({
944
- score: n = 83,
1081
+ /* @__PURE__ */ e(sn, { value: i, maxValue: o })
1082
+ ] }), fn = ({
1083
+ score: t = 83,
945
1084
  maxScore: i = 100,
946
- predictedScore: r = 4,
947
- predictedLabel: s = "Predicted Objective",
948
- description: p = "",
949
- legends: y = [
1085
+ predictedScore: o = 4,
1086
+ predictedLabel: r = "Predicted Objective",
1087
+ description: a = "",
1088
+ legends: d = [
950
1089
  { label: "CSAT", value: 3 },
951
1090
  { label: "Resolution", value: 4 },
952
1091
  { label: "Process Adherence", value: 5 },
953
1092
  { label: "Communication", value: 3 }
954
1093
  ]
955
1094
  }) => {
956
- const v = String(r).padStart(2, "0");
957
- return /* @__PURE__ */ t("div", { style: {
1095
+ const g = String(o).padStart(2, "0");
1096
+ return /* @__PURE__ */ n("div", { style: {
958
1097
  display: "flex",
959
1098
  flexDirection: "column",
960
1099
  padding: 24,
961
1100
  borderRadius: 8,
962
- border: `1px solid ${w.absent}`,
963
- background: w.white,
1101
+ border: `1px solid ${_.absent}`,
1102
+ background: _.white,
964
1103
  alignSelf: "stretch",
965
1104
  flex: 1,
966
1105
  gap: 24
967
1106
  }, children: [
968
- /* @__PURE__ */ t("div", { style: {
1107
+ /* @__PURE__ */ n("div", { style: {
969
1108
  display: "flex",
970
1109
  flexDirection: "column",
971
1110
  gap: 8
@@ -973,19 +1112,19 @@ const _t = {
973
1112
  /* @__PURE__ */ e("span", { style: {
974
1113
  fontSize: 15,
975
1114
  fontWeight: 600,
976
- color: w.strong,
1115
+ color: _.strong,
977
1116
  fontFamily: "var(--font-sans)",
978
1117
  lineHeight: 1.2
979
1118
  }, children: "Compass Score" }),
980
1119
  /* @__PURE__ */ e("span", { style: {
981
1120
  fontSize: 14,
982
1121
  fontWeight: 400,
983
- color: w.muted,
1122
+ color: _.muted,
984
1123
  fontFamily: "var(--font-sans)",
985
1124
  lineHeight: "normal"
986
- }, children: p })
1125
+ }, children: a })
987
1126
  ] }),
988
- /* @__PURE__ */ t("div", { style: {
1127
+ /* @__PURE__ */ n("div", { style: {
989
1128
  display: "flex",
990
1129
  alignItems: "center",
991
1130
  justifyContent: "center",
@@ -993,7 +1132,7 @@ const _t = {
993
1132
  flex: 1,
994
1133
  overflow: "hidden"
995
1134
  }, children: [
996
- /* @__PURE__ */ t("div", { style: {
1135
+ /* @__PURE__ */ n("div", { style: {
997
1136
  position: "relative",
998
1137
  maxWidth: 243,
999
1138
  minWidth: 160,
@@ -1002,10 +1141,10 @@ const _t = {
1002
1141
  alignItems: "center",
1003
1142
  display: "flex"
1004
1143
  }, children: [
1005
- /* @__PURE__ */ e(Ht, { score: n, maxScore: i }),
1144
+ /* @__PURE__ */ e(ln, { score: t, maxScore: i }),
1006
1145
  (() => {
1007
- const b = -(180 - (i > 0 ? Math.min(n / i, 1) : 0) * 180 - 45);
1008
- return /* @__PURE__ */ t(
1146
+ const u = -(180 - (i > 0 ? Math.min(t / i, 1) : 0) * 180 - 45);
1147
+ return /* @__PURE__ */ n(
1009
1148
  "svg",
1010
1149
  {
1011
1150
  width: "34",
@@ -1015,7 +1154,7 @@ const _t = {
1015
1154
  xmlns: "http://www.w3.org/2000/svg",
1016
1155
  style: {
1017
1156
  marginTop: -24,
1018
- transform: `rotate(${b}deg)`,
1157
+ transform: `rotate(${u}deg)`,
1019
1158
  transformOrigin: "center center"
1020
1159
  },
1021
1160
  children: [
@@ -1028,14 +1167,14 @@ const _t = {
1028
1167
  /* @__PURE__ */ e("div", { style: {
1029
1168
  fontSize: 28,
1030
1169
  fontWeight: 400,
1031
- color: w.strong,
1170
+ color: _.strong,
1032
1171
  fontFamily: "var(--font-sans)",
1033
1172
  lineHeight: 1,
1034
1173
  textAlign: "center",
1035
1174
  marginTop: 8
1036
- }, children: n })
1175
+ }, children: t })
1037
1176
  ] }),
1038
- /* @__PURE__ */ t("div", { style: {
1177
+ /* @__PURE__ */ n("div", { style: {
1039
1178
  display: "flex",
1040
1179
  flexDirection: "column",
1041
1180
  gap: 8,
@@ -1043,7 +1182,7 @@ const _t = {
1043
1182
  justifyContent: "center",
1044
1183
  flex: 1
1045
1184
  }, children: [
1046
- /* @__PURE__ */ t("div", { style: {
1185
+ /* @__PURE__ */ n("div", { style: {
1047
1186
  display: "flex",
1048
1187
  flexDirection: "column",
1049
1188
  alignItems: "center"
@@ -1051,138 +1190,732 @@ const _t = {
1051
1190
  /* @__PURE__ */ e("div", { style: {
1052
1191
  fontSize: 28,
1053
1192
  fontWeight: 400,
1054
- color: w.strong,
1193
+ color: _.strong,
1055
1194
  fontFamily: "var(--font-sans)",
1056
1195
  lineHeight: 1,
1057
1196
  textAlign: "center"
1058
- }, children: v }),
1197
+ }, children: g }),
1059
1198
  /* @__PURE__ */ e("div", { style: {
1060
1199
  fontSize: 14,
1061
1200
  fontWeight: 400,
1062
- color: w.muted,
1201
+ color: _.muted,
1063
1202
  fontFamily: "var(--font-sans)",
1064
1203
  lineHeight: 1.43,
1065
1204
  textAlign: "center"
1066
- }, children: s })
1205
+ }, children: r })
1067
1206
  ] }),
1068
1207
  /* @__PURE__ */ e("div", { style: {
1069
1208
  width: "100%",
1070
1209
  height: 1,
1071
- background: w.absent
1210
+ background: _.absent
1072
1211
  } }),
1073
- y.map((f, u) => /* @__PURE__ */ e(
1074
- Pt,
1212
+ d.map((c, h) => /* @__PURE__ */ e(
1213
+ cn,
1075
1214
  {
1076
- label: f.label,
1077
- value: f.value
1215
+ label: c.label,
1216
+ value: c.value
1078
1217
  },
1079
- u
1218
+ h
1080
1219
  ))
1081
1220
  ] })
1082
1221
  ] })
1083
1222
  ] });
1084
- }, Bt = [
1223
+ }, pe = (t) => {
1224
+ if (!t)
1225
+ return null;
1226
+ const i = String(t).toLowerCase();
1227
+ return i === "supervisor" ? "var(--rail-compliance, #C98A5A)" : i === "admin" || i === "administrator" ? "var(--rail-discovery, #5E88B0)" : i === "agent" ? "var(--rail-outcome, #6B7C93)" : null;
1228
+ }, V = (t) => (t || "").split(" ").map((i) => i[0]).join("").toUpperCase() || "U", pn = (t) => {
1229
+ if (!t)
1230
+ return "";
1231
+ if (!/^\d{4}-\d{2}-\d{2}T/.test(t))
1232
+ return t;
1233
+ try {
1234
+ const i = new Date(t);
1235
+ if (Number.isNaN(i.getTime()))
1236
+ return t;
1237
+ const r = (/* @__PURE__ */ new Date()).getTime() - i.getTime(), a = Math.floor(r / 6e4), d = Math.floor(r / 36e5);
1238
+ return a < 1 ? "Just now" : a < 60 ? `${a} min` : d < 24 ? `${d} h` : `${Math.floor(d / 24)} d`;
1239
+ } catch {
1240
+ return t;
1241
+ }
1242
+ }, Ne = ({ name: t, initials: i, color: o, size: r = 36 }) => /* @__PURE__ */ e(
1243
+ "div",
1244
+ {
1245
+ style: {
1246
+ width: r,
1247
+ height: r,
1248
+ borderRadius: "50%",
1249
+ background: o || "#6B7C93",
1250
+ color: "#FFF",
1251
+ display: "flex",
1252
+ alignItems: "center",
1253
+ justifyContent: "center",
1254
+ fontSize: r <= 32 ? "10px" : "11px",
1255
+ fontWeight: 650,
1256
+ flexShrink: 0,
1257
+ fontFamily: "var(--default-font-family)",
1258
+ letterSpacing: "0.02em"
1259
+ },
1260
+ title: t,
1261
+ children: i || V(t)
1262
+ }
1263
+ ), gn = ({ thread: t, isActive: i, onClick: o }) => {
1264
+ var c;
1265
+ const [r, a] = M(!1), d = t.status === "resolved", g = ((c = t.comments) == null ? void 0 : c.length) || t.commentCount || 0;
1266
+ return /* @__PURE__ */ n(
1267
+ "div",
1268
+ {
1269
+ onClick: o,
1270
+ onMouseEnter: () => a(!0),
1271
+ onMouseLeave: () => a(!1),
1272
+ style: {
1273
+ display: "flex",
1274
+ width: 264,
1275
+ padding: "12px 12px",
1276
+ flexDirection: i ? "column" : "row",
1277
+ justifyContent: i ? "center" : "flex-start",
1278
+ alignItems: i ? "flex-start" : "center",
1279
+ gap: i ? 6 : 8,
1280
+ borderBottom: i ? "3px solid var(--Grey-Strong, #2E3236)" : "1px solid var(--Grey-absent, #D9D9D9)",
1281
+ background: i ? "var(--Grey-Hover, #F3F7F7)" : r ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
1282
+ cursor: "pointer",
1283
+ flexShrink: 0,
1284
+ transition: "all 0.15s ease",
1285
+ boxSizing: "border-box"
1286
+ },
1287
+ children: [
1288
+ /* @__PURE__ */ n("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 4 }, children: [
1289
+ /* @__PURE__ */ e(
1290
+ "span",
1291
+ {
1292
+ style: {
1293
+ fontSize: 13,
1294
+ fontWeight: 500,
1295
+ color: "var(--Grey-Strong, #2E3236)",
1296
+ lineHeight: "150%",
1297
+ overflow: "hidden",
1298
+ textOverflow: "ellipsis",
1299
+ whiteSpace: "nowrap",
1300
+ fontFamily: "var(--default-font-family)"
1301
+ },
1302
+ children: t.title || "Untitled Thread"
1303
+ }
1304
+ ),
1305
+ /* @__PURE__ */ n(
1306
+ "span",
1307
+ {
1308
+ style: {
1309
+ fontSize: 12,
1310
+ fontWeight: 400,
1311
+ color: "var(--Grey-Muted, #808183)",
1312
+ lineHeight: "150%",
1313
+ fontFamily: "var(--default-font-family)"
1314
+ },
1315
+ children: [
1316
+ g,
1317
+ " Comment",
1318
+ g !== 1 ? "s" : ""
1319
+ ]
1320
+ }
1321
+ )
1322
+ ] }),
1323
+ /* @__PURE__ */ e(
1324
+ "div",
1325
+ {
1326
+ style: {
1327
+ width: 0,
1328
+ height: 32,
1329
+ borderLeft: "1px solid var(--Grey-absent, #D9D9D9)",
1330
+ flexShrink: 0
1331
+ }
1332
+ }
1333
+ ),
1334
+ /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", gap: 4, flexShrink: 0 }, children: d ? /* @__PURE__ */ n(ae, { children: [
1335
+ /* @__PURE__ */ e($e, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
1336
+ /* @__PURE__ */ e(
1337
+ "span",
1338
+ {
1339
+ style: {
1340
+ fontSize: 12,
1341
+ fontWeight: 500,
1342
+ color: "var(--Grey-Muted, #808183)",
1343
+ fontFamily: "var(--default-font-family)"
1344
+ },
1345
+ children: "Resolved"
1346
+ }
1347
+ )
1348
+ ] }) : /* @__PURE__ */ n(ae, { children: [
1349
+ /* @__PURE__ */ e(Tt, { size: 16, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 1.5 }),
1350
+ /* @__PURE__ */ e(
1351
+ "span",
1352
+ {
1353
+ style: {
1354
+ fontSize: 12,
1355
+ fontWeight: 500,
1356
+ color: "var(--Grey-Strong, #2E3236)",
1357
+ fontFamily: "var(--default-font-family)"
1358
+ },
1359
+ children: "Open"
1360
+ }
1361
+ )
1362
+ ] }) })
1363
+ ]
1364
+ }
1365
+ );
1366
+ }, Pe = ({
1367
+ comment: t,
1368
+ isReply: i = !1,
1369
+ onReply: o,
1370
+ onMenuClick: r,
1371
+ showReply: a = !0
1372
+ }) => {
1373
+ const [d, g] = M(!1), c = t.author || {}, h = c.name || t.author_name || "Unknown", u = c.initials || V(h), F = c.role || t.author_role, x = c.color || pe(F) || "#6B7C93", f = pn(t.timestamp || t.created_at), k = Array.isArray(t.content) ? t.content : [t.content || t.text || ""];
1374
+ return /* @__PURE__ */ n(
1375
+ "div",
1376
+ {
1377
+ onMouseEnter: () => g(!0),
1378
+ onMouseLeave: () => g(!1),
1379
+ style: {
1380
+ display: "flex",
1381
+ gap: 12,
1382
+ alignItems: "flex-start",
1383
+ marginLeft: i ? 48 : 0,
1384
+ position: "relative"
1385
+ },
1386
+ children: [
1387
+ /* @__PURE__ */ e(Ne, { name: h, initials: u, color: x }),
1388
+ /* @__PURE__ */ n("div", { style: { flex: 1, minWidth: 0 }, children: [
1389
+ /* @__PURE__ */ n(
1390
+ "div",
1391
+ {
1392
+ style: {
1393
+ display: "flex",
1394
+ alignItems: "center",
1395
+ justifyContent: "space-between",
1396
+ marginBottom: 6
1397
+ },
1398
+ children: [
1399
+ /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "baseline", gap: 8 }, children: [
1400
+ /* @__PURE__ */ e(
1401
+ "span",
1402
+ {
1403
+ style: {
1404
+ fontSize: 13,
1405
+ fontWeight: 650,
1406
+ color: "var(--text-ink, #1E2125)",
1407
+ lineHeight: "150%",
1408
+ fontFamily: "var(--default-font-family)"
1409
+ },
1410
+ children: h
1411
+ }
1412
+ ),
1413
+ /* @__PURE__ */ e(
1414
+ "span",
1415
+ {
1416
+ style: {
1417
+ fontSize: 12,
1418
+ fontWeight: 400,
1419
+ color: "var(--Grey-Muted, #808183)",
1420
+ lineHeight: "150%",
1421
+ fontFamily: "var(--default-font-family)"
1422
+ },
1423
+ children: f
1424
+ }
1425
+ )
1426
+ ] }),
1427
+ /* @__PURE__ */ e(
1428
+ "button",
1429
+ {
1430
+ type: "button",
1431
+ onClick: () => r == null ? void 0 : r(t),
1432
+ style: {
1433
+ padding: 2,
1434
+ border: "none",
1435
+ background: "transparent",
1436
+ cursor: "pointer",
1437
+ borderRadius: 4,
1438
+ display: "flex",
1439
+ alignItems: "center",
1440
+ justifyContent: "center",
1441
+ opacity: d ? 1 : 0,
1442
+ transition: "opacity 0.15s",
1443
+ flexShrink: 0
1444
+ },
1445
+ children: /* @__PURE__ */ e(Bt, { size: 24, color: "var(--Grey-Muted, #808183)" })
1446
+ }
1447
+ )
1448
+ ]
1449
+ }
1450
+ ),
1451
+ /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: k.map((v, m) => /* @__PURE__ */ e(
1452
+ "div",
1453
+ {
1454
+ style: {
1455
+ fontSize: 13,
1456
+ fontWeight: 400,
1457
+ color: "var(--text-ink, #1E2125)",
1458
+ lineHeight: "160%",
1459
+ fontFamily: "var(--default-font-family)",
1460
+ padding: "8px 12px",
1461
+ background: i ? "var(--surface-hover, #F3F7F7)" : "var(--surface-warm-40, rgba(243, 241, 229, 0.40))",
1462
+ borderRadius: 8,
1463
+ wordBreak: "break-word"
1464
+ },
1465
+ children: v
1466
+ },
1467
+ m
1468
+ )) }),
1469
+ a && o && /* @__PURE__ */ n(
1470
+ "button",
1471
+ {
1472
+ type: "button",
1473
+ onClick: () => o(t),
1474
+ style: {
1475
+ display: "flex",
1476
+ alignItems: "center",
1477
+ gap: 6,
1478
+ marginTop: 8,
1479
+ padding: 0,
1480
+ border: "none",
1481
+ background: "transparent",
1482
+ cursor: "pointer",
1483
+ fontSize: 13,
1484
+ fontWeight: 400,
1485
+ color: "var(--Grey-Muted, #808183)",
1486
+ fontFamily: "var(--default-font-family)",
1487
+ transition: "color 0.15s"
1488
+ },
1489
+ children: [
1490
+ /* @__PURE__ */ e(Lt, { size: 20, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
1491
+ "Reply"
1492
+ ]
1493
+ }
1494
+ )
1495
+ ] })
1496
+ ]
1497
+ }
1498
+ );
1499
+ }, hn = ({ currentUser: t, onSubmit: i }) => {
1500
+ const [o, r] = M(""), [a, d] = M(!1), g = T(null), c = () => {
1501
+ const x = o.trim();
1502
+ x && (i == null || i(x), r(""));
1503
+ }, h = (x) => {
1504
+ x.key === "Enter" && !x.shiftKey && (x.preventDefault(), c());
1505
+ }, u = (t == null ? void 0 : t.initials) || V(t == null ? void 0 : t.name), F = (t == null ? void 0 : t.color) || pe(t == null ? void 0 : t.role) || "#6B7C93";
1506
+ return /* @__PURE__ */ n("div", { style: { display: "flex", gap: 12, alignItems: "flex-start", width: "100%" }, children: [
1507
+ /* @__PURE__ */ e(Ne, { name: t == null ? void 0 : t.name, initials: u, color: F }),
1508
+ /* @__PURE__ */ e(
1509
+ "div",
1510
+ {
1511
+ style: {
1512
+ flex: 1,
1513
+ border: a ? "1px solid var(--Grey-Strong, #2E3236)" : "1px solid var(--Grey-absent, #D9D9D9)",
1514
+ borderRadius: 8,
1515
+ background: "var(--Grey-White, #FFF)",
1516
+ transition: "border-color 0.15s",
1517
+ overflow: "hidden"
1518
+ },
1519
+ children: /* @__PURE__ */ n(
1520
+ "div",
1521
+ {
1522
+ style: {
1523
+ display: "flex",
1524
+ alignItems: "flex-end",
1525
+ padding: "10px 12px",
1526
+ gap: 8
1527
+ },
1528
+ children: [
1529
+ /* @__PURE__ */ e(
1530
+ "textarea",
1531
+ {
1532
+ ref: g,
1533
+ value: o,
1534
+ onChange: (x) => r(x.target.value),
1535
+ onFocus: () => d(!0),
1536
+ onBlur: () => d(!1),
1537
+ onKeyDown: h,
1538
+ placeholder: "Add a comment",
1539
+ rows: 1,
1540
+ style: {
1541
+ flex: 1,
1542
+ border: "none",
1543
+ outline: "none",
1544
+ resize: "none",
1545
+ fontSize: 13,
1546
+ fontWeight: 400,
1547
+ color: "var(--text-ink, #1E2125)",
1548
+ fontFamily: "var(--default-font-family)",
1549
+ lineHeight: "160%",
1550
+ background: "transparent",
1551
+ padding: 0,
1552
+ minHeight: 24
1553
+ }
1554
+ }
1555
+ ),
1556
+ /* @__PURE__ */ e(
1557
+ "button",
1558
+ {
1559
+ type: "button",
1560
+ onClick: c,
1561
+ disabled: !o.trim(),
1562
+ style: {
1563
+ display: "flex",
1564
+ padding: "6px 16px",
1565
+ justifyContent: "center",
1566
+ alignItems: "center",
1567
+ fontSize: 13,
1568
+ fontWeight: 600,
1569
+ color: o.trim() ? "var(--Grey-White, #FFF)" : "var(--Grey-Muted, #808183)",
1570
+ background: o.trim() ? "var(--Grey-Strong, #2E3236)" : "var(--grey-light, #e9e8e8a1)",
1571
+ border: "none",
1572
+ borderRadius: 6,
1573
+ cursor: o.trim() ? "pointer" : "not-allowed",
1574
+ fontFamily: "var(--default-font-family)",
1575
+ transition: "all 0.15s",
1576
+ flexShrink: 0,
1577
+ lineHeight: "150%"
1578
+ },
1579
+ children: "Post"
1580
+ }
1581
+ )
1582
+ ]
1583
+ }
1584
+ )
1585
+ }
1586
+ )
1587
+ ] });
1588
+ }, yn = ({
1589
+ threads: t = [],
1590
+ activeThreadId: i,
1591
+ onThreadSelect: o,
1592
+ onNewThread: r,
1593
+ onSendComment: a,
1594
+ onReply: d,
1595
+ onMenuClick: g,
1596
+ onMarkResolved: c,
1597
+ onViewPreviousComments: h,
1598
+ currentUser: u,
1599
+ filterValue: F = "all",
1600
+ onFilterChange: x
1601
+ }) => {
1602
+ var A;
1603
+ const [f, k] = M(
1604
+ i || ((A = t[0]) == null ? void 0 : A.id) || null
1605
+ ), [v, m] = M(!1), G = T(null), W = i ?? f, D = le(
1606
+ () => t.find((p) => p.id === W) || t[0],
1607
+ [t, W]
1608
+ ), H = (D == null ? void 0 : D.comments) || [], E = le(() => {
1609
+ const p = H.filter((w) => !w.parentId), b = {};
1610
+ return H.forEach((w) => {
1611
+ w.parentId && (b[w.parentId] || (b[w.parentId] = []), b[w.parentId].push(w));
1612
+ }), p.map((w) => ({
1613
+ ...w,
1614
+ replies: b[w.id] || []
1615
+ }));
1616
+ }, [H]);
1617
+ de(() => {
1618
+ i && k(i);
1619
+ }, [i]), de(() => {
1620
+ if (!v)
1621
+ return;
1622
+ const p = (b) => {
1623
+ G.current && !G.current.contains(b.target) && m(!1);
1624
+ };
1625
+ return document.addEventListener("mousedown", p), () => document.removeEventListener("mousedown", p);
1626
+ }, [v]);
1627
+ const s = (p) => {
1628
+ k(p), o == null || o(p);
1629
+ }, R = le(() => {
1630
+ if (!u)
1631
+ return { name: "You", initials: "YO", color: "#6B7C93" };
1632
+ const p = u.name || "You", b = u.initials || V(p), w = u.role && String(u.role).toLowerCase(), B = u.color || pe(w) || "#6B7C93";
1633
+ return { ...u, name: p, initials: b, color: B };
1634
+ }, [u]);
1635
+ return /* @__PURE__ */ n(
1636
+ "div",
1637
+ {
1638
+ style: {
1639
+ display: "flex",
1640
+ flexDirection: "column",
1641
+ alignItems: "flex-start",
1642
+ gap: 24,
1643
+ background: "var(--Grey-White, #FFF)",
1644
+ width: "100%",
1645
+ fontFamily: "var(--default-font-family)"
1646
+ },
1647
+ children: [
1648
+ /* @__PURE__ */ e(
1649
+ "div",
1650
+ {
1651
+ style: {
1652
+ display: "flex",
1653
+ alignItems: "center",
1654
+ justifyContent: "space-between",
1655
+ width: "100%"
1656
+ },
1657
+ children: /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
1658
+ /* @__PURE__ */ e(Rt, { size: 24, color: "var(--rail-orange, #C98A5A)", strokeWidth: 1.5 }),
1659
+ /* @__PURE__ */ e(
1660
+ "span",
1661
+ {
1662
+ style: {
1663
+ fontSize: 14,
1664
+ fontWeight: 650,
1665
+ color: "var(--Grey-Strong, #2E3236)",
1666
+ letterSpacing: "0.08em",
1667
+ textTransform: "uppercase",
1668
+ lineHeight: "150%"
1669
+ },
1670
+ children: "COMMENTS"
1671
+ }
1672
+ )
1673
+ ] })
1674
+ }
1675
+ ),
1676
+ t.length > 0 && /* @__PURE__ */ e(
1677
+ "div",
1678
+ {
1679
+ style: {
1680
+ display: "flex",
1681
+ gap: 0,
1682
+ width: "100%",
1683
+ overflowX: "auto"
1684
+ },
1685
+ className: "custom-thin-scrollbar-library",
1686
+ children: t.map((p) => /* @__PURE__ */ e(
1687
+ gn,
1688
+ {
1689
+ thread: p,
1690
+ isActive: p.id === W,
1691
+ onClick: () => s(p.id)
1692
+ },
1693
+ p.id
1694
+ ))
1695
+ }
1696
+ ),
1697
+ h && /* @__PURE__ */ e(
1698
+ "button",
1699
+ {
1700
+ type: "button",
1701
+ onClick: h,
1702
+ style: {
1703
+ display: "flex",
1704
+ alignItems: "center",
1705
+ gap: 6,
1706
+ padding: "8px 16px",
1707
+ fontSize: 13,
1708
+ fontWeight: 500,
1709
+ color: "var(--Grey-Strong, #2E3236)",
1710
+ background: "var(--Grey-White, #FFF)",
1711
+ border: "1px solid var(--Grey-absent, #D9D9D9)",
1712
+ borderRadius: 8,
1713
+ cursor: "pointer",
1714
+ fontFamily: "var(--default-font-family)",
1715
+ transition: "background 0.15s",
1716
+ lineHeight: "150%"
1717
+ },
1718
+ children: "View Previous Comments"
1719
+ }
1720
+ ),
1721
+ /* @__PURE__ */ e(
1722
+ "div",
1723
+ {
1724
+ style: {
1725
+ display: "flex",
1726
+ flexDirection: "column",
1727
+ gap: 20,
1728
+ width: "100%"
1729
+ },
1730
+ children: E.map((p) => /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 20 }, children: [
1731
+ /* @__PURE__ */ e(
1732
+ Pe,
1733
+ {
1734
+ comment: p,
1735
+ isReply: !1,
1736
+ onReply: d,
1737
+ onMenuClick: g,
1738
+ showReply: p.replies.length === 0
1739
+ }
1740
+ ),
1741
+ p.replies.map((b, w) => /* @__PURE__ */ e(
1742
+ Pe,
1743
+ {
1744
+ comment: b,
1745
+ isReply: !0,
1746
+ onReply: d,
1747
+ onMenuClick: g,
1748
+ showReply: w === p.replies.length - 1
1749
+ },
1750
+ b.id
1751
+ ))
1752
+ ] }, p.id))
1753
+ }
1754
+ ),
1755
+ /* @__PURE__ */ e(hn, { currentUser: R, onSubmit: a }),
1756
+ c && D && D.status !== "resolved" && /* @__PURE__ */ n(
1757
+ "button",
1758
+ {
1759
+ type: "button",
1760
+ onClick: c,
1761
+ style: {
1762
+ display: "flex",
1763
+ alignItems: "center",
1764
+ gap: 8,
1765
+ padding: "8px 16px",
1766
+ fontSize: 13,
1767
+ fontWeight: 500,
1768
+ color: "var(--Grey-Strong, #2E3236)",
1769
+ background: "var(--Grey-White, #FFF)",
1770
+ border: "1px solid var(--Grey-absent, #D9D9D9)",
1771
+ borderRadius: 20,
1772
+ cursor: "pointer",
1773
+ fontFamily: "var(--default-font-family)",
1774
+ transition: "background 0.15s",
1775
+ lineHeight: "150%"
1776
+ },
1777
+ children: [
1778
+ /* @__PURE__ */ e($e, { size: 16, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 1.5 }),
1779
+ "Mark as Resolved"
1780
+ ]
1781
+ }
1782
+ )
1783
+ ]
1784
+ }
1785
+ );
1786
+ }, un = [
1085
1787
  { key: "overview", label: "Overview" },
1086
1788
  { key: "coaching", label: "Coaching Summary" },
1087
1789
  { key: "signals", label: "Signals & Recording" },
1088
1790
  { key: "comments", label: "Comments" }
1089
- ], Nt = ({
1090
- title: n = "Wheel Stud Replacement Enquiry",
1791
+ ], kn = ({
1792
+ title: t = "Wheel Stud Replacement Enquiry",
1091
1793
  onBack: i,
1092
1794
  // Data props — all optional with defaults for demo
1093
- data: r,
1094
- coachingData: s,
1095
- audioUrl: p,
1795
+ data: o,
1796
+ coachingData: r,
1797
+ coachingLoading: a = !1,
1798
+ audioUrl: d,
1096
1799
  // Audio/playback props — pass these when the host app manages audio externally
1097
1800
  // (like InteractionDetailPanel does). If omitted, UpdatedInteractionRecording
1098
1801
  // manages its own audio element internally.
1099
- audioRef: y,
1100
- currentTimeSeconds: v,
1101
- timelinePlaying: f,
1802
+ audioRef: g,
1803
+ currentTimeSeconds: c,
1804
+ timelinePlaying: h,
1102
1805
  playbackRate: u,
1103
- timelineSegments: b,
1104
- onSeek: k,
1105
- onTogglePlay: C,
1106
- onSeekBack: d,
1107
- onSeekForward: l,
1108
- onSetPlaybackRate: h,
1806
+ timelineSegments: F,
1807
+ onSeek: x,
1808
+ onTogglePlay: f,
1809
+ onSeekBack: k,
1810
+ onSeekForward: v,
1811
+ onSetPlaybackRate: m,
1109
1812
  // Speaker names
1110
- agentName: m,
1111
- customerName: D,
1813
+ agentName: G,
1814
+ customerName: W,
1112
1815
  // Transcript props — pass real transcript data from the host app
1113
- transcript: F,
1114
- activeTurnIndex: I,
1115
- turnObservations: P,
1116
- highlightedTurns: z,
1117
- onTurnPlayPause: j,
1816
+ transcript: D,
1817
+ activeTurnIndex: H,
1818
+ turnObservations: E,
1819
+ highlightedTurns: s,
1820
+ onTurnPlayPause: R,
1118
1821
  // Signal evidence playback — host app can provide to play audio segments from signals
1119
- onPlayEvidence: H,
1120
- onHighlightTurns: E,
1822
+ onPlayEvidence: A,
1823
+ onHighlightTurns: p,
1121
1824
  // Context props — pass from host app to override block-derived defaults
1122
- callPurpose: L,
1123
- classification: W,
1124
- outcomeQuality: O,
1825
+ callPurpose: b,
1826
+ classification: w,
1827
+ outcomeQuality: B,
1828
+ // Context "More Details" expandable section
1829
+ resolutionOutcome: Q,
1830
+ customerIntent: qe,
1831
+ interactionId: Ke,
1832
+ moreDetails: Ye,
1125
1833
  // Compass score props
1126
- compassScore: A,
1127
- // gauge meter value (e.g. outcomeLift.p_full) — drives meter fill, range 1-10
1128
- compassMaxScore: Y = 10,
1129
- predictedCsat: Ie,
1834
+ compassScore: Ve,
1835
+ // gauge meter value — compass_score, range 1-5
1836
+ compassMaxScore: vn = 10,
1837
+ predictedCsat: Qe,
1130
1838
  // predicted objective number (e.g. compass_score) — shown as "03" top-right
1131
- predictedLabel: _e = "Predicted Objective",
1132
- compassLegends: Ae,
1839
+ predictedLabel: Xe = "Predicted Objective",
1840
+ compassLegends: Ze,
1133
1841
  // Customer session dropdown
1134
- customerSessions: Ge,
1135
- customerSessionCount: Me,
1136
- onSessionClick: V,
1137
- onViewAllSessions: K,
1842
+ customerSessions: Je,
1843
+ customerSessionCount: Ue,
1844
+ onSessionClick: ge,
1845
+ onViewAllSessions: he,
1138
1846
  // Footer navigation
1139
- prevSessionTitle: He,
1140
- prevSessionDesc: Ee,
1141
- prevSessionDisabled: G = !1,
1142
- nextSessionTitle: Te,
1143
- nextSessionDesc: Re,
1144
- nextSessionDisabled: M = !1,
1145
- onPreviousSession: Pe,
1146
- onNextSession: Le
1847
+ prevSessionTitle: et,
1848
+ prevSessionDesc: tt,
1849
+ prevSessionDisabled: L = !1,
1850
+ nextSessionTitle: nt,
1851
+ nextSessionDesc: it,
1852
+ nextSessionDisabled: P = !1,
1853
+ onPreviousSession: ot,
1854
+ onNextSession: rt
1147
1855
  }) => {
1148
- var fe, he;
1149
- const [U, Be] = _("overview"), [$e, X] = _(/* @__PURE__ */ new Set()), [Z, q] = _(!1), [J, ee] = _(null), [je, te] = _(!1), [Oe, Ue] = _(0), T = R(null), ne = R(null), ie = R(null), oe = R(null), re = R(null), qe = { overview: ne, coaching: ie, signals: oe, comments: re }, Ne = (o) => {
1150
- Be(o);
1151
- const g = qe[o];
1152
- g != null && g.current && g.current.scrollIntoView({ behavior: "smooth", block: "start" });
1153
- }, le = Ge || [], Qe = (o) => {
1856
+ var Ie, ze;
1857
+ const [X, ye] = M("overview"), [lt, ue] = M(/* @__PURE__ */ new Set()), [ve, Z] = M(!1), [me, xe] = M(null), [st, be] = M(!1), [at, dt] = M(0), O = T(null), J = T(null), U = T(null), ee = T(null), te = T(null), ct = { overview: J, coaching: U, signals: ee, comments: te }, Se = T(null), ne = T(!1);
1858
+ de(() => {
1859
+ const l = Se.current;
1860
+ if (!l)
1861
+ return;
1862
+ const S = ["overview", "coaching", "signals", "comments"], C = [J, U, ee, te], oe = new IntersectionObserver(
1863
+ (j) => {
1864
+ if (ne.current)
1865
+ return;
1866
+ let re = null, Ge = 0;
1867
+ for (const Y of j)
1868
+ if (Y.isIntersecting && Y.intersectionRatio > Ge) {
1869
+ const Me = C.findIndex((Wt) => Wt.current === Y.target);
1870
+ Me !== -1 && (re = S[Me], Ge = Y.intersectionRatio);
1871
+ }
1872
+ re && ye(re);
1873
+ },
1874
+ { root: l, threshold: [0, 0.1, 0.25, 0.5, 0.75, 1] }
1875
+ );
1876
+ return C.forEach((j) => {
1877
+ j.current && oe.observe(j.current);
1878
+ }), () => oe.disconnect();
1879
+ }, []);
1880
+ const ft = (l) => {
1881
+ ye(l), ne.current = !0;
1882
+ const S = ct[l];
1883
+ S != null && S.current && S.current.scrollIntoView({ behavior: "smooth", block: "start" }), setTimeout(() => {
1884
+ ne.current = !1;
1885
+ }, 800);
1886
+ }, ke = Je || [], pt = (l) => {
1887
+ var C;
1888
+ const S = l / 1e3;
1889
+ (C = O.current) != null && C.seekTo && O.current.seekTo(S);
1890
+ }, gt = (l) => {
1154
1891
  var S;
1155
- const g = o / 1e3;
1156
- (S = T.current) != null && S.seekTo && T.current.seekTo(g);
1157
- }, Ye = (o) => {
1158
- var g;
1159
- if (H)
1160
- H(o);
1892
+ if (A)
1893
+ A(l);
1161
1894
  else {
1162
- const S = o.start_ms ?? o.startMs;
1163
- if (S != null && ((g = T.current) != null && g.seekTo)) {
1164
- T.current.seekTo(S / 1e3), te(!0), Ue(S / 1e3);
1165
- const st = (o.end_ms ?? o.endMs ?? S + 5e3) - S;
1166
- setTimeout(() => te(!1), st);
1895
+ const C = l.start_ms ?? l.startMs;
1896
+ if (C != null && ((S = O.current) != null && S.seekTo)) {
1897
+ O.current.seekTo(C / 1e3), be(!0), dt(C / 1e3);
1898
+ const j = (l.end_ms ?? l.endMs ?? C + 5e3) - C;
1899
+ setTimeout(() => be(!1), j);
1167
1900
  }
1168
1901
  }
1169
- }, Ve = (o) => {
1170
- E && E(o);
1171
- }, Ke = (o) => {
1172
- X((g) => {
1173
- const S = new Set(g);
1174
- return S.has(o) ? S.delete(o) : S.add(o), S;
1902
+ }, ht = (l) => {
1903
+ p && p(l);
1904
+ }, yt = (l) => {
1905
+ ue((S) => {
1906
+ const C = new Set(S);
1907
+ return C.has(l) ? C.delete(l) : C.add(l), C;
1175
1908
  });
1176
- }, Xe = (r == null ? void 0 : r.blocks) || [], B = (o) => {
1177
- var g;
1178
- return ((g = Xe.find((S) => S.block_id === o)) == null ? void 0 : g.payload) || {};
1179
- }, N = B("interaction-metadata"), se = B("interaction-context"), $ = B("interaction-signals"), ae = B("interaction-outcome-lift"), Ze = se.call_purpose || {}, Je = se.classification || {}, de = { duration_seconds: 156, message_count: 25, ...N }, ce = { interaction_driver: "General Information", interaction_direction: "inbound", ...Ze }, et = { interaction_paradigm: "Informational", ...Je }, tt = { p_expected: 0.94, p_full: 0.83, lift_raw: -0.11, lift: 0.043, interpretation: { lift_band: "positive" }, ...ae }, nt = ((fe = ae.driver_signal_keys) == null ? void 0 : fe.map((o) => o.replace(/^sig\./, "").replace(/_/g, " "))) || [
1909
+ }, ut = (o == null ? void 0 : o.blocks) || [], $ = (l) => {
1910
+ var S;
1911
+ return ((S = ut.find((C) => C.block_id === l)) == null ? void 0 : S.payload) || {};
1912
+ }, N = $("interaction-metadata"), we = $("interaction-context"), q = $("interaction-signals"), Ce = $("interaction-outcome-lift"), vt = we.call_purpose || {}, mt = we.classification || {}, Fe = { duration_seconds: 156, message_count: 25, ...N }, We = { interaction_driver: "General Information", interaction_direction: "inbound", ...vt }, xt = { interaction_paradigm: "Informational", ...mt }, bt = { p_expected: 0.94, p_full: 0.83, lift_raw: -0.11, lift: 0.043, interpretation: { lift_band: "positive" }, ...Ce }, St = ((Ie = Ce.driver_signal_keys) == null ? void 0 : Ie.map((l) => l.replace(/^sig\./, "").replace(/_/g, " "))) || [
1180
1913
  "customer needs fully addressed",
1181
1914
  "call flow expectations set",
1182
1915
  "Opening expectations set",
1183
1916
  "Active listening demonstrated",
1184
1917
  "Resolution confirmed"
1185
- ], it = s || {
1918
+ ], kt = r || {
1186
1919
  one_liner: "David provided the customer with information on wheel stud replacement and pricing, but did not secure an appointment.",
1187
1920
  context: "The customer was seeking information on wheel stud replacement for a 2013 Chevy Bolt and was unsure about doing the repair themselves.",
1188
1921
  strengths: [
@@ -1195,7 +1928,7 @@ const _t = {
1195
1928
  { text: "Frame solutions positively by leading with what can be done rather than limitations.", quote: "I don't have the alignment changeover the weekend." }
1196
1929
  ],
1197
1930
  overall: "effective"
1198
- }, ot = (he = $ == null ? void 0 : $.signals) != null && he.length ? $ : {
1931
+ }, wt = (ze = q == null ? void 0 : q.signals) != null && ze.length ? q : {
1199
1932
  present_count: 9,
1200
1933
  total_signals_evaluated: 146,
1201
1934
  signals: [
@@ -1221,10 +1954,10 @@ const _t = {
1221
1954
  { key: "prototype_developed", display_name: "Prototype Developed", observations: [{ key: "obs8a", reason: "Prototype shared." }, { key: "obs8b", reason: "Testing initiated." }, { key: "obs8c", reason: "Feedback collected." }, { key: "obs8d", reason: "Iterations completed." }, { key: "obs8e", reason: "Usability tested." }, { key: "obs8f", reason: "Design finalized." }, { key: "obs8g", reason: "Stakeholder demo done." }] },
1222
1955
  { key: "user_testing", display_name: "User Testing Scheduled", observations: [{ key: "obs9a", reason: "Testing sessions planned." }, { key: "obs9b", reason: "Participants recruited." }, { key: "obs9c", reason: "Test scripts prepared." }, { key: "obs9d", reason: "Environment set up." }, { key: "obs9e", reason: "Accessibility testing included." }, { key: "obs9f", reason: "Results framework defined." }, { key: "obs9g", reason: "Timeline confirmed." }, { key: "obs9h", reason: "Backup plan discussed." }] }
1223
1956
  ]
1224
- }, ge = m || "Agent", Q = D || "Customer", pe = Me ?? le.length, rt = N.evaluated_dt ? new Date(N.evaluated_dt).toLocaleString() : "3/29/2026, 8:30:00 AM", lt = ce.interaction_direction === "inbound" ? "Inbound" : "Outbound";
1225
- return /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", width: "100%", height: "100%", background: "var(--Grey-White, #FFF)" }, children: [
1226
- /* @__PURE__ */ t("div", { style: { position: "sticky", top: 0, zIndex: 20, background: "var(--Grey-White, #FFF)" }, children: [
1227
- /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "24px 24px 0" }, children: [
1957
+ }, De = G || "Agent", K = W || "Customer", ie = Ue ?? ke.length, Ct = N.evaluated_dt ? new Date(N.evaluated_dt).toLocaleString() : "3/29/2026, 8:30:00 AM", Ft = We.interaction_direction === "inbound" ? "Inbound" : "Outbound";
1958
+ return /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", width: "100%", height: "100%", background: "var(--Grey-White, #FFF)" }, children: [
1959
+ /* @__PURE__ */ n("div", { style: { position: "sticky", top: 0, zIndex: 20, background: "var(--Grey-White, #FFF)" }, children: [
1960
+ /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "24px 24px 0" }, children: [
1228
1961
  /* @__PURE__ */ e(
1229
1962
  "button",
1230
1963
  {
@@ -1239,7 +1972,7 @@ const _t = {
1239
1972
  padding: 0,
1240
1973
  flexShrink: 0
1241
1974
  },
1242
- children: /* @__PURE__ */ e(ye, { size: 24, color: "var(--Grey-Strong, #2E3236)" })
1975
+ children: /* @__PURE__ */ e(_e, { size: 24, color: "var(--Grey-Strong, #2E3236)" })
1243
1976
  }
1244
1977
  ),
1245
1978
  /* @__PURE__ */ e("div", { style: { width: 1, height: 28, background: "var(--Base-absent, #D9D9D9)" } }),
@@ -1250,7 +1983,7 @@ const _t = {
1250
1983
  fontWeight: 400,
1251
1984
  lineHeight: "normal",
1252
1985
  margin: 0
1253
- }, children: n })
1986
+ }, children: t })
1254
1987
  ] }),
1255
1988
  /* @__PURE__ */ e("div", { style: {
1256
1989
  display: "flex",
@@ -1259,10 +1992,10 @@ const _t = {
1259
1992
  borderBottom: "1px solid var(--Grey-Faint, #ACADAD)",
1260
1993
  padding: "0 24px",
1261
1994
  marginTop: 8
1262
- }, children: Bt.map((o) => /* @__PURE__ */ e(
1995
+ }, children: un.map((l) => /* @__PURE__ */ e(
1263
1996
  "button",
1264
1997
  {
1265
- onClick: () => Ne(o.key),
1998
+ onClick: () => ft(l.key),
1266
1999
  style: {
1267
2000
  display: "flex",
1268
2001
  padding: 16,
@@ -1270,21 +2003,21 @@ const _t = {
1270
2003
  gap: 10,
1271
2004
  background: "none",
1272
2005
  border: "none",
1273
- borderBottom: U === o.key ? "3px solid var(--Grey-Strong, #2E3236)" : "3px solid transparent",
2006
+ borderBottom: X === l.key ? "3px solid var(--Grey-Strong, #2E3236)" : "3px solid transparent",
1274
2007
  cursor: "pointer",
1275
2008
  fontSize: 15,
1276
- fontWeight: U === o.key ? 500 : 400,
1277
- color: U === o.key ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)",
2009
+ fontWeight: X === l.key ? 500 : 400,
2010
+ color: X === l.key ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)",
1278
2011
  whiteSpace: "nowrap",
1279
2012
  transition: "border-color 0.2s ease, color 0.2s ease"
1280
2013
  },
1281
- children: o.label
2014
+ children: l.label
1282
2015
  },
1283
- o.key
2016
+ l.key
1284
2017
  )) })
1285
2018
  ] }),
1286
- /* @__PURE__ */ t("div", { style: { padding: 24, flex: 1, overflowY: "auto" }, children: [
1287
- /* @__PURE__ */ t("div", { ref: ne, style: {
2019
+ /* @__PURE__ */ n("div", { ref: Se, style: { padding: 24, flex: 1, overflowY: "auto" }, children: [
2020
+ /* @__PURE__ */ n("div", { ref: J, style: {
1288
2021
  display: "flex",
1289
2022
  flexDirection: "column",
1290
2023
  justifyContent: "flex-end",
@@ -1292,15 +2025,15 @@ const _t = {
1292
2025
  gap: 24,
1293
2026
  alignSelf: "stretch"
1294
2027
  }, children: [
1295
- /* @__PURE__ */ t("div", { style: {
2028
+ /* @__PURE__ */ n("div", { style: {
1296
2029
  display: "flex",
1297
2030
  height: 40,
1298
2031
  alignItems: "center",
1299
2032
  gap: 16,
1300
2033
  alignSelf: "stretch"
1301
2034
  }, children: [
1302
- /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: 1 }, children: [
1303
- /* @__PURE__ */ e(ut, { size: 24, color: "var(--rail-orange, #C98A5A)", strokeWidth: 2 }),
2035
+ /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: 1 }, children: [
2036
+ /* @__PURE__ */ e(Pt, { size: 24, color: "var(--rail-orange, #C98A5A)", strokeWidth: 2 }),
1304
2037
  /* @__PURE__ */ e("span", { style: {
1305
2038
  fontSize: 16,
1306
2039
  fontWeight: 600,
@@ -1309,32 +2042,32 @@ const _t = {
1309
2042
  textTransform: "uppercase"
1310
2043
  }, children: "Overview" })
1311
2044
  ] }),
1312
- /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 16, flexShrink: 0 }, children: [
1313
- /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
1314
- /* @__PURE__ */ e(mt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
1315
- /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", fontFamily: "var(--font-sans)", lineHeight: 1.2 }, children: rt })
2045
+ /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 16, flexShrink: 0 }, children: [
2046
+ /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
2047
+ /* @__PURE__ */ e(jt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
2048
+ /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", fontFamily: "var(--font-sans)", lineHeight: 1.2 }, children: Ct })
1316
2049
  ] }),
1317
- /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
1318
- /* @__PURE__ */ e(vt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
1319
- /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", fontFamily: "var(--font-sans)", lineHeight: 1.2 }, children: lt })
2050
+ /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
2051
+ /* @__PURE__ */ e(Ot, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
2052
+ /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", fontFamily: "var(--font-sans)", lineHeight: 1.2 }, children: Ft })
1320
2053
  ] }),
1321
- /* @__PURE__ */ t("div", { style: {
2054
+ /* @__PURE__ */ n("div", { style: {
1322
2055
  display: "flex",
1323
2056
  alignItems: "center",
1324
2057
  gap: 16,
1325
2058
  paddingLeft: 16,
1326
2059
  borderLeft: "1px solid var(--Grey-absent, #D9D9D9)"
1327
2060
  }, children: [
1328
- /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
1329
- /* @__PURE__ */ e(xt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
1330
- /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", fontFamily: "var(--font-sans)", lineHeight: 1.2 }, children: ge })
2061
+ /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
2062
+ /* @__PURE__ */ e($t, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
2063
+ /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", fontFamily: "var(--font-sans)", lineHeight: 1.2 }, children: De })
1331
2064
  ] }),
1332
- /* @__PURE__ */ e(bt, { size: 16, color: "var(--color-input-border, #ACACAD)", strokeWidth: 1.5 }),
1333
- /* @__PURE__ */ t("div", { style: { position: "relative" }, children: [
1334
- /* @__PURE__ */ t(
2065
+ /* @__PURE__ */ e(Nt, { size: 16, color: "var(--color-input-border, #ACACAD)", strokeWidth: 1.5 }),
2066
+ ie > 1 ? /* @__PURE__ */ n("div", { style: { position: "relative" }, children: [
2067
+ /* @__PURE__ */ n(
1335
2068
  "button",
1336
2069
  {
1337
- onClick: () => q((o) => !o),
2070
+ onClick: () => Z((l) => !l),
1338
2071
  style: {
1339
2072
  display: "flex",
1340
2073
  alignItems: "center",
@@ -1345,18 +2078,18 @@ const _t = {
1345
2078
  cursor: "pointer"
1346
2079
  },
1347
2080
  children: [
1348
- /* @__PURE__ */ e(ue, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
1349
- /* @__PURE__ */ t("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", lineHeight: 1.2 }, children: [
1350
- Q,
2081
+ /* @__PURE__ */ e(se, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
2082
+ /* @__PURE__ */ n("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", lineHeight: 1.2 }, children: [
2083
+ K,
1351
2084
  " (",
1352
- pe,
2085
+ ie,
1353
2086
  " Sessions)"
1354
2087
  ] }),
1355
- Z ? /* @__PURE__ */ e(Fe, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }) : /* @__PURE__ */ e(ze, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 })
2088
+ ve ? /* @__PURE__ */ e(ce, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }) : /* @__PURE__ */ e(fe, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 })
1356
2089
  ]
1357
2090
  }
1358
2091
  ),
1359
- Z && /* @__PURE__ */ t("div", { style: {
2092
+ ve && /* @__PURE__ */ n("div", { style: {
1360
2093
  position: "absolute",
1361
2094
  top: "100%",
1362
2095
  right: 0,
@@ -1369,81 +2102,81 @@ const _t = {
1369
2102
  zIndex: 50,
1370
2103
  overflow: "hidden"
1371
2104
  }, children: [
1372
- /* @__PURE__ */ t("div", { style: {
2105
+ /* @__PURE__ */ n("div", { style: {
1373
2106
  display: "flex",
1374
2107
  alignItems: "flex-start",
1375
2108
  gap: 8,
1376
2109
  padding: 16
1377
2110
  }, children: [
1378
- /* @__PURE__ */ e(ue, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5, style: { marginTop: 2, flexShrink: 0 } }),
1379
- /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
2111
+ /* @__PURE__ */ e(se, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5, style: { marginTop: 2, flexShrink: 0 } }),
2112
+ /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
1380
2113
  /* @__PURE__ */ e("span", { style: {
1381
2114
  fontSize: 16,
1382
2115
  fontWeight: 600,
1383
2116
  color: "var(--Grey-Strong, #2E3236)",
1384
2117
  lineHeight: 1
1385
- }, children: Q }),
1386
- /* @__PURE__ */ t("span", { style: {
2118
+ }, children: K }),
2119
+ /* @__PURE__ */ n("span", { style: {
1387
2120
  fontSize: 13,
1388
2121
  fontWeight: 400,
1389
2122
  color: "var(--Grey-Muted, #808183)",
1390
2123
  lineHeight: 1
1391
2124
  }, children: [
1392
- pe,
2125
+ ie,
1393
2126
  " Sessions in past"
1394
2127
  ] })
1395
2128
  ] })
1396
2129
  ] }),
1397
- le.slice(0, 5).map((o, g) => /* @__PURE__ */ t(
2130
+ ke.slice(0, 5).map((l, S) => /* @__PURE__ */ n(
1398
2131
  "div",
1399
2132
  {
1400
2133
  onClick: () => {
1401
- V && V(o), q(!1);
2134
+ ge && ge(l), Z(!1);
1402
2135
  },
1403
- onMouseEnter: () => ee(g),
1404
- onMouseLeave: () => ee(null),
2136
+ onMouseEnter: () => xe(S),
2137
+ onMouseLeave: () => xe(null),
1405
2138
  style: {
1406
2139
  display: "flex",
1407
2140
  width: 264,
1408
2141
  padding: "12px 16px",
1409
2142
  justifyContent: "space-between",
1410
2143
  alignItems: "center",
1411
- background: J === g ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
2144
+ background: me === S ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
1412
2145
  borderTop: "1px solid var(--Grey-absent, #D9D9D9)",
1413
2146
  cursor: "pointer",
1414
2147
  boxSizing: "border-box",
1415
2148
  transition: "background 0.15s"
1416
2149
  },
1417
2150
  children: [
1418
- /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
2151
+ /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
1419
2152
  /* @__PURE__ */ e("span", { style: {
1420
2153
  fontSize: 13,
1421
2154
  fontWeight: 400,
1422
2155
  color: "var(--Grey-Strong, #2E3236)",
1423
2156
  lineHeight: 1
1424
- }, children: o.title }),
2157
+ }, children: l.title }),
1425
2158
  /* @__PURE__ */ e("span", { style: {
1426
2159
  fontSize: 12,
1427
2160
  fontWeight: 400,
1428
2161
  color: "var(--Grey-Muted, #808183)",
1429
2162
  lineHeight: 1
1430
- }, children: o.date })
2163
+ }, children: l.date })
1431
2164
  ] }),
1432
- J === g && /* @__PURE__ */ e(Ce, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1, style: { flexShrink: 0 } })
2165
+ me === S && /* @__PURE__ */ e(qt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1, style: { flexShrink: 0 } })
1433
2166
  ]
1434
2167
  },
1435
- o.id || g
2168
+ l.id || S
1436
2169
  )),
1437
2170
  /* @__PURE__ */ e("div", { style: {
1438
2171
  padding: 16,
1439
2172
  borderTop: "1px solid var(--Grey-absent, #D9D9D9)",
1440
2173
  display: "flex",
1441
2174
  justifyContent: "center"
1442
- }, children: /* @__PURE__ */ t(
2175
+ }, children: /* @__PURE__ */ n(
1443
2176
  "button",
1444
2177
  {
1445
2178
  onClick: () => {
1446
- K && K(), q(!1);
2179
+ he && he(), Z(!1);
1447
2180
  },
1448
2181
  style: {
1449
2182
  display: "flex",
@@ -1458,7 +2191,7 @@ const _t = {
1458
2191
  cursor: "pointer"
1459
2192
  },
1460
2193
  children: [
1461
- /* @__PURE__ */ e(St, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
2194
+ /* @__PURE__ */ e(Kt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
1462
2195
  /* @__PURE__ */ e("span", { style: {
1463
2196
  fontSize: 14,
1464
2197
  fontWeight: 600,
@@ -1468,27 +2201,30 @@ const _t = {
1468
2201
  }
1469
2202
  ) })
1470
2203
  ] })
2204
+ ] }) : /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 4, padding: "8px 0" }, children: [
2205
+ /* @__PURE__ */ e(se, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
2206
+ /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", lineHeight: 1.2 }, children: K })
1471
2207
  ] })
1472
2208
  ] })
1473
2209
  ] })
1474
2210
  ] }),
1475
- /* @__PURE__ */ t("div", { style: {
2211
+ /* @__PURE__ */ n("div", { style: {
1476
2212
  display: "flex",
1477
2213
  alignItems: "stretch",
1478
2214
  gap: 24,
1479
2215
  alignSelf: "stretch"
1480
2216
  }, children: [
1481
2217
  /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0, display: "flex" }, children: /* @__PURE__ */ e(
1482
- Lt,
2218
+ fn,
1483
2219
  {
1484
- score: A != null ? Math.round(A * 100) : 0,
1485
- maxScore: 100,
1486
- predictedScore: Ie ?? 0,
1487
- predictedLabel: _e,
1488
- legends: Ae
2220
+ score: Ve ?? 0,
2221
+ maxScore: 5,
2222
+ predictedScore: Qe ?? 0,
2223
+ predictedLabel: Xe,
2224
+ legends: Ze
1489
2225
  }
1490
2226
  ) }),
1491
- /* @__PURE__ */ t("div", { style: {
2227
+ /* @__PURE__ */ n("div", { style: {
1492
2228
  display: "flex",
1493
2229
  flexDirection: "column",
1494
2230
  alignItems: "stretch",
@@ -1498,38 +2234,42 @@ const _t = {
1498
2234
  minWidth: 0
1499
2235
  }, children: [
1500
2236
  /* @__PURE__ */ e(
1501
- At,
2237
+ nn,
1502
2238
  {
1503
- meta: de,
1504
- callPurpose: L || ce,
1505
- classification: W || et,
1506
- outcomeQuality: O || "Neutral"
2239
+ meta: Fe,
2240
+ callPurpose: b || We,
2241
+ classification: w || xt,
2242
+ outcomeQuality: B || "Neutral",
2243
+ resolutionOutcome: Q ?? "Unknown",
2244
+ customerIntent: qe ?? "Get Information",
2245
+ interactionId: Ke ?? N.interaction_id ?? "1a369e01-5924-4d10-bfc7-d1321be71b2b",
2246
+ moreDetails: Ye
1507
2247
  }
1508
2248
  ),
1509
2249
  /* @__PURE__ */ e(
1510
- Gt,
2250
+ on,
1511
2251
  {
1512
- outcomeLift: tt,
1513
- driverLabels: nt
2252
+ outcomeLift: bt,
2253
+ driverLabels: St
1514
2254
  }
1515
2255
  )
1516
2256
  ] })
1517
2257
  ] })
1518
2258
  ] }),
1519
- /* @__PURE__ */ e("div", { ref: ie, style: { paddingTop: 24 }, children: /* @__PURE__ */ e(zt, { data: it }) }),
1520
- /* @__PURE__ */ t("div", { ref: oe, style: {
2259
+ /* @__PURE__ */ e("div", { ref: U, style: { paddingTop: 24 }, children: /* @__PURE__ */ e(Ut, { data: a ? null : kt, loading: a }) }),
2260
+ /* @__PURE__ */ n("div", { ref: ee, style: {
1521
2261
  display: "flex",
1522
2262
  flexDirection: "column",
1523
2263
  gap: 16,
1524
2264
  alignSelf: "stretch",
1525
2265
  paddingTop: 24
1526
2266
  }, children: [
1527
- /* @__PURE__ */ t("div", { style: {
2267
+ /* @__PURE__ */ n("div", { style: {
1528
2268
  display: "flex",
1529
2269
  alignItems: "center",
1530
2270
  gap: 8
1531
2271
  }, children: [
1532
- /* @__PURE__ */ e(De, { size: 24, color: "#C98A5A", strokeWidth: 2 }),
2272
+ /* @__PURE__ */ e(Oe, { size: 24, color: "#C98A5A", strokeWidth: 2 }),
1533
2273
  /* @__PURE__ */ e("span", { style: {
1534
2274
  fontSize: 16,
1535
2275
  fontWeight: 600,
@@ -1538,7 +2278,7 @@ const _t = {
1538
2278
  textTransform: "uppercase"
1539
2279
  }, children: "Signals & Recording" })
1540
2280
  ] }),
1541
- /* @__PURE__ */ t("div", { style: {
2281
+ /* @__PURE__ */ n("div", { style: {
1542
2282
  display: "flex",
1543
2283
  alignItems: "flex-start",
1544
2284
  gap: 24,
@@ -1547,59 +2287,59 @@ const _t = {
1547
2287
  borderTop: "1px solid #D9D9D9"
1548
2288
  }, children: [
1549
2289
  /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
1550
- Mt,
2290
+ rn,
1551
2291
  {
1552
- signals: ot,
1553
- expandedSignals: $e,
1554
- toggleSignal: Ke,
1555
- playEvidence: Ye,
1556
- highlightTurns: Ve,
1557
- onShowInTranscript: Qe,
1558
- timelinePlaying: f || je,
1559
- currentTimeSeconds: v ?? Oe
2292
+ signals: wt,
2293
+ expandedSignals: lt,
2294
+ toggleSignal: yt,
2295
+ playEvidence: gt,
2296
+ highlightTurns: ht,
2297
+ onShowInTranscript: pt,
2298
+ timelinePlaying: h || st,
2299
+ currentTimeSeconds: c ?? at
1560
2300
  }
1561
2301
  ) }),
1562
2302
  /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
1563
- wt,
2303
+ Vt,
1564
2304
  {
1565
- ref: T,
1566
- audioUrl: p,
1567
- durationSeconds: de.duration_seconds,
1568
- audioRef: y,
1569
- agentName: ge,
1570
- customerName: Q.split(" ")[0],
1571
- currentTimeSeconds: v,
1572
- timelinePlaying: f,
2305
+ ref: O,
2306
+ audioUrl: d,
2307
+ durationSeconds: Fe.duration_seconds,
2308
+ audioRef: g,
2309
+ agentName: De,
2310
+ customerName: K.split(" ")[0],
2311
+ currentTimeSeconds: c,
2312
+ timelinePlaying: h,
1573
2313
  playbackRate: u,
1574
- timelineSegments: b,
1575
- onSeek: k,
1576
- onTogglePlay: C,
1577
- onSeekBack: d,
1578
- onSeekForward: l,
1579
- onSetPlaybackRate: h,
1580
- transcript: F,
1581
- activeTurnIndex: I,
1582
- turnObservations: P,
1583
- highlightedTurns: z,
1584
- onTurnPlayPause: j,
1585
- setExpandedSignals: X
2314
+ timelineSegments: F,
2315
+ onSeek: x,
2316
+ onTogglePlay: f,
2317
+ onSeekBack: k,
2318
+ onSeekForward: v,
2319
+ onSetPlaybackRate: m,
2320
+ transcript: D,
2321
+ activeTurnIndex: H,
2322
+ turnObservations: E,
2323
+ highlightedTurns: s,
2324
+ onTurnPlayPause: R,
2325
+ setExpandedSignals: ue
1586
2326
  }
1587
2327
  ) })
1588
2328
  ] })
1589
2329
  ] }),
1590
- /* @__PURE__ */ e("div", { ref: re, style: { paddingTop: 24 }, children: /* @__PURE__ */ e("div", { style: { fontSize: 14, color: "var(--Grey-Muted, #808183)", fontFamily: "var(--font-sans)" }, children: "No comments yet." }) })
2330
+ /* @__PURE__ */ e("div", { ref: te, style: { paddingTop: 24 }, children: /* @__PURE__ */ e(yn, {}) })
1591
2331
  ] }),
1592
- /* @__PURE__ */ t("div", { style: {
2332
+ /* @__PURE__ */ n("div", { style: {
1593
2333
  display: "flex",
1594
2334
  position: "sticky",
1595
2335
  bottom: 0,
1596
2336
  zIndex: 10
1597
2337
  }, children: [
1598
- /* @__PURE__ */ t(
2338
+ /* @__PURE__ */ n(
1599
2339
  "button",
1600
2340
  {
1601
- onClick: G ? void 0 : Pe,
1602
- disabled: G,
2341
+ onClick: L ? void 0 : ot,
2342
+ disabled: L,
1603
2343
  style: {
1604
2344
  display: "flex",
1605
2345
  alignItems: "center",
@@ -1608,19 +2348,19 @@ const _t = {
1608
2348
  flex: 1,
1609
2349
  background: "var(--Grey-White, #FFF)",
1610
2350
  border: "1px solid var(--Grey-absent, #D9D9D9)",
1611
- cursor: G ? "default" : "pointer",
1612
- pointerEvents: G ? "none" : "auto"
2351
+ cursor: L ? "default" : "pointer",
2352
+ pointerEvents: L ? "none" : "auto"
1613
2353
  },
1614
2354
  children: [
1615
- /* @__PURE__ */ e(ye, { size: 24, color: "var(--Grey-Muted, #808183)", strokeWidth: 2, style: { opacity: G ? 0.4 : 1 } }),
1616
- /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 10, opacity: G ? 0.4 : 1 }, children: [
2355
+ /* @__PURE__ */ e(_e, { size: 24, color: "var(--Grey-Muted, #808183)", strokeWidth: 2, style: { opacity: L ? 0.4 : 1 } }),
2356
+ /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 10, opacity: L ? 0.4 : 1 }, children: [
1617
2357
  /* @__PURE__ */ e("span", { style: {
1618
2358
  fontSize: 14,
1619
2359
  fontWeight: 400,
1620
2360
  color: "#000",
1621
2361
  lineHeight: 1.2,
1622
2362
  textAlign: "left"
1623
- }, children: He || "Previous Session Title" }),
2363
+ }, children: et || "Previous Session Title" }),
1624
2364
  /* @__PURE__ */ e("span", { style: {
1625
2365
  fontSize: 13,
1626
2366
  fontWeight: 400,
@@ -1628,16 +2368,16 @@ const _t = {
1628
2368
  lineHeight: 1.2,
1629
2369
  opacity: 0.5,
1630
2370
  textAlign: "left"
1631
- }, children: Ee || "Short description of the session" })
2371
+ }, children: tt || "Short description of the session" })
1632
2372
  ] })
1633
2373
  ]
1634
2374
  }
1635
2375
  ),
1636
- /* @__PURE__ */ t(
2376
+ /* @__PURE__ */ n(
1637
2377
  "button",
1638
2378
  {
1639
- onClick: M ? void 0 : Le,
1640
- disabled: M,
2379
+ onClick: P ? void 0 : rt,
2380
+ disabled: P,
1641
2381
  style: {
1642
2382
  display: "flex",
1643
2383
  alignItems: "center",
@@ -1647,18 +2387,18 @@ const _t = {
1647
2387
  flex: 1,
1648
2388
  background: "var(--Grey-White, #FFF)",
1649
2389
  border: "1px solid var(--Grey-absent, #D9D9D9)",
1650
- cursor: M ? "default" : "pointer",
1651
- pointerEvents: M ? "none" : "auto"
2390
+ cursor: P ? "default" : "pointer",
2391
+ pointerEvents: P ? "none" : "auto"
1652
2392
  },
1653
2393
  children: [
1654
- /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 10, opacity: M ? 0.4 : 1 }, children: [
2394
+ /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 10, opacity: P ? 0.4 : 1 }, children: [
1655
2395
  /* @__PURE__ */ e("span", { style: {
1656
2396
  fontSize: 14,
1657
2397
  fontWeight: 400,
1658
2398
  color: "#000",
1659
2399
  lineHeight: 1.2,
1660
2400
  textAlign: "left"
1661
- }, children: Te || "Next Session Title" }),
2401
+ }, children: nt || "Next Session Title" }),
1662
2402
  /* @__PURE__ */ e("span", { style: {
1663
2403
  fontSize: 13,
1664
2404
  fontWeight: 400,
@@ -1666,9 +2406,9 @@ const _t = {
1666
2406
  lineHeight: 1.2,
1667
2407
  opacity: 0.5,
1668
2408
  textAlign: "left"
1669
- }, children: Re || "Short description of the session" })
2409
+ }, children: it || "Short description of the session" })
1670
2410
  ] }),
1671
- /* @__PURE__ */ e(kt, { size: 24, color: "var(--Grey-Muted, #808183)", strokeWidth: 2, style: { opacity: M ? 0.4 : 1 } })
2411
+ /* @__PURE__ */ e(Yt, { size: 24, color: "var(--Grey-Muted, #808183)", strokeWidth: 2, style: { opacity: P ? 0.4 : 1 } })
1672
2412
  ]
1673
2413
  }
1674
2414
  )
@@ -1676,12 +2416,13 @@ const _t = {
1676
2416
  ] });
1677
2417
  };
1678
2418
  export {
1679
- zt as UpdatedCoachingSynthesisCard,
1680
- Lt as UpdatedCompassScore,
1681
- At as UpdatedInteractionContext,
1682
- Nt as UpdatedInteractionDetails,
1683
- wt as UpdatedInteractionRecording,
1684
- Gt as UpdatedInteractionScores,
1685
- Mt as UpdatedInteractionSignals
2419
+ Ut as UpdatedCoachingSynthesisCard,
2420
+ fn as UpdatedCompassScore,
2421
+ nn as UpdatedInteractionContext,
2422
+ kn as UpdatedInteractionDetails,
2423
+ Vt as UpdatedInteractionRecording,
2424
+ on as UpdatedInteractionScores,
2425
+ rn as UpdatedInteractionSignals,
2426
+ yn as UpdatedThreads
1686
2427
  };
1687
2428
  //# sourceMappingURL=UpdatedInteractionDetails.es.js.map