@senitix/ui 0.4.0 → 0.4.2

package/dist/shared-inbox-Bv0AgLew.js

@@ -0,0 +1,702 @@
+import { jsxs as l, jsx as a, Fragment as A } from "react/jsx-runtime";
+import { c as x } from "./index-BGUveO6l.js";
+import { u as N } from "./locale-provider-BHGNO4j7.js";
+import * as p from "react";
+import { u as z } from "./use-controllable-state-CEa-Zlq6.js";
+import { I as ee } from "./input-Pfq8fkiV.js";
+import { c as $, S as R } from "./scroll-area-CGNbDUBQ.js";
+import { T as ae, a as ne, b as S, d as te } from "./textarea-4qZDuQ-C.js";
+import { A as T, a as K, b as j } from "./avatar-BlEcWE7T.js";
+import { B as L } from "./badge-D0C_rP2l.js";
+import { M as re } from "./message-square-B_xLey5D.js";
+import { P as se, M as le } from "./phone-B0J1dGIE.js";
+import { C as oe } from "./clock-BjJE8PGr.js";
+import { S as ie, D as ce, a as de, b as ue, f as me, g as he, c as fe } from "./dropdown-menu-CkCCV_tw.js";
+import { S as U, c as V, b as q, d as H, f as Q } from "./select-Ce2C2acZ.js";
+import { B as Z } from "./button-BP_ug5gP.js";
+import { S as pe } from "./send-DIkOd-pu.js";
+/**
+ * @license lucide-react v0.441.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const xe = $("MessageCircle", [
+  ["path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z", key: "vv11sd" }]
+]);
+/**
+ * @license lucide-react v0.441.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const be = $("Share2", [
+  ["circle", { cx: "18", cy: "5", r: "3", key: "gq8acd" }],
+  ["circle", { cx: "6", cy: "12", r: "3", key: "w7nqdw" }],
+  ["circle", { cx: "18", cy: "19", r: "3", key: "1xt0gg" }],
+  ["line", { x1: "8.59", x2: "15.42", y1: "13.51", y2: "17.49", key: "47mynk" }],
+  ["line", { x1: "15.41", x2: "8.59", y1: "6.51", y2: "10.49", key: "1n3mei" }]
+]);
+/**
+ * @license lucide-react v0.441.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ge = $("Smartphone", [
+  ["rect", { width: "14", height: "20", x: "5", y: "2", rx: "2", ry: "2", key: "1yt0o3" }],
+  ["path", { d: "M12 18h.01", key: "mhygvu" }]
+]);
+/**
+ * @license lucide-react v0.441.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ve = $("UserPlus", [
+  ["path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", key: "1yyitq" }],
+  ["circle", { cx: "9", cy: "7", r: "4", key: "nufk8" }],
+  ["line", { x1: "19", x2: "19", y1: "8", y2: "14", key: "1bvyxn" }],
+  ["line", { x1: "22", x2: "16", y1: "11", y2: "11", key: "1shjgl" }]
+]), E = {
+  email: {
+    icon: /* @__PURE__ */ a(le, { className: "h-3 w-3" }),
+    labelKey: "inbox.channel.email",
+    color: "bg-blue-100 text-blue-700 border-blue-200"
+  },
+  chat: {
+    icon: /* @__PURE__ */ a(xe, { className: "h-3 w-3" }),
+    labelKey: "inbox.channel.chat",
+    color: "bg-green-100 text-green-700 border-green-200"
+  },
+  phone: {
+    icon: /* @__PURE__ */ a(se, { className: "h-3 w-3" }),
+    labelKey: "inbox.channel.phone",
+    color: "bg-purple-100 text-purple-700 border-purple-200"
+  },
+  social: {
+    icon: /* @__PURE__ */ a(be, { className: "h-3 w-3" }),
+    labelKey: "inbox.channel.social",
+    color: "bg-pink-100 text-pink-700 border-pink-200"
+  },
+  sms: {
+    icon: /* @__PURE__ */ a(ge, { className: "h-3 w-3" }),
+    labelKey: "inbox.channel.sms",
+    color: "bg-orange-100 text-orange-700 border-orange-200"
+  },
+  whatsapp: {
+    icon: /* @__PURE__ */ a(re, { className: "h-3 w-3" }),
+    labelKey: "inbox.channel.whatsapp",
+    color: "bg-emerald-100 text-emerald-700 border-emerald-200"
+  }
+};
+function F({ channel: e, className: t }) {
+  const { t: r } = N(), s = E[e] ?? E.email;
+  return /* @__PURE__ */ l(
+    L,
+    {
+      variant: "outline",
+      className: x("gap-1 text-[10px] px-1.5 py-0 font-medium", s.color, t),
+      children: [
+        s.icon,
+        r(s.labelKey)
+      ]
+    }
+  );
+}
+function ye(e, t) {
+  const r = /* @__PURE__ */ new Date(), s = e.getTime() - r.getTime();
+  if (s < 0) {
+    const c = Math.abs(s), h = Math.floor(c / (1e3 * 60 * 60)), i = Math.floor(c % (1e3 * 60 * 60) / (1e3 * 60));
+    return h > 0 ? `${h}h ${i}m ${t("inbox.overdue")}` : `${i}m ${t("inbox.overdue")}`;
+  }
+  const o = Math.floor(s / (1e3 * 60 * 60)), n = Math.floor(s % (1e3 * 60 * 60) / (1e3 * 60));
+  return o > 24 ? `${Math.floor(o / 24)}d ${t("inbox.left")}` : o > 0 ? `${o}h ${n}m ${t("inbox.left")}` : `${n}m ${t("inbox.left")}`;
+}
+function _({ deadline: e, className: t }) {
+  const { t: r } = N(), s = e instanceof Date ? e : new Date(e), o = /* @__PURE__ */ new Date(), n = s.getTime() < o.getTime(), c = s.getTime() - o.getTime(), h = c > 0 && c < 1e3 * 60 * 60;
+  return /* @__PURE__ */ l(
+    L,
+    {
+      variant: "outline",
+      className: x(
+        "gap-1 text-[10px] px-1.5 py-0 font-medium",
+        n && "bg-destructive/10 text-destructive border-destructive/30 animate-pulse",
+        h && !n && "bg-warning/10 text-warning border-warning/30",
+        !n && !h && "bg-muted text-muted-foreground",
+        t
+      ),
+      children: [
+        /* @__PURE__ */ a(oe, { className: "h-2.5 w-2.5" }),
+        ye(s, r)
+      ]
+    }
+  );
+}
+function Ne(e) {
+  return e.split(" ").map((t) => t[0]).join("").toUpperCase().slice(0, 2);
+}
+function we(e, t) {
+  const r = e instanceof Date ? e : new Date(e), o = (/* @__PURE__ */ new Date()).getTime() - r.getTime(), n = Math.floor(o / (1e3 * 60)), c = Math.floor(o / (1e3 * 60 * 60)), h = Math.floor(o / (1e3 * 60 * 60 * 24));
+  return n < 1 ? t("inbox.now") : n < 60 ? t("record.minutesAgo", { count: n }) : c < 24 ? t("record.hoursAgo", { count: c }) : h < 7 ? t("record.daysAgo", { count: h }) : r.toLocaleDateString();
+}
+const Me = {
+  low: "",
+  medium: "border-l-warning",
+  high: "border-l-orange-500",
+  urgent: "border-l-destructive"
+};
+function Ce({
+  ticket: e,
+  isSelected: t,
+  onClick: r,
+  className: s
+}) {
+  const { t: o } = N();
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      onClick: r,
+      className: x(
+        "flex w-full gap-3 border-b border-l-2 px-3 py-3 text-left transition-colors",
+        "hover:bg-muted/50",
+        t && "bg-muted border-l-primary",
+        !t && (Me[e.priority] || "border-l-transparent"),
+        e.unreadCount && e.unreadCount > 0 && !t && "bg-primary/5",
+        s
+      ),
+      children: [
+        /* @__PURE__ */ l(T, { className: "h-8 w-8 shrink-0", children: [
+          /* @__PURE__ */ a(K, { src: e.contact.avatar, alt: e.contact.name }),
+          /* @__PURE__ */ a(j, { className: "text-[10px]", children: Ne(e.contact.name) })
+        ] }),
+        /* @__PURE__ */ l("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-1", children: [
+            /* @__PURE__ */ a("span", { className: x("text-sm truncate", e.unreadCount && e.unreadCount > 0 ? "font-semibold" : "font-medium"), children: e.contact.name }),
+            /* @__PURE__ */ a("span", { className: "text-[10px] text-muted-foreground shrink-0", children: we(e.lastMessageAt, o) })
+          ] }),
+          /* @__PURE__ */ a("p", { className: "text-xs font-medium truncate text-foreground/90", children: e.subject }),
+          e.lastMessage && /* @__PURE__ */ a("p", { className: "text-[11px] text-muted-foreground truncate mt-0.5", children: e.lastMessage }),
+          /* @__PURE__ */ l("div", { className: "flex items-center gap-1.5 mt-1.5", children: [
+            /* @__PURE__ */ a(F, { channel: e.channel }),
+            e.slaDeadline && /* @__PURE__ */ a(_, { deadline: e.slaDeadline }),
+            e.unreadCount && e.unreadCount > 0 && /* @__PURE__ */ a("span", { className: "ml-auto flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[9px] font-bold text-primary-foreground", children: e.unreadCount })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function De({
+  tickets: e,
+  selectedTicketId: t,
+  onTicketSelect: r,
+  searchQuery: s,
+  defaultSearchQuery: o = "",
+  onSearchQueryChange: n,
+  statusFilter: c,
+  defaultStatusFilter: h = "all",
+  onStatusFilterChange: i,
+  renderTicketItem: f,
+  className: C
+}) {
+  const { t: v } = N(), [d, D] = z({
+    value: s,
+    defaultValue: o,
+    onChange: n
+  }), [b, I] = z({
+    value: c,
+    defaultValue: h,
+    onChange: i
+  }), M = p.useMemo(() => {
+    let m = e;
+    if (b !== "all" && (m = m.filter((g) => g.status === b)), d) {
+      const g = d.toLowerCase();
+      m = m.filter(
+        (u) => {
+          var y;
+          return u.subject.toLowerCase().includes(g) || u.contact.name.toLowerCase().includes(g) || ((y = u.lastMessage) == null ? void 0 : y.toLowerCase().includes(g));
+        }
+      );
+    }
+    return m;
+  }, [e, b, d]), w = p.useMemo(() => ({
+    all: e.length,
+    open: e.filter((m) => m.status === "open").length,
+    pending: e.filter((m) => m.status === "pending").length,
+    resolved: e.filter((m) => m.status === "resolved").length
+  }), [e]);
+  return /* @__PURE__ */ l("div", { className: x("flex h-full w-[340px] flex-col border-r bg-background", C), children: [
+    /* @__PURE__ */ a("div", { className: "border-b px-3 py-2.5", children: /* @__PURE__ */ l("div", { className: "relative", children: [
+      /* @__PURE__ */ a(ie, { className: "absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ a(
+        ee,
+        {
+          value: d,
+          onChange: (m) => D(m.target.value),
+          placeholder: v("inbox.searchConversations"),
+          className: "h-8 pl-8 text-xs"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ a(ae, { value: b, onValueChange: (m) => I(m), children: /* @__PURE__ */ l(ne, { className: "w-full justify-start rounded-none border-b bg-transparent px-3 py-0 h-auto", children: [
+      /* @__PURE__ */ l(S, { value: "all", className: "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none text-xs py-2", children: [
+        v("inbox.filter.all"),
+        " (",
+        w.all,
+        ")"
+      ] }),
+      /* @__PURE__ */ l(S, { value: "open", className: "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none text-xs py-2", children: [
+        v("inbox.filter.open"),
+        " (",
+        w.open,
+        ")"
+      ] }),
+      /* @__PURE__ */ l(S, { value: "pending", className: "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none text-xs py-2", children: [
+        v("inbox.filter.pending"),
+        " (",
+        w.pending,
+        ")"
+      ] }),
+      /* @__PURE__ */ l(S, { value: "resolved", className: "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:shadow-none text-xs py-2", children: [
+        v("inbox.filter.resolved"),
+        " (",
+        w.resolved,
+        ")"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ a(R, { className: "flex-1", children: M.length > 0 ? M.map((m) => {
+      const g = t === m.id, u = () => r(m.id), y = /* @__PURE__ */ a(
+        Ce,
+        {
+          ticket: m,
+          isSelected: g,
+          onClick: u
+        },
+        m.id
+      );
+      return /* @__PURE__ */ a(p.Fragment, { children: f ? f(m, { isSelected: g, defaultNode: y, onSelect: u }) : y }, m.id);
+    }) : /* @__PURE__ */ a("div", { className: "flex items-center justify-center py-8 text-sm text-muted-foreground", children: v("inbox.noConversations") }) })
+  ] });
+}
+function O(e) {
+  return e.split(" ").map((t) => t[0]).join("").toUpperCase().slice(0, 2);
+}
+function Ie({
+  assignee: e,
+  agents: t,
+  onAssign: r,
+  className: s
+}) {
+  const { t: o } = N();
+  return /* @__PURE__ */ l(ce, { children: [
+    /* @__PURE__ */ a(de, { asChild: !0, children: /* @__PURE__ */ a(
+      Z,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: x("gap-1.5 h-7", s),
+        children: e ? /* @__PURE__ */ l(A, { children: [
+          /* @__PURE__ */ l(T, { className: "h-4 w-4", children: [
+            /* @__PURE__ */ a(K, { src: e.avatar, alt: e.name }),
+            /* @__PURE__ */ a(j, { className: "text-[8px]", children: O(e.name) })
+          ] }),
+          /* @__PURE__ */ a("span", { className: "text-xs", children: e.name })
+        ] }) : /* @__PURE__ */ l(A, { children: [
+          /* @__PURE__ */ a(ve, { className: "h-3 w-3" }),
+          /* @__PURE__ */ a("span", { className: "text-xs", children: o("inbox.assign") })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ l(ue, { align: "end", children: [
+      /* @__PURE__ */ a(me, { className: "text-xs", children: o("inbox.assignTo") }),
+      /* @__PURE__ */ a(he, {}),
+      t.map((n) => /* @__PURE__ */ l(
+        fe,
+        {
+          onClick: () => r(n.id),
+          className: "gap-2",
+          children: [
+            /* @__PURE__ */ l(T, { className: "h-5 w-5", children: [
+              /* @__PURE__ */ a(K, { src: n.avatar, alt: n.name }),
+              /* @__PURE__ */ a(j, { className: "text-[8px]", children: O(n.name) })
+            ] }),
+            /* @__PURE__ */ a("span", { className: "text-sm", children: n.name }),
+            n.status === "online" && /* @__PURE__ */ a("span", { className: "ml-auto h-2 w-2 rounded-full bg-green-500" })
+          ]
+        },
+        n.id
+      ))
+    ] })
+  ] });
+}
+const Se = [
+  { value: "open", labelKey: "status.open" },
+  { value: "pending", labelKey: "status.pending" },
+  { value: "resolved", labelKey: "status.resolved" },
+  { value: "closed", labelKey: "status.closed" }
+], Te = [
+  { value: "low", labelKey: "status.low" },
+  { value: "medium", labelKey: "status.medium" },
+  { value: "high", labelKey: "status.high" },
+  { value: "urgent", labelKey: "status.urgent" }
+];
+function Ke({
+  ticket: e,
+  agents: t,
+  onStatusChange: r,
+  onPriorityChange: s,
+  onAssign: o,
+  className: n
+}) {
+  var h;
+  const { t: c } = N();
+  return /* @__PURE__ */ a("div", { className: x("border-b px-4 py-2.5", n), children: /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ l("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ a("h2", { className: "text-sm font-semibold truncate", children: e.subject }),
+      /* @__PURE__ */ l("div", { className: "flex items-center gap-2 mt-1", children: [
+        /* @__PURE__ */ a("span", { className: "text-xs text-muted-foreground", children: e.contact.name }),
+        /* @__PURE__ */ a(F, { channel: e.channel }),
+        e.slaDeadline && /* @__PURE__ */ a(_, { deadline: e.slaDeadline }),
+        (h = e.tags) == null ? void 0 : h.map((i) => /* @__PURE__ */ a(L, { variant: "secondary", className: "text-[10px] px-1.5 py-0", children: i }, i))
+      ] })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "flex items-center gap-2 shrink-0", children: [
+      /* @__PURE__ */ l(
+        U,
+        {
+          value: e.status,
+          onValueChange: (i) => r == null ? void 0 : r(i),
+          children: [
+            /* @__PURE__ */ a(V, { size: "sm", className: "w-[110px] h-7 text-xs", children: /* @__PURE__ */ a(q, {}) }),
+            /* @__PURE__ */ a(H, { children: Se.map((i) => /* @__PURE__ */ a(Q, { value: i.value, children: c(i.labelKey) }, i.value)) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ l(
+        U,
+        {
+          value: e.priority,
+          onValueChange: (i) => s == null ? void 0 : s(i),
+          children: [
+            /* @__PURE__ */ a(V, { size: "sm", className: "w-[100px] h-7 text-xs", children: /* @__PURE__ */ a(q, {}) }),
+            /* @__PURE__ */ a(H, { children: Te.map((i) => /* @__PURE__ */ a(Q, { value: i.value, children: c(i.labelKey) }, i.value)) })
+          ]
+        }
+      ),
+      o && /* @__PURE__ */ a(
+        Ie,
+        {
+          assignee: e.assignee,
+          agents: t,
+          onAssign: o
+        }
+      )
+    ] })
+  ] }) });
+}
+function je(e) {
+  return e.split(" ").map((t) => t[0]).join("").toUpperCase().slice(0, 2);
+}
+function $e(e) {
+  return (e instanceof Date ? e : new Date(e)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+function Ae({ message: e, className: t }) {
+  const { t: r } = N(), s = e.isAgent;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: x(
+        "flex gap-2 max-w-[75%]",
+        s ? "ml-auto flex-row-reverse" : "mr-auto",
+        t
+      ),
+      children: [
+        /* @__PURE__ */ l(T, { className: "h-7 w-7 shrink-0 mt-1", children: [
+          /* @__PURE__ */ a(K, { src: e.sender.avatar, alt: e.sender.name }),
+          /* @__PURE__ */ a(j, { className: "text-[9px]", children: je(e.sender.name) })
+        ] }),
+        /* @__PURE__ */ l("div", { className: x("space-y-0.5", s ? "items-end" : "items-start"), children: [
+          /* @__PURE__ */ l("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ a("span", { className: "text-[11px] font-medium", children: e.sender.name }),
+            /* @__PURE__ */ a(F, { channel: e.channel })
+          ] }),
+          /* @__PURE__ */ l(
+            "div",
+            {
+              className: x(
+                "rounded-xl px-3 py-2 text-sm",
+                s ? "bg-primary text-primary-foreground rounded-tr-sm" : "bg-muted rounded-tl-sm"
+              ),
+              children: [
+                /* @__PURE__ */ a("p", { className: "whitespace-pre-wrap break-words", children: e.content }),
+                e.attachments && e.attachments.length > 0 && /* @__PURE__ */ a("div", { className: "mt-2 space-y-1", children: e.attachments.map((o) => /* @__PURE__ */ l(
+                  "a",
+                  {
+                    href: o.url,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: x(
+                      "flex items-center gap-1 rounded px-2 py-1 text-[11px] underline-offset-2 hover:underline",
+                      s ? "bg-primary-foreground/10" : "bg-background"
+                    ),
+                    children: [
+                      o.name,
+                      o.size && /* @__PURE__ */ l("span", { className: "opacity-60", children: [
+                        "(",
+                        (o.size / 1024).toFixed(0),
+                        "KB)"
+                      ] })
+                    ]
+                  },
+                  o.id
+                )) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ l("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ a("span", { className: "text-[10px] text-muted-foreground", children: $e(e.createdAt) }),
+            s && e.readAt && /* @__PURE__ */ l("span", { className: "text-[10px] text-muted-foreground", children: [
+              "· ",
+              r("inbox.read")
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function Le(e, t) {
+  const r = e instanceof Date ? e : new Date(e), o = (/* @__PURE__ */ new Date()).getTime() - r.getTime(), n = Math.floor(o / (1e3 * 60 * 60 * 24));
+  return n === 0 ? t("date.today") : n === 1 ? t("date.yesterday") : n < 7 ? r.toLocaleDateString(void 0, { weekday: "long" }) : r.toLocaleDateString();
+}
+function Fe(e, t) {
+  const r = [];
+  let s = "";
+  for (const o of e) {
+    const n = Le(o.createdAt, t);
+    n !== s && (s = n, r.push({ date: n, messages: [] })), r[r.length - 1].messages.push(o);
+  }
+  return r;
+}
+function Be({ messages: e, className: t }) {
+  const { t: r } = N(), s = p.useRef(null);
+  p.useEffect(() => {
+    s.current && (s.current.scrollTop = s.current.scrollHeight);
+  }, [e.length]);
+  const o = p.useMemo(() => Fe(e, r), [e, r]);
+  return e.length === 0 ? /* @__PURE__ */ a("div", { className: x("flex flex-1 items-center justify-center text-muted-foreground", t), children: /* @__PURE__ */ a("p", { className: "text-sm", children: r("inbox.noMessages") }) }) : /* @__PURE__ */ a(R, { className: x("flex-1", t), ref: s, children: /* @__PURE__ */ a("div", { className: "space-y-4 p-4", children: o.map((n) => /* @__PURE__ */ l("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ a("div", { className: "flex-1 border-t" }),
+      /* @__PURE__ */ a("span", { className: "text-[10px] font-medium text-muted-foreground shrink-0", children: n.date }),
+      /* @__PURE__ */ a("div", { className: "flex-1 border-t" })
+    ] }),
+    n.messages.map((c) => /* @__PURE__ */ a(Ae, { message: c }, c.id))
+  ] }, n.date)) }) });
+}
+function ze({
+  onSend: e,
+  placeholder: t,
+  disabled: r = !1,
+  className: s
+}) {
+  const { t: o } = N(), [n, c] = p.useState(""), h = () => {
+    const f = n.trim();
+    f && (e(f), c(""));
+  }, i = (f) => {
+    f.key === "Enter" && !f.shiftKey && (f.preventDefault(), h());
+  };
+  return /* @__PURE__ */ l("div", { className: x("border-t p-3", s), children: [
+    /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ a(
+        te,
+        {
+          value: n,
+          onChange: (f) => c(f.target.value),
+          onKeyDown: i,
+          placeholder: t ?? o("inbox.typeReply"),
+          disabled: r,
+          rows: 2,
+          className: "min-h-[60px] resize-none text-sm"
+        }
+      ),
+      /* @__PURE__ */ a(
+        Z,
+        {
+          size: "icon",
+          onClick: h,
+          disabled: r || !n.trim(),
+          className: "shrink-0 self-end",
+          children: /* @__PURE__ */ a(pe, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("p", { className: "mt-1 text-[10px] text-muted-foreground", children: o("inbox.enterToSendHint") })
+  ] });
+}
+function Ue({
+  tickets: e,
+  messages: t,
+  selectedTicketId: r,
+  defaultSelectedTicketId: s,
+  autoSelectFirstTicket: o = !1,
+  onTicketSelect: n,
+  onReply: c,
+  onStatusChange: h,
+  onAssign: i,
+  onPriorityChange: f
+}) {
+  const [C, v] = p.useState(
+    s
+  ), d = r ?? C;
+  p.useEffect(() => {
+    var y;
+    if (!o || d) return;
+    const u = (y = e[0]) == null ? void 0 : y.id;
+    u && (r === void 0 && v(u), n == null || n(u));
+  }, [o, d, e, r, n]);
+  const D = p.useCallback(
+    (u) => {
+      r || v(u), n == null || n(u);
+    },
+    [r, n]
+  ), b = p.useMemo(
+    () => e.find((u) => u.id === d),
+    [e, d]
+  ), I = p.useMemo(
+    () => d ? t.filter((u) => u.ticketId === d) : [],
+    [t, d]
+  ), M = p.useCallback(
+    (u) => {
+      d && (c == null || c(d, u, b == null ? void 0 : b.channel));
+    },
+    [d, b, c]
+  ), w = p.useCallback(
+    (u) => {
+      d && (h == null || h(d, u));
+    },
+    [d, h]
+  ), m = p.useCallback(
+    (u) => {
+      d && (i == null || i(d, u));
+    },
+    [d, i]
+  ), g = p.useCallback(
+    (u) => {
+      d && (f == null || f(d, u));
+    },
+    [d, f]
+  );
+  return {
+    selectedTicketId: d,
+    selectedTicket: b,
+    threadMessages: I,
+    handleTicketSelect: D,
+    handleReply: M,
+    handleStatusChange: w,
+    handleAssign: m,
+    handlePriorityChange: g
+  };
+}
+function Ve({
+  tickets: e,
+  messages: t,
+  agents: r = [],
+  selectedTicketId: s,
+  defaultSelectedTicketId: o,
+  autoSelectFirstTicket: n = !1,
+  onTicketSelect: c,
+  onReply: h,
+  onStatusChange: i,
+  onAssign: f,
+  onPriorityChange: C,
+  sidebarSearchQuery: v,
+  defaultSidebarSearchQuery: d,
+  onSidebarSearchQueryChange: D,
+  sidebarStatusFilter: b,
+  defaultSidebarStatusFilter: I,
+  onSidebarStatusFilterChange: M,
+  renderTicketItem: w,
+  renderNoSelectionState: m,
+  height: g = 600,
+  className: u
+}) {
+  const { t: y } = N(), {
+    selectedTicketId: G,
+    selectedTicket: B,
+    threadMessages: J,
+    handleTicketSelect: W,
+    handleReply: X,
+    handleStatusChange: Y,
+    handleAssign: P,
+    handlePriorityChange: k
+  } = Ue({
+    tickets: e,
+    messages: t,
+    selectedTicketId: s,
+    defaultSelectedTicketId: o,
+    autoSelectFirstTicket: n,
+    onTicketSelect: c,
+    onReply: h,
+    onStatusChange: i,
+    onAssign: f,
+    onPriorityChange: C
+  });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: x("flex overflow-hidden rounded-lg border bg-background", u),
+      style: { height: g },
+      children: [
+        /* @__PURE__ */ a(
+          De,
+          {
+            tickets: e,
+            selectedTicketId: G,
+            onTicketSelect: W,
+            searchQuery: v,
+            defaultSearchQuery: d,
+            onSearchQueryChange: D,
+            statusFilter: b,
+            defaultStatusFilter: I,
+            onStatusFilterChange: M,
+            renderTicketItem: w
+          }
+        ),
+        /* @__PURE__ */ a("div", { className: "flex flex-1 flex-col min-w-0", children: B ? /* @__PURE__ */ l(A, { children: [
+          /* @__PURE__ */ a(
+            Ke,
+            {
+              ticket: B,
+              agents: r,
+              onStatusChange: Y,
+              onPriorityChange: k,
+              onAssign: P
+            }
+          ),
+          /* @__PURE__ */ a(Be, { messages: J }),
+          /* @__PURE__ */ a(ze, { onSend: X })
+        ] }) : /* @__PURE__ */ a("div", { className: "flex flex-1 items-center justify-center text-muted-foreground", children: m ?? /* @__PURE__ */ l("div", { className: "text-center", children: [
+          /* @__PURE__ */ a("p", { className: "text-sm font-medium", children: y("inbox.selectConversation") }),
+          /* @__PURE__ */ a("p", { className: "text-xs mt-1", children: y("inbox.selectConversationHint") })
+        ] }) }) })
+      ]
+    }
+  );
+}
+Ve.displayName = "SharedInbox";
+export {
+  De as I,
+  Ve as S,
+  Be as a,
+  Ce as b,
+  Ae as c,
+  ze as d,
+  Ke as e,
+  F as f,
+  _ as g,
+  Ie as h,
+  Ue as u
+};
+//# sourceMappingURL=shared-inbox-Bv0AgLew.js.map