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

package/src/components/StatusHero.tsx

@@ -1,92 +0,0 @@
-/**
- * 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 type { ComponentType, SVGProps } from "react";
-import type { MyTicketDetail, StatusMaps, TicketStrings } from "@lightworkai.official/debug-capture";
-import { TicketBody } from "./TicketBody";
-import { BanIcon, CheckCircleIcon, ClockIcon, InboxIcon, MessageIcon, WrenchIcon } from "./icons";
-
-interface Tone {
-  Icon: ComponentType<SVGProps<SVGSVGElement>>;
-  border: string;
-  bg: string;
-  fg: string;
-  accent: string;
-}
-
-/** Only the SYSTEM statuses get a tone; an admin-added lane falls back to OPEN. */
-const TONES: Record<string, Tone> = {
-  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: Tone = { 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" },
-};
-
-export function StatusHero({
-  ticket, maps, locale, host,
-}: { ticket: MyTicketDetail; maps: StatusMaps; t: TicketStrings; locale: "th" | "en"; host: string }) {
-  const awaiting = maps.isAwaitingReply(ticket.status);
-  const tone = awaiting ? AWAITING : (TONES[ticket.status] ?? TONES.OPEN!);
-  const { Icon } = tone;
-
-  const headline = awaiting
-    ? locale === "en"
-      ? "The team needs more information from you"
-      : "ทีมงานขอข้อมูลเพิ่มเติม — รอการตอบกลับจากคุณ"
-    : maps.columnOf(ticket.status)?.description?.trim() ||
-      MESSAGES[ticket.status]?.[locale] ||
-      maps.labelOf(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 too says the same words twice on one screen. Kept as
-   * the fallback for a ticket whose note never reached the conversation.
-   */
-  const showNote =
-    !awaiting &&
-    !ticket.messages.some((m) => m.authorRole === "AGENT") &&
-    maps.isClosed(ticket.status) &&
-    Boolean(ticket.resolutionNote?.trim());
-
-  return (
-    <section className="lw-hero" style={{ borderColor: tone.border, background: tone.bg }}>
-      <Icon className="lw-hero__icon" style={{ color: tone.accent }} />
-      <div className="lw-hero__body">
-        <p className="lw-hero__kicker">
-          {awaiting
-            ? locale === "en" ? "AWAITING YOUR REPLY" : "รอการตอบกลับจากคุณ"
-            : locale === "en" ? "LATEST STATUS" : "สถานะล่าสุด"}
-        </p>
-        <p className="lw-hero__headline" style={{ color: tone.fg }}>{headline}</p>
-        {awaiting && (
-          <p className="lw-hero__nudge">
-            {locale === "en"
-              ? "Please reply to the team in the conversation below"
-              : "กรุณาตอบกลับให้ทีมงานในช่องแชทด้านล่าง"}
-          </p>
-        )}
-        {showNote && (
-          <div className="lw-hero__note">
-            <WrenchIcon className="lw-hero__wrench" />
-            <TicketBody html={ticket.resolutionNote ?? ""} host={host} />
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}

package/src/components/StatusPill.tsx

@@ -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 function StatusPill({ label, tone }: { label: string; tone: { fg: string; bg: string } }) {
-  return (
-    <span className="lw-status" style={{ background: tone.bg, color: tone.fg }}>
-      {label}
-    </span>
-  );
-}

package/src/components/TicketBody.tsx

@@ -1,50 +0,0 @@
-/**
- * A message or description body, rendered safely.
- *
- * Deliberately NOT `dangerouslySetInnerHTML`. 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 the
- * node; setting innerHTML would hand the string straight to the parser.
- */
-import { useEffect, useRef, useState } from "react";
-import { renderBody } from "@lightworkai.official/debug-capture";
-
-export function TicketBody({ html, host, className }: { html: string; host: string; className?: string }) {
-  const target = useRef<HTMLDivElement>(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.
-   */
-  const [zoomed, setZoomed] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (target.current) renderBody(target.current, html, host);
-  }, [html, host]);
-
-  return (
-    <>
-      <div
-        ref={target}
-        className={className ? `lw-body ${className}` : "lw-body"}
-        // Delegated rather than bound per image: this is sanitised HTML we
-        // inject, not elements we built, so there is nothing to attach to.
-        onClick={(event) => {
-          const node = event.target as HTMLElement;
-          if (node.tagName !== "IMG") return;
-          const src = node.getAttribute("src");
-          if (src) setZoomed(src);
-        }}
-      />
-      {zoomed && (
-        <div className="lw-zoom" role="dialog" aria-modal="true" onClick={() => setZoomed(null)}>
-          <button type="button" className="lw-zoom__close" aria-label="close">✕</button>
-          <img src={zoomed} alt="" />
-        </div>
-      )}
-    </>
-  );
-}

package/src/components/TicketConversation.tsx

@@ -1,177 +0,0 @@
-/**
- * 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 { useEffect, useRef, useState } from "react";
-import { editMyMessage, formatDateTime, type MyTicketDetail, type TicketStrings } from "@lightworkai.official/debug-capture";
-import { RichReplyEditor, type RichReplyEditorHandle } from "./RichReplyEditor";
-import { TicketBody } from "./TicketBody";
-import { CheckSmallIcon, PencilIcon, SendIcon, XSmallIcon } from "./icons";
-
-export 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;
-}) {
-  const editor = useRef<RichReplyEditorHandle>(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.
-   */
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [savingEdit, setSavingEdit] = useState(false);
-  const draft = useRef<RichReplyEditorHandle>(null);
-
-  const LABELS: Record<string, string> = {
-    bold: t.bold, italic: t.italic, underline: t.underline,
-    bulletList: t.bulletList, orderedList: t.orderedList,
-    link: t.link, linkPrompt: t.linkPrompt, attachImage: t.attachImage, uploading: t.uploading,
-  };
-
-  async function saveEdit(messageId: string): Promise<void> {
-    const body = draft.current?.value() ?? "";
-    if (!body || savingEdit) return;
-    setSavingEdit(true);
-    try {
-      await editMyMessage(ticket.id, messageId, body);
-      setEditingId(null);
-      onEdited();
-    } catch (e) {
-      onError(e instanceof Error ? e.message : t.sendFailed);
-    } finally {
-      setSavingEdit(false);
-    }
-  }
-  const thread = useRef<HTMLDivElement>(null);
-  const seen = useRef(-1);
-
-  /**
-   * Open at the newest message, and stay there when one arrives.
-   *
-   * The thread is a fixed-height window (~320px), so without the first part 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.
-   *
-   * The second part matters because the thread sits above the composer: a reply
-   * pushes the composer down and out of sight, leaving the reader in the middle
-   * of the conversation with no sign their message landed.
-   */
-  useEffect(() => {
-    const box = thread.current;
-    if (!box) return;
-    const first = seen.current < 0;
-    if (first || ticket.messages.length > seen.current) {
-      box.scrollTop = box.scrollHeight;
-      // Jumped on open — that is where the conversation starts, not a
-      // transition from somewhere else, and animating it reads as a glitch.
-      if (!first) box.lastElementChild?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-    }
-    seen.current = ticket.messages.length;
-  }, [ticket.id, ticket.messages.length]);
-
-  function send(): void {
-    const body = editor.current?.value() ?? "";
-    if (!body || sending) return;
-    onSend(body);
-    editor.current?.clear();
-  }
-
-  return (
-    <section className="lw-card">
-      <h3 className="lw-card__title">{t.conversation}</h3>
-
-      <div ref={thread} className="lw-thread">
-        {ticket.messages.length === 0 && <p className="lw-thread__empty">{t.noMessages}</p>}
-        {ticket.messages.map((message) => (
-          <article
-            key={message.id}
-            className={`lw-msg${message.authorRole === "REPORTER" ? " lw-msg--mine" : ""}`}
-          >
-            {/* 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. */}
-            <div className="lw-msg__bubble">
-              <p className="lw-msg__meta">
-                {message.authorRole === "AGENT" ? (
-                  <span className="lw-msg__who">{t.team}</span>
-                ) : (
-                  <>
-                    <span className="lw-msg__who">{message.authorName || t.you}</span>
-                    <span className="lw-msg__role">{t.reporterRole}</span>
-                  </>
-                )}
-                <span>· {formatDateTime(message.createdAt, timezone, locale)}</span>
-                {message.editedAt && <span className="lw-msg__edited">· {t.edited}</span>}
-                {/* Your own only. The server refuses any message the caller did
-                    not write, so this button is a convenience, not the rule. */}
-                {message.authorRole === "REPORTER" && editingId !== message.id && (
-                  <button type="button" className="lw-msg__edit" onClick={() => setEditingId(message.id)}>
-                    <PencilIcon /> {t.edit}
-                  </button>
-                )}
-              </p>
-              {editingId === message.id ? (
-                <div className="lw-msg__editing">
-                  <RichReplyEditor
-                    ref={draft}
-                    placeholder={t.replyPlaceholder}
-                    host={host}
-                    locale={locale}
-                    disabled={savingEdit}
-                    uploadImage={uploadImage}
-                    onError={onError}
-                    labels={LABELS}
-                    initial={message.body}
-                  />
-                  <div className="lw-msg__editActions">
-                    <button type="button" className="lw-btn" disabled={savingEdit} onClick={() => setEditingId(null)}>
-                      <XSmallIcon /> {t.cancel}
-                    </button>
-                    <button type="button" className="lw-send" disabled={savingEdit} onClick={() => void saveEdit(message.id)}>
-                      <CheckSmallIcon /> {t.saveEdit}
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                <TicketBody html={message.body} host={host} />
-              )}
-            </div>
-          </article>
-        ))}
-      </div>
-
-      <div className="lw-composer">
-        <RichReplyEditor
-          ref={editor}
-          placeholder={t.replyPlaceholder}
-          host={host}
-          locale={locale}
-          disabled={sending}
-          uploadImage={uploadImage}
-          onError={onError}
-          labels={LABELS}
-        />
-        <div className="lw-composer__actions">
-          <button type="button" className="lw-send" disabled={sending} onClick={send}>
-            <SendIcon /> {sending ? t.sending : t.send}
-          </button>
-        </div>
-      </div>
-    </section>
-  );
-}

package/src/components/TicketDetail.tsx

@@ -1,110 +0,0 @@
-/**
- * One report: what was filed, where it stands, what happened, and the thread.
- * The order is the original's.
- */
-import {
-  formatDateTime, ticketKey,
-  type MyTicketDetail, type RealmConfig, type StatusEvent, type StatusMaps, type TicketStrings,
-} from "@lightworkai.official/debug-capture";
-import { TicketBody } from "./TicketBody";
-import { StatusHero } from "./StatusHero";
-import { ReopenPanel } from "./ReopenPanel";
-import { TicketTimeline } from "./TicketTimeline";
-import { TicketConversation } from "./TicketConversation";
-import { TicketScreenshots } from "./TicketScreenshots";
-import { ArrowLeftIcon } from "./icons";
-
-export 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;
-}) {
-  const { ticket, config, maps, t, host, locale } = props;
-  const lang: "th" | "en" = locale === "en" ? "en" : "th";
-  const canReopen = maps.isClosed(ticket.status) && config.featureFlags.selfServiceReopen === true;
-  const updated = ticket.updatedAt && ticket.updatedAt !== ticket.createdAt;
-  const when = (iso: string | null) => formatDateTime(iso, config.timezone, locale);
-
-  /*
-   * 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 = ticket.attachments.filter((a) => (a.contentType ?? "").startsWith("image/"));
-
-  return (
-    <div className="lw-detail">
-      <button type="button" className="lw-back" onClick={props.onBack}>
-        <ArrowLeftIcon /> {t.back}
-      </button>
-
-      <section className="lw-card">
-        <h3 className="lw-card__heading">{ticket.title}</h3>
-        <div className="lw-facts">
-          <span className="lw-key">{ticketKey(config.realm.slug, ticket.number)}</span>
-          {ticket.category && <span className="lw-chip">{ticket.category}</span>}
-          <span>{t.colCreated} {when(ticket.createdAt)}</span>
-          {updated && <span>{t.colUpdated} {when(ticket.updatedAt)}</span>}
-        </div>
-        {ticket.description && <TicketBody className="lw-intro" html={ticket.description} host={host} />}
-        {ticket.routeUrl && (
-          <p className="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} />
-
-      {canReopen && <ReopenPanel t={t} locale={lang} busy={props.reopening} onReopen={props.onReopen} />}
-
-      <section className="lw-card">
-        <h3 className="lw-card__title">{lang === "en" ? "Progress" : "ความคืบหน้า"}</h3>
-        <TicketTimeline
-          history={props.history}
-          status={ticket.status}
-          createdAt={ticket.createdAt}
-          maps={maps}
-          timezone={config.timezone}
-          locale={lang}
-        />
-      </section>
-
-      <TicketConversation
-        ticket={ticket}
-        t={t}
-        host={host}
-        timezone={config.timezone}
-        locale={locale}
-        sending={props.sending}
-        uploadImage={props.uploadImage}
-        onSend={props.onSend}
-        onEdited={props.onEdited}
-        onError={props.onError}
-      />
-
-      {screenshots.length > 0 && (
-        <TicketScreenshots
-          images={screenshots}
-          title={lang === "en" ? "Screenshots you sent" : "ภาพหน้าจอที่คุณแจ้ง"}
-          attachmentUrl={props.attachmentUrl}
-        />
-      )}
-    </div>
-  );
-}

package/src/components/TicketScreenshots.tsx

@@ -1,41 +0,0 @@
-/**
- * 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 { useEffect, useState } from "react";
-import type { TicketAttachment } from "@lightworkai.official/debug-capture";
-
-export function TicketScreenshots({
-  images, title, attachmentUrl,
-}: { images: TicketAttachment[]; title: string; attachmentUrl: (id: string) => Promise<string> }) {
-  const [urls, setUrls] = useState<Record<string, string>>({});
-
-  useEffect(() => {
-    let live = true;
-    for (const image of images) {
-      attachmentUrl(image.id).then(
-        (url) => live && setUrls((prev) => ({ ...prev, [image.id]: url })),
-        // Drop the frame rather than leave a broken-image icon where a
-        // screenshot should be.
-        () => undefined,
-      );
-    }
-    return () => {
-      live = false;
-    };
-  }, [images, attachmentUrl]);
-
-  return (
-    <section className="lw-card">
-      <h3 className="lw-card__title">{title}</h3>
-      {images.map((image) =>
-        urls[image.id] ? (
-          <img key={image.id} className="lw-shot" src={urls[image.id]} alt={image.filename ?? ""} />
-        ) : null,
-      )}
-    </section>
-  );
-}

package/src/components/TicketTable.tsx

@@ -1,161 +0,0 @@
-/**
- * The reporter's list — the original's seven columns.
- *
- * 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 { useMemo } from "react";
-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";
-import { CheckIcon, MessageIcon } from "./icons";
-
-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" },
-];
-
-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 function TicketTable(props: TicketTableProps) {
-  const { items, maps, t, slug, timezone, locale, keyword, statusFilter, sort, page } = props;
-
-  const visible = useMemo(
-    () =>
-      items
-        .filter((item) => (statusFilter ? item.status === statusFilter : true))
-        .filter((item) => matchesKeyword(item, keyword, slug, maps.labelOf))
-        .sort(compareBy(sort, maps, slug)),
-    [items, statusFilter, keyword, slug, maps, sort],
-  );
-
-  const pages = pageCount(visible.length);
-  // A filter can strand the reader past the end of the shorter list.
-  const current = Math.min(page, pages);
-  const rows = pageOf(visible, current);
-  props.onCount?.(visible.length);
-
-  const when = (iso: string | null) => formatDateTime(iso, timezone, locale);
-
-  return (
-    <>
-      <div className="lw-tablewrap">
-        <table className="lw-table">
-          <thead>
-            <tr>
-              {COLUMNS.map((column) => (
-                <th
-                  key={column.key}
-                  scope="col"
-                  className="lw-th"
-                  style={column.width ? { width: column.width } : undefined}
-                  aria-sort={
-                    sort.key === column.key ? (sort.direction === "asc" ? "ascending" : "descending") : undefined
-                  }
-                  onClick={() => props.onSort(column.key)}
-                >
-                  {t[column.label] as string}{" "}
-                  <span className="lw-arrow">
-                    {sort.key === column.key ? (sort.direction === "asc" ? "▲" : "▼") : "⇅"}
-                  </span>
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {rows.length === 0 ? (
-              <tr>
-                <td colSpan={COLUMNS.length} className="lw-empty">
-                  {items.length === 0 ? t.empty : t.emptyFiltered}
-                </td>
-              </tr>
-            ) : (
-              rows.map((row) => (
-                <tr
-                  key={row.id}
-                  className="lw-row"
-                  tabIndex={0}
-                  onClick={() => props.onOpen(row.id)}
-                  onKeyDown={(event) => {
-                    if (event.key === "Enter" || event.key === " ") {
-                      event.preventDefault();
-                      props.onOpen(row.id);
-                    }
-                  }}
-                >
-                  <td className="lw-num">{ticketKey(slug, row.number)}</td>
-                  <td className="lw-title">{row.title}</td>
-                  <td>
-                    {row.category ? <span className="lw-chip">{row.category}</span> : <span className="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. */}
-                    {maps.isAwaitingReply(row.status) ? (
-                      <span className="lw-pill lw-pill--awaiting">
-                        <MessageIcon /> {t.awaitingReply}
-                      </span>
-                    ) : (
-                      <StatusPill label={maps.labelOf(row.status)} tone={statusTone(maps.columnOf(row.status)?.color)} />
-                    )}
-                  </td>
-                  <td>
-                    {hasSolution(row) ? (
-                      <span className="lw-pill lw-pill--solution">
-                        <CheckIcon /> {t.hasSolution}
-                      </span>
-                    ) : hasTeamReply(row) ? (
-                      <span className="lw-pill lw-pill--replied">
-                        <MessageIcon /> {t.hasReply}
-                      </span>
-                    ) : (
-                      <span className="lw-muted">{t.noReply}</span>
-                    )}
-                  </td>
-                  <td className="lw-dim">{when(row.createdAt)}</td>
-                  <td className="lw-dim">{when(row.updatedAt)}</td>
-                </tr>
-              ))
-            )}
-          </tbody>
-        </table>
-      </div>
-
-      {(visible.length > rows.length || current > 1) && (
-        <div className="lw-pager">
-          <span>{t.of(current, pages)}</span>
-          <button type="button" className="lw-btn" disabled={current <= 1} onClick={() => props.onPage(current - 1)}>
-            {t.prev}
-          </button>
-          <button type="button" className="lw-btn" disabled={current >= pages} onClick={() => props.onPage(current + 1)}>
-            {t.next}
-          </button>
-        </div>
-      )}
-    </>
-  );
-}