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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightworkai.official/debug-capture-react",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "React bindings for @lightworkai.official/debug-capture",
   "type": "module",
   "module": "./dist/index.mjs",
@@ -24,7 +24,7 @@
   },
   "peerDependencies": {
     "react": ">=17",
-    "@lightworkai.official/debug-capture": "^0.6.0",
+    "@lightworkai.official/debug-capture": "^0.7.0",
     "@tiptap/react": "^3",
     "@tiptap/starter-kit": "^3",
     "@tiptap/extension-image": "^3",

package/src/SupportPortalButton.tsx

@@ -0,0 +1,80 @@
+/**
+ * "ดูปัญหาที่แจ้ง" — hands the current user to their tickets on the support host,
+ * already signed in.
+ *
+ * Unlike the reporter button this one awaits: the token comes from the host's
+ * own server at click time, because it lives about two minutes and is spent on
+ * arrival. So it has a pending state, and a failure path — most often "nobody
+ * is signed in", which is the host's question to answer and not ours.
+ */
+import { useState, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from "react";
+import { openSupportPortal, showToast } from "@lightworkai.official/debug-capture";
+
+export interface SupportPortalButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  children?: ReactNode | ((state: { pending: boolean }) => ReactNode);
+  label?: string;
+  /** Open in a new tab instead of navigating away. */
+  newTab?: boolean;
+  onError?: (err: unknown) => void;
+}
+
+/** Same reasoning as ReportProblemButton: presentable, and `className` replaces it whole. */
+const DEFAULT_STYLE: CSSProperties = {
+  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",
+};
+
+export function SupportPortalButton({
+  children,
+  label = "ดูปัญหาที่แจ้ง",
+  newTab = false,
+  onError,
+  className,
+  style,
+  onClick,
+  disabled,
+  ...rest
+}: SupportPortalButtonProps) {
+  const [pending, setPending] = useState(false);
+
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      className={className}
+      // Pulled out of the spread deliberately: `{...rest}` after this would put
+      // the caller's undefined `style` back over the default and undo it.
+      style={className ? style : { ...DEFAULT_STYLE, ...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 {
+          // Only reached when navigation did not happen; on success the page is
+          // already on its way out.
+          setPending(false);
+        }
+      }}
+    >
+      {typeof children === "function" ? children({ pending }) : (children ?? label)}
+    </button>
+  );
+}

package/src/index.ts

@@ -11,17 +11,18 @@ 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";
+/*
+ * The reporter's own tickets are no longer components this package ships.
+ *
+ * They were: a list, a thread, a reply editor and an annotator dialog, in three
+ * frameworks, over a read API. It worked, and it meant every change to the way
+ * a ticket looks had to land in four repositories. The support host already
+ * renders that screen, so the library hands people to it instead — one button.
+ * See SupportPortalButton, and the core's `openSupportPortal`.
+ */
+export { SupportPortalButton } from "./SupportPortalButton";
+export type { SupportPortalButtonProps } from "./SupportPortalButton";
 
 // 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";
+export type { DebugCaptureConfig, DebugReason, ErroredQuery } from "@lightworkai.official/debug-capture";

package/dist/components/ImageAnnotatorDialog.d.ts

@@ -1,11 +0,0 @@
-export interface ImageAnnotatorDialogProps {
-    /** The picked image, as a same-origin data URI. */
-    src: string;
-    /** Shown in the description, as the app's dialog does. */
-    filename?: string;
-    locale: "th" | "en" | undefined;
-    /** The annotated image, at full resolution. */
-    onConfirm: (dataUri: string) => void;
-    onCancel: () => void;
-}
-export declare function ImageAnnotatorDialog({ src, filename, locale, onConfirm, onCancel }: ImageAnnotatorDialogProps): import("react").JSX.Element;

package/dist/components/MyTicketsPanel.d.ts

@@ -1,11 +0,0 @@
-import { type MyTicketDetail } from "@lightworkai.official/debug-capture";
-export interface MyTicketsPanelProps {
-    /** Change it to re-read the list — after filing a report, say. */
-    refreshKey?: string | number;
-    /** Hide the panel's own heading when the host page already has one. */
-    hideTitle?: boolean;
-    onReplied?: (ticket: MyTicketDetail) => void;
-    onReopened?: (ticket: MyTicketDetail) => void;
-    onError?: (message: string) => void;
-}
-export declare function MyTicketsPanel({ refreshKey, hideTitle, onReplied, onReopened, onError }: MyTicketsPanelProps): import("react").JSX.Element;

package/dist/components/ReopenPanel.d.ts

@@ -1,7 +0,0 @@
-import type { TicketStrings } from "@lightworkai.official/debug-capture";
-export declare function ReopenPanel({ t, locale, busy, onReopen, }: {
-    t: TicketStrings;
-    locale: "th" | "en";
-    busy?: boolean;
-    onReopen: (note: string) => void;
-}): import("react").JSX.Element;

package/dist/components/RichReplyEditor.d.ts

@@ -1,29 +0,0 @@
-/**
- * The toolbar's words.
- *
- * An open map because the toolbar is configurable — a host asking for `strike`
- * or `blockquote` needs a label for it, and enumerating every possible control
- * here would mean editing this type every time one is added.
- */
-export type EditorLabels = Record<string, string>;
-export interface RichReplyEditorHandle {
-    /** Sanitised HTML, or "" when there is nothing worth sending. */
-    value: () => string;
-    clear: () => void;
-    focus: () => void;
-}
-export interface RichReplyEditorProps {
-    placeholder: string;
-    /** Support host origin — the sanitiser resolves inline image URLs against it. */
-    host: string;
-    disabled?: boolean;
-    labels: EditorLabels;
-    /** Store an image and return the URL to reference it by. */
-    uploadImage: (file: File) => Promise<string>;
-    onError: (message: string) => void;
-    /** UI language, for the annotator's own labels. */
-    locale?: "th" | "en";
-    /** Content to start from — editing an existing message rather than writing one. */
-    initial?: string;
-}
-export declare const RichReplyEditor: import("react").ForwardRefExoticComponent<RichReplyEditorProps & import("react").RefAttributes<RichReplyEditorHandle>>;

package/dist/components/StatusHero.d.ts

@@ -1,8 +0,0 @@
-import type { MyTicketDetail, StatusMaps, TicketStrings } from "@lightworkai.official/debug-capture";
-export declare function StatusHero({ ticket, maps, locale, host, }: {
-    ticket: MyTicketDetail;
-    maps: StatusMaps;
-    t: TicketStrings;
-    locale: "th" | "en";
-    host: string;
-}): import("react").JSX.Element;

package/dist/components/StatusPill.d.ts

@@ -1,14 +0,0 @@
-/**
- * A status as the realm coloured it.
- *
- * The tone arrives as DATA — a realm adds lanes whenever it likes — so it is an
- * inline style rather than a class. No stylesheet could know the names ahead of
- * time.
- */
-export declare function StatusPill({ label, tone }: {
-    label: string;
-    tone: {
-        fg: string;
-        bg: string;
-    };
-}): import("react").JSX.Element;

package/dist/components/TicketBody.d.ts

@@ -1,5 +0,0 @@
-export declare function TicketBody({ html, host, className }: {
-    html: string;
-    host: string;
-    className?: string;
-}): import("react").JSX.Element;

package/dist/components/TicketConversation.d.ts

@@ -1,13 +0,0 @@
-import { type MyTicketDetail, type TicketStrings } from "@lightworkai.official/debug-capture";
-export declare function TicketConversation({ ticket, t, host, timezone, locale, sending, uploadImage, onSend, onEdited, onError, }: {
-    ticket: MyTicketDetail;
-    t: TicketStrings;
-    host: string;
-    timezone: string;
-    locale: "th" | "en" | undefined;
-    sending?: boolean;
-    uploadImage: (file: File) => Promise<string>;
-    onSend: (body: string) => void;
-    onEdited: () => void;
-    onError: (message: string) => void;
-}): import("react").JSX.Element;

package/dist/components/TicketDetail.d.ts

@@ -1,23 +0,0 @@
-/**
- * One report: what was filed, where it stands, what happened, and the thread.
- * The order is the original's.
- */
-import { type MyTicketDetail, type RealmConfig, type StatusEvent, type StatusMaps, type TicketStrings } from "@lightworkai.official/debug-capture";
-export declare function TicketDetail(props: {
-    ticket: MyTicketDetail;
-    history: StatusEvent[];
-    config: RealmConfig;
-    maps: StatusMaps;
-    t: TicketStrings;
-    host: string;
-    locale: "th" | "en" | undefined;
-    sending?: boolean;
-    reopening?: boolean;
-    uploadImage: (file: File) => Promise<string>;
-    attachmentUrl: (id: string) => Promise<string>;
-    onBack: () => void;
-    onSend: (body: string) => void;
-    onEdited: () => void;
-    onReopen: (note: string) => void;
-    onError: (message: string) => void;
-}): import("react").JSX.Element;

package/dist/components/TicketScreenshots.d.ts

@@ -1,6 +0,0 @@
-import type { TicketAttachment } from "@lightworkai.official/debug-capture";
-export declare function TicketScreenshots({ images, title, attachmentUrl, }: {
-    images: TicketAttachment[];
-    title: string;
-    attachmentUrl: (id: string) => Promise<string>;
-}): import("react").JSX.Element;

package/dist/components/TicketTable.d.ts

@@ -1,18 +0,0 @@
-import { type MyTicketListItem, type Sort, type SortKey, type StatusMaps, type TicketStrings } from "@lightworkai.official/debug-capture";
-export interface TicketTableProps {
-    items: MyTicketListItem[];
-    maps: StatusMaps;
-    t: TicketStrings;
-    slug: string | undefined;
-    timezone: string;
-    locale: "th" | "en" | undefined;
-    keyword: string;
-    statusFilter: string;
-    sort: Sort;
-    page: number;
-    onOpen: (id: string) => void;
-    onSort: (key: SortKey) => void;
-    onPage: (page: number) => void;
-    onCount?: (count: number) => void;
-}
-export declare function TicketTable(props: TicketTableProps): import("react").JSX.Element;

package/dist/components/TicketTimeline.d.ts

@@ -1,14 +0,0 @@
-/**
- * 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 { type StatusEvent, type StatusMaps } from "@lightworkai.official/debug-capture";
-export declare function TicketTimeline({ history, status, createdAt, maps, timezone, locale, }: {
-    history: StatusEvent[];
-    status: string;
-    createdAt: string;
-    maps: StatusMaps;
-    timezone: string;
-    locale: "th" | "en";
-}): import("react").JSX.Element;

package/dist/components/ToolbarButton.d.ts

@@ -1,18 +0,0 @@
-/**
- * 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 declare function ToolbarButton({ label, active, disabled, onActivate, children }: ToolbarButtonProps): import("react").JSX.Element;

package/dist/components/icons.d.ts

@@ -1,35 +0,0 @@
-/**
- * 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";
-export declare const BoldIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const ItalicIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const UnderlineIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const BulletListIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const OrderedListIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const LinkIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const ImageIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const SendIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const SearchIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const ArrowLeftIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const CheckIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const MessageIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const RotateIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const AlertIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const InboxIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const ClockIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const CheckCircleIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const BanIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const WrenchIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const SquareIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const ArrowUpRightIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const HighlighterIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const TypeIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const TrashIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const PencilIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const CheckSmallIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const XSmallIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;

package/src/components/ImageAnnotatorDialog.tsx

@@ -1,160 +0,0 @@
-/**
- * Draw on an image before it is sent.
- *
- * The original opens this the moment you pick a picture, and the reason is in
- * its own comment: annotating BEFORE upload keeps the canvas same-origin, so
- * `toDataURL` is not tainted by a cross-origin presigned URL. Pointing at the
- * problem is also most of what a screenshot is for.
- *
- * The drawing itself is `createAnnotator` from the core — one canvas engine,
- * shared by all three framework packages, because there is no declarative way
- * to draw on a canvas. What is here is only the chrome.
- */
-import { useEffect, useRef, useState } from "react";
-import {
-  createAnnotator,
-  reporterStrings,
-  type Annotator,
-  type AnnotatorTool,
-  type ReporterStrings,
-} from "@lightworkai.official/debug-capture";
-import { ArrowUpRightIcon, HighlighterIcon, SquareIcon, TrashIcon, TypeIcon } from "./icons";
-
-const TOOLS: { tool: AnnotatorTool; key: keyof ReporterStrings; Icon: typeof SquareIcon }[] = [
-  { tool: "rect", key: "toolRect", Icon: SquareIcon },
-  { tool: "arrow", key: "toolArrow", Icon: ArrowUpRightIcon },
-  { tool: "highlight", key: "toolHighlight", Icon: HighlighterIcon },
-  { tool: "text", key: "toolText", Icon: TypeIcon },
-];
-
-export interface ImageAnnotatorDialogProps {
-  /** The picked image, as a same-origin data URI. */
-  src: string;
-  /** Shown in the description, as the app's dialog does. */
-  filename?: string;
-  locale: "th" | "en" | undefined;
-  /** The annotated image, at full resolution. */
-  onConfirm: (dataUri: string) => void;
-  onCancel: () => void;
-}
-
-export function ImageAnnotatorDialog({ src, filename, locale, onConfirm, onCancel }: ImageAnnotatorDialogProps) {
-  const t = reporterStrings(locale);
-  const canvas = useRef<HTMLCanvasElement>(null);
-  // A ref, not state: the annotator holds a canvas and its own mutable state,
-  // and none of that should drive a render.
-  const annotator = useRef<Annotator | null>(null);
-  const [active, setActive] = useState<AnnotatorTool | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const node = canvas.current;
-    if (!node) return;
-    const image = new Image();
-    image.addEventListener("load", () => {
-      // A backing store at the image's own size, BEFORE the annotator draws
-      // into it. Without this the canvas keeps its default 300x150, the image
-      // is squashed into that, and CSS then stretches the result — blurry, and
-      // the wrong shape.
-      node.width = image.naturalWidth;
-      node.height = image.naturalHeight;
-      annotator.current = createAnnotator(node, image, () => {
-        // The toolbar mirrors the engine, so it has to hear about a tool being
-        // CONSUMED as well as a shape being added.
-        setActive(null);
-      });
-      setLoading(false);
-    });
-    image.src = src;
-    return () => {
-      annotator.current?.destroy();
-      annotator.current = null;
-    };
-  }, [src]);
-
-  function pick(tool: AnnotatorTool): void {
-    const next = active === tool ? null : tool;
-    setActive(next);
-    annotator.current?.setTool(next);
-  }
-
-  return (
-    <div
-      className="lw-annotator"
-      role="dialog"
-      aria-modal="true"
-      onClick={(event) => {
-        if (event.target === event.currentTarget) onCancel();
-      }}
-    >
-      {/* Header, toolbar, canvas, help, footer — the same shape and the same
-          words as the app's own dialog, so the two are one thing in two places
-          rather than two things that resemble each other. */}
-      <div className="lw-annotator__panel">
-        <div className="lw-annotator__head">
-          <div className="lw-grow">
-            <h2 className="lw-annotator__title">{t.annotateTitle}</h2>
-            <p className="lw-annotator__desc">
-              {t.annotateHint}
-              {filename ? ` · ${filename}` : ""}
-            </p>
-          </div>
-          <button type="button" className="lw-annotator__close" aria-label={t.cancel} onClick={onCancel}>
-            ✕
-          </button>
-        </div>
-
-        <div className="lw-annotator__tools">
-          {TOOLS.map(({ tool, key, Icon }) => (
-            <button
-              key={tool}
-              type="button"
-              className="lw-atool"
-              aria-pressed={active === tool}
-              disabled={loading}
-              onClick={() => pick(tool)}
-            >
-              <Icon /> {t[key] as string}
-            </button>
-          ))}
-          <span className="lw-grow" />
-          {/* Right-aligned and on its own, like the app's. Deleting ONE shape is
-              the ✕ on the shape, which is what the help line below explains. */}
-          <button
-            type="button"
-            className="lw-atool lw-atool--plain"
-            disabled={loading}
-            onClick={() => {
-              annotator.current?.clear();
-              setActive(null);
-            }}
-          >
-            <TrashIcon /> {t.clearAll}
-          </button>
-        </div>
-
-        <div className="lw-annotator__canvas">
-          <div className="lw-annotator__canvasbox">
-            <canvas ref={canvas} />
-          </div>
-        </div>
-
-        <p className="lw-annotator__hint">{t.annotateHelp}</p>
-
-        <div className="lw-annotator__actions">
-          <span className="lw-grow" />
-          <button type="button" className="lw-btn" onClick={onCancel}>{t.cancel}</button>
-          <button
-            type="button"
-            className="lw-send"
-            disabled={loading}
-            // Full resolution, never the on-screen scale.
-            onClick={() => onConfirm(annotator.current?.toDataUrl() ?? src)}
-          >
-            {t.annotateApply}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}