@lightworkai.official/debug-capture-react 0.6.0 → 0.7.0

package/dist/index.mjs

@@ -124,1566 +124,60 @@ class DebugErrorBoundary extends Component {
 function reportBoundaryError(error) {
   import("@lightworkai.official/debug-capture").then(({ launch: launch2 }) => launch2({ type: "framework-error", message: error.message, stack: error.stack }));
 }
-// src/components/MyTicketsPanel.tsx
-import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef5, useState as useState7 } from "react";
-import {
-  NoIdentityError,
-  fetchRealmConfig,
-  getAttachmentUrl,
-  getConfig,
-  getMyTicket,
-  getMyTicketHistory,
-  listMyTickets,
-  reopenMyTicket,
-  replyToTicket,
-  statusMaps,
-  ticketStrings,
-  uploadInlineImage
-} from "@lightworkai.official/debug-capture";
-
-// src/components/TicketTable.tsx
-import { useMemo } from "react";
-import {
-  compareBy,
-  formatDateTime,
-  hasSolution,
-  hasTeamReply,
-  matchesKeyword,
-  pageCount,
-  pageOf,
-  statusTone,
-  ticketKey
-} from "@lightworkai.official/debug-capture";
-
-// src/components/StatusPill.tsx
+// src/SupportPortalButton.tsx
+import { useState } from "react";
+import { openSupportPortal, showToast } from "@lightworkai.official/debug-capture";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-function StatusPill({ label, tone }) {
-  return /* @__PURE__ */ jsxDEV2("span", {
-    className: "lw-status",
-    style: { background: tone.bg, color: tone.fg },
-    children: label
-  }, undefined, false, undefined, this);
-}
-
-// src/components/icons.tsx
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
-function glyph(paths, size = 15) {
-  return function Icon(props) {
-    return /* @__PURE__ */ jsxDEV3("svg", {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      ...props,
-      children: paths.map((d) => /* @__PURE__ */ jsxDEV3("path", {
-        d
-      }, d, false, undefined, this))
-    }, undefined, false, undefined, this);
-  };
-}
-var BoldIcon = glyph(["M6 4h8a4 4 0 0 1 0 8H6z", "M6 12h9a4 4 0 0 1 0 8H6z"]);
-var ItalicIcon = glyph(["M19 4h-9", "M14 20H5", "M15 4L9 20"]);
-var UnderlineIcon = glyph(["M6 4v6a6 6 0 0 0 12 0V4", "M4 20h16"]);
-var BulletListIcon = glyph(["M8 6h13", "M8 12h13", "M8 18h13", "M3 6h.01", "M3 12h.01", "M3 18h.01"]);
-var OrderedListIcon = glyph(["M10 6h11", "M10 12h11", "M10 18h11", "M4 6h1v4", "M4 10h2", "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"]);
-var LinkIcon = glyph([
-  "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
-  "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
-]);
-var ImageIcon = glyph([
-  "M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z",
-  "M8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z",
-  "M21 15l-5-5L5 21"
-]);
-var SendIcon = glyph(["M22 2L11 13", "M22 2l-7 20-4-9-9-4 20-7z"]);
-var SearchIcon = glyph(["M21 21l-4.34-4.34", "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"], 16);
-var ArrowLeftIcon = glyph(["M19 12H5", "M12 19l-7-7 7-7"], 14);
-var CheckIcon = glyph(["M20 6L9 17l-5-5"], 12);
-var MessageIcon = glyph(["M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"], 12);
-var RotateIcon = glyph(["M3 12a9 9 0 1 0 3-6.7L3 8", "M3 3v5h5"], 14);
-var AlertIcon = glyph(["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 8v4", "M12 16h.01"], 16);
-var InboxIcon = glyph([
-  "M22 12h-6l-2 3h-4l-2-3H2",
-  "M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
-], 22);
-var ClockIcon = glyph(["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 6v6l4 2"], 22);
-var CheckCircleIcon = glyph(["M22 11.08V12a10 10 0 1 1-5.93-9.14", "M22 4L12 14.01l-3-3"], 22);
-var BanIcon = glyph(["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M4.93 4.93l14.14 14.14"], 22);
-var WrenchIcon = glyph([
-  "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
-], 16);
-var SquareIcon = glyph(["M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"], 14);
-var ArrowUpRightIcon = glyph(["M7 17L17 7", "M7 7h10v10"], 14);
-var HighlighterIcon = glyph([
-  "M9 11l-6 6v3h9l3-3",
-  "M22 12l-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"
-], 14);
-var TypeIcon = glyph(["M4 7V4h16v3", "M9 20h6", "M12 4v16"], 14);
-var TrashIcon = glyph([
-  "M3 6h18",
-  "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-], 14);
-var PencilIcon = glyph(["M12 20h9", "M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"], 11);
-var CheckSmallIcon = glyph(["M20 6L9 17l-5-5"], 12);
-var XSmallIcon = glyph(["M18 6L6 18", "M6 6l12 12"], 12);
-
-// src/components/TicketTable.tsx
-import { jsxDEV as jsxDEV4, Fragment } from "react/jsx-dev-runtime";
-var COLUMNS = [
-  { key: "number", label: "colNumber", width: "120px" },
-  { key: "title", label: "colTitle" },
-  { key: "module", label: "colModule", width: "160px" },
-  { key: "status", label: "colStatus", width: "130px" },
-  { key: "response", label: "colResponse", width: "150px" },
-  { key: "createdAt", label: "colCreated", width: "170px" },
-  { key: "updatedAt", label: "colUpdated", width: "170px" }
-];
-function TicketTable(props) {
-  const { items, maps, t, slug, timezone, locale, keyword, statusFilter, sort, page } = props;
-  const visible = useMemo(() => items.filter((item) => statusFilter ? item.status === statusFilter : true).filter((item) => matchesKeyword(item, keyword, slug, maps.labelOf)).sort(compareBy(sort, maps, slug)), [items, statusFilter, keyword, slug, maps, sort]);
-  const pages = pageCount(visible.length);
-  const current = Math.min(page, pages);
-  const rows = pageOf(visible, current);
-  props.onCount?.(visible.length);
-  const when = (iso) => formatDateTime(iso, timezone, locale);
-  return /* @__PURE__ */ jsxDEV4(Fragment, {
-    children: [
-      /* @__PURE__ */ jsxDEV4("div", {
-        className: "lw-tablewrap",
-        children: /* @__PURE__ */ jsxDEV4("table", {
-          className: "lw-table",
-          children: [
-            /* @__PURE__ */ jsxDEV4("thead", {
-              children: /* @__PURE__ */ jsxDEV4("tr", {
-                children: COLUMNS.map((column) => /* @__PURE__ */ jsxDEV4("th", {
-                  scope: "col",
-                  className: "lw-th",
-                  style: column.width ? { width: column.width } : undefined,
-                  "aria-sort": sort.key === column.key ? sort.direction === "asc" ? "ascending" : "descending" : undefined,
-                  onClick: () => props.onSort(column.key),
-                  children: [
-                    t[column.label],
-                    " ",
-                    /* @__PURE__ */ jsxDEV4("span", {
-                      className: "lw-arrow",
-                      children: sort.key === column.key ? sort.direction === "asc" ? "▲" : "▼" : "⇅"
-                    }, undefined, false, undefined, this)
-                  ]
-                }, column.key, true, undefined, this))
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV4("tbody", {
-              children: rows.length === 0 ? /* @__PURE__ */ jsxDEV4("tr", {
-                children: /* @__PURE__ */ jsxDEV4("td", {
-                  colSpan: COLUMNS.length,
-                  className: "lw-empty",
-                  children: items.length === 0 ? t.empty : t.emptyFiltered
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this) : rows.map((row) => /* @__PURE__ */ jsxDEV4("tr", {
-                className: "lw-row",
-                tabIndex: 0,
-                onClick: () => props.onOpen(row.id),
-                onKeyDown: (event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    event.preventDefault();
-                    props.onOpen(row.id);
-                  }
-                },
-                children: [
-                  /* @__PURE__ */ jsxDEV4("td", {
-                    className: "lw-num",
-                    children: ticketKey(slug, row.number)
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV4("td", {
-                    className: "lw-title",
-                    children: row.title
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV4("td", {
-                    children: row.category ? /* @__PURE__ */ jsxDEV4("span", {
-                      className: "lw-chip",
-                      children: row.category
-                    }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV4("span", {
-                      className: "lw-dash",
-                      children: "—"
-                    }, undefined, false, undefined, this)
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV4("td", {
-                    children: maps.isAwaitingReply(row.status) ? /* @__PURE__ */ jsxDEV4("span", {
-                      className: "lw-pill lw-pill--awaiting",
-                      children: [
-                        /* @__PURE__ */ jsxDEV4(MessageIcon, {}, undefined, false, undefined, this),
-                        " ",
-                        t.awaitingReply
-                      ]
-                    }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV4(StatusPill, {
-                      label: maps.labelOf(row.status),
-                      tone: statusTone(maps.columnOf(row.status)?.color)
-                    }, undefined, false, undefined, this)
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV4("td", {
-                    children: hasSolution(row) ? /* @__PURE__ */ jsxDEV4("span", {
-                      className: "lw-pill lw-pill--solution",
-                      children: [
-                        /* @__PURE__ */ jsxDEV4(CheckIcon, {}, undefined, false, undefined, this),
-                        " ",
-                        t.hasSolution
-                      ]
-                    }, undefined, true, undefined, this) : hasTeamReply(row) ? /* @__PURE__ */ jsxDEV4("span", {
-                      className: "lw-pill lw-pill--replied",
-                      children: [
-                        /* @__PURE__ */ jsxDEV4(MessageIcon, {}, undefined, false, undefined, this),
-                        " ",
-                        t.hasReply
-                      ]
-                    }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV4("span", {
-                      className: "lw-muted",
-                      children: t.noReply
-                    }, undefined, false, undefined, this)
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV4("td", {
-                    className: "lw-dim",
-                    children: when(row.createdAt)
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV4("td", {
-                    className: "lw-dim",
-                    children: when(row.updatedAt)
-                  }, undefined, false, undefined, this)
-                ]
-              }, row.id, true, undefined, this))
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
-      (visible.length > rows.length || current > 1) && /* @__PURE__ */ jsxDEV4("div", {
-        className: "lw-pager",
-        children: [
-          /* @__PURE__ */ jsxDEV4("span", {
-            children: t.of(current, pages)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4("button", {
-            type: "button",
-            className: "lw-btn",
-            disabled: current <= 1,
-            onClick: () => props.onPage(current - 1),
-            children: t.prev
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4("button", {
-            type: "button",
-            className: "lw-btn",
-            disabled: current >= pages,
-            onClick: () => props.onPage(current + 1),
-            children: t.next
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/components/TicketDetail.tsx
-import {
-  formatDateTime as formatDateTime4,
-  ticketKey as ticketKey2
-} from "@lightworkai.official/debug-capture";
-
-// src/components/TicketBody.tsx
-import { useEffect as useEffect2, useRef, useState } from "react";
-import { renderBody } from "@lightworkai.official/debug-capture";
-import { jsxDEV as jsxDEV5, Fragment as Fragment2 } from "react/jsx-dev-runtime";
-function TicketBody({ html, host, className }) {
-  const target = useRef(null);
-  const [zoomed, setZoomed] = useState(null);
-  useEffect2(() => {
-    if (target.current)
-      renderBody(target.current, html, host);
-  }, [html, host]);
-  return /* @__PURE__ */ jsxDEV5(Fragment2, {
-    children: [
-      /* @__PURE__ */ jsxDEV5("div", {
-        ref: target,
-        className: className ? `lw-body ${className}` : "lw-body",
-        onClick: (event) => {
-          const node = event.target;
-          if (node.tagName !== "IMG")
-            return;
-          const src = node.getAttribute("src");
-          if (src)
-            setZoomed(src);
-        }
-      }, undefined, false, undefined, this),
-      zoomed && /* @__PURE__ */ jsxDEV5("div", {
-        className: "lw-zoom",
-        role: "dialog",
-        "aria-modal": "true",
-        onClick: () => setZoomed(null),
-        children: [
-          /* @__PURE__ */ jsxDEV5("button", {
-            type: "button",
-            className: "lw-zoom__close",
-            "aria-label": "close",
-            children: "✕"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5("img", {
-            src: zoomed,
-            alt: ""
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/components/StatusHero.tsx
-import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
-var TONES = {
-  OPEN: { Icon: InboxIcon, border: "#bfdbfe", bg: "#eff6ff", fg: "#1e3a8a", accent: "#3b82f6" },
-  IN_PROGRESS: { Icon: ClockIcon, border: "#fde68a", bg: "#fffbeb", fg: "#78350f", accent: "#f59e0b" },
-  RESOLVED: { Icon: CheckCircleIcon, border: "#a7f3d0", bg: "#ecfdf5", fg: "#064e3b", accent: "#10b981" },
-  CLOSED: { Icon: CheckCircleIcon, border: "#e5e7eb", bg: "#f9fafb", fg: "#1f2937", accent: "#9ca3af" },
-  WONT_FIX: { Icon: BanIcon, border: "#e5e7eb", bg: "#f9fafb", fg: "#374151", accent: "#9ca3af" }
-};
-var AWAITING = { Icon: MessageIcon, border: "#fcd34d", bg: "#fffbeb", fg: "#78350f", accent: "#f59e0b" };
-var MESSAGES = {
-  OPEN: { th: "รับเรื่องแล้ว — รอทีมงานตรวจสอบ", en: "Received — waiting for the team to look" },
-  IN_PROGRESS: { th: "ทีมงานกำลังดำเนินการแก้ไข", en: "The team is working on it" },
-  RESOLVED: { th: "แก้ไขเรียบร้อยแล้ว", en: "Fixed" },
-  CLOSED: { th: "ปิดเรื่องแล้ว", en: "Closed" },
-  WONT_FIX: { th: "พิจารณาแล้ว — ยังไม่ได้ดำเนินการในขณะนี้", en: "Reviewed — not being worked on for now" }
+var DEFAULT_STYLE2 = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 6,
+  height: 38,
+  padding: "0 12px",
+  border: "none",
+  borderRadius: 8,
+  background: "transparent",
+  color: "currentColor",
+  font: "inherit",
+  cursor: "pointer"
 };
-function StatusHero({
-  ticket,
-  maps,
-  locale,
-  host
-}) {
-  const awaiting = maps.isAwaitingReply(ticket.status);
-  const tone = awaiting ? AWAITING : TONES[ticket.status] ?? TONES.OPEN;
-  const { Icon } = tone;
-  const headline = awaiting ? locale === "en" ? "The team needs more information from you" : "ทีมงานขอข้อมูลเพิ่มเติม — รอการตอบกลับจากคุณ" : maps.columnOf(ticket.status)?.description?.trim() || MESSAGES[ticket.status]?.[locale] || maps.labelOf(ticket.status);
-  const showNote = !awaiting && !ticket.messages.some((m) => m.authorRole === "AGENT") && maps.isClosed(ticket.status) && Boolean(ticket.resolutionNote?.trim());
-  return /* @__PURE__ */ jsxDEV6("section", {
-    className: "lw-hero",
-    style: { borderColor: tone.border, background: tone.bg },
-    children: [
-      /* @__PURE__ */ jsxDEV6(Icon, {
-        className: "lw-hero__icon",
-        style: { color: tone.accent }
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV6("div", {
-        className: "lw-hero__body",
-        children: [
-          /* @__PURE__ */ jsxDEV6("p", {
-            className: "lw-hero__kicker",
-            children: awaiting ? locale === "en" ? "AWAITING YOUR REPLY" : "รอการตอบกลับจากคุณ" : locale === "en" ? "LATEST STATUS" : "สถานะล่าสุด"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6("p", {
-            className: "lw-hero__headline",
-            style: { color: tone.fg },
-            children: headline
-          }, undefined, false, undefined, this),
-          awaiting && /* @__PURE__ */ jsxDEV6("p", {
-            className: "lw-hero__nudge",
-            children: locale === "en" ? "Please reply to the team in the conversation below" : "กรุณาตอบกลับให้ทีมงานในช่องแชทด้านล่าง"
-          }, undefined, false, undefined, this),
-          showNote && /* @__PURE__ */ jsxDEV6("div", {
-            className: "lw-hero__note",
-            children: [
-              /* @__PURE__ */ jsxDEV6(WrenchIcon, {
-                className: "lw-hero__wrench"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV6(TicketBody, {
-                html: ticket.resolutionNote ?? "",
-                host
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/components/ReopenPanel.tsx
-import { useState as useState2 } from "react";
-import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
-function ReopenPanel({
-  t,
-  locale,
-  busy,
-  onReopen
-}) {
-  const [open, setOpen] = useState2(false);
-  const [note, setNote] = useState2("");
-  if (!open) {
-    return /* @__PURE__ */ jsxDEV7("section", {
-      className: "lw-reopen",
-      children: /* @__PURE__ */ jsxDEV7("div", {
-        className: "lw-reopen__row",
-        children: [
-          /* @__PURE__ */ jsxDEV7("span", {
-            className: "lw-reopen__hint",
-            children: locale === "en" ? "Problem not fixed?" : "ปัญหายังไม่หาย?"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV7("button", {
-            type: "button",
-            className: "lw-reopen__open",
-            onClick: () => setOpen(true),
-            children: [
-              /* @__PURE__ */ jsxDEV7(RotateIcon, {}, undefined, false, undefined, this),
-              " ",
-              t.reopen
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV7("section", {
-    className: "lw-reopen",
-    children: [
-      /* @__PURE__ */ jsxDEV7("p", {
-        className: "lw-reopen__title",
-        children: t.reopen
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV7("textarea", {
-        className: "lw-reopen__note",
-        rows: 2,
-        value: note,
-        onChange: (event) => setNote(event.target.value),
-        placeholder: locale === "en" ? "Tell us what is still happening (optional)…" : "บอกเราหน่อยว่ายังพบปัญหาอะไร (ไม่ระบุก็ได้)…"
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV7("div", {
-        className: "lw-reopen__actions",
-        children: [
-          /* @__PURE__ */ jsxDEV7("button", {
-            type: "button",
-            className: "lw-reopen__cancel",
-            onClick: () => {
-              setOpen(false);
-              setNote("");
-            },
-            children: locale === "en" ? "Cancel" : "ยกเลิก"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV7("button", {
-            type: "button",
-            className: "lw-reopen__confirm",
-            disabled: busy,
-            onClick: () => onReopen(note.trim()),
-            children: [
-              /* @__PURE__ */ jsxDEV7(RotateIcon, {}, undefined, false, undefined, this),
-              " ",
-              busy ? t.reopening : t.reopen
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/components/TicketTimeline.tsx
-import { formatDateTime as formatDateTime2 } from "@lightworkai.official/debug-capture";
-import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
-var HAPPY = ["OPEN", "IN_PROGRESS", "RESOLVED", "CLOSED"];
-function TicketTimeline({
-  history,
-  status,
-  createdAt,
-  maps,
-  timezone,
-  locale
+function SupportPortalButton({
+  children,
+  label = "ดูปัญหาที่แจ้ง",
+  newTab = false,
+  onError,
+  className,
+  style,
+  onClick,
+  disabled,
+  ...rest
 }) {
-  const events = history.length ? history.map((h) => ({ status: h.toStatus, at: h.createdAt })) : [{ status: "OPEN", at: createdAt }];
-  const nodes = events.map((event, i) => {
-    const previous = events[i - 1];
-    return {
-      label: i === 0 ? locale === "en" ? "Reported" : "รายงานปัญหา" : maps.labelOf(event.status),
-      time: formatDateTime2(event.at, timezone, locale),
-      state: i === events.length - 1 ? "current" : "done",
-      reopened: Boolean(previous && maps.isClosed(previous.status) && !maps.isClosed(event.status))
-    };
-  });
-  const index = HAPPY.indexOf(status);
-  const upcoming = maps.isClosed(status) || index < 0 ? [] : HAPPY.slice(index + 1);
-  for (const next of upcoming) {
-    nodes.push({
-      label: maps.labelOf(next),
-      time: locale === "en" ? "Pending" : "รอดำเนินการ",
-      state: "pending",
-      reopened: false
-    });
-  }
-  return /* @__PURE__ */ jsxDEV8("ol", {
-    className: "lw-timeline",
-    children: nodes.map((node, i) => /* @__PURE__ */ jsxDEV8("li", {
-      className: "lw-node",
-      children: [
-        /* @__PURE__ */ jsxDEV8("div", {
-          className: "lw-rail",
-          children: [
-            i < nodes.length - 1 && /* @__PURE__ */ jsxDEV8("span", {
-              className: `lw-line${node.state === "pending" ? " lw-line--pending" : ""}`
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV8("span", {
-              className: `lw-dot lw-dot--${node.state}${node.reopened ? " lw-dot--reopened" : ""}`,
-              children: node.state === "current" && !node.reopened && /* @__PURE__ */ jsxDEV8("span", {
-                className: "lw-pip"
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV8("div", {
-          className: `lw-node__text${i === nodes.length - 1 ? " lw-node__text--last" : ""}`,
-          children: [
-            /* @__PURE__ */ jsxDEV8("div", {
-              className: `lw-node__label lw-node__label--${node.state}${node.reopened ? " lw-node__label--reopened" : ""}`,
-              children: [
-                node.reopened && /* @__PURE__ */ jsxDEV8(RotateIcon, {
-                  className: "lw-node__icon"
-                }, undefined, false, undefined, this),
-                node.reopened ? `${locale === "en" ? "Reopened" : "เปิดใหม่"} · ${node.label}` : node.label
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV8("div", {
-              className: "lw-node__time",
-              children: node.time
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      ]
-    }, `${node.label}-${i}`, true, undefined, this))
-  }, undefined, false, undefined, this);
-}
-
-// src/components/TicketConversation.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
-import { editMyMessage, formatDateTime as formatDateTime3 } from "@lightworkai.official/debug-capture";
-
-// src/components/RichReplyEditor.tsx
-import { forwardRef, useCallback, useImperativeHandle, useRef as useRef3, useState as useState4 } from "react";
-import { EditorContent, useEditor } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import Image2 from "@tiptap/extension-image";
-import Placeholder from "@tiptap/extension-placeholder";
-import { cleanHtml, htmlIsEmpty } from "@lightworkai.official/debug-capture";
-
-// src/components/ToolbarButton.tsx
-import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
-function ToolbarButton({ label, active, disabled, onActivate, children }) {
-  return /* @__PURE__ */ jsxDEV9("button", {
+  const [pending, setPending] = useState(false);
+  return /* @__PURE__ */ jsxDEV2("button", {
     type: "button",
-    className: `lw-tool${active ? " lw-tool--on" : ""}`,
-    title: label,
     "aria-label": label,
-    "aria-pressed": active ? "true" : "false",
-    disabled,
-    onMouseDown: (event) => {
-      event.preventDefault();
-      onActivate();
-    },
-    children
-  }, undefined, false, undefined, this);
-}
-
-// src/components/ImageAnnotatorDialog.tsx
-import { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
-import {
-  createAnnotator,
-  reporterStrings
-} from "@lightworkai.official/debug-capture";
-import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
-var TOOLS = [
-  { tool: "rect", key: "toolRect", Icon: SquareIcon },
-  { tool: "arrow", key: "toolArrow", Icon: ArrowUpRightIcon },
-  { tool: "highlight", key: "toolHighlight", Icon: HighlighterIcon },
-  { tool: "text", key: "toolText", Icon: TypeIcon }
-];
-function ImageAnnotatorDialog({ src, filename, locale, onConfirm, onCancel }) {
-  const t = reporterStrings(locale);
-  const canvas = useRef2(null);
-  const annotator = useRef2(null);
-  const [active, setActive] = useState3(null);
-  const [loading, setLoading] = useState3(true);
-  useEffect3(() => {
-    const node = canvas.current;
-    if (!node)
-      return;
-    const image = new Image;
-    image.addEventListener("load", () => {
-      node.width = image.naturalWidth;
-      node.height = image.naturalHeight;
-      annotator.current = createAnnotator(node, image, () => {
-        setActive(null);
-      });
-      setLoading(false);
-    });
-    image.src = src;
-    return () => {
-      annotator.current?.destroy();
-      annotator.current = null;
-    };
-  }, [src]);
-  function pick(tool) {
-    const next = active === tool ? null : tool;
-    setActive(next);
-    annotator.current?.setTool(next);
-  }
-  return /* @__PURE__ */ jsxDEV10("div", {
-    className: "lw-annotator",
-    role: "dialog",
-    "aria-modal": "true",
-    onClick: (event) => {
-      if (event.target === event.currentTarget)
-        onCancel();
-    },
-    children: /* @__PURE__ */ jsxDEV10("div", {
-      className: "lw-annotator__panel",
-      children: [
-        /* @__PURE__ */ jsxDEV10("div", {
-          className: "lw-annotator__head",
-          children: [
-            /* @__PURE__ */ jsxDEV10("div", {
-              className: "lw-grow",
-              children: [
-                /* @__PURE__ */ jsxDEV10("h2", {
-                  className: "lw-annotator__title",
-                  children: t.annotateTitle
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV10("p", {
-                  className: "lw-annotator__desc",
-                  children: [
-                    t.annotateHint,
-                    filename ? ` · ${filename}` : ""
-                  ]
-                }, undefined, true, undefined, this)
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV10("button", {
-              type: "button",
-              className: "lw-annotator__close",
-              "aria-label": t.cancel,
-              onClick: onCancel,
-              children: "✕"
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV10("div", {
-          className: "lw-annotator__tools",
-          children: [
-            TOOLS.map(({ tool, key, Icon }) => /* @__PURE__ */ jsxDEV10("button", {
-              type: "button",
-              className: "lw-atool",
-              "aria-pressed": active === tool,
-              disabled: loading,
-              onClick: () => pick(tool),
-              children: [
-                /* @__PURE__ */ jsxDEV10(Icon, {}, undefined, false, undefined, this),
-                " ",
-                t[key]
-              ]
-            }, tool, true, undefined, this)),
-            /* @__PURE__ */ jsxDEV10("span", {
-              className: "lw-grow"
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV10("button", {
-              type: "button",
-              className: "lw-atool lw-atool--plain",
-              disabled: loading,
-              onClick: () => {
-                annotator.current?.clear();
-                setActive(null);
-              },
-              children: [
-                /* @__PURE__ */ jsxDEV10(TrashIcon, {}, undefined, false, undefined, this),
-                " ",
-                t.clearAll
-              ]
-            }, undefined, true, undefined, this)
-          ]
-        }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV10("div", {
-          className: "lw-annotator__canvas",
-          children: /* @__PURE__ */ jsxDEV10("div", {
-            className: "lw-annotator__canvasbox",
-            children: /* @__PURE__ */ jsxDEV10("canvas", {
-              ref: canvas
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV10("p", {
-          className: "lw-annotator__hint",
-          children: t.annotateHelp
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV10("div", {
-          className: "lw-annotator__actions",
-          children: [
-            /* @__PURE__ */ jsxDEV10("span", {
-              className: "lw-grow"
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV10("button", {
-              type: "button",
-              className: "lw-btn",
-              onClick: onCancel,
-              children: t.cancel
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV10("button", {
-              type: "button",
-              className: "lw-send",
-              disabled: loading,
-              onClick: () => onConfirm(annotator.current?.toDataUrl() ?? src),
-              children: t.annotateApply
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// src/components/RichReplyEditor.tsx
-import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
-var RichReplyEditor = forwardRef(function RichReplyEditor2({ placeholder, host, disabled, labels, uploadImage, onError, locale, initial }, ref) {
-  const [uploading, setUploading] = useState4(false);
-  const fileInput = useRef3(null);
-  const [pending, setPending] = useState4(null);
-  const pendingRef = useRef3(pending);
-  pendingRef.current = pending;
-  const uploadRef = useRef3(uploadImage);
-  uploadRef.current = uploadImage;
-  const errorRef = useRef3(onError);
-  errorRef.current = onError;
-  const editor = useEditor({
-    extensions: [
-      StarterKit,
-      Image2.configure({ inline: false, allowBase64: false }),
-      Placeholder.configure({ placeholder })
-    ],
-    content: initial ?? "",
-    editable: !disabled,
-    immediatelyRender: false,
-    editorProps: {
-      attributes: { class: "lw-editor-body" },
-      handlePaste: (_view, event) => {
-        const file = Array.from(event.clipboardData?.files ?? []).find((f) => f.type.startsWith("image/"));
-        if (!file)
-          return false;
-        event.preventDefault();
-        addImage(file);
-        return true;
-      },
-      handleDrop: (_view, event) => {
-        const dropped = event;
-        const file = Array.from(dropped.dataTransfer?.files ?? []).find((f) => f.type.startsWith("image/"));
-        if (!file)
-          return false;
-        dropped.preventDefault();
-        addImage(file);
-        return true;
+    title: label,
+    className,
+    style: className ? style : { ...DEFAULT_STYLE2, ...style },
+    disabled: disabled ?? pending,
+    ...rest,
+    onClick: async (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented || pending)
+        return;
+      setPending(true);
+      try {
+        await openSupportPortal(newTab ? { target: "_blank" } : {});
+      } catch (err) {
+        onError?.(err);
+        showToast("เปิดรายการปัญหาไม่สำเร็จ", "error");
+      } finally {
+        setPending(false);
       }
-    }
-  });
-  const addImage = useCallback(async (file) => {
-    if (pendingRef.current)
-      return;
-    try {
-      setPending({ src: await readDataUri(file), name: file.name || "screenshot.png" });
-    } catch (e) {
-      errorRef.current(e instanceof Error ? e.message : "unreadable file");
-    }
-  }, []);
-  const commitImage = useCallback(async (dataUri) => {
-    const name = pendingRef.current?.name ?? "screenshot.png";
-    setPending(null);
-    setUploading(true);
-    try {
-      const src = await uploadRef.current(dataUriToFile(dataUri, name));
-      editor?.chain().focus().setImage({ src }).run();
-    } catch (e) {
-      errorRef.current(e instanceof Error ? e.message : "upload failed");
-    } finally {
-      setUploading(false);
-    }
-  }, [editor]);
-  useImperativeHandle(ref, () => ({
-    value: () => {
-      const html = cleanHtml(editor?.getHTML() ?? "", host);
-      return htmlIsEmpty(html) ? "" : html;
     },
-    clear: () => editor?.commands.clearContent(true),
-    focus: () => editor?.commands.focus()
-  }));
-  function toggleLink() {
-    if (!editor)
-      return;
-    if (editor.getAttributes("link").href) {
-      editor.chain().focus().unsetLink().run();
-      return;
-    }
-    const href = window.prompt(labels.linkPrompt, "https://");
-    if (!href)
-      return;
-    if (!/^https?:\/\//i.test(href)) {
-      onError(`${labels.link}: http(s) only`);
-      return;
-    }
-    editor.chain().focus().extendMarkRange("link").setLink({ href }).run();
-  }
-  return /* @__PURE__ */ jsxDEV11("div", {
-    className: `lw-editor${disabled ? " lw-editor--disabled" : ""}`,
-    children: [
-      /* @__PURE__ */ jsxDEV11("div", {
-        className: "lw-editor__tools",
-        children: [
-          /* @__PURE__ */ jsxDEV11(ToolbarButton, {
-            label: labels.bold ?? "",
-            active: editor?.isActive("bold"),
-            disabled,
-            onActivate: () => editor?.chain().focus().toggleBold().run(),
-            children: /* @__PURE__ */ jsxDEV11(BoldIcon, {}, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV11(ToolbarButton, {
-            label: labels.italic ?? "",
-            active: editor?.isActive("italic"),
-            disabled,
-            onActivate: () => editor?.chain().focus().toggleItalic().run(),
-            children: /* @__PURE__ */ jsxDEV11(ItalicIcon, {}, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV11(ToolbarButton, {
-            label: labels.underline ?? "",
-            active: editor?.isActive("underline"),
-            disabled,
-            onActivate: () => editor?.chain().focus().toggleUnderline().run(),
-            children: /* @__PURE__ */ jsxDEV11(UnderlineIcon, {}, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV11("span", {
-            className: "lw-editor__sep"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV11(ToolbarButton, {
-            label: labels.bulletList ?? "",
-            active: editor?.isActive("bulletList"),
-            disabled,
-            onActivate: () => editor?.chain().focus().toggleBulletList().run(),
-            children: /* @__PURE__ */ jsxDEV11(BulletListIcon, {}, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV11(ToolbarButton, {
-            label: labels.orderedList ?? "",
-            active: editor?.isActive("orderedList"),
-            disabled,
-            onActivate: () => editor?.chain().focus().toggleOrderedList().run(),
-            children: /* @__PURE__ */ jsxDEV11(OrderedListIcon, {}, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV11(ToolbarButton, {
-            label: labels.link ?? "",
-            active: editor?.isActive("link"),
-            disabled,
-            onActivate: toggleLink,
-            children: /* @__PURE__ */ jsxDEV11(LinkIcon, {}, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV11("span", {
-            className: "lw-editor__sep"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV11(ToolbarButton, {
-            label: labels.attachImage ?? "",
-            disabled: disabled || uploading,
-            onActivate: () => fileInput.current?.click(),
-            children: /* @__PURE__ */ jsxDEV11(ImageIcon, {}, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV11(EditorContent, {
-        editor,
-        className: "lw-editor__content"
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV11("input", {
-        ref: fileInput,
-        type: "file",
-        accept: "image/*",
-        hidden: true,
-        onChange: (event) => {
-          const file = event.target.files?.[0];
-          event.target.value = "";
-          if (file)
-            addImage(file);
-        }
-      }, undefined, false, undefined, this),
-      pending && /* @__PURE__ */ jsxDEV11(ImageAnnotatorDialog, {
-        src: pending.src,
-        filename: pending.name,
-        locale,
-        onConfirm: (dataUri) => void commitImage(dataUri),
-        onCancel: () => setPending(null)
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-});
-function readDataUri(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader;
-    reader.addEventListener("load", () => typeof reader.result === "string" ? resolve(reader.result) : reject(new Error("unreadable file")));
-    reader.addEventListener("error", () => reject(new Error("unreadable file")));
-    reader.readAsDataURL(file);
-  });
-}
-function dataUriToFile(dataUri, name) {
-  const [header, encoded] = dataUri.split(",");
-  const type = /data:([^;]+)/.exec(header ?? "")?.[1] ?? "image/png";
-  const binary = atob(encoded ?? "");
-  const bytes = new Uint8Array(binary.length);
-  for (let i = 0;i < binary.length; i += 1)
-    bytes[i] = binary.charCodeAt(i);
-  return new File([bytes], name, { type });
-}
-
-// src/components/TicketConversation.tsx
-import { jsxDEV as jsxDEV12, Fragment as Fragment3 } from "react/jsx-dev-runtime";
-function TicketConversation({
-  ticket,
-  t,
-  host,
-  timezone,
-  locale,
-  sending,
-  uploadImage,
-  onSend,
-  onEdited,
-  onError
-}) {
-  const editor = useRef4(null);
-  const [editingId, setEditingId] = useState5(null);
-  const [savingEdit, setSavingEdit] = useState5(false);
-  const draft = useRef4(null);
-  const LABELS = {
-    bold: t.bold,
-    italic: t.italic,
-    underline: t.underline,
-    bulletList: t.bulletList,
-    orderedList: t.orderedList,
-    link: t.link,
-    linkPrompt: t.linkPrompt,
-    attachImage: t.attachImage,
-    uploading: t.uploading
-  };
-  async function saveEdit(messageId) {
-    const body = draft.current?.value() ?? "";
-    if (!body || savingEdit)
-      return;
-    setSavingEdit(true);
-    try {
-      await editMyMessage(ticket.id, messageId, body);
-      setEditingId(null);
-      onEdited();
-    } catch (e) {
-      onError(e instanceof Error ? e.message : t.sendFailed);
-    } finally {
-      setSavingEdit(false);
-    }
-  }
-  const thread = useRef4(null);
-  const seen = useRef4(-1);
-  useEffect4(() => {
-    const box = thread.current;
-    if (!box)
-      return;
-    const first = seen.current < 0;
-    if (first || ticket.messages.length > seen.current) {
-      box.scrollTop = box.scrollHeight;
-      if (!first)
-        box.lastElementChild?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-    }
-    seen.current = ticket.messages.length;
-  }, [ticket.id, ticket.messages.length]);
-  function send() {
-    const body = editor.current?.value() ?? "";
-    if (!body || sending)
-      return;
-    onSend(body);
-    editor.current?.clear();
-  }
-  return /* @__PURE__ */ jsxDEV12("section", {
-    className: "lw-card",
-    children: [
-      /* @__PURE__ */ jsxDEV12("h3", {
-        className: "lw-card__title",
-        children: t.conversation
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12("div", {
-        ref: thread,
-        className: "lw-thread",
-        children: [
-          ticket.messages.length === 0 && /* @__PURE__ */ jsxDEV12("p", {
-            className: "lw-thread__empty",
-            children: t.noMessages
-          }, undefined, false, undefined, this),
-          ticket.messages.map((message) => /* @__PURE__ */ jsxDEV12("article", {
-            className: `lw-msg${message.authorRole === "REPORTER" ? " lw-msg--mine" : ""}`,
-            children: /* @__PURE__ */ jsxDEV12("div", {
-              className: "lw-msg__bubble",
-              children: [
-                /* @__PURE__ */ jsxDEV12("p", {
-                  className: "lw-msg__meta",
-                  children: [
-                    message.authorRole === "AGENT" ? /* @__PURE__ */ jsxDEV12("span", {
-                      className: "lw-msg__who",
-                      children: t.team
-                    }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV12(Fragment3, {
-                      children: [
-                        /* @__PURE__ */ jsxDEV12("span", {
-                          className: "lw-msg__who",
-                          children: message.authorName || t.you
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("span", {
-                          className: "lw-msg__role",
-                          children: t.reporterRole
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("span", {
-                      children: [
-                        "· ",
-                        formatDateTime3(message.createdAt, timezone, locale)
-                      ]
-                    }, undefined, true, undefined, this),
-                    message.editedAt && /* @__PURE__ */ jsxDEV12("span", {
-                      className: "lw-msg__edited",
-                      children: [
-                        "· ",
-                        t.edited
-                      ]
-                    }, undefined, true, undefined, this),
-                    message.authorRole === "REPORTER" && editingId !== message.id && /* @__PURE__ */ jsxDEV12("button", {
-                      type: "button",
-                      className: "lw-msg__edit",
-                      onClick: () => setEditingId(message.id),
-                      children: [
-                        /* @__PURE__ */ jsxDEV12(PencilIcon, {}, undefined, false, undefined, this),
-                        " ",
-                        t.edit
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                editingId === message.id ? /* @__PURE__ */ jsxDEV12("div", {
-                  className: "lw-msg__editing",
-                  children: [
-                    /* @__PURE__ */ jsxDEV12(RichReplyEditor, {
-                      ref: draft,
-                      placeholder: t.replyPlaceholder,
-                      host,
-                      locale,
-                      disabled: savingEdit,
-                      uploadImage,
-                      onError,
-                      labels: LABELS,
-                      initial: message.body
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("div", {
-                      className: "lw-msg__editActions",
-                      children: [
-                        /* @__PURE__ */ jsxDEV12("button", {
-                          type: "button",
-                          className: "lw-btn",
-                          disabled: savingEdit,
-                          onClick: () => setEditingId(null),
-                          children: [
-                            /* @__PURE__ */ jsxDEV12(XSmallIcon, {}, undefined, false, undefined, this),
-                            " ",
-                            t.cancel
-                          ]
-                        }, undefined, true, undefined, this),
-                        /* @__PURE__ */ jsxDEV12("button", {
-                          type: "button",
-                          className: "lw-send",
-                          disabled: savingEdit,
-                          onClick: () => void saveEdit(message.id),
-                          children: [
-                            /* @__PURE__ */ jsxDEV12(CheckSmallIcon, {}, undefined, false, undefined, this),
-                            " ",
-                            t.saveEdit
-                          ]
-                        }, undefined, true, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV12(TicketBody, {
-                  html: message.body,
-                  host
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, message.id, false, undefined, this))
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV12("div", {
-        className: "lw-composer",
-        children: [
-          /* @__PURE__ */ jsxDEV12(RichReplyEditor, {
-            ref: editor,
-            placeholder: t.replyPlaceholder,
-            host,
-            locale,
-            disabled: sending,
-            uploadImage,
-            onError,
-            labels: LABELS
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV12("div", {
-            className: "lw-composer__actions",
-            children: /* @__PURE__ */ jsxDEV12("button", {
-              type: "button",
-              className: "lw-send",
-              disabled: sending,
-              onClick: send,
-              children: [
-                /* @__PURE__ */ jsxDEV12(SendIcon, {}, undefined, false, undefined, this),
-                " ",
-                sending ? t.sending : t.send
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/components/TicketScreenshots.tsx
-import { useEffect as useEffect5, useState as useState6 } from "react";
-import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
-function TicketScreenshots({
-  images,
-  title,
-  attachmentUrl
-}) {
-  const [urls, setUrls] = useState6({});
-  useEffect5(() => {
-    let live = true;
-    for (const image of images) {
-      attachmentUrl(image.id).then((url) => live && setUrls((prev) => ({ ...prev, [image.id]: url })), () => {
-        return;
-      });
-    }
-    return () => {
-      live = false;
-    };
-  }, [images, attachmentUrl]);
-  return /* @__PURE__ */ jsxDEV13("section", {
-    className: "lw-card",
-    children: [
-      /* @__PURE__ */ jsxDEV13("h3", {
-        className: "lw-card__title",
-        children: title
-      }, undefined, false, undefined, this),
-      images.map((image) => urls[image.id] ? /* @__PURE__ */ jsxDEV13("img", {
-        className: "lw-shot",
-        src: urls[image.id],
-        alt: image.filename ?? ""
-      }, image.id, false, undefined, this) : null)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/components/TicketDetail.tsx
-import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
-function TicketDetail(props) {
-  const { ticket, config, maps, t, host, locale } = props;
-  const lang = locale === "en" ? "en" : "th";
-  const canReopen = maps.isClosed(ticket.status) && config.featureFlags.selfServiceReopen === true;
-  const updated = ticket.updatedAt && ticket.updatedAt !== ticket.createdAt;
-  const when = (iso) => formatDateTime4(iso, config.timezone, locale);
-  const screenshots = ticket.attachments.filter((a) => (a.contentType ?? "").startsWith("image/"));
-  return /* @__PURE__ */ jsxDEV14("div", {
-    className: "lw-detail",
-    children: [
-      /* @__PURE__ */ jsxDEV14("button", {
-        type: "button",
-        className: "lw-back",
-        onClick: props.onBack,
-        children: [
-          /* @__PURE__ */ jsxDEV14(ArrowLeftIcon, {}, undefined, false, undefined, this),
-          " ",
-          t.back
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV14("section", {
-        className: "lw-card",
-        children: [
-          /* @__PURE__ */ jsxDEV14("h3", {
-            className: "lw-card__heading",
-            children: ticket.title
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV14("div", {
-            className: "lw-facts",
-            children: [
-              /* @__PURE__ */ jsxDEV14("span", {
-                className: "lw-key",
-                children: ticketKey2(config.realm.slug, ticket.number)
-              }, undefined, false, undefined, this),
-              ticket.category && /* @__PURE__ */ jsxDEV14("span", {
-                className: "lw-chip",
-                children: ticket.category
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV14("span", {
-                children: [
-                  t.colCreated,
-                  " ",
-                  when(ticket.createdAt)
-                ]
-              }, undefined, true, undefined, this),
-              updated && /* @__PURE__ */ jsxDEV14("span", {
-                children: [
-                  t.colUpdated,
-                  " ",
-                  when(ticket.updatedAt)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          ticket.description && /* @__PURE__ */ jsxDEV14(TicketBody, {
-            className: "lw-intro",
-            html: ticket.description,
-            host
-          }, undefined, false, undefined, this),
-          ticket.routeUrl && /* @__PURE__ */ jsxDEV14("p", {
-            className: "lw-route",
-            children: [
-              t.page,
-              ":",
-              " ",
-              /* @__PURE__ */ jsxDEV14("a", {
-                href: ticket.routeUrl,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                children: ticket.routeUrl
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV14(StatusHero, {
-        ticket,
-        maps,
-        t,
-        locale: lang,
-        host
-      }, undefined, false, undefined, this),
-      canReopen && /* @__PURE__ */ jsxDEV14(ReopenPanel, {
-        t,
-        locale: lang,
-        busy: props.reopening,
-        onReopen: props.onReopen
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV14("section", {
-        className: "lw-card",
-        children: [
-          /* @__PURE__ */ jsxDEV14("h3", {
-            className: "lw-card__title",
-            children: lang === "en" ? "Progress" : "ความคืบหน้า"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV14(TicketTimeline, {
-            history: props.history,
-            status: ticket.status,
-            createdAt: ticket.createdAt,
-            maps,
-            timezone: config.timezone,
-            locale: lang
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV14(TicketConversation, {
-        ticket,
-        t,
-        host,
-        timezone: config.timezone,
-        locale,
-        sending: props.sending,
-        uploadImage: props.uploadImage,
-        onSend: props.onSend,
-        onEdited: props.onEdited,
-        onError: props.onError
-      }, undefined, false, undefined, this),
-      screenshots.length > 0 && /* @__PURE__ */ jsxDEV14(TicketScreenshots, {
-        images: screenshots,
-        title: lang === "en" ? "Screenshots you sent" : "ภาพหน้าจอที่คุณแจ้ง",
-        attachmentUrl: props.attachmentUrl
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/components/MyTicketsPanel.tsx
-import { jsxDEV as jsxDEV15 } from "react/jsx-dev-runtime";
-function safeConfig(read, fallback) {
-  try {
-    return read();
-  } catch {
-    return fallback;
-  }
-}
-function MyTicketsPanel({ refreshKey, hideTitle, onReplied, onReopened, onError }) {
-  const locale = safeConfig(() => getConfig().locale, undefined);
-  const host = safeConfig(() => getConfig().host, "");
-  const t = useMemo2(() => ticketStrings(locale), [locale]);
-  const [items, setItems] = useState7([]);
-  const [config, setConfig] = useState7(null);
-  const [loading, setLoading] = useState7(true);
-  const [error, setError] = useState7(null);
-  const [noIdentity, setNoIdentity] = useState7(false);
-  const [keyword, setKeyword] = useState7("");
-  const [applied, setApplied] = useState7("");
-  const [statusFilter, setStatusFilter] = useState7("");
-  const [sort, setSort] = useState7({ key: "createdAt", direction: "desc" });
-  const [page, setPage] = useState7(1);
-  const [shown, setShown] = useState7(0);
-  const [detail, setDetail] = useState7(null);
-  const [history, setHistory] = useState7([]);
-  const [detailError, setDetailError] = useState7(null);
-  const [detailLoading, setDetailLoading] = useState7(false);
-  const [sending, setSending] = useState7(false);
-  const [reopening, setReopening] = useState7(false);
-  const maps = useMemo2(() => statusMaps(config?.statusColumns ?? [], t.allStatuses), [config, t]);
-  const report = useRef5(onError);
-  report.current = onError;
-  const load = useCallback2(async () => {
-    setLoading(true);
-    setError(null);
-    setNoIdentity(false);
-    try {
-      const [realm, list] = await Promise.all([fetchRealmConfig(), listMyTickets()]);
-      setConfig(realm);
-      setItems(list);
-    } catch (e) {
-      if (e instanceof NoIdentityError)
-        setNoIdentity(true);
-      else
-        setError(e instanceof Error ? e.message : t.listFailed);
-    } finally {
-      setLoading(false);
-    }
-  }, [t]);
-  useEffect6(() => {
-    load();
-  }, [load, refreshKey]);
-  useEffect6(() => {
-    const timer = setTimeout(() => {
-      setApplied(keyword);
-      setPage(1);
-    }, 300);
-    return () => clearTimeout(timer);
-  }, [keyword]);
-  const reload = useCallback2(async (id) => {
-    try {
-      const [found, events] = await Promise.all([
-        getMyTicket(id),
-        getMyTicketHistory(id).catch(() => [])
-      ]);
-      setDetail(found);
-      setHistory(events);
-      return found;
-    } catch (e) {
-      setDetailError(e instanceof Error ? e.message : t.detailFailed);
-      return null;
-    }
-  }, [t]);
-  const open = useCallback2(async (id) => {
-    setDetail(null);
-    setHistory([]);
-    setDetailError(null);
-    setDetailLoading(true);
-    try {
-      return await reload(id);
-    } finally {
-      setDetailLoading(false);
-    }
-  }, [reload]);
-  function back() {
-    setDetail(null);
-    load();
-  }
-  function toggleSort(key) {
-    setSort((current) => current.key === key ? { key, direction: current.direction === "asc" ? "desc" : "asc" } : { key, direction: key === "createdAt" || key === "updatedAt" ? "desc" : "asc" });
-  }
-  async function send(body) {
-    if (!detail || sending)
-      return;
-    setSending(true);
-    try {
-      await replyToTicket(detail.id, body);
-      const fresh = await reload(detail.id);
-      if (fresh)
-        onReplied?.(fresh);
-    } catch (e) {
-      report.current?.(e instanceof Error ? e.message : t.sendFailed);
-    } finally {
-      setSending(false);
-    }
-  }
-  async function reopen(note) {
-    if (!detail || reopening)
-      return;
-    setReopening(true);
-    try {
-      await reopenMyTicket(detail.id, note);
-      const fresh = await reload(detail.id);
-      if (fresh)
-        onReopened?.(fresh);
-    } catch (e) {
-      report.current?.(e instanceof Error ? e.message : t.reopenFailed);
-    } finally {
-      setReopening(false);
-    }
-  }
-  const uploadImage = useCallback2(async (file) => {
-    if (!detail)
-      throw new Error("no ticket");
-    const dataUri = await readDataUri2(file);
-    const stored = await uploadInlineImage(detail.id, dataUri, file.name);
-    return stored.url;
-  }, [detail]);
-  const attachmentUrl = useCallback2((id) => getAttachmentUrl(id).then((found) => found.url), []);
-  if (detailLoading) {
-    return /* @__PURE__ */ jsxDEV15("div", {
-      className: "lw-panel",
-      children: [
-        /* @__PURE__ */ jsxDEV15("div", {
-          className: "lw-skeleton"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV15("div", {
-          className: "lw-skeleton"
-        }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this);
-  }
-  if (detailError) {
-    return /* @__PURE__ */ jsxDEV15("div", {
-      className: "lw-panel",
-      children: /* @__PURE__ */ jsxDEV15("p", {
-        className: "lw-state lw-state--error",
-        children: detailError
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this);
-  }
-  if (detail && config) {
-    return /* @__PURE__ */ jsxDEV15("div", {
-      className: "lw-panel",
-      children: /* @__PURE__ */ jsxDEV15(TicketDetail, {
-        ticket: detail,
-        history,
-        config,
-        maps,
-        t,
-        host,
-        locale,
-        sending,
-        reopening,
-        uploadImage,
-        attachmentUrl,
-        onBack: back,
-        onSend: send,
-        onEdited: () => void reload(detail.id),
-        onReopen: reopen,
-        onError: (message) => report.current?.(message)
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV15("div", {
-    className: "lw-panel",
-    children: [
-      !hideTitle && /* @__PURE__ */ jsxDEV15("h2", {
-        className: "lw-panel__title",
-        children: t.title
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV15("p", {
-        className: "lw-panel__intro",
-        children: t.intro
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV15("div", {
-        className: "lw-controls",
-        children: [
-          /* @__PURE__ */ jsxDEV15("div", {
-            className: "lw-search",
-            children: [
-              /* @__PURE__ */ jsxDEV15(SearchIcon, {
-                className: "lw-search__icon"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV15("input", {
-                type: "search",
-                className: "lw-input lw-search__field",
-                placeholder: t.searchPlaceholder,
-                "aria-label": t.searchLabel,
-                value: keyword,
-                onChange: (event) => setKeyword(event.target.value)
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV15("select", {
-            className: "lw-input",
-            value: statusFilter,
-            onChange: (event) => {
-              setStatusFilter(event.target.value);
-              setPage(1);
-            },
-            children: maps.options.map((option) => /* @__PURE__ */ jsxDEV15("option", {
-              value: option.value,
-              children: option.label
-            }, option.value, false, undefined, this))
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV15("span", {
-            className: "lw-count",
-            children: t.count(shown)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      noIdentity ? /* @__PURE__ */ jsxDEV15("p", {
-        className: "lw-state",
-        children: t.signedOut
-      }, undefined, false, undefined, this) : loading ? /* @__PURE__ */ jsxDEV15("div", {
-        children: [0, 1, 2, 3].map((n) => /* @__PURE__ */ jsxDEV15("div", {
-          className: "lw-skeleton"
-        }, n, false, undefined, this))
-      }, undefined, false, undefined, this) : error ? /* @__PURE__ */ jsxDEV15("p", {
-        className: "lw-state lw-state--error",
-        children: [
-          /* @__PURE__ */ jsxDEV15(AlertIcon, {}, undefined, false, undefined, this),
-          " ",
-          error,
-          /* @__PURE__ */ jsxDEV15("button", {
-            type: "button",
-            className: "lw-retry",
-            onClick: () => void load(),
-            children: t.retry
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV15(TicketTable, {
-        items,
-        maps,
-        t,
-        slug: config?.realm.slug,
-        timezone: config?.timezone ?? "Asia/Bangkok",
-        locale,
-        keyword: applied,
-        statusFilter,
-        sort,
-        page,
-        onOpen: (id) => void open(id),
-        onSort: toggleSort,
-        onPage: setPage,
-        onCount: setShown
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-function readDataUri2(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader;
-    reader.addEventListener("load", () => typeof reader.result === "string" ? resolve(reader.result) : reject(new Error("unreadable file")));
-    reader.addEventListener("error", () => reject(new Error("unreadable file")));
-    reader.readAsDataURL(file);
-  });
+    children: typeof children === "function" ? children({ pending }) : children ?? label
+  }, undefined, false, undefined, this);
 }
 
 // src/index.ts
@@ -1692,14 +186,8 @@ export {
   onCrash,
   launch2 as launch,
   configureDebugCapture2 as configureDebugCapture,
-  TicketTable,
-  TicketDetail,
-  TicketConversation,
-  TicketBody,
-  RichReplyEditor,
+  SupportPortalButton,
   ReportProblemButton,
-  MyTicketsPanel,
-  ImageAnnotatorDialog,
   DebugErrorBoundary,
   DebugCaptureInit
 };