@lightworkai.official/debug-capture-react 0.6.0

package/src/components/MyTicketsPanel.tsx

@@ -0,0 +1,321 @@
+/**
+ * "ปัญหาที่แจ้ง" — the reports this person filed, and what became of them.
+ *
+ * Drop it on a route of your own — the reporter-facing counterpart to the
+ * agent's ticket list. It needs `identity` in the config, because the widget's
+ * realm key is public and can authorise filing a report but never reading one
+ * back — see the core README.
+ *
+ * This component owns fetching and view state and nothing else: the columns,
+ * the sorting, the sanitising and the dates all live in the core, shared with
+ * the Vue and Angular packages.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  NoIdentityError, fetchRealmConfig, getAttachmentUrl, getConfig, getMyTicket,
+  getMyTicketHistory, listMyTickets, reopenMyTicket, replyToTicket, statusMaps,
+  ticketStrings, uploadInlineImage,
+  type MyTicketDetail, type MyTicketListItem, type RealmConfig, type Sort, type SortKey,
+  type StatusEvent,
+} from "@lightworkai.official/debug-capture";
+import { TicketTable } from "./TicketTable";
+import { TicketDetail } from "./TicketDetail";
+import { AlertIcon, SearchIcon } from "./icons";
+
+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;
+}
+
+function safeConfig<T>(read: () => T, fallback: T): T {
+  try {
+    return read();
+  } catch {
+    return fallback;
+  }
+}
+
+export function MyTicketsPanel({ refreshKey, hideTitle, onReplied, onReopened, onError }: MyTicketsPanelProps) {
+  const locale = safeConfig(() => getConfig().locale, undefined);
+  const host = safeConfig(() => getConfig().host, "");
+  const t = useMemo(() => ticketStrings(locale), [locale]);
+
+  const [items, setItems] = useState<MyTicketListItem[]>([]);
+  const [config, setConfig] = useState<RealmConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [noIdentity, setNoIdentity] = useState(false);
+
+  const [keyword, setKeyword] = useState("");
+  const [applied, setApplied] = useState("");
+  const [statusFilter, setStatusFilter] = useState("");
+  const [sort, setSort] = useState<Sort>({ key: "createdAt", direction: "desc" });
+  const [page, setPage] = useState(1);
+  const [shown, setShown] = useState(0);
+
+  const [detail, setDetail] = useState<MyTicketDetail | null>(null);
+  const [history, setHistory] = useState<StatusEvent[]>([]);
+  const [detailError, setDetailError] = useState<string | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [reopening, setReopening] = useState(false);
+
+  const maps = useMemo(() => statusMaps(config?.statusColumns ?? [], t.allStatuses), [config, t]);
+  const report = useRef(onError);
+  report.current = onError;
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    setNoIdentity(false);
+    try {
+      // Config and list together: the labels are useless without the rows and
+      // the rows unreadable without the labels.
+      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]);
+
+  useEffect(() => {
+    void load();
+  }, [load, refreshKey]);
+
+  // Debounced like the original: re-filtering per keystroke resets the page
+  // under the reader's hands.
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setApplied(keyword);
+      setPage(1);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [keyword]);
+
+  /**
+   * Re-read the ticket we are already looking at, in place.
+   *
+   * Deliberately separate from `open()`. That one clears the detail and raises
+   * the loading flag, which unmounts the whole view and remounts it — so
+   * sending a reply threw the reader back to the top of the page, away from the
+   * conversation they were in the middle of. It reads as the page reloading,
+   * because visually that is what happens.
+   *
+   * Setting state instead lets React reconcile what changed: the new message
+   * appears, the timeline updates, and everything else stays where it was.
+   */
+  const reload = useCallback(
+    async (id: string) => {
+      try {
+        const [found, events] = await Promise.all([
+          getMyTicket(id),
+          // The timeline is a nicety, not the page: a ticket whose history
+          // fails to load should still show its conversation.
+          getMyTicketHistory(id).catch(() => [] as StatusEvent[]),
+        ]);
+        setDetail(found);
+        setHistory(events);
+        return found;
+      } catch (e) {
+        setDetailError(e instanceof Error ? e.message : t.detailFailed);
+        return null;
+      }
+    },
+    [t],
+  );
+
+  /** Open a DIFFERENT ticket: tear the view down, because nothing on screen is its. */
+  const open = useCallback(
+    async (id: string) => {
+      setDetail(null);
+      setHistory([]);
+      setDetailError(null);
+      setDetailLoading(true);
+      try {
+        return await reload(id);
+      } finally {
+        setDetailLoading(false);
+      }
+    },
+    [reload],
+  );
+
+  function back(): void {
+    setDetail(null);
+    // Counts and badges move when a reply lands, so the list is re-read rather
+    // than restored from what it said before the detail opened.
+    void load();
+  }
+
+  function toggleSort(key: SortKey): void {
+    setSort((current) =>
+      current.key === key
+        ? { key, direction: current.direction === "asc" ? "desc" : "asc" }
+        : // Dates open newest-first, text A→Z: the useful first click differs
+          // by what the column holds.
+          { key, direction: key === "createdAt" || key === "updatedAt" ? "desc" : "asc" },
+    );
+  }
+
+  async function send(body: string): Promise<void> {
+    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: string): Promise<void> {
+    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 = useCallback(
+    async (file: File): Promise<string> => {
+      if (!detail) throw new Error("no ticket");
+      const dataUri = await readDataUri(file);
+      const stored = await uploadInlineImage(detail.id, dataUri, file.name);
+      return stored.url;
+    },
+    [detail],
+  );
+
+  const attachmentUrl = useCallback((id: string) => getAttachmentUrl(id).then((found) => found.url), []);
+
+  if (detailLoading) {
+    return (
+      <div className="lw-panel">
+        <div className="lw-skeleton" />
+        <div className="lw-skeleton" />
+      </div>
+    );
+  }
+
+  if (detailError) {
+    return <div className="lw-panel"><p className="lw-state lw-state--error">{detailError}</p></div>;
+  }
+
+  if (detail && config) {
+    return (
+      <div className="lw-panel">
+        <TicketDetail
+          ticket={detail}
+          history={history}
+          config={config}
+          maps={maps}
+          t={t}
+          host={host}
+          locale={locale}
+          sending={sending}
+          reopening={reopening}
+          uploadImage={uploadImage}
+          attachmentUrl={attachmentUrl}
+          onBack={back}
+          onSend={send}
+          onEdited={() => void reload(detail.id)}
+          onReopen={reopen}
+          onError={(message) => report.current?.(message)}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="lw-panel">
+      {!hideTitle && <h2 className="lw-panel__title">{t.title}</h2>}
+      <p className="lw-panel__intro">{t.intro}</p>
+
+      <div className="lw-controls">
+        <div className="lw-search">
+          <SearchIcon className="lw-search__icon" />
+          <input
+            type="search"
+            className="lw-input lw-search__field"
+            placeholder={t.searchPlaceholder}
+            aria-label={t.searchLabel}
+            value={keyword}
+            onChange={(event) => setKeyword(event.target.value)}
+          />
+        </div>
+        <select
+          className="lw-input"
+          value={statusFilter}
+          onChange={(event) => {
+            setStatusFilter(event.target.value);
+            setPage(1);
+          }}
+        >
+          {maps.options.map((option) => (
+            <option key={option.value} value={option.value}>{option.label}</option>
+          ))}
+        </select>
+        <span className="lw-count">{t.count(shown)}</span>
+      </div>
+
+      {noIdentity ? (
+        <p className="lw-state">{t.signedOut}</p>
+      ) : loading ? (
+        <div>
+          {[0, 1, 2, 3].map((n) => <div key={n} className="lw-skeleton" />)}
+        </div>
+      ) : error ? (
+        <p className="lw-state lw-state--error">
+          <AlertIcon /> {error}
+          <button type="button" className="lw-retry" onClick={() => void load()}>{t.retry}</button>
+        </p>
+      ) : (
+        <TicketTable
+          items={items}
+          maps={maps}
+          t={t}
+          slug={config?.realm.slug}
+          timezone={config?.timezone ?? "Asia/Bangkok"}
+          locale={locale}
+          keyword={applied}
+          statusFilter={statusFilter}
+          sort={sort}
+          page={page}
+          onOpen={(id) => void open(id)}
+          onSort={toggleSort}
+          onPage={setPage}
+          onCount={setShown}
+        />
+      )}
+    </div>
+  );
+}
+
+function readDataUri(file: File): Promise<string> {
+  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);
+  });
+}

package/src/components/ReopenPanel.tsx

@@ -0,0 +1,52 @@
+/**
+ * "Still a problem?" — a SEPARATE action from the chat, with its own endpoint
+ * and its own confirmation, only when the ticket is done and the realm allows it.
+ */
+import { useState } from "react";
+import type { TicketStrings } from "@lightworkai.official/debug-capture";
+import { RotateIcon } from "./icons";
+
+export function ReopenPanel({
+  t, locale, busy, onReopen,
+}: { t: TicketStrings; locale: "th" | "en"; busy?: boolean; onReopen: (note: string) => void }) {
+  const [open, setOpen] = useState(false);
+  const [note, setNote] = useState("");
+
+  if (!open) {
+    return (
+      <section className="lw-reopen">
+        <div className="lw-reopen__row">
+          <span className="lw-reopen__hint">{locale === "en" ? "Problem not fixed?" : "ปัญหายังไม่หาย?"}</span>
+          <button type="button" className="lw-reopen__open" onClick={() => setOpen(true)}>
+            <RotateIcon /> {t.reopen}
+          </button>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="lw-reopen">
+      <p className="lw-reopen__title">{t.reopen}</p>
+      <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)…"
+            : "บอกเราหน่อยว่ายังพบปัญหาอะไร (ไม่ระบุก็ได้)…"
+        }
+      />
+      <div className="lw-reopen__actions">
+        <button type="button" className="lw-reopen__cancel" onClick={() => { setOpen(false); setNote(""); }}>
+          {locale === "en" ? "Cancel" : "ยกเลิก"}
+        </button>
+        <button type="button" className="lw-reopen__confirm" disabled={busy} onClick={() => onReopen(note.trim())}>
+          <RotateIcon /> {busy ? t.reopening : t.reopen}
+        </button>
+      </div>
+    </section>
+  );
+}

package/src/components/RichReplyEditor.tsx

@@ -0,0 +1,264 @@
+/**
+ * The reporter's reply box — TipTap, the same editor the original gives them.
+ *
+ * This was hand-rolled on `contenteditable` + `document.execCommand` for one
+ * round, on the reasoning that a package should not ship a rich-text editor.
+ * That was wrong twice over: TipTap is a PEER dependency, so an app that
+ * already has it pays nothing, and re-implementing selection handling, list
+ * nesting and paste sanitising by hand is a maintenance bill with no upside.
+ */
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Image from "@tiptap/extension-image";
+import Placeholder from "@tiptap/extension-placeholder";
+import { cleanHtml, htmlIsEmpty } from "@lightworkai.official/debug-capture";
+import { ToolbarButton } from "./ToolbarButton";
+import { ImageAnnotatorDialog } from "./ImageAnnotatorDialog";
+import {
+  BoldIcon, BulletListIcon, ImageIcon, ItalicIcon, LinkIcon, OrderedListIcon, UnderlineIcon,
+} from "./icons";
+
+/**
+ * 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 const RichReplyEditor = forwardRef<RichReplyEditorHandle, RichReplyEditorProps>(
+  function RichReplyEditor({ placeholder, host, disabled, labels, uploadImage, onError, locale, initial }, ref) {
+    const [uploading, setUploading] = useState(false);
+    const fileInput = useRef<HTMLInputElement>(null);
+    /**
+     * The image waiting to be drawn on, as a same-origin data URI. Non-null
+     * means the annotator is open.
+     *
+     * Every route in — the picker, a paste, a drop — lands here first. The
+     * original does the same: pointing at the problem is most of what a
+     * screenshot is for, and annotating BEFORE upload keeps the canvas
+     * same-origin, so `toDataURL` is not tainted by a presigned URL.
+     */
+    const [pending, setPending] = useState<{ src: string; name: string } | null>(null);
+    const pendingRef = useRef(pending);
+    pendingRef.current = pending;
+    // Read inside TipTap's own callbacks, which capture the first render.
+    const uploadRef = useRef(uploadImage);
+    uploadRef.current = uploadImage;
+    const errorRef = useRef(onError);
+    errorRef.current = onError;
+
+    const editor = useEditor({
+      // StarterKit v3 already carries Underline and Link, so the toolbar the
+      // original defines needs only two extensions beyond it.
+      extensions: [
+        StarterKit,
+        Image.configure({ inline: false, allowBase64: false }),
+        Placeholder.configure({ placeholder }),
+      ],
+      content: initial ?? "",
+      editable: !disabled,
+      immediatelyRender: false,
+      editorProps: {
+        attributes: { class: "lw-editor-body" },
+        /**
+         * A pasted screenshot is the normal case — Cmd+Shift+4, Cmd+V — and
+         * without this the only route is save-to-disk, find-the-file, pick-it.
+         */
+        handlePaste: (_view, event) => {
+          const file = Array.from(event.clipboardData?.files ?? []).find((f) => f.type.startsWith("image/"));
+          if (!file) return false;
+          event.preventDefault();
+          void addImage(file);
+          return true;
+        },
+        handleDrop: (_view, event) => {
+          const dropped = event as DragEvent;
+          const file = Array.from(dropped.dataTransfer?.files ?? []).find((f) => f.type.startsWith("image/"));
+          if (!file) return false;
+          dropped.preventDefault();
+          void addImage(file);
+          return true;
+        },
+      },
+    });
+
+    /**
+     * Open the annotator on a picked image rather than inserting it straight
+     * away.
+     *
+     * One dialog, everywhere. There was briefly a config hook letting a host
+     * swap in its own — which solved the symptom (two dialogs that looked
+     * different) by blessing the cause (two dialogs).
+     */
+    const addImage = useCallback(async (file: 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");
+      }
+    }, []);
+
+    /** The annotated image comes back as a data URI; upload THAT and insert it. */
+    const commitImage = useCallback(
+      async (dataUri: string) => {
+        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, () => ({
+      /*
+       * `cleanHtml` is not belt-and-braces over TipTap's schema. The schema
+       * drops an `onclick`, but the Image extension takes any `src` it is
+       * given — so a screenshot pasted from a web page arrives with that
+       * page's remote image intact, and posting it would store a tracking
+       * pixel in the thread aimed at every future reader.
+       */
+      value: () => {
+        const html = cleanHtml(editor?.getHTML() ?? "", host);
+        return htmlIsEmpty(html) ? "" : html;
+      },
+      clear: () => editor?.commands.clearContent(true),
+      focus: () => editor?.commands.focus(),
+    }));
+
+    function toggleLink(): void {
+      if (!editor) return;
+      if (editor.getAttributes("link").href) {
+        editor.chain().focus().unsetLink().run();
+        return;
+      }
+      const href = window.prompt(labels.linkPrompt, "https://");
+      if (!href) return;
+      // Only ordinary destinations. The outgoing sanitiser would drop a
+      // `javascript:` URL anyway, so allowing it here just shows the writer a
+      // link that silently vanishes when they send.
+      if (!/^https?:\/\//i.test(href)) {
+        onError(`${labels.link}: http(s) only`);
+        return;
+      }
+      editor.chain().focus().extendMarkRange("link").setLink({ href }).run();
+    }
+
+    return (
+      <div className={`lw-editor${disabled ? " lw-editor--disabled" : ""}`}>
+        <div className="lw-editor__tools">
+          <ToolbarButton label={labels.bold ?? ""} active={editor?.isActive("bold")} disabled={disabled} onActivate={() => editor?.chain().focus().toggleBold().run()}>
+            <BoldIcon />
+          </ToolbarButton>
+          <ToolbarButton label={labels.italic ?? ""} active={editor?.isActive("italic")} disabled={disabled} onActivate={() => editor?.chain().focus().toggleItalic().run()}>
+            <ItalicIcon />
+          </ToolbarButton>
+          <ToolbarButton label={labels.underline ?? ""} active={editor?.isActive("underline")} disabled={disabled} onActivate={() => editor?.chain().focus().toggleUnderline().run()}>
+            <UnderlineIcon />
+          </ToolbarButton>
+
+          <span className="lw-editor__sep" />
+
+          <ToolbarButton label={labels.bulletList ?? ""} active={editor?.isActive("bulletList")} disabled={disabled} onActivate={() => editor?.chain().focus().toggleBulletList().run()}>
+            <BulletListIcon />
+          </ToolbarButton>
+          <ToolbarButton label={labels.orderedList ?? ""} active={editor?.isActive("orderedList")} disabled={disabled} onActivate={() => editor?.chain().focus().toggleOrderedList().run()}>
+            <OrderedListIcon />
+          </ToolbarButton>
+          <ToolbarButton label={labels.link ?? ""} active={editor?.isActive("link")} disabled={disabled} onActivate={toggleLink}>
+            <LinkIcon />
+          </ToolbarButton>
+
+          <span className="lw-editor__sep" />
+
+          <ToolbarButton label={labels.attachImage ?? ""} disabled={disabled || uploading} onActivate={() => fileInput.current?.click()}>
+            <ImageIcon />
+          </ToolbarButton>
+        </div>
+
+        <EditorContent editor={editor} className="lw-editor__content" />
+        <input
+          ref={fileInput}
+          type="file"
+          accept="image/*"
+          hidden
+          onChange={(event) => {
+            const file = event.target.files?.[0];
+            // Cleared so choosing the same file twice still fires `change`.
+            event.target.value = "";
+            if (file) void addImage(file);
+          }}
+        />
+
+        {pending && (
+          <ImageAnnotatorDialog
+            src={pending.src}
+            filename={pending.name}
+            locale={locale}
+            onConfirm={(dataUri) => void commitImage(dataUri)}
+            onCancel={() => setPending(null)}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+function readDataUri(file: File): Promise<string> {
+  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);
+  });
+}
+
+/**
+ * Back to a File, because `uploadImage` takes one.
+ *
+ * The annotator hands back a data URI — it draws on a canvas, and a canvas
+ * exports one. Rebuilding a File keeps the upload contract identical for an
+ * annotated image and an untouched one, so the caller never has to care which
+ * it got.
+ */
+function dataUriToFile(dataUri: string, name: string): File {
+  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 });
+}