@lightworkai.official/debug-capture-react 0.6.0

package/src/components/TicketTimeline.tsx

@@ -0,0 +1,81 @@
+/**
+ * The lifecycle, chronologically — including a reopen, which is the event a
+ * fixed happy-path progress bar hides and the one a reporter most wants to see
+ * recorded.
+ */
+import { formatDateTime, type StatusEvent, type StatusMaps } from "@lightworkai.official/debug-capture";
+import { RotateIcon } from "./icons";
+
+/** The forward happy path, for the stages still to come. */
+const HAPPY = ["OPEN", "IN_PROGRESS", "RESOLVED", "CLOSED"];
+
+interface Node {
+  label: string;
+  time: string;
+  state: "done" | "current" | "pending";
+  reopened: boolean;
+}
+
+export function TicketTimeline({
+  history, status, createdAt, maps, timezone, locale,
+}: {
+  history: StatusEvent[];
+  status: string;
+  createdAt: string;
+  maps: StatusMaps;
+  timezone: string;
+  locale: "th" | "en";
+}) {
+  const events = history.length
+    ? history.map((h) => ({ status: h.toStatus, at: h.createdAt }))
+    : // A row from before history was recorded still gets one node rather than
+      // an empty section.
+      [{ status: "OPEN", at: createdAt }];
+
+  const nodes: Node[] = events.map((event, i) => {
+    const previous = events[i - 1];
+    return {
+      label: i === 0 ? (locale === "en" ? "Reported" : "รายงานปัญหา") : maps.labelOf(event.status),
+      time: formatDateTime(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 (
+    <ol className="lw-timeline">
+      {nodes.map((node, i) => (
+        <li key={`${node.label}-${i}`} className="lw-node">
+          <div className="lw-rail">
+            {i < nodes.length - 1 && (
+              <span className={`lw-line${node.state === "pending" ? " lw-line--pending" : ""}`} />
+            )}
+            <span className={`lw-dot lw-dot--${node.state}${node.reopened ? " lw-dot--reopened" : ""}`}>
+              {node.state === "current" && !node.reopened && <span className="lw-pip" />}
+            </span>
+          </div>
+          <div className={`lw-node__text${i === nodes.length - 1 ? " lw-node__text--last" : ""}`}>
+            <div
+              className={`lw-node__label lw-node__label--${node.state}${node.reopened ? " lw-node__label--reopened" : ""}`}
+            >
+              {node.reopened && <RotateIcon className="lw-node__icon" />}
+              {node.reopened ? `${locale === "en" ? "Reopened" : "เปิดใหม่"} · ${node.label}` : node.label}
+            </div>
+            <div className="lw-node__time">{node.time}</div>
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/src/components/ToolbarButton.tsx

@@ -0,0 +1,37 @@
+/**
+ * One editor toolbar button.
+ *
+ * It fires on `mousedown` with the default prevented, not on `click`, and that
+ * is the whole reason it is a component rather than a `<button>` repeated seven
+ * times: a toolbar button taking focus collapses the editor's selection, so by
+ * the time `click` fires the command has nothing to apply to. Getting that
+ * wrong is invisible until someone selects a word and presses B.
+ */
+import type { ReactNode } from "react";
+
+export interface ToolbarButtonProps {
+  label: string;
+  active?: boolean;
+  disabled?: boolean;
+  onActivate: () => void;
+  children: ReactNode;
+}
+
+export function ToolbarButton({ label, active, disabled, onActivate, children }: ToolbarButtonProps) {
+  return (
+    <button
+      type="button"
+      className={`lw-tool${active ? " lw-tool--on" : ""}`}
+      title={label}
+      aria-label={label}
+      aria-pressed={active ? "true" : "false"}
+      disabled={disabled}
+      onMouseDown={(event) => {
+        event.preventDefault();
+        onActivate();
+      }}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/icons.tsx

@@ -0,0 +1,79 @@
+/**
+ * The panel's icons, drawn rather than imported.
+ *
+ * The original uses lucide, and a package that pulled an icon set in so a reply
+ * box could show a B would cost every consumer that dependency. These are the
+ * same lucide paths at the same 24-unit scale.
+ */
+import type { SVGProps } from "react";
+
+function glyph(paths: string[], size = 15) {
+  return function Icon(props: SVGProps<SVGSVGElement>) {
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        {...props}
+      >
+        {paths.map((d) => (
+          <path key={d} d={d} />
+        ))}
+      </svg>
+    );
+  };
+}
+
+export const BoldIcon = glyph(["M6 4h8a4 4 0 0 1 0 8H6z", "M6 12h9a4 4 0 0 1 0 8H6z"]);
+export const ItalicIcon = glyph(["M19 4h-9", "M14 20H5", "M15 4L9 20"]);
+export const UnderlineIcon = glyph(["M6 4v6a6 6 0 0 0 12 0V4", "M4 20h16"]);
+export const BulletListIcon = glyph(["M8 6h13", "M8 12h13", "M8 18h13", "M3 6h.01", "M3 12h.01", "M3 18h.01"]);
+export const OrderedListIcon = glyph(["M10 6h11", "M10 12h11", "M10 18h11", "M4 6h1v4", "M4 10h2", "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"]);
+export const 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",
+]);
+export const 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",
+]);
+export const SendIcon = glyph(["M22 2L11 13", "M22 2l-7 20-4-9-9-4 20-7z"]);
+export const SearchIcon = glyph(["M21 21l-4.34-4.34", "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"], 16);
+export const ArrowLeftIcon = glyph(["M19 12H5", "M12 19l-7-7 7-7"], 14);
+export const CheckIcon = glyph(["M20 6L9 17l-5-5"], 12);
+export const 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);
+export const RotateIcon = glyph(["M3 12a9 9 0 1 0 3-6.7L3 8", "M3 3v5h5"], 14);
+export const AlertIcon = glyph(["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 8v4", "M12 16h.01"], 16);
+export const 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);
+export const ClockIcon = glyph(["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 6v6l4 2"], 22);
+export const CheckCircleIcon = glyph(["M22 11.08V12a10 10 0 1 1-5.93-9.14", "M22 4L12 14.01l-3-3"], 22);
+export const 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);
+export const 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);
+
+/* The annotator toolbar — the same four tools the app's dialog offers. */
+export const 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);
+export const ArrowUpRightIcon = glyph(["M7 17L17 7", "M7 7h10v10"], 14);
+export const 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);
+export const TypeIcon = glyph(["M4 7V4h16v3", "M9 20h6", "M12 4v16"], 14);
+export const 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);
+export const PencilIcon = glyph(["M12 20h9", "M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"], 11);
+export const CheckSmallIcon = glyph(["M20 6L9 17l-5-5"], 12);
+export const XSmallIcon = glyph(["M18 6L6 18", "M6 6l12 12"], 12);

package/src/crash.ts

@@ -0,0 +1,15 @@
+import { emitCrash } from "@lightworkai.official/debug-capture";
+
+/**
+ * Announce a render crash on the same channel as an uncaught error, so a host
+ * that already listens for crashes gets these too without a second wiring.
+ */
+export function emitCrashFromBoundary(error: Error, componentStack?: string): void {
+  emitCrash({
+    type: "framework-error",
+    message: error.message,
+    // The component stack is what makes a React crash locatable; the JS stack
+    // usually points into the renderer.
+    stack: componentStack ? `${error.stack ?? ""}\n\nComponent stack:${componentStack}` : error.stack,
+  });
+}

package/src/index.ts

@@ -0,0 +1,27 @@
+/**
+ * React bindings for @lightworkai.official/debug-capture.
+ *
+ * Thin on purpose: the dialog, the annotator and the capture all live in the
+ * core as one custom element, so these three components are a mount, a click
+ * and an error boundary. Everything a Vue or Angular host gets, a React host
+ * gets from the same code.
+ */
+export { DebugCaptureInit } from "./DebugCaptureInit";
+export type { DebugCaptureInitProps } from "./DebugCaptureInit";
+export { ReportProblemButton } from "./ReportProblemButton";
+export type { ReportProblemButtonProps } from "./ReportProblemButton";
+export { DebugErrorBoundary } from "./DebugErrorBoundary";
+export { MyTicketsPanel } from "./components/MyTicketsPanel";
+export type { MyTicketsPanelProps } from "./components/MyTicketsPanel";
+
+// Composable pieces, for a host that wants to arrange them itself.
+export { TicketTable } from "./components/TicketTable";
+export { TicketDetail } from "./components/TicketDetail";
+export { TicketConversation } from "./components/TicketConversation";
+export { RichReplyEditor } from "./components/RichReplyEditor";
+export { TicketBody } from "./components/TicketBody";
+export { ImageAnnotatorDialog } from "./components/ImageAnnotatorDialog";
+
+// Re-exported so a host needs one import, not two.
+export { configureDebugCapture, launch, onCrash } from "@lightworkai.official/debug-capture";
+export type { DebugCaptureConfig, DebugReason, ErroredQuery, MyTicketListItem, MyTicketDetail } from "@lightworkai.official/debug-capture";