@lightworkai.official/debug-capture-vue 0.6.0

package/src/components/TicketConversation.vue

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

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

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

package/src/components/TicketTable.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+/**
+ * The reporter's list — the original's seven columns, as a template.
+ *
+ * Every decision here is imported: which rows survive the filter, how a column
+ * sorts, what "the team replied" means, how a date reads. That is the point of
+ * the split. This file arranges them; it decides nothing.
+ */
+import { computed } from "vue";
+import {
+  compareBy,
+  formatDateTime,
+  hasSolution,
+  hasTeamReply,
+  matchesKeyword,
+  pageCount,
+  pageOf,
+  statusTone,
+  ticketKey,
+  type MyTicketListItem,
+  type Sort,
+  type SortKey,
+  type StatusMaps,
+  type TicketStrings,
+} from "@lightworkai.official/debug-capture";
+import StatusPill from "./StatusPill.vue";
+import { CheckIcon, MessageIcon } from "./icons";
+
+const props = defineProps<{
+  items: MyTicketListItem[];
+  maps: StatusMaps;
+  t: TicketStrings;
+  slug: string | undefined;
+  timezone: string;
+  locale: "th" | "en" | undefined;
+  keyword: string;
+  statusFilter: string;
+  sort: Sort;
+  page: number;
+}>();
+
+const emit = defineEmits<{
+  (e: "open", id: string): void;
+  (e: "sort", key: SortKey): void;
+  (e: "page", page: number): void;
+}>();
+
+const columns: { key: SortKey; label: keyof TicketStrings; width?: string }[] = [
+  { key: "number", label: "colNumber", width: "120px" },
+  { key: "title", label: "colTitle" },
+  { key: "module", label: "colModule", width: "160px" },
+  { key: "status", label: "colStatus", width: "130px" },
+  { key: "response", label: "colResponse", width: "150px" },
+  { key: "createdAt", label: "colCreated", width: "170px" },
+  { key: "updatedAt", label: "colUpdated", width: "170px" },
+];
+
+const visible = computed(() =>
+  props.items
+    .filter((item) => (props.statusFilter ? item.status === props.statusFilter : true))
+    .filter((item) => matchesKeyword(item, props.keyword, props.slug, props.maps.labelOf))
+    .sort(compareBy(props.sort, props.maps, props.slug)),
+);
+
+const pages = computed(() => pageCount(visible.value.length));
+// A filter can strand the reader past the end of the shorter list.
+const current = computed(() => Math.min(props.page, pages.value));
+const rows = computed(() => pageOf(visible.value, current.value));
+
+defineExpose({ count: computed(() => visible.value.length) });
+
+function when(iso: string | null): string {
+  return formatDateTime(iso, props.timezone, props.locale);
+}
+</script>
+
+<template>
+  <div class="lw-tablewrap">
+    <table class="lw-table">
+      <thead>
+        <tr>
+          <th
+            v-for="column in columns"
+            :key="column.key"
+            scope="col"
+            class="lw-th"
+            :style="column.width ? { width: column.width } : undefined"
+            :aria-sort="
+              sort.key === column.key ? (sort.direction === 'asc' ? 'ascending' : 'descending') : undefined
+            "
+            @click="emit('sort', column.key)"
+          >
+            {{ t[column.label] }}
+            <span class="lw-arrow">{{
+              sort.key === column.key ? (sort.direction === "asc" ? "▲" : "▼") : "⇅"
+            }}</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="!rows.length">
+          <td :colspan="columns.length" class="lw-empty">
+            {{ items.length === 0 ? t.empty : t.emptyFiltered }}
+          </td>
+        </tr>
+        <tr v-for="row in rows" :key="row.id" class="lw-row" tabindex="0" @click="emit('open', row.id)" @keydown.enter.space.prevent="emit('open', row.id)">
+          <td class="lw-num">{{ ticketKey(slug, row.number) }}</td>
+          <td class="lw-title">{{ row.title }}</td>
+          <td>
+            <span v-if="row.category" class="lw-chip">{{ row.category }}</span>
+            <span v-else class="lw-dash">—</span>
+          </td>
+          <td>
+            <!-- "Waiting on you" outranks the neutral status: it is the honest
+                 state and the only one the reporter can act on. -->
+            <span v-if="maps.isAwaitingReply(row.status)" class="lw-pill lw-pill--awaiting">
+              <MessageIcon /> {{ t.awaitingReply }}
+            </span>
+            <StatusPill v-else :label="maps.labelOf(row.status)" :tone="statusTone(maps.columnOf(row.status)?.color)" />
+          </td>
+          <td>
+            <span v-if="hasSolution(row)" class="lw-pill lw-pill--solution"><CheckIcon /> {{ t.hasSolution }}</span>
+            <span v-else-if="hasTeamReply(row)" class="lw-pill lw-pill--replied"><MessageIcon /> {{ t.hasReply }}</span>
+            <span v-else class="lw-muted">{{ t.noReply }}</span>
+          </td>
+          <td class="lw-dim">{{ when(row.createdAt) }}</td>
+          <td class="lw-dim">{{ when(row.updatedAt) }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div v-if="visible.length > rows.length || current > 1" class="lw-pager">
+    <span>{{ t.of(current, pages) }}</span>
+    <button type="button" class="lw-btn" :disabled="current <= 1" @click="emit('page', current - 1)">
+      {{ t.prev }}
+    </button>
+    <button type="button" class="lw-btn" :disabled="current >= pages" @click="emit('page', current + 1)">
+      {{ t.next }}
+    </button>
+  </div>
+</template>

package/src/components/TicketTimeline.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+/**
+ * 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 { computed } from "vue";
+import { formatDateTime, type StatusEvent, type StatusMaps } from "@lightworkai.official/debug-capture";
+import { RotateIcon } from "./icons";
+
+const props = defineProps<{
+  history: StatusEvent[];
+  status: string;
+  createdAt: string;
+  maps: StatusMaps;
+  timezone: string;
+  locale: "th" | "en";
+}>();
+
+/** 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;
+}
+
+const nodes = computed<Node[]>(() => {
+  const events = props.history.length
+    ? props.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: props.createdAt }];
+
+  const out: Node[] = events.map((event, i) => {
+    const previous = events[i - 1];
+    return {
+      label: i === 0 ? (props.locale === "en" ? "Reported" : "รายงานปัญหา") : props.maps.labelOf(event.status),
+      time: formatDateTime(event.at, props.timezone, props.locale),
+      state: i === events.length - 1 ? "current" : "done",
+      reopened: Boolean(previous && props.maps.isClosed(previous.status) && !props.maps.isClosed(event.status)),
+    };
+  });
+
+  const index = HAPPY.indexOf(props.status);
+  const upcoming = props.maps.isClosed(props.status) || index < 0 ? [] : HAPPY.slice(index + 1);
+  for (const status of upcoming) {
+    out.push({
+      label: props.maps.labelOf(status),
+      time: props.locale === "en" ? "Pending" : "รอดำเนินการ",
+      state: "pending",
+      reopened: false,
+    });
+  }
+  return out;
+});
+</script>
+
+<template>
+  <ol class="lw-timeline">
+    <li v-for="(node, i) in nodes" :key="`${node.label}-${i}`" class="lw-node">
+      <div class="lw-rail">
+        <span
+          v-if="i < nodes.length - 1"
+          class="lw-line"
+          :class="{ 'lw-line--pending': node.state === 'pending' }"
+        />
+        <span
+          class="lw-dot"
+          :class="[`lw-dot--${node.state}`, { 'lw-dot--reopened': node.reopened }]"
+        >
+          <span v-if="node.state === 'current' && !node.reopened" class="lw-pip" />
+        </span>
+      </div>
+      <div class="lw-node__text" :class="{ 'lw-node__text--last': i === nodes.length - 1 }">
+        <div class="lw-node__label" :class="[`lw-node__label--${node.state}`, { 'lw-node__label--reopened': node.reopened }]">
+          <RotateIcon v-if="node.reopened" class="lw-node__icon" />
+          {{ node.reopened ? `${locale === "en" ? "Reopened" : "เปิดใหม่"} · ${node.label}` : node.label }}
+        </div>
+        <div class="lw-node__time">{{ node.time }}</div>
+      </div>
+    </li>
+  </ol>
+</template>

package/src/components/ToolbarButton.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+/**
+ * One editor toolbar button.
+ *
+ * It emits 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.
+ */
+defineProps<{ label: string; active?: boolean; disabled?: boolean }>();
+const emit = defineEmits<{ (e: "activate"): void }>();
+
+function activate(event: MouseEvent): void {
+  event.preventDefault();
+  emit("activate");
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="lw-tool"
+    :class="{ 'lw-tool--on': active }"
+    :title="label"
+    :aria-label="label"
+    :aria-pressed="active ? 'true' : 'false'"
+    :disabled="disabled"
+    @mousedown="activate"
+  >
+    <slot />
+  </button>
+</template>