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

package/src/components/StatusHero.vue

@@ -1,85 +0,0 @@
-<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

@@ -1,14 +0,0 @@
-<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

@@ -1,50 +0,0 @@
-<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>

package/src/components/TicketConversation.vue

@@ -1,227 +0,0 @@
-<script setup lang="ts">
-/**
- * The thread, and the box to add to it.
- *
- * The composer is the same TipTap editor the team uses — the original's own
- * reasoning, in its own words: "ผู้แจ้งอธิบายปัญหาด้วยภาพหน้าจอเป็นเรื่องปกติที่สุด".
- */
-import { computed, nextTick, ref, shallowRef, watch } from "vue";
-import { editMyMessage, formatDateTime, type MyTicketDetail, type TicketStrings } from "@lightworkai.official/debug-capture";
-import RichReplyEditor from "./RichReplyEditor.vue";
-import TicketBody from "./TicketBody.vue";
-import { CheckIcon2, PencilIcon, SendIcon, XIcon } from "./icons";
-
-const props = defineProps<{
-  ticket: MyTicketDetail;
-  t: TicketStrings;
-  host: string;
-  timezone: string;
-  locale: "th" | "en" | undefined;
-  sending?: boolean;
-  uploadImage: (file: File) => Promise<string>;
-}>();
-
-const emit = defineEmits<{
-  (e: "send", body: string): void;
-  (e: "edited"): void;
-  (e: "error", message: string): void;
-}>();
-
-const editor = ref<InstanceType<typeof RichReplyEditor> | null>(null);
-const thread = ref<HTMLElement | null>(null);
-
-/**
- * The message being rewritten, if any.
- *
- * Only ONE at a time: an open editor per bubble would let someone start three
- * rewrites and lose track of which are unsaved. The original makes the same
- * choice for the same reason.
- *
- * Only your own, and the server agrees — it refuses any message the caller did
- * not write, so this button is a convenience, not the rule.
- */
-const editingId = ref<string | null>(null);
-const savingEdit = ref(false);
-
-/**
- * The open edit box.
- *
- * A FUNCTION ref, not a string one. A `ref="x"` inside `v-for` collects an
- * ARRAY of instances — even when only one of them renders — so calling
- * `.value()` on it threw "value is not a function" the moment anyone pressed
- * บันทึกการแก้ไข. A function ref is handed the instance itself, and null when it
- * unmounts.
- */
-const editingDraft = shallowRef<InstanceType<typeof RichReplyEditor> | null>(null);
-
-function bindDraft(el: unknown): void {
-  editingDraft.value = (el as InstanceType<typeof RichReplyEditor> | null) ?? null;
-}
-
-/** Just the toolbar's words: TicketStrings also carries formatters. */
-const labels = computed<Record<string, string>>(() => ({
-  bold: props.t.bold,
-  italic: props.t.italic,
-  underline: props.t.underline,
-  bulletList: props.t.bulletList,
-  orderedList: props.t.orderedList,
-  link: props.t.link,
-  linkPrompt: props.t.linkPrompt,
-  attachImage: props.t.attachImage,
-  uploading: props.t.uploading,
-}));
-
-function canEdit(message: MyTicketDetail["messages"][number]): boolean {
-  return message.authorRole === "REPORTER";
-}
-
-async function saveEdit(message: MyTicketDetail["messages"][number]): Promise<void> {
-  const body = editingDraft.value?.value() ?? "";
-  if (!body || savingEdit.value) return;
-  savingEdit.value = true;
-  try {
-    await editMyMessage(props.ticket.id, message.id, body);
-    editingId.value = null;
-    emit("edited");
-  } catch (e) {
-    emit("error", e instanceof Error ? e.message : props.t.sendFailed);
-  } finally {
-    savingEdit.value = false;
-  }
-}
-
-function send(): void {
-  const body = editor.value?.value() ?? "";
-  if (!body || props.sending) return;
-  emit("send", body);
-  // Cleared here, not by the parent. It used to be cleared by accident: the
-  // whole detail unmounted after a reply, so a fresh editor came back empty.
-  // Now that the view survives the send, the box has to be emptied on purpose.
-  editor.value?.clear();
-}
-
-/**
- * Open at the newest message.
- *
- * The thread is a fixed-height window now, so without this it opens showing the
- * OLDEST messages and the reader has to scroll to find out what has happened
- * since. Every chat opens at the bottom; this one should too.
- *
- * Jumped, not animated: this is where the conversation starts, not a transition
- * from somewhere else, and watching it scroll on open reads as a glitch.
- */
-async function toBottom(behavior: ScrollBehavior): Promise<void> {
-  await nextTick();
-  const box = thread.value;
-  if (box) box.scrollTop = box.scrollHeight;
-  if (behavior === "smooth") {
-    thread.value?.lastElementChild?.scrollIntoView({ block: "nearest", behavior });
-  }
-}
-
-// A different ticket is a different conversation: start it at the bottom too.
-watch(() => props.ticket.id, () => void toBottom("auto"), { immediate: true });
-
-/**
- * Keep the newest message in view.
- *
- * The thread sits above the composer, so a reply pushes the composer down and
- * out of sight — the reader is left looking at the middle of the conversation
- * with no sign their message landed.
- */
-watch(
-  () => props.ticket.messages.length,
-  (now, before) => {
-    if (now <= (before ?? 0)) return;
-    void toBottom("smooth");
-  },
-);
-
-defineExpose({ clear: () => editor.value?.clear() });
-</script>
-
-<template>
-  <section class="lw-card">
-    <h3 class="lw-card__title">{{ t.conversation }}</h3>
-
-    <div ref="thread" class="lw-thread">
-      <p v-if="!ticket.messages.length" class="lw-thread__empty">{{ t.noMessages }}</p>
-      <!-- The original's shape exactly: the meta line lives INSIDE a bordered
-           bubble, and a TEAM message shows only "ทีมงาน" — never the officer's
-           name. That is deliberate there and worth keeping: the team answers as
-           one unit, and a reporter should not see which person replied. -->
-      <article
-        v-for="message in ticket.messages"
-        :key="message.id"
-        class="lw-msg"
-        :class="{ 'lw-msg--mine': message.authorRole === 'REPORTER' }"
-      >
-        <div class="lw-msg__bubble">
-          <p class="lw-msg__meta">
-            <template v-if="message.authorRole === 'AGENT'">
-              <span class="lw-msg__who">{{ t.team }}</span>
-            </template>
-            <template v-else>
-              <span class="lw-msg__who">{{ message.authorName || t.you }}</span>
-              <span class="lw-msg__role">{{ t.reporterRole }}</span>
-            </template>
-            <span>· {{ formatDateTime(message.createdAt, timezone, locale) }}</span>
-            <span v-if="message.editedAt" class="lw-msg__edited">· {{ t.edited }}</span>
-            <button
-              v-if="canEdit(message) && editingId !== message.id"
-              type="button"
-              class="lw-msg__edit"
-              @click="editingId = message.id"
-            >
-              <PencilIcon /> {{ t.edit }}
-            </button>
-          </p>
-
-          <!-- Rewriting uses the same editor as the composer: a correction is
-               usually fixing a link or replacing the screenshot, and neither
-               survives a plain text box. -->
-          <div v-if="editingId === message.id" class="lw-msg__editing">
-            <RichReplyEditor
-              :ref="bindDraft"
-              :placeholder="t.replyPlaceholder"
-              :host="host"
-              :locale="locale"
-              :disabled="savingEdit"
-              :upload-image="uploadImage"
-              :labels="labels"
-              :initial="message.body"
-              @error="emit('error', $event)"
-            />
-            <div class="lw-msg__editActions">
-              <button type="button" class="lw-btn" :disabled="savingEdit" @click="editingId = null">
-                <XIcon /> {{ t.cancel }}
-              </button>
-              <button type="button" class="lw-send" :disabled="savingEdit" @click="saveEdit(message)">
-                <CheckIcon2 /> {{ t.saveEdit }}
-              </button>
-            </div>
-          </div>
-          <TicketBody v-else :html="message.body" :host="host" />
-        </div>
-      </article>
-    </div>
-
-    <div class="lw-composer">
-      <RichReplyEditor
-        ref="editor"
-        :placeholder="t.replyPlaceholder"
-        :host="host"
-        :locale="locale"
-        :disabled="sending"
-        :upload-image="uploadImage"
-        :labels="labels"
-        @error="emit('error', $event)"
-      />
-      <div class="lw-composer__actions">
-        <button type="button" class="lw-send" :disabled="sending" @click="send">
-          <SendIcon /> {{ sending ? t.sending : t.send }}
-        </button>
-      </div>
-    </div>
-  </section>
-</template>

package/src/components/TicketDetail.vue

@@ -1,130 +0,0 @@
-<script setup lang="ts">
-/**
- * One report: what was filed, where it stands, what happened, and the thread.
- * The order is the original's.
- */
-import { computed } from "vue";
-import {
-  formatDateTime,
-  ticketKey,
-  type MyTicketDetail,
-  type RealmConfig,
-  type StatusEvent,
-  type StatusMaps,
-  type TicketStrings,
-} from "@lightworkai.official/debug-capture";
-import TicketBody from "./TicketBody.vue";
-import StatusHero from "./StatusHero.vue";
-import ReopenPanel from "./ReopenPanel.vue";
-import TicketTimeline from "./TicketTimeline.vue";
-import TicketConversation from "./TicketConversation.vue";
-import TicketScreenshots from "./TicketScreenshots.vue";
-import { ArrowLeftIcon } from "./icons";
-
-const props = defineProps<{
-  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>;
-}>();
-
-const emit = defineEmits<{
-  (e: "back"): void;
-  (e: "edited"): void;
-  (e: "send", body: string): void;
-  (e: "reopen", note: string): void;
-  (e: "error", message: string): void;
-}>();
-
-const lang = computed<"th" | "en">(() => (props.locale === "en" ? "en" : "th"));
-const canReopen = computed(
-  () => props.maps.isClosed(props.ticket.status) && props.config.featureFlags.selfServiceReopen === true,
-);
-const updated = computed(() => props.ticket.updatedAt && props.ticket.updatedAt !== props.ticket.createdAt);
-
-/*
- * Images only. The original's reporter view lists no attachments at all, and
- * what a widget report actually carries makes the reason plain: the other file
- * is `debug-bundle.json`, the capture payload the TEAM reads. The screenshot
- * they drew on is theirs; the bundle is not.
- */
-const screenshots = computed(() =>
-  props.ticket.attachments.filter((a) => (a.contentType ?? "").startsWith("image/")),
-);
-
-function when(iso: string | null): string {
-  return formatDateTime(iso, props.config.timezone, props.locale);
-}
-</script>
-
-<template>
-  <div class="lw-detail">
-    <button type="button" class="lw-back" @click="emit('back')">
-      <ArrowLeftIcon /> {{ t.back }}
-    </button>
-
-    <section class="lw-card">
-      <h3 class="lw-card__heading">{{ ticket.title }}</h3>
-      <div class="lw-facts">
-        <span class="lw-key">{{ ticketKey(config.realm.slug, ticket.number) }}</span>
-        <span v-if="ticket.category" class="lw-chip">{{ ticket.category }}</span>
-        <span>{{ t.colCreated }} {{ when(ticket.createdAt) }}</span>
-        <span v-if="updated">{{ t.colUpdated }} {{ when(ticket.updatedAt) }}</span>
-      </div>
-      <TicketBody v-if="ticket.description" class="lw-intro" :html="ticket.description" :host="host" />
-      <p v-if="ticket.routeUrl" class="lw-route">
-        {{ t.page }}:
-        <a :href="ticket.routeUrl" target="_blank" rel="noopener noreferrer">{{ ticket.routeUrl }}</a>
-      </p>
-    </section>
-
-    <StatusHero :ticket="ticket" :maps="maps" :t="t" :locale="lang" :host="host" />
-
-    <ReopenPanel
-      v-if="canReopen"
-      :t="t"
-      :locale="lang"
-      :busy="reopening"
-      @reopen="emit('reopen', $event)"
-    />
-
-    <section class="lw-card">
-      <h3 class="lw-card__title">{{ lang === "en" ? "Progress" : "ความคืบหน้า" }}</h3>
-      <TicketTimeline
-        :history="history"
-        :status="ticket.status"
-        :created-at="ticket.createdAt"
-        :maps="maps"
-        :timezone="config.timezone"
-        :locale="lang"
-      />
-    </section>
-
-    <TicketConversation
-      :ticket="ticket"
-      :t="t"
-      :host="host"
-      :timezone="config.timezone"
-      :locale="locale"
-      :sending="sending"
-      :upload-image="uploadImage"
-      @send="emit('send', $event)"
-      @edited="emit('edited')"
-      @error="emit('error', $event)"
-    />
-
-    <TicketScreenshots
-      v-if="screenshots.length"
-      :images="screenshots"
-      :title="lang === 'en' ? 'Screenshots you sent' : 'ภาพหน้าจอที่คุณแจ้ง'"
-      :attachment-url="attachmentUrl"
-    />
-  </div>
-</template>

package/src/components/TicketScreenshots.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-/**
- * The pictures the reporter attached — shown, not offered as downloads.
- *
- * The URL is FETCHED, not constructed. These are ordinary attachments: the
- * inline-image route answers only to the per-object tokens embedded images
- * carry, and the admin download route wants a session this widget has not got.
- */
-import { onMounted, ref } from "vue";
-import type { TicketAttachment } from "@lightworkai.official/debug-capture";
-
-const props = defineProps<{
-  images: TicketAttachment[];
-  title: string;
-  attachmentUrl: (id: string) => Promise<string>;
-}>();
-
-/** id → signed URL. A missing entry means it is still loading or failed. */
-const urls = ref<Record<string, string>>({});
-const failed = ref<Record<string, true>>({});
-
-onMounted(() => {
-  for (const image of props.images) {
-    props.attachmentUrl(image.id).then(
-      (url) => (urls.value = { ...urls.value, [image.id]: url }),
-      // Drop the frame rather than leave a broken-image icon where a screenshot
-      // should be.
-      () => (failed.value = { ...failed.value, [image.id]: true }),
-    );
-  }
-});
-</script>
-
-<template>
-  <section class="lw-card">
-    <h3 class="lw-card__title">{{ title }}</h3>
-    <template v-for="image in images" :key="image.id">
-      <img
-        v-if="urls[image.id] && !failed[image.id]"
-        class="lw-shot"
-        :src="urls[image.id]"
-        :alt="image.filename ?? ''"
-        @error="failed = { ...failed, [image.id]: true }"
-      />
-    </template>
-  </section>
-</template>