@catandbox/schrodinger-web-adapter 0.1.32 → 0.1.34

package/dist/client/portal.js

@@ -35,6 +35,7 @@ export async function renderSupportPortal(container, options = {}) {
       </s-card>
     `;
     }
+    const locale = options.locale;
     async function navigate(view, ticketId) {
         currentView = view;
         if (ticketId !== undefined) {
@@ -44,11 +45,11 @@ export async function renderSupportPortal(container, options = {}) {
         showLoading();
         switch (currentView) {
             case "list":
-                await renderTicketList(container, client, emitter);
+                await renderTicketList(container, client, emitter, locale);
                 break;
             case "detail":
                 if (selectedTicketId) {
-                    await renderTicketDetail(container, client, selectedTicketId, emitter);
+                    await renderTicketDetail(container, client, selectedTicketId, emitter, locale);
                 }
                 break;
             case "create":

package/dist/client/ticket-detail.d.ts

@@ -6,4 +6,4 @@ export interface TicketDetailEvents {
     "ticket:closed": string;
     "ticket:reopened": string;
 }
-export declare function renderTicketDetail(container: HTMLElement, client: SupportApiClient, ticketId: string, emitter: EventEmitter<TicketDetailEvents>): Promise<void>;
+export declare function renderTicketDetail(container: HTMLElement, client: SupportApiClient, ticketId: string, emitter: EventEmitter<TicketDetailEvents>, locale?: string): Promise<void>;

package/dist/client/ticket-detail.js

@@ -1,22 +1,22 @@
 import { renderStatusBadge } from "./status-badge";
 import { createFileUpload } from "./file-upload";
 import { setInnerHtml, escapeHtml, formatBodyText, renderFormattingField, attachFormattingField } from "./dom-utils";
-function formatTimestamp(timestamp) {
+function formatTimestamp(timestamp, locale) {
     const date = new Date(timestamp * 1000);
     const now = new Date();
     const isToday = date.toDateString() === now.toDateString();
     if (isToday) {
-        return date.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+        return date.toLocaleTimeString(locale, { hour: "numeric", minute: "2-digit" });
     }
-    return date.toLocaleDateString(undefined, {
+    return date.toLocaleDateString(locale, {
         month: "short",
         day: "numeric",
         hour: "numeric",
         minute: "2-digit"
     });
 }
-function formatFullDate(timestamp) {
-    return new Date(timestamp * 1000).toLocaleDateString(undefined, {
+function formatFullDate(timestamp, locale) {
+    return new Date(timestamp * 1000).toLocaleDateString(locale, {
         month: "long",
         day: "numeric",
         year: "numeric",
@@ -24,7 +24,7 @@ function formatFullDate(timestamp) {
         minute: "2-digit"
     });
 }
-export async function renderTicketDetail(container, client, ticketId, emitter) {
+export async function renderTicketDetail(container, client, ticketId, emitter, locale) {
     container.innerHTML = `
     <s-card>
       <s-box padding="large">
@@ -64,7 +64,7 @@ export async function renderTicketDetail(container, client, ticketId, emitter) {
                     ${renderStatusBadge(ticket.status)}
                     <s-text tone="neutral">#${ticket.id.slice(0, 8)}</s-text>
                     <s-text tone="neutral">&middot;</s-text>
-                    <s-text tone="neutral">Created ${formatFullDate(ticket.createdAt)}</s-text>
+                    <s-text tone="neutral">Created ${formatFullDate(ticket.createdAt, locale)}</s-text>
                   </s-stack>
                 </div>
                 ${!isOpen ? `<s-button id="sch-reopen-ticket-btn">Reopen</s-button>` : ""}
@@ -99,7 +99,7 @@ export async function renderTicketDetail(container, client, ticketId, emitter) {
               </s-box>
             </s-card>`
             : `<s-stack gap="small-100">
-                ${messages.map((msg) => renderMessage(msg, aliasMap.get(msg.authorAliasId ?? "") ?? null)).join("")}
+                ${messages.map((msg) => renderMessage(msg, aliasMap.get(msg.authorAliasId ?? "") ?? null, locale)).join("")}
               </s-stack>`}
         </div>
 
@@ -223,7 +223,7 @@ function getInitials(displayName) {
     }
     return displayName.slice(0, 2).toUpperCase();
 }
-function renderMessage(msg, alias) {
+function renderMessage(msg, alias, locale) {
     const isSystem = msg.authorType === "system";
     const isAgent = msg.authorType === "agent" || msg.authorType === "admin";
     const isCustomer = !isSystem && !isAgent;
@@ -245,7 +245,7 @@ function renderMessage(msg, alias) {
     <div style="min-width:0;">
       <s-stack direction="inline" alignItems="baseline" gap="small" justifyContent="${isCustomer ? "end" : "start"}" style="margin-bottom:4px;">
         <s-text type="strong">${label}</s-text>
-        <s-text tone="neutral">${formatTimestamp(msg.createdAt)}</s-text>
+        <s-text tone="neutral">${formatTimestamp(msg.createdAt, locale)}</s-text>
       </s-stack>
       <div style="background:${bubbleBg}; padding:10px 14px; border-radius:12px; display:inline-block; text-align:left; max-width:100%;">
         <s-text style="white-space:pre-wrap; word-break:break-word;">${formatBodyText(msg.bodyPlain)}</s-text>

package/dist/client/ticket-list.d.ts

@@ -5,4 +5,4 @@ export interface TicketListEvents {
     "ticket:select": string;
     "ticket:create": void;
 }
-export declare function renderTicketList(container: HTMLElement, client: SupportApiClient, emitter: EventEmitter<TicketListEvents>): Promise<void>;
+export declare function renderTicketList(container: HTMLElement, client: SupportApiClient, emitter: EventEmitter<TicketListEvents>, locale?: string): Promise<void>;

package/dist/client/ticket-list.js

@@ -164,27 +164,28 @@ function initHydrogenLogo(el) {
         renderer.dispose();
     };
 }
-function formatDate(timestamp) {
-    return new Date(timestamp * 1000).toLocaleDateString(undefined, {
+function formatDate(timestamp, locale) {
+    return new Date(timestamp * 1000).toLocaleDateString(locale, {
         month: "short",
         day: "numeric",
         year: "numeric"
     });
 }
-function timeAgo(timestamp) {
+function timeAgo(timestamp, locale) {
+    const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
     const seconds = Math.floor(Date.now() / 1000 - timestamp);
     if (seconds < 60)
-        return "just now";
+        return rtf.format(-seconds, "second");
     const minutes = Math.floor(seconds / 60);
     if (minutes < 60)
-        return `${minutes}m ago`;
+        return rtf.format(-minutes, "minute");
     const hours = Math.floor(minutes / 60);
     if (hours < 24)
-        return `${hours}h ago`;
+        return rtf.format(-hours, "hour");
     const days = Math.floor(hours / 24);
     if (days < 7)
-        return `${days}d ago`;
-    return formatDate(timestamp);
+        return rtf.format(-days, "day");
+    return formatDate(timestamp, locale);
 }
 const STATUS_OPTIONS = [
     { value: "", label: "All statuses" },
@@ -198,7 +199,7 @@ const ORDER_OPTIONS = [
     { value: "newest", label: "Latest first" },
     { value: "oldest", label: "Oldest first" }
 ];
-export async function renderTicketList(container, client, emitter) {
+export async function renderTicketList(container, client, emitter, locale) {
     // Load tickets, categories and Three.js in parallel
     const [result, portalConfig] = await Promise.all([
         client.listTickets({}).catch(() => ({ items: [] })),
@@ -234,7 +235,7 @@ export async function renderTicketList(container, client, emitter) {
             </s-button>
           </div>
 
-          <div style="display:flex; gap:12px; flex-wrap:wrap;">
+          <div id="sch-filter-bar" style="display:none; gap:12px; flex-wrap:wrap;">
             ${categories.length > 0 ? `
             <div style="flex:1; min-width:140px;">
               <s-select id="sch-filter-category" label="Category">
@@ -272,6 +273,11 @@ export async function renderTicketList(container, client, emitter) {
     }
     function renderBody() {
         const body = container.querySelector("#sch-ticket-list-body");
+        const filterBar = container.querySelector("#sch-filter-bar");
+        const hasActiveFilter = !!(categoryFilter || statusFilter);
+        if (filterBar) {
+            filterBar.style.display = allTickets.length > 0 || hasActiveFilter ? "flex" : "none";
+        }
         let filtered = allTickets.filter((t) => {
             if (statusFilter && t.status !== statusFilter)
                 return false;
@@ -319,7 +325,7 @@ export async function renderTicketList(container, client, emitter) {
                 <s-text variant="bodyMd" fontWeight="semibold">${escapeHtml(ticket.title)}</s-text>
               </div>
               <div style="margin-top:2px;">
-                <s-text variant="bodySm" tone="subdued">#${ticket.id.slice(0, 8)} &middot; Updated ${timeAgo(ticket.updatedAt)}</s-text>
+                <s-text variant="bodySm" tone="subdued">#${ticket.id.slice(0, 8)} &middot; Updated ${timeAgo(ticket.updatedAt, locale)}</s-text>
               </div>
             </div>
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catandbox/schrodinger-web-adapter",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",