@lightworkai.official/debug-capture-vue 0.6.0

package/src/components/RichReplyEditor.vue

@@ -0,0 +1,321 @@
+<script setup lang="ts">
+/**
+ * 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 (both of ours do) pays nothing, and re-implementing selection
+ * handling, list nesting and paste sanitising by hand is a maintenance bill
+ * with no upside. The original uses TipTap; so do we.
+ */
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { EditorContent, useEditor } from "@tiptap/vue-3";
+import StarterKit from "@tiptap/starter-kit";
+import Image from "@tiptap/extension-image";
+import Placeholder from "@tiptap/extension-placeholder";
+import { NOTE_TOOLBAR, cleanHtml, htmlIsEmpty, type EditorTool } from "@lightworkai.official/debug-capture";
+import ToolbarButton from "./ToolbarButton.vue";
+import ImageAnnotatorDialog from "./ImageAnnotatorDialog.vue";
+import {
+  BoldIcon, ItalicIcon, UnderlineIcon, StrikeIcon, CodeIcon, BulletListIcon,
+  OrderedListIcon, QuoteIcon, LinkIcon, ImageIcon,
+} from "./icons";
+
+const props = withDefaults(
+  defineProps<{
+    placeholder: string;
+    /** Support host origin — the sanitiser resolves inline image URLs against it. */
+    host: string;
+    disabled?: boolean;
+    /** Which controls to show. Defaults to the original's NOTE_TOOLBAR. */
+    tools?: EditorTool[];
+    /** Hide the toolbar until focused or non-empty. */
+    compact?: boolean;
+    labels: Record<string, string>;
+    /**
+     * Store an image and return the URL to reference it by.
+     *
+     * Optional, and the fallback is not "no images" — it is the annotated data
+     * URI carried in the body for the server to store on arrival. A composer on
+     * a ticket that does not exist yet has nowhere to upload to, and that is a
+     * reason to move the work, not to take the feature away.
+     */
+    uploadImage?: (file: File) => Promise<string>;
+    /** 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;
+  }>(),
+  { tools: () => NOTE_TOOLBAR, compact: false },
+);
+
+/**
+ * Two-way binding, for a host that would rather drive this from a ref than call
+ * `value()`. Optional: the panel uses the imperative API, the app uses v-model.
+ */
+const model = defineModel<string>({ required: false });
+
+const emit = defineEmits<{ (e: "error", message: string): void }>();
+
+const focused = ref(false);
+const uploading = ref(false);
+const fileInput = ref<HTMLInputElement | null>(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, and for two reasons: 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 cross-origin presigned URL.
+ */
+const pending = ref<string | null>(null);
+const pendingName = ref("screenshot.png");
+
+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: () => props.placeholder }),
+  ],
+  content: props.initial ?? model.value ?? "",
+  onUpdate: ({ editor: e }) => {
+    // TipTap's "empty" document is still <p></p>; report it as empty so a send
+    // button bound to the model stays disabled.
+    if (model.value !== undefined || props.compact) model.value = e.isEmpty ? "" : e.getHTML();
+  },
+  onFocus: () => (focused.value = true),
+  onBlur: () => (focused.value = 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;
+    },
+  },
+});
+
+watch(
+  () => props.disabled,
+  (off) => editor.value?.setEditable(!off),
+);
+
+// The parent clears the box after a successful send.
+watch(model, (next) => {
+  const current = editor.value;
+  if (!current || current.isDestroyed) return;
+  if (next === "" && !current.isEmpty) current.commands.clearContent();
+});
+
+/**
+ * `compact` hides the toolbar until there is something to format.
+ *
+ * Note what this makes load-bearing: the toolbar UNMOUNTS on blur, so a button
+ * that acted on `click` would disappear between mousedown and click and the
+ * click would never land. ToolbarButton fires on mousedown for exactly this.
+ */
+const showToolbar = computed(() => !props.compact || focused.value || !editor.value?.isEmpty);
+
+interface ToolSpec {
+  name: string;
+  icon: unknown;
+  label: string;
+  run: () => void;
+}
+
+const ALL: Record<EditorTool, () => ToolSpec> = {
+  bold: () => ({ name: "bold", icon: BoldIcon, label: props.labels.bold!, run: () => editor.value?.chain().focus().toggleBold().run() }),
+  italic: () => ({ name: "italic", icon: ItalicIcon, label: props.labels.italic!, run: () => editor.value?.chain().focus().toggleItalic().run() }),
+  underline: () => ({ name: "underline", icon: UnderlineIcon, label: props.labels.underline!, run: () => editor.value?.chain().focus().toggleUnderline().run() }),
+  strike: () => ({ name: "strike", icon: StrikeIcon, label: props.labels.strike!, run: () => editor.value?.chain().focus().toggleStrike().run() }),
+  code: () => ({ name: "code", icon: CodeIcon, label: props.labels.code!, run: () => editor.value?.chain().focus().toggleCode().run() }),
+  bulletList: () => ({ name: "bulletList", icon: BulletListIcon, label: props.labels.bulletList!, run: () => editor.value?.chain().focus().toggleBulletList().run() }),
+  orderedList: () => ({ name: "orderedList", icon: OrderedListIcon, label: props.labels.orderedList!, run: () => editor.value?.chain().focus().toggleOrderedList().run() }),
+  blockquote: () => ({ name: "blockquote", icon: QuoteIcon, label: props.labels.blockquote!, run: () => editor.value?.chain().focus().toggleBlockquote().run() }),
+  link: () => ({ name: "link", icon: LinkIcon, label: props.labels.link!, run: toggleLink }),
+  image: () => ({ name: "image", icon: ImageIcon, label: props.labels.attachImage!, run: pickImage }),
+};
+
+/** The chosen controls, with `image` split off so it can sit after a separator. */
+const marks = computed(() => props.tools.filter((t) => t !== "image").map((t) => ALL[t]()));
+const hasImage = computed(() => props.tools.includes("image"));
+
+onBeforeUnmount(() => editor.value?.destroy());
+
+/**
+ * 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). This component IS the one dialog now; the
+ * app uses it too.
+ */
+async function addImage(file: File): Promise<void> {
+  if (uploading.value || pending.value) return;
+  try {
+    pendingName.value = file.name || "screenshot.png";
+    pending.value = await readDataUri(file);
+  } catch (e) {
+    emit("error", e instanceof Error ? e.message : "unreadable file");
+  }
+}
+
+/** The annotated image comes back as a data URI; upload THAT and insert it. */
+async function commitImage(dataUri: string): Promise<void> {
+  pending.value = null;
+  uploading.value = true;
+  try {
+    /*
+     * No uploader means the host wants the image inline — a composer on a
+     * ticket that does not exist yet, with nowhere to upload to. The data URI
+     * travels with the body and the server swaps it for a stored one once
+     * there is somewhere to put it.
+     */
+    const src = props.uploadImage
+      ? await props.uploadImage(dataUriToFile(dataUri, pendingName.value))
+      : dataUri;
+    editor.value?.chain().focus().setImage({ src, alt: pendingName.value }).run();
+  } catch (e) {
+    emit("error", e instanceof Error ? e.message : "upload failed");
+  } finally {
+    uploading.value = false;
+  }
+}
+
+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 here 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 });
+}
+
+function pickImage(): void {
+  fileInput.value?.click();
+}
+
+function onFile(event: Event): void {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  // Cleared so choosing the same file twice still fires `change`.
+  input.value = "";
+  if (file) void addImage(file);
+}
+
+function toggleLink(): void {
+  const current = editor.value;
+  if (!current) return;
+  const existing = current.getAttributes("link").href as string | undefined;
+  if (existing) {
+    current.chain().focus().unsetLink().run();
+    return;
+  }
+  const href = window.prompt(props.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)) {
+    emit("error", `${props.labels.link}: http(s) only`);
+    return;
+  }
+  current.chain().focus().extendMarkRange("link").setLink({ href }).run();
+}
+
+/**
+ * Sanitised HTML, or "" when there is nothing worth sending.
+ *
+ * `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. The allowlist is what narrows an image to our own.
+ */
+function value(): string {
+  const html = cleanHtml(editor.value?.getHTML() ?? "", props.host);
+  return htmlIsEmpty(html) ? "" : html;
+}
+
+function clear(): void {
+  editor.value?.commands.clearContent(true);
+}
+
+defineExpose({ value, clear, focus: () => editor.value?.commands.focus() });
+</script>
+
+<template>
+  <div class="lw-editor" :class="{ 'lw-editor--disabled': disabled }">
+    <!-- `compact` unmounts this on blur, which is why every button fires on
+         mousedown: on click it would disappear between the two and never
+         land. -->
+    <div v-if="showToolbar" class="lw-editor__tools">
+      <ToolbarButton
+        v-for="tool in marks"
+        :key="tool.name"
+        :label="tool.label"
+        :active="editor?.isActive(tool.name)"
+        :disabled="disabled"
+        @activate="tool.run()"
+      >
+        <component :is="tool.icon" />
+      </ToolbarButton>
+
+      <template v-if="hasImage">
+        <span class="lw-editor__sep" />
+        <ToolbarButton :label="labels.attachImage ?? ''" :disabled="disabled || uploading" @activate="pickImage">
+          <ImageIcon />
+        </ToolbarButton>
+      </template>
+      <span v-if="uploading" class="lw-editor__uploading">{{ labels.uploading ?? "" }}</span>
+    </div>
+
+    <EditorContent :editor="editor" class="lw-editor__content" />
+    <input ref="fileInput" type="file" accept="image/*" hidden @change="onFile" />
+
+    <ImageAnnotatorDialog
+      :src="pending"
+      :filename="pendingName"
+      :locale="locale"
+      @confirm="commitImage"
+      @cancel="pending = null"
+    />
+  </div>
+</template>

package/src/components/StatusHero.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+/**
+ * Where the report stands, in one banner.
+ *
+ * The status LINE is config-first: an awaiting lane's "please reply" wins, then
+ * the lane's own description (so a realm's custom lane carries its own words),
+ * then our default copy, then the bare label.
+ */
+import { computed } from "vue";
+import type { MyTicketDetail, StatusMaps, TicketStrings } from "@lightworkai.official/debug-capture";
+import TicketBody from "./TicketBody.vue";
+import { BanIcon, CheckCircleIcon, ClockIcon, InboxIcon, MessageIcon, WrenchIcon } from "./icons";
+
+const props = defineProps<{
+  ticket: MyTicketDetail;
+  maps: StatusMaps;
+  t: TicketStrings;
+  locale: "th" | "en";
+  host: string;
+}>();
+
+/** Only the SYSTEM statuses get a tone; an admin-added lane falls back to OPEN. */
+const TONES: Record<string, { icon: unknown; border: string; bg: string; fg: string; accent: string }> = {
+  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" },
+};
+const AWAITING = { icon: MessageIcon, border: "#fcd34d", bg: "#fffbeb", fg: "#78350f", accent: "#f59e0b" };
+
+const MESSAGES: Record<string, { th: string; en: string }> = {
+  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" },
+};
+
+const awaiting = computed(() => props.maps.isAwaitingReply(props.ticket.status));
+const tone = computed(() => (awaiting.value ? AWAITING : (TONES[props.ticket.status] ?? TONES.OPEN!)));
+
+const headline = computed(() => {
+  if (awaiting.value) {
+    return props.locale === "en"
+      ? "The team needs more information from you"
+      : "ทีมงานขอข้อมูลเพิ่มเติม — รอการตอบกลับจากคุณ";
+  }
+  const described = props.maps.columnOf(props.ticket.status)?.description?.trim();
+  return described || MESSAGES[props.ticket.status]?.[props.locale] || props.maps.labelOf(props.ticket.status);
+});
+
+/*
+ * The solution note, only when the thread does not already carry it. A resolved
+ * ticket usually has the team's answer as their last message, and printing the
+ * note here as well says the same words twice on one screen. Kept as the
+ * fallback for a ticket whose note never reached the conversation.
+ */
+const showNote = computed(
+  () =>
+    !awaiting.value &&
+    !props.ticket.messages.some((m) => m.authorRole === "AGENT") &&
+    props.maps.isClosed(props.ticket.status) &&
+    Boolean(props.ticket.resolutionNote?.trim()),
+);
+</script>
+
+<template>
+  <section class="lw-hero" :style="{ borderColor: tone.border, background: tone.bg }">
+    <component :is="tone.icon" class="lw-hero__icon" :style="{ color: tone.accent }" />
+    <div class="lw-hero__body">
+      <p class="lw-hero__kicker">
+        {{ awaiting ? (locale === "en" ? "AWAITING YOUR REPLY" : "รอการตอบกลับจากคุณ") : locale === "en" ? "LATEST STATUS" : "สถานะล่าสุด" }}
+      </p>
+      <p class="lw-hero__headline" :style="{ color: tone.fg }">{{ headline }}</p>
+      <p v-if="awaiting" class="lw-hero__nudge">
+        {{ locale === "en" ? "Please reply to the team in the conversation below" : "กรุณาตอบกลับให้ทีมงานในช่องแชทด้านล่าง" }}
+      </p>
+      <div v-if="showNote" class="lw-hero__note">
+        <WrenchIcon class="lw-hero__wrench" />
+        <TicketBody :html="ticket.resolutionNote ?? ''" :host="host" />
+      </div>
+    </div>
+  </section>
+</template>

package/src/components/StatusPill.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+/**
+ * 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. There is no stylesheet that could know the
+ * names in advance.
+ */
+defineProps<{ label: string; tone: { fg: string; bg: string } }>();
+</script>
+
+<template>
+  <span class="lw-status" :style="{ background: tone.bg, color: tone.fg }">{{ label }}</span>
+</template>

package/src/components/TicketBody.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/**
+ * A message or description body, rendered safely.
+ *
+ * Deliberately NOT `v-html`. Bodies are HTML written by other people and shown
+ * inside the HOST application's page — markup that ran here would run with the
+ * host's origin, against the host's session. `renderBody` parses into an inert
+ * document, walks it against an allowlist and fills this node; `v-html` would
+ * hand the string straight to innerHTML.
+ */
+import { onMounted, ref, watch } from "vue";
+import { renderBody } from "@lightworkai.official/debug-capture";
+
+const props = defineProps<{ html: string; host: string }>();
+const target = ref<HTMLElement | null>(null);
+/**
+ * The image being viewed full size, if any.
+ *
+ * Bodies are capped to a thumbnail so one screenshot cannot push a whole
+ * conversation off the screen — which is only reasonable if the full size is a
+ * click away.
+ *
+ * Delegated from the container rather than bound per image: this is sanitised
+ * HTML we inject, not elements we built, so there is nothing to attach to.
+ */
+const zoomed = ref<string | null>(null);
+
+function onClick(event: MouseEvent): void {
+  const node = event.target as HTMLElement | null;
+  if (!node || node.tagName !== "IMG") return;
+  const src = node.getAttribute("src");
+  if (src) zoomed.value = src;
+}
+
+function paint(): void {
+  if (target.value) renderBody(target.value, props.html, props.host);
+}
+
+onMounted(paint);
+watch(() => [props.html, props.host], paint);
+</script>
+
+<template>
+  <div ref="target" class="lw-body" @click="onClick" />
+
+  <div v-if="zoomed" class="lw-zoom" role="dialog" aria-modal="true" @click="zoomed = null">
+    <button type="button" class="lw-zoom__close" aria-label="close">✕</button>
+    <img :src="zoomed" alt="" />
+  </div>
+</template>