chordia-ui 3.7.0 → 3.7.2

package/dist/ChatMessage.es.js

@@ -0,0 +1,915 @@
+import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import Z, { useRef as pt, useCallback as at, useState as gt } from "react";
+import { ResponsiveContainer as N, PieChart as ut, Pie as mt, Cell as nt, Tooltip as O, AreaChart as ft, CartesianGrid as q, XAxis as G, YAxis as V, Legend as J, Area as xt, LineChart as bt, Line as yt, BarChart as st, Bar as lt } from "recharts";
+import { Wrench as vt, Check as wt, Copy as St, PanelRightOpen as kt } from "lucide-react";
+const w = [
+  "#5E88B0",
+  // rail-discovery / rail-blue
+  "#9B7AA8",
+  // rail-purple / rail-tone
+  "#C98A5A",
+  // rail-compliance / rail-orange
+  "#7BA89D",
+  // rail-signal-upsell (teal-green)
+  "#D17B6B",
+  // rail-coral / rail-signal-churn
+  "#6B7C93",
+  // rail-slate / rail-outcome
+  "#9B8E6F",
+  // rail-olive / rail-signal-satisfaction
+  "#8A9BAF",
+  // rail-quality
+  "#B8976A",
+  // rail-teal (warm gold)
+  "#A8C76B"
+  // green accent (complementary)
+], ot = { fill: "var(--text-muted, #666)", fontSize: 12 }, I = { stroke: "var(--border, #e0e0e0)" }, Q = "var(--border, #e0e0e0)", F = {
+  // pointerEvents: 'none' is critical — without it, the tooltip steals hover from chart elements
+  // and flickers (especially noticeable on pie slices).
+  // transition: 'none' disables Recharts' default position-slide animation, so the tooltip
+  // snaps to the active point instead of flying in from its previous location.
+  wrapperStyle: {
+    zIndex: 9999,
+    pointerEvents: "none",
+    outline: "none",
+    transition: "none"
+  }
+}, Ct = { color: "var(--text-ink, #1e2125)", fontSize: "12px" }, X = ({ active: d, payload: c, label: g }) => !d || !c || !c.length ? null : /* @__PURE__ */ y(
+  "div",
+  {
+    className: "chordia-chart-tooltip",
+    style: {
+      background: "#ffffff",
+      border: "1px solid rgba(52, 58, 64, 0.12)",
+      borderRadius: 8,
+      boxShadow: "0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06)",
+      padding: "10px 12px",
+      minWidth: 140,
+      maxWidth: 280,
+      maxHeight: 280,
+      overflowY: "auto",
+      fontSize: 12,
+      lineHeight: 1.5,
+      color: "#1E2125",
+      // Re-enable pointer events on the inner content so the user can scroll with the wheel
+      // even though the wrapper above has pointerEvents: 'none' (which prevents hover flicker).
+      pointerEvents: "auto"
+    },
+    children: [
+      /* @__PURE__ */ t("style", { children: `
+        .chordia-chart-tooltip::-webkit-scrollbar { width: 8px; }
+        .chordia-chart-tooltip::-webkit-scrollbar-track { background: transparent; }
+        .chordia-chart-tooltip::-webkit-scrollbar-thumb {
+          background: rgba(52, 58, 64, 0.25);
+          border-radius: 4px;
+        }
+        .chordia-chart-tooltip::-webkit-scrollbar-thumb:hover {
+          background: rgba(52, 58, 64, 0.4);
+        }
+      ` }),
+      g !== void 0 && g !== "" && /* @__PURE__ */ t(
+        "div",
+        {
+          style: {
+            fontSize: 11,
+            fontWeight: 600,
+            letterSpacing: "0.02em",
+            color: "#6B7280",
+            textTransform: "uppercase",
+            marginBottom: 6,
+            paddingBottom: 6,
+            borderBottom: "1px solid rgba(52, 58, 64, 0.08)"
+          },
+          children: g
+        }
+      ),
+      /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: c.map((a, i) => {
+        var h;
+        const u = a.color || ((h = a.payload) == null ? void 0 : h.fill) || "#9CA3AF";
+        return /* @__PURE__ */ y(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ y("div", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: [
+                /* @__PURE__ */ t(
+                  "span",
+                  {
+                    style: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      background: u,
+                      flexShrink: 0
+                    }
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  "span",
+                  {
+                    style: {
+                      color: "#374151",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: a.name
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ t("span", { style: { color: "#111827", fontWeight: 600, marginLeft: 8 }, children: a.value })
+            ]
+          },
+          i
+        );
+      }) })
+    ]
+  }
+), At = (d, c) => {
+  if (!d)
+    return !1;
+  const g = d.toLowerCase();
+  return c.filter((i) => String(i).toLowerCase().includes(g)).length < c.length * 0.5;
+}, Bt = (d) => {
+  const c = Array.from(d.querySelectorAll(".recharts-wrapper")), g = c.length ? c.reduce((h, k) => {
+    const x = h.getBoundingClientRect(), o = k.getBoundingClientRect();
+    return o.width * o.height > x.width * x.height ? k : h;
+  }) : null;
+  if (g) {
+    const h = g.querySelector("svg.recharts-surface");
+    if (h) {
+      const k = h.getBoundingClientRect();
+      if (k.width >= 100 && k.height >= 100)
+        return h;
+    }
+  }
+  const a = Array.from(d.querySelectorAll("svg"));
+  if (!a.length)
+    return null;
+  const i = a.reduce((h, k) => {
+    const x = h.getBoundingClientRect(), o = k.getBoundingClientRect();
+    return o.width * o.height > x.width * x.height ? k : h;
+  }), u = i.getBoundingClientRect();
+  return u.width < 100 || u.height < 100 ? null : i;
+}, Rt = (d) => String(d).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;"), Lt = ({ chartSvg: d, width: c, height: g, legendItems: a = [] }) => {
+  const i = d.cloneNode(!0), u = 20, h = 16, x = c - 16, o = [];
+  let l = [], n = 0;
+  a.forEach(({ label: f, color: s }) => {
+    const m = Math.max(40, String(f).length * 7 + 34);
+    l.length && h + n + m > x && (o.push(l), l = [], n = 0), l.push({ label: f, color: s, itemWidth: m }), n += m;
+  }), l.length && o.push(l);
+  const e = o.length ? o.length * u + 20 : 0, r = g + e;
+  i.setAttribute("width", c), i.setAttribute("height", g), i.setAttribute("x", 0), i.setAttribute("y", 0);
+  const b = o.map((f, s) => {
+    let m = h;
+    const S = g + 20 + s * u;
+    return f.map(({ label: B, color: L, itemWidth: D }) => {
+      const T = `<line x1="${m}" y1="${S}" x2="${m + 10}" y2="${S}" stroke="${L}" stroke-width="2" />`, R = `<circle cx="${m + 5}" cy="${S}" r="2.5" fill="#fff" stroke="${L}" stroke-width="1.5" />`, z = `<text x="${m + 14}" y="${S + 4}" fill="#666" font-size="12">${Rt(B)}</text>`;
+      return m += D, `${T}${R}${z}`;
+    }).join("");
+  }).join("");
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${c}" height="${r}" viewBox="0 0 ${c} ${r}">`,
+    '<style>text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }</style>',
+    '<rect x="0" y="0" width="100%" height="100%" fill="#ffffff" />',
+    new XMLSerializer().serializeToString(i),
+    b,
+    "</svg>"
+  ].join("");
+}, zt = async (d, c, g = []) => {
+  const a = Bt(d);
+  if (!a)
+    return;
+  const i = a.getBoundingClientRect(), u = i.width || a.clientWidth || Number(a.getAttribute("width")) || 600, h = i.height || a.clientHeight || Number(a.getAttribute("height")) || 300, k = Lt({ chartSvg: a, width: u, height: h, legendItems: g }), x = new Blob([k], { type: "image/svg+xml;charset=utf-8" }), o = URL.createObjectURL(x), l = new Image();
+  l.onload = () => {
+    const n = document.createElement("canvas"), e = 2;
+    n.width = u * e, n.height = h * e;
+    const r = n.getContext("2d");
+    r.fillStyle = "#ffffff", r.fillRect(0, 0, n.width, n.height), r.scale(e, e), r.drawImage(l, 0, 0, u, h), URL.revokeObjectURL(o);
+    const b = document.createElement("a");
+    b.download = `${(c || "chart").replace(/[^a-z0-9]+/gi, "_")}.png`, b.href = n.toDataURL("image/png"), b.click();
+  }, l.src = o;
+}, Wt = (d, c) => {
+  const g = ["", ...d.map((u) => u.name)].join(","), a = c.map((u) => {
+    const h = d.map((k) => {
+      const x = k.data.find((o) => o.x === u);
+      return x ? x.y : "";
+    });
+    return [u, ...h].join(",");
+  }), i = [g, ...a].join(`
+`);
+  navigator.clipboard.writeText(i);
+}, Dt = ({ onDownloadPng: d, onCopy: c, copied: g }) => /* @__PURE__ */ y("div", { style: {
+  display: "flex",
+  gap: 6,
+  justifyContent: "flex-end",
+  marginBottom: 8,
+  opacity: 0.7,
+  transition: "opacity 0.15s"
+}, children: [
+  /* @__PURE__ */ t("button", { onClick: c, title: "Copy data as CSV", style: {
+    background: "none",
+    border: "1px solid var(--border, #e0e0e0)",
+    borderRadius: "var(--radius-sm, 4px)",
+    padding: "3px 8px",
+    fontSize: 11,
+    color: "var(--text-muted, #666)",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    gap: 4
+  }, children: g ? "✓ Copied" : "📋 CSV" }),
+  /* @__PURE__ */ t("button", { onClick: d, title: "Download as PNG", style: {
+    background: "none",
+    border: "1px solid var(--border, #e0e0e0)",
+    borderRadius: "var(--radius-sm, 4px)",
+    padding: "3px 8px",
+    fontSize: 11,
+    color: "var(--text-muted, #666)",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    gap: 4
+  }, children: "📥 PNG" })
+] }), Pt = ({ chartType: d, title: c, xLabel: g, yLabel: a, series: i, compact: u = !1 }) => {
+  const h = pt(null), [k, x] = Z.useState(!1);
+  if (!i || i.length === 0)
+    return null;
+  const o = [...new Set(i.flatMap((p) => p.data.map((v) => v.x)))], l = o.map((p) => {
+    const v = { x: p };
+    return i.forEach((W) => {
+      const C = W.data.find((M) => M.x === p);
+      v[W.name] = C ? C.y : null;
+    }), v;
+  }), n = i.map((p) => p.name), e = n.length === 1, r = At(g, o), f = Math.max(...o.map((p) => String(p).length)) > 12 || o.length > 8, S = (f ? 40 : 5) + (r ? 25 : 0), A = e ? 0 : Math.max(1, Math.ceil(n.length / 4)), B = A > 0 ? A * 24 + (r ? 24 : 12) : 0, D = (u ? 240 : 300) + Math.max(0, (A - 1) * 28), R = { ...Ct, paddingTop: r ? 24 : 12, zIndex: 0 }, z = {
+    background: "var(--paper-elevated, #fff)",
+    border: "1px solid var(--border, #e0e0e0)",
+    borderRadius: "var(--radius-md, 8px)",
+    padding: "16px",
+    marginBottom: "16px"
+  }, tt = {
+    color: "var(--text-strong, #1e2125)",
+    fontSize: "14px",
+    fontWeight: "600",
+    marginBottom: "12px"
+  }, j = {
+    dataKey: "x",
+    tick: f ? { fill: "var(--text-muted, #666)", fontSize: 11, angle: -35, textAnchor: "end" } : ot,
+    axisLine: I,
+    tickLine: I,
+    ...r ? {
+      label: {
+        value: g,
+        position: "insideBottom",
+        // Push label below rotated ticks (which take ~40px) when present
+        offset: f ? -45 : -10,
+        style: { textAnchor: "middle", fill: "var(--text-muted, #666)" }
+      }
+    } : {}
+  }, et = {
+    tick: ot,
+    axisLine: I,
+    tickLine: I,
+    ...a ? {
+      width: 72,
+      label: {
+        value: a,
+        angle: -90,
+        position: "insideLeft",
+        offset: 10,
+        style: { textAnchor: "middle", fill: "var(--text-muted, #666)" }
+      }
+    } : {}
+  }, ct = () => {
+    switch (d) {
+      case "bar":
+        return /* @__PURE__ */ t(N, { width: "100%", height: D, children: /* @__PURE__ */ y(st, { data: l, margin: { top: 5, right: 30, left: a ? 10 : 20, bottom: S }, children: [
+          /* @__PURE__ */ t(q, { strokeDasharray: "3 3", stroke: Q }),
+          /* @__PURE__ */ t(G, { ...j }),
+          /* @__PURE__ */ t(V, { ...et }),
+          !e && /* @__PURE__ */ t(J, { wrapperStyle: R, height: B }),
+          n.map((p, v) => /* @__PURE__ */ t(lt, { dataKey: p, fill: w[v % w.length], radius: [2, 2, 0, 0], isAnimationActive: !1, children: e && l.map((W, C) => /* @__PURE__ */ t(nt, { fill: w[C % w.length] }, C)) }, p)),
+          /* @__PURE__ */ t(O, { wrapperStyle: F.wrapperStyle, content: /* @__PURE__ */ t(X, {}), cursor: { fill: "rgba(94, 136, 176, 0.06)", stroke: "rgba(52, 58, 64, 0.18)", strokeDasharray: "3 3" }, isAnimationActive: !1, animationDuration: 0 })
+        ] }) });
+      case "horizontal_bar":
+        return /* @__PURE__ */ t(N, { width: "100%", height: Math.max(u ? 240 : 300, l.length * (u ? 32 : 40)), children: /* @__PURE__ */ y(st, { data: l, layout: "vertical", margin: { top: 5, right: 30, left: 100, bottom: 5 }, children: [
+          /* @__PURE__ */ t(q, { strokeDasharray: "3 3", stroke: Q }),
+          /* @__PURE__ */ t(
+            G,
+            {
+              type: "number",
+              tick: ot,
+              axisLine: I,
+              tickLine: I,
+              ...a ? { label: { value: a, position: "insideBottom", offset: -5, style: { textAnchor: "middle", fill: "var(--text-muted, #666)" } } } : {}
+            }
+          ),
+          /* @__PURE__ */ t(V, { type: "category", dataKey: "x", tick: { fill: "var(--text-muted, #666)", fontSize: 11 }, width: 90, axisLine: I, tickLine: I }),
+          !e && /* @__PURE__ */ t(J, { wrapperStyle: R, height: B }),
+          n.map((p, v) => /* @__PURE__ */ t(lt, { dataKey: p, fill: w[v % w.length], radius: [0, 2, 2, 0], isAnimationActive: !1, children: e && l.map((W, C) => /* @__PURE__ */ t(nt, { fill: w[C % w.length] }, C)) }, p)),
+          /* @__PURE__ */ t(O, { wrapperStyle: F.wrapperStyle, content: /* @__PURE__ */ t(X, {}), cursor: { fill: "rgba(94, 136, 176, 0.06)", stroke: "rgba(52, 58, 64, 0.18)", strokeDasharray: "3 3" }, isAnimationActive: !1, animationDuration: 0 })
+        ] }) });
+      case "line":
+        return /* @__PURE__ */ t(N, { width: "100%", height: D, children: /* @__PURE__ */ y(bt, { data: l, margin: { top: 5, right: 30, left: a ? 10 : 20, bottom: S }, children: [
+          /* @__PURE__ */ t(q, { strokeDasharray: "3 3", stroke: Q }),
+          /* @__PURE__ */ t(G, { ...j }),
+          /* @__PURE__ */ t(V, { ...et }),
+          /* @__PURE__ */ t(J, { wrapperStyle: R, height: B }),
+          n.map((p, v) => /* @__PURE__ */ t(
+            yt,
+            {
+              type: "monotone",
+              dataKey: p,
+              stroke: w[v % w.length],
+              strokeWidth: 2,
+              dot: { r: 4, fill: w[v % w.length] },
+              activeDot: { r: 6, fill: w[v % w.length] },
+              isAnimationActive: !1
+            },
+            p
+          )),
+          /* @__PURE__ */ t(O, { wrapperStyle: F.wrapperStyle, content: /* @__PURE__ */ t(X, {}), cursor: { fill: "rgba(94, 136, 176, 0.06)", stroke: "rgba(52, 58, 64, 0.18)", strokeDasharray: "3 3" }, isAnimationActive: !1, animationDuration: 0 })
+        ] }) });
+      case "area":
+        return /* @__PURE__ */ t(N, { width: "100%", height: D, children: /* @__PURE__ */ y(ft, { data: l, margin: { top: 5, right: 30, left: a ? 10 : 20, bottom: S }, children: [
+          /* @__PURE__ */ t(q, { strokeDasharray: "3 3", stroke: Q }),
+          /* @__PURE__ */ t(G, { ...j }),
+          /* @__PURE__ */ t(V, { ...et }),
+          /* @__PURE__ */ t(J, { wrapperStyle: R, height: B }),
+          n.map((p, v) => /* @__PURE__ */ t(
+            xt,
+            {
+              type: "monotone",
+              dataKey: p,
+              stroke: w[v % w.length],
+              strokeWidth: 2,
+              fill: w[v % w.length],
+              fillOpacity: 0.15,
+              isAnimationActive: !1
+            },
+            p
+          )),
+          /* @__PURE__ */ t(O, { wrapperStyle: F.wrapperStyle, content: /* @__PURE__ */ t(X, {}), cursor: { fill: "rgba(94, 136, 176, 0.06)", stroke: "rgba(52, 58, 64, 0.18)", strokeDasharray: "3 3" }, isAnimationActive: !1, animationDuration: 0 })
+        ] }) });
+      case "pie": {
+        const p = i[0].data.map((C, M) => ({
+          name: C.x,
+          value: C.y,
+          fill: w[M % w.length]
+        })), v = Math.PI / 180;
+        return /* @__PURE__ */ t(N, { width: "100%", height: u ? 260 : 320, children: /* @__PURE__ */ y(ut, { margin: { top: 16, right: 16, bottom: 16, left: 16 }, children: [
+          /* @__PURE__ */ t(
+            mt,
+            {
+              data: p,
+              cx: u ? "42%" : "38%",
+              cy: "50%",
+              outerRadius: u ? 88 : 110,
+              dataKey: "value",
+              label: ({ cx: C, cy: M, midAngle: E, innerRadius: P, outerRadius: rt, percent: H, name: _ }) => {
+                const U = rt + 20, K = C + U * Math.cos(-E * v), Y = M + U * Math.sin(-E * v);
+                return H < 0.04 ? null : /* @__PURE__ */ y(
+                  "text",
+                  {
+                    x: K,
+                    y: Y,
+                    fill: "var(--text-ink, #1e2125)",
+                    fontSize: 11,
+                    textAnchor: K > C ? "start" : "end",
+                    dominantBaseline: "central",
+                    children: [
+                      _,
+                      " (",
+                      (H * 100).toFixed(0),
+                      "%)"
+                    ]
+                  }
+                );
+              },
+              labelLine: { stroke: "var(--text-muted, #666)" },
+              isAnimationActive: !1,
+              children: p.map((C, M) => /* @__PURE__ */ t(nt, { fill: C.fill }, M))
+            }
+          ),
+          /* @__PURE__ */ t(O, { wrapperStyle: F.wrapperStyle, content: /* @__PURE__ */ t(X, {}), cursor: { fill: "rgba(94, 136, 176, 0.06)", stroke: "rgba(52, 58, 64, 0.18)", strokeDasharray: "3 3" }, isAnimationActive: !1, animationDuration: 0 })
+        ] }) });
+      }
+      case "metric": {
+        const p = i[0], v = p.data[0], W = p.data.length > 1 ? p.data[1] : null, C = v.y, M = v.x || "", E = W !== null, P = E ? C - W.y : 0, rt = E && W.y !== 0 ? P / Math.abs(W.y) * 100 : 0, H = P > 0, _ = P < 0, U = H ? "#7BA89D" : _ ? "#D17B6B" : "var(--text-muted, #666)", K = H ? "↑" : _ ? "↓" : "→", Y = ($) => Number.isInteger($) && Math.abs($) >= 1e3 ? $.toLocaleString() : typeof $ == "number" ? $ % 1 === 0 ? $.toString() : $.toFixed($ < 10 ? 2 : 1) : String($);
+        return /* @__PURE__ */ y("div", { style: { display: "flex", alignItems: "baseline", gap: 12, padding: "8px 0" }, children: [
+          /* @__PURE__ */ t("div", { style: {
+            fontSize: "36px",
+            fontWeight: 700,
+            lineHeight: 1,
+            color: "var(--text-strong, #1e2125)",
+            fontVariantNumeric: "tabular-nums"
+          }, children: Y(C) }),
+          M && /* @__PURE__ */ t("div", { style: { fontSize: "14px", color: "var(--text-muted, #666)", fontWeight: 500 }, children: M }),
+          E && /* @__PURE__ */ y("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 4,
+            fontSize: "13px",
+            fontWeight: 600,
+            color: U,
+            background: H ? "rgba(123,168,157,0.12)" : _ ? "rgba(209,123,107,0.12)" : "rgba(128,128,128,0.08)",
+            padding: "3px 8px",
+            borderRadius: "var(--radius-sm, 4px)"
+          }, children: [
+            /* @__PURE__ */ t("span", { children: K }),
+            /* @__PURE__ */ y("span", { children: [
+              Y(Math.abs(P)),
+              " (",
+              Math.abs(rt).toFixed(1),
+              "%)"
+            ] })
+          ] }),
+          E && /* @__PURE__ */ y("div", { style: { fontSize: "11px", color: "var(--text-faint, #999)" }, children: [
+            "vs ",
+            W.x || "previous"
+          ] })
+        ] });
+      }
+      default:
+        return /* @__PURE__ */ y("div", { style: { color: "var(--text-muted)", fontSize: 12, padding: 8 }, children: [
+          "Unsupported chart type: ",
+          d
+        ] });
+    }
+  }, it = d === "line" || d === "area" || (d === "bar" || d === "horizontal_bar") && !e ? n.map((p, v) => ({ label: p, color: w[v % w.length] })) : [], dt = at(() => {
+    h.current && zt(h.current, c, it);
+  }, [c, it]), ht = at(() => {
+    Wt(i, o), x(!0), setTimeout(() => x(!1), 2e3);
+  }, [i, o]);
+  return /* @__PURE__ */ y("div", { style: z, children: [
+    c && /* @__PURE__ */ t("div", { style: tt, children: c }),
+    d !== "metric" && /* @__PURE__ */ t(Dt, { onDownloadPng: dt, onCopy: ht, copied: k }),
+    /* @__PURE__ */ t("div", { ref: h, children: ct() })
+  ] });
+}, Mt = ({ content: d, onCodeBlockClick: c, onFilePathClick: g }) => {
+  const [a, i] = gt(/* @__PURE__ */ new Set()), u = async (l, n) => {
+    try {
+      await navigator.clipboard.writeText(l), i((e) => /* @__PURE__ */ new Set([...e, n])), setTimeout(() => {
+        i((e) => {
+          const r = new Set(e);
+          return r.delete(n), r;
+        });
+      }, 2e3);
+    } catch (e) {
+      console.error("Failed to copy text:", e);
+    }
+  }, h = (l, n, e) => {
+    const r = a.has(e);
+    return /* @__PURE__ */ y(
+      "div",
+      {
+        style: {
+          position: "relative",
+          marginBottom: "16px",
+          borderRadius: "8px",
+          background: "var(--ink, #1E2125)",
+          border: "1px solid var(--border-subtle, rgba(52,58,64,0.08))",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ y("div", { style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: "8px 12px",
+            background: "rgba(255,255,255,0.05)",
+            borderBottom: "1px solid rgba(255,255,255,0.1)"
+          }, children: [
+            /* @__PURE__ */ t("span", { style: {
+              fontSize: "11px",
+              color: "rgba(255,255,255,0.7)",
+              fontFamily: "var(--font-mono, monospace)",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em"
+            }, children: n || "code" }),
+            /* @__PURE__ */ y(
+              "button",
+              {
+                onClick: () => u(l, e),
+                style: {
+                  background: "none",
+                  border: "none",
+                  color: "rgba(255,255,255,0.7)",
+                  cursor: "pointer",
+                  padding: "4px",
+                  borderRadius: "4px",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  fontSize: "11px",
+                  transition: "all 0.15s ease"
+                },
+                onMouseEnter: (b) => {
+                  b.target.style.background = "rgba(255,255,255,0.1)", b.target.style.color = "rgba(255,255,255,0.9)";
+                },
+                onMouseLeave: (b) => {
+                  b.target.style.background = "none", b.target.style.color = "rgba(255,255,255,0.7)";
+                },
+                children: [
+                  r ? /* @__PURE__ */ t(wt, { size: 12 }) : /* @__PURE__ */ t(St, { size: 12 }),
+                  r ? "Copied!" : "Copy"
+                ]
+              }
+            ),
+            c && /* @__PURE__ */ y(
+              "button",
+              {
+                onClick: () => c({ code: l, language: n }),
+                style: {
+                  background: "none",
+                  border: "none",
+                  color: "rgba(255,255,255,0.7)",
+                  cursor: "pointer",
+                  padding: "4px",
+                  borderRadius: "4px",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  fontSize: "11px",
+                  transition: "all 0.15s ease"
+                },
+                onMouseEnter: (b) => {
+                  b.currentTarget.style.background = "rgba(255,255,255,0.1)", b.currentTarget.style.color = "rgba(255,255,255,0.9)";
+                },
+                onMouseLeave: (b) => {
+                  b.currentTarget.style.background = "none", b.currentTarget.style.color = "rgba(255,255,255,0.7)";
+                },
+                children: [
+                  /* @__PURE__ */ t(kt, { size: 12 }),
+                  "Canvas"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t("pre", { style: {
+            margin: 0,
+            padding: "12px",
+            fontFamily: "var(--font-mono, monospace)",
+            fontSize: "13px",
+            lineHeight: 1.4,
+            color: "rgba(255,255,255,0.95)",
+            overflow: "auto",
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word"
+          }, children: l })
+        ]
+      },
+      e
+    );
+  }, k = (l) => {
+    const n = [], e = l.split(`
+`);
+    let r = 0, b = 0;
+    for (; r < e.length; ) {
+      const f = e[r];
+      if (f.trim().startsWith("```")) {
+        const s = f.trim().slice(3);
+        let m = [];
+        for (r++; r < e.length && !e[r].trim().startsWith("```"); )
+          m.push(e[r]), r++;
+        r < e.length && r++, n.push(h(m.join(`
+`), s, `code-${b++}`));
+        continue;
+      }
+      if (f.startsWith("#")) {
+        const s = f.match(/^#+/)[0].length, m = f.slice(s).trim(), S = s === 1 ? "h2" : s === 2 ? "h3" : s === 3 ? "h4" : "h5";
+        n.push(
+          Z.createElement(S, {
+            key: `header-${r}`,
+            style: {
+              fontSize: s === 1 ? "18px" : s === 2 ? "16px" : "14px",
+              fontWeight: 720,
+              color: "var(--text-strong, rgba(30,33,37,0.92))",
+              marginTop: n.length > 0 ? "20px" : "0",
+              marginBottom: "8px",
+              lineHeight: 1.3
+            }
+          }, m)
+        ), r++;
+        continue;
+      }
+      if (f.trim() === "---" || f.trim() === "***") {
+        n.push(
+          /* @__PURE__ */ t("hr", { style: {
+            border: "none",
+            borderTop: "1px solid var(--border-subtle, rgba(52,58,64,0.08))",
+            margin: "16px 0"
+          } }, `hr-${r}`)
+        ), r++;
+        continue;
+      }
+      if (f.match(/^(\s*)([-*+]|\d+\.)\s/)) {
+        const s = [], m = /^\s*\d+\./.test(f);
+        for (; r < e.length && (e[r].match(/^(\s*)([-*+]|\d+\.)\s/) || e[r].trim() === ""); ) {
+          if (e[r].trim() !== "") {
+            const A = e[r].match(/^(\s*)([-*+]|\d+\.)\s(.*)$/);
+            A && s.push(A[3]);
+          }
+          r++;
+        }
+        const S = m ? "ol" : "ul";
+        n.push(
+          Z.createElement(S, {
+            key: `list-${r}`,
+            style: {
+              margin: "8px 0",
+              paddingLeft: "20px",
+              color: "var(--text-strong, rgba(30,33,37,0.92))"
+            }
+          }, s.map(
+            (A, B) => Z.createElement("li", {
+              key: `item-${B}`,
+              style: { marginBottom: "4px" }
+            }, o(A))
+          ))
+        );
+        continue;
+      }
+      if (f.trim().startsWith("|") && f.trim().endsWith("|")) {
+        const s = [];
+        for (; r < e.length && e[r].trim().startsWith("|") && e[r].trim().endsWith("|"); )
+          s.push(e[r]), r++;
+        if (s.length >= 2) {
+          const m = (R) => R.trim().slice(1, -1).split("|").map((z) => z.trim()), S = m(s[0]), A = (R) => m(R).every((z) => /^[-:]+$/.test(z)), B = s.length >= 2 && A(s[1]), L = B ? 2 : 1, D = B ? m(s[1]).map((R) => R.startsWith(":") && R.endsWith(":") ? "center" : R.endsWith(":") ? "right" : "left") : S.map(() => "left"), T = {
+            padding: "6px 12px",
+            borderBottom: "1px solid var(--border-subtle, rgba(52,58,64,0.08))",
+            fontSize: "13px",
+            lineHeight: 1.5,
+            color: "var(--text-strong, rgba(30,33,37,0.92))",
+            // Override the chat bubble's inherited `word-break: break-word`
+            // so cells size to natural min-content; the wrapper's
+            // overflow-x: auto handles wide tables via horizontal scroll
+            // instead of collapsing columns char-by-char on long URLs.
+            wordBreak: "normal",
+            overflowWrap: "normal"
+          };
+          n.push(
+            /* @__PURE__ */ t("div", { style: { overflowX: "auto", margin: "8px 0" }, children: /* @__PURE__ */ y("table", { style: {
+              borderCollapse: "collapse",
+              width: "100%",
+              border: "1px solid var(--border-subtle, rgba(52,58,64,0.08))",
+              borderRadius: "6px",
+              overflow: "hidden"
+            }, children: [
+              B && /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t("tr", { style: { background: "var(--hover-warm-subtle, rgba(231,212,162,0.08))" }, children: S.map((R, z) => /* @__PURE__ */ t("th", { style: { ...T, fontWeight: 660, textAlign: D[z] || "left", whiteSpace: "nowrap" }, children: o(R) }, z)) }) }),
+              /* @__PURE__ */ t("tbody", { children: (B ? s.slice(L) : s).map((R, z) => /* @__PURE__ */ t("tr", { style: { background: z % 2 === 1 ? "var(--hover-warm-subtle, rgba(231,212,162,0.04))" : "transparent" }, children: m(R).map((tt, j) => /* @__PURE__ */ t("td", { style: { ...T, textAlign: D[j] || "left" }, children: o(tt) }, j)) }, z)) })
+            ] }) }, `table-${r}`)
+          );
+        }
+        continue;
+      }
+      if (f.trim()) {
+        const s = [];
+        for (; r < e.length && e[r].trim() && !e[r].match(/^(#|```|---|\*\*\*|(\s*)([-*+]|\d+\.)\s)/) && !(e[r].trim().startsWith("|") && e[r].trim().endsWith("|")); )
+          s.push(e[r]), r++;
+        s.length > 0 && n.push(
+          /* @__PURE__ */ t("p", { style: {
+            margin: "8px 0",
+            lineHeight: 1.6,
+            color: "var(--text-strong, rgba(30,33,37,0.92))"
+          }, children: o(s.join(" ")) }, `p-${r}`)
+        );
+      } else
+        r++;
+    }
+    return n;
+  }, x = (l) => {
+    const n = [];
+    let e = l, r = 0;
+    for (; e.length > 0; ) {
+      if (g) {
+        const A = e.match(/^([^\s`*\[]+(?:\/src\/|\/components\/|\/packages\/)[^\s`*\[]*|[^\s`*\[]*\.(ts|tsx|js|jsx|py|css|scss|sass|json|md|yaml|yml|html|xml|sh|sql|go|rs|php|java|c|cpp|h|hpp)(?:\b|$))/);
+        if (A) {
+          const B = A[1];
+          n.push(
+            /* @__PURE__ */ t(
+              "span",
+              {
+                onClick: () => g(B),
+                style: {
+                  color: "var(--rail-discovery, #5E88B0)",
+                  textDecoration: "underline",
+                  textDecorationStyle: "dotted",
+                  textUnderlineOffset: "2px",
+                  cursor: "pointer",
+                  fontFamily: "var(--font-mono, monospace)",
+                  fontSize: "13px",
+                  transition: "all 0.15s ease",
+                  ":hover": {
+                    background: "var(--hover-warm-subtle, rgba(231,212,162,0.08))",
+                    textDecoration: "underline",
+                    textDecorationStyle: "solid"
+                  }
+                },
+                onMouseEnter: (L) => {
+                  L.target.style.background = "var(--hover-warm-subtle, rgba(231,212,162,0.08))", L.target.style.textDecorationStyle = "solid";
+                },
+                onMouseLeave: (L) => {
+                  L.target.style.background = "none", L.target.style.textDecorationStyle = "dotted";
+                },
+                children: B
+              },
+              `file-path-${r++}`
+            )
+          ), e = e.slice(A[0].length);
+          continue;
+        }
+      }
+      const b = e.match(/^`([^`]+)`/);
+      if (b) {
+        n.push(
+          /* @__PURE__ */ t("code", { style: {
+            background: "var(--hover-warm-subtle, rgba(231,212,162,0.08))",
+            border: "1px solid var(--border-subtle, rgba(52,58,64,0.08))",
+            borderRadius: "3px",
+            padding: "2px 4px",
+            fontFamily: "var(--font-mono, monospace)",
+            fontSize: "12px",
+            color: "var(--text-strong, rgba(30,33,37,0.92))"
+          }, children: b[1] }, `inline-code-${r++}`)
+        ), e = e.slice(b[0].length);
+        continue;
+      }
+      const f = e.match(/^\*\*([^*]+)\*\*/);
+      if (f) {
+        n.push(
+          /* @__PURE__ */ t("strong", { style: {
+            fontWeight: 720,
+            color: "var(--text-strong, rgba(30,33,37,0.92))"
+          }, children: f[1] }, `bold-${r++}`)
+        ), e = e.slice(f[0].length);
+        continue;
+      }
+      const s = e.match(/^\*([^*]+)\*/);
+      if (s) {
+        n.push(
+          /* @__PURE__ */ t("em", { style: {
+            fontStyle: "italic",
+            color: "var(--text-strong, rgba(30,33,37,0.92))"
+          }, children: s[1] }, `italic-${r++}`)
+        ), e = e.slice(s[0].length);
+        continue;
+      }
+      const m = e.match(/^\[([^\]]+)\]\(([^)]+)\)/);
+      if (m) {
+        const A = m[1], B = m[2], L = A === "View", D = {
+          display: "inline-flex",
+          alignItems: "center",
+          padding: "3px 10px",
+          background: "var(--rail-discovery, #5E88B0)",
+          color: "#fff",
+          textDecoration: "none",
+          borderRadius: "4px",
+          fontSize: "12px",
+          fontWeight: 600,
+          whiteSpace: "nowrap",
+          cursor: "pointer"
+        }, T = {
+          color: "var(--rail-discovery, #5E88B0)",
+          textDecoration: "underline",
+          textUnderlineOffset: "2px"
+        };
+        n.push(
+          /* @__PURE__ */ t(
+            "a",
+            {
+              href: B,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              style: L ? D : T,
+              children: A
+            },
+            `link-${r++}`
+          )
+        ), e = e.slice(m[0].length);
+        continue;
+      }
+      const S = e.search(/[`*\[]/);
+      if (S === -1) {
+        n.push(e);
+        break;
+      } else
+        S === 0 ? (n.push(e[0]), e = e.slice(1)) : (n.push(e.slice(0, S)), e = e.slice(S));
+    }
+    return n.length === 1 && typeof n[0] == "string" ? n[0] : n;
+  }, o = (l) => x(l);
+  return /* @__PURE__ */ t("div", { children: k(d) });
+};
+function _t({
+  role: d,
+  content: c,
+  html: g,
+  timestamp: a,
+  toolBadges: i,
+  isStreaming: u,
+  onCodeBlockClick: h,
+  onFilePathClick: k
+}) {
+  const x = d === "user";
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: x ? "flex-end" : "flex-start",
+        marginBottom: "16px",
+        maxWidth: "100%"
+      },
+      children: [
+        /* @__PURE__ */ y(
+          "div",
+          {
+            style: {
+              fontSize: "var(--text-sm, 11px)",
+              color: "var(--text-faint, rgba(30,33,37,0.36))",
+              marginBottom: "6px",
+              fontWeight: 650,
+              letterSpacing: "0.02em"
+            },
+            children: [
+              x ? "You" : "Chordia",
+              u && !x && /* @__PURE__ */ t("span", { style: { marginLeft: "6px", color: "var(--rail-purple, #9B7AA8)" }, children: "●" })
+            ]
+          }
+        ),
+        i && i.length > 0 && /* @__PURE__ */ t("div", { style: {
+          marginBottom: "8px",
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "4px",
+          maxWidth: "75%"
+        }, children: i.map((o, l) => /* @__PURE__ */ y(
+          "span",
+          {
+            style: {
+              display: "inline-block",
+              fontSize: "11px",
+              padding: "2px 8px",
+              borderRadius: "6px",
+              background: "var(--paper-elevated, rgba(255,255,255,0.82))",
+              border: `1px solid ${o.pending ? "var(--rail-discovery, #5A8CC0)" : o.success !== !1 ? "var(--state-present, #5CB85C)" : "var(--rail-signal-churn, #C98A5A)"}`,
+              color: o.pending ? "var(--rail-discovery, #5A8CC0)" : o.success !== !1 ? "var(--state-present, #5CB85C)" : "var(--rail-signal-churn, #C98A5A)"
+            },
+            children: [
+              /* @__PURE__ */ t(vt, { size: 10, style: { marginRight: 3, verticalAlign: "middle" } }),
+              o.name,
+              o.pending ? "..." : o.success !== !1 ? " ✓" : " ✗"
+            ]
+          },
+          o.id || l
+        )) }),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            style: {
+              maxWidth: "75%",
+              padding: "12px 16px",
+              borderRadius: "var(--radius-lg, 12px)",
+              background: x ? "var(--card-customer, rgba(94,136,176,0.08))" : "var(--paper-elevated, rgba(255,255,255,0.82))",
+              border: x ? "1px solid var(--border-subtle, rgba(52,58,64,0.08))" : "1px solid var(--border, rgba(52,58,64,0.12))",
+              fontSize: "var(--text-base, 14px)",
+              lineHeight: 1.6,
+              color: "var(--text-strong, rgba(30,33,37,0.92))",
+              wordBreak: "break-word"
+            },
+            children: g ? /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: g } }) : x ? (
+              // User messages stay plain text
+              /* @__PURE__ */ t("div", { style: { whiteSpace: "pre-wrap" }, children: c })
+            ) : (
+              // Assistant messages get markdown rendering
+              /* @__PURE__ */ t(Mt, { content: c || "", onCodeBlockClick: h, onFilePathClick: k })
+            )
+          }
+        ),
+        a && /* @__PURE__ */ t(
+          "div",
+          {
+            style: {
+              fontSize: "var(--text-xs-plus, 10.5px)",
+              color: "var(--text-faint, rgba(30,33,37,0.36))",
+              marginTop: "4px",
+              fontFamily: "var(--font-mono, monospace)"
+            },
+            children: a
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  _t as C,
+  Pt as a
+};
+//# sourceMappingURL=ChatMessage.es.js.map