chordia-ui 3.8.8 → 3.9.0

package/dist/AgentLiftAnalysisCard.es.js

@@ -0,0 +1,678 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useState as R, useRef as _ } from "react";
+import { Info as W, Settings as z } from "lucide-react";
+const E = "chordia-cog-spin-style";
+if (typeof document < "u" && !document.getElementById(E)) {
+  const i = document.createElement("style");
+  i.id = E, i.textContent = `
+    @keyframes chordia-cog-spin {
+      from { transform: rotate(0deg); }
+      to   { transform: rotate(360deg); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .chordia-cog-spin { animation: none !important; }
+    }
+  `, document.head.appendChild(i);
+}
+const n = {
+  strong: "var(--Grey-Strong, #2E3236)",
+  muted: "var(--Grey-Muted, #808183)",
+  faint: "var(--Grey-Faint, #ACADAD)",
+  border: "var(--Grey-absent, #D9D9D9)",
+  orange: "var(--rail-orange, #C98A5A)",
+  // Card surface — warm off-white the Figma frame uses. Falls back to a hex
+  // since this specific tone isn't in the existing token set.
+  surface: "#FAF9F5",
+  // Gauge ring (background semicircle)
+  gaugeTrack: "#E3E1D7"
+}, s = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)", v = (i, l, r) => Math.max(l, Math.min(r, i)), A = (i) => {
+  const l = v(Number(i) || 0, -1, 1);
+  return l >= 0.6 ? "High" : l >= 0.15 ? "Above Average" : l <= -0.6 ? "Low" : l <= -0.15 ? "Below Average" : "Average";
+}, H = (i) => {
+  const l = Number(i);
+  return !Number.isFinite(l) || Math.abs(l) < 0.05 ? "neutral" : l > 0 ? "positive" : "negative";
+}, k = ({ text: i, children: l, maxWidth: r = 280 }) => {
+  const [t, o] = R(!1), a = _(null), [c, g] = R({ top: 0, left: 0 });
+  return i ? /* @__PURE__ */ d(
+    "div",
+    {
+      ref: a,
+      style: { position: "relative", display: "inline-flex" },
+      onMouseEnter: () => {
+        if (a.current) {
+          const h = a.current.getBoundingClientRect();
+          g({
+            top: h.bottom + 6,
+            left: h.left + h.width / 2
+          });
+        }
+        o(!0);
+      },
+      onMouseLeave: () => o(!1),
+      children: [
+        l,
+        t && /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              top: c.top,
+              left: c.left,
+              transform: "translate(-50%, 0)",
+              maxWidth: r,
+              padding: "8px 12px",
+              borderRadius: 6,
+              border: "1px solid var(--Grey-absent, #D9D9D9)",
+              background: "var(--Grey-Strong, #2E3236)",
+              color: "#FFF",
+              fontFamily: s,
+              fontSize: 12,
+              fontWeight: 400,
+              lineHeight: 1.4,
+              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+              zIndex: 9999,
+              pointerEvents: "none",
+              whiteSpace: "normal",
+              textAlign: "left"
+            },
+            children: i
+          }
+        )
+      ]
+    }
+  ) : l;
+}, $ = ({ value: i = 0, highlight: l = null }) => {
+  const m = v(Number(i) || 0, -1, 1) * (Math.PI / 2), b = 60 + 38 * Math.sin(m), x = 56 - 38 * Math.cos(m);
+  let u = null;
+  if (l != null) {
+    const p = v(Number(l) || 0, -1, 1);
+    if (p !== 0) {
+      const f = p * (Math.PI / 2), C = 60, T = 56 - 26.65, L = 60 + 26.65 * Math.sin(f), N = 56 - 26.65 * Math.cos(f), F = p > 0 ? 1 : 0;
+      u = `M ${C} ${T} A ${26.65} ${26.65} 0 0 ${F} ${L} ${N}`;
+    }
+  }
+  return (
+    // viewBox is 120×80 but the visible dial only occupies the top ~56px
+    // (half-circle centred at cy=56). `marginBottom: -24` pulls the
+    // following element up by the unused bottom band so the gauge column
+    // doesn't reserve that empty space in the flow — matches Figma's
+    // `mb-[-30px]` on the gauge wrapper and keeps the Outcome column's
+    // bottom-anchored percent block from being pushed too far down.
+    /* @__PURE__ */ d(
+      "svg",
+      {
+        width: "120",
+        height: "80",
+        viewBox: "0 0 120 80",
+        role: "img",
+        "aria-hidden": "true",
+        style: { marginBottom: -20, display: "block" },
+        children: [
+          /* @__PURE__ */ e(
+            "path",
+            {
+              d: `M ${60 - 26.65} 56 A ${26.65} ${26.65} 0 0 1 ${60 + 26.65} 56`,
+              fill: "none",
+              stroke: n.gaugeTrack,
+              strokeWidth: 28.7,
+              strokeLinecap: "butt"
+            }
+          ),
+          u && /* @__PURE__ */ e(
+            "path",
+            {
+              d: u,
+              fill: "none",
+              stroke: n.strong,
+              strokeWidth: 28.7,
+              strokeLinecap: "butt"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "text",
+            {
+              x: 60,
+              y: 56 - 41 - 4,
+              textAnchor: "middle",
+              fontSize: "13",
+              fontFamily: s,
+              fill: n.orange,
+              children: "0"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "text",
+            {
+              x: 60 - 41 - 9,
+              y: 56 + 5,
+              textAnchor: "middle",
+              fontSize: "14",
+              fontFamily: s,
+              fill: n.strong,
+              children: "−"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "text",
+            {
+              x: 60 + 41 + 9,
+              y: 56 + 5,
+              textAnchor: "middle",
+              fontSize: "14",
+              fontFamily: s,
+              fill: n.strong,
+              children: "+"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "line",
+            {
+              x1: 60,
+              y1: 56,
+              x2: b,
+              y2: x,
+              stroke: n.orange,
+              strokeWidth: 2,
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ e("circle", { cx: 60, cy: 56, r: 2.5, fill: n.orange })
+        ]
+      }
+    )
+  );
+}, S = ({
+  title: i,
+  value: l,
+  highlight: r,
+  centerLabel: t,
+  centerLabelColor: o,
+  sublabel: a,
+  footer: c,
+  description: g
+}) => /* @__PURE__ */ d(
+  "div",
+  {
+    style: {
+      flex: 1,
+      minWidth: 0,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: 10
+    },
+    children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            minHeight: 40,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%"
+          },
+          children: /* @__PURE__ */ e(
+            "span",
+            {
+              style: {
+                fontFamily: s,
+                fontSize: 14,
+                fontWeight: 400,
+                color: n.strong,
+                lineHeight: "20px",
+                textAlign: "center",
+                width: "100%"
+              },
+              children: i
+            }
+          )
+        }
+      ),
+      l == null ? (
+        // Gauge swapped for an em-dash placeholder when the API ships no
+        // numeric value for this column. Same 60px height as the gauge SVG
+        // (after its -20 negative margin) so the columns stay aligned.
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              width: 120,
+              height: 60,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              marginBottom: -20
+            },
+            children: /* @__PURE__ */ e(
+              "span",
+              {
+                style: {
+                  fontFamily: s,
+                  fontSize: 28,
+                  fontWeight: 400,
+                  color: n.muted,
+                  lineHeight: 1
+                },
+                children: "—"
+              }
+            )
+          }
+        )
+      ) : /* @__PURE__ */ e($, { value: l, highlight: r }),
+      /* @__PURE__ */ d(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 4,
+            width: "100%"
+          },
+          children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                style: {
+                  fontFamily: s,
+                  // Figma 1463:4261 spec: 14px Averta-Semibold, Neutral/850
+                  // (#272727) for both "Average" and "Above Average".
+                  fontSize: 14,
+                  fontWeight: 600,
+                  color: t ? o || "#272727" : n.muted,
+                  lineHeight: "normal",
+                  textAlign: "center"
+                },
+                children: t || "—"
+              }
+            ),
+            a && /* @__PURE__ */ e(
+              "span",
+              {
+                style: {
+                  fontFamily: s,
+                  fontSize: 13,
+                  fontWeight: 400,
+                  color: n.muted,
+                  lineHeight: "normal",
+                  textAlign: "center",
+                  width: "100%"
+                },
+                children: a
+              }
+            ),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                style: {
+                  fontFamily: s,
+                  fontSize: 13,
+                  fontWeight: 400,
+                  color: c ? n.strong : n.muted,
+                  lineHeight: "normal",
+                  textAlign: "center",
+                  width: "100%"
+                },
+                children: c || "—"
+              }
+            ),
+            g && /* @__PURE__ */ e(
+              "span",
+              {
+                style: {
+                  fontFamily: s,
+                  fontSize: 13,
+                  fontWeight: 400,
+                  color: n.muted,
+                  lineHeight: "normal",
+                  textAlign: "center",
+                  width: "100%",
+                  marginTop: 4
+                },
+                children: g
+              }
+            )
+          ]
+        }
+      )
+    ]
+  }
+), M = ({
+  percent: i,
+  label: l,
+  totalLabel: r = "Total",
+  description: t,
+  status: o
+}) => {
+  const a = (o == null ? void 0 : o.label) ?? l;
+  return (
+    // Top-aligned stack — pill → percent → Total / description, all hugging
+    // the top of the column with the root `gap: 16` between them. The row
+    // still uses `align-items: stretch` so the column visually fills the
+    // row height, but any leftover space falls to the BOTTOM of the column
+    // (after the description) rather than being distributed between the
+    // pill and the percent. This keeps the Outcome content tight even
+    // when the gauge columns are taller, matching the visual rhythm
+    // requested in the latest review.
+    /* @__PURE__ */ d(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          gap: 16
+        },
+        children: [
+          a && /* @__PURE__ */ e(
+            "div",
+            {
+              style: {
+                minHeight: 40,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%"
+              },
+              children: /* @__PURE__ */ e(
+                "span",
+                {
+                  style: {
+                    fontFamily: s,
+                    fontSize: 14,
+                    fontWeight: 600,
+                    color: n.strong,
+                    lineHeight: "normal",
+                    whiteSpace: "nowrap"
+                  },
+                  children: a
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ d(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: 20,
+                width: "100%"
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: s,
+                      fontSize: 34,
+                      fontWeight: 400,
+                      color: n.strong,
+                      lineHeight: 1.2,
+                      textAlign: "center",
+                      whiteSpace: "nowrap"
+                    },
+                    children: i != null ? `${i}%` : "—"
+                  }
+                ),
+                /* @__PURE__ */ d(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      gap: 4,
+                      width: "100%"
+                    },
+                    children: [
+                      r && /* @__PURE__ */ e(
+                        "span",
+                        {
+                          style: {
+                            fontFamily: s,
+                            fontSize: 14,
+                            fontWeight: 600,
+                            color: "#272727",
+                            lineHeight: "normal",
+                            textAlign: "center",
+                            whiteSpace: "nowrap"
+                          },
+                          children: r
+                        }
+                      ),
+                      t && /* @__PURE__ */ e(
+                        "span",
+                        {
+                          style: {
+                            fontFamily: s,
+                            fontSize: 13,
+                            fontWeight: 400,
+                            color: n.muted,
+                            lineHeight: "normal",
+                            textAlign: "center",
+                            width: "100%"
+                          },
+                          children: t
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  );
+}, w = ({ variant: i = "dashed" }) => /* @__PURE__ */ e(
+  "div",
+  {
+    "aria-hidden": "true",
+    style: {
+      width: 0,
+      alignSelf: "stretch",
+      borderLeft: `1px ${i} ${n.border}`,
+      flexShrink: 0
+    }
+  }
+), O = () => /* @__PURE__ */ d(
+  "div",
+  {
+    style: {
+      flex: 1,
+      minWidth: 0,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 16,
+      padding: "0 8px"
+    },
+    children: [
+      /* @__PURE__ */ e(
+        z,
+        {
+          size: 28,
+          color: n.orange,
+          strokeWidth: 2,
+          className: "chordia-cog-spin",
+          "aria-hidden": "true",
+          style: {
+            animation: "chordia-cog-spin 4s linear infinite",
+            transformOrigin: "50% 50%",
+            willChange: "transform"
+          }
+        }
+      ),
+      /* @__PURE__ */ e(
+        "span",
+        {
+          style: {
+            fontFamily: s,
+            fontSize: 14,
+            fontWeight: 400,
+            color: n.strong,
+            lineHeight: 1.2,
+            textAlign: "center",
+            maxWidth: 120
+          },
+          children: "Compass is Learning..."
+        }
+      )
+    ]
+  }
+), P = ({
+  title: i = "Agent Lift Analysis",
+  status: l,
+  interactionDifficulty: r,
+  agentImpact: t,
+  outcome: o,
+  showInfoIcon: a = !0,
+  onInfoClick: c,
+  // Tooltip text rendered on hover of the (i) icon next to the card
+  // title. The default explains what this section measures; hosts can
+  // override per-context if needed.
+  infoTooltip: g = "Measures the agent's contribution to the call outcome by comparing actual performance against the expected result for similar calls."
+}) => {
+  const y = Number(r == null ? void 0 : r.value) || 0, h = Number(t == null ? void 0 : t.value) || 0, m = (r == null ? void 0 : r.label) ?? A(y), b = (t == null ? void 0 : t.label) ?? A(h), x = "#272727", u = (() => {
+    if ((t == null ? void 0 : t.impactPercent) == null)
+      return;
+    const f = Number(t.impactPercent);
+    if (Number.isFinite(f))
+      return `${f < 0 ? "-" : ""}${Math.abs(f)}% Score impact`;
+  })(), p = l ?? {
+    label: o == null ? void 0 : o.label,
+    direction: t != null ? H(h) : "positive"
+  };
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        padding: "24px 16px",
+        background: n.surface,
+        border: `1px solid ${n.border}`,
+        borderRadius: 8,
+        width: "100%",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ d(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  style: {
+                    fontFamily: s,
+                    fontSize: 15,
+                    fontWeight: 700,
+                    color: n.strong,
+                    lineHeight: 1.2,
+                    whiteSpace: "nowrap"
+                  },
+                  children: i
+                }
+              ),
+              a && /* @__PURE__ */ e(k, { text: g, children: /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: c,
+                  "aria-label": "About Agent Lift Analysis",
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 16,
+                    height: 16,
+                    padding: 0,
+                    border: "none",
+                    background: "transparent",
+                    // Pointer cursor whenever the (i) has something to surface —
+                    // a tooltip on hover or a click handler. Since `infoTooltip`
+                    // defaults to a non-empty string, the icon almost always
+                    // reads as interactive.
+                    cursor: g || c ? "pointer" : "default",
+                    color: n.muted
+                  },
+                  children: /* @__PURE__ */ e(W, { size: 16, strokeWidth: 1.75 })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ d(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "stretch",
+              gap: 16,
+              width: "100%"
+            },
+            children: [
+              r && /* @__PURE__ */ e(
+                S,
+                {
+                  title: "Interaction Difficulty",
+                  value: y,
+                  highlight: null,
+                  centerLabel: m,
+                  centerLabelColor: x,
+                  sublabel: r.sublabel,
+                  footer: r.footer
+                }
+              ),
+              r && t && /* @__PURE__ */ e(w, { variant: "dashed" }),
+              t && (t.isLearning ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ e(
+                S,
+                {
+                  title: "Agent Impact",
+                  value: h,
+                  highlight: h,
+                  centerLabel: b,
+                  centerLabelColor: x,
+                  sublabel: t.sublabel,
+                  footer: u,
+                  description: t.description
+                }
+              )),
+              (r || t) && o && /* @__PURE__ */ e(w, { variant: "solid" }),
+              o && /* @__PURE__ */ e(
+                M,
+                {
+                  percent: o.percent,
+                  label: o.label,
+                  totalLabel: o.totalLabel ?? "Total",
+                  description: o.description,
+                  status: p
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  P as A
+};
+//# sourceMappingURL=AgentLiftAnalysisCard.es.js.map