@wix/himalaya-cli 0.1411.0 → 0.1412.0

package/templates/restaurant-owner/tier5-src/himi-owner-lite-inbox-thread/index.ts

@@ -0,0 +1,307 @@
+// Tier-5 bundle: __HIMI_APP_NAME__ — Inbox thread + reply.
+//
+// `himalaya.input` carries `id` and `kind`:
+//   kind "chatroom" — a chat-web chatroom id, from an Inbox row; used as-is.
+//   kind "contact"  — a Wix contact id, from Ping's `inbox/conversation/:contactId`
+//                     notification. Resolved to the conversation whose participant is that
+//                     contact; when none is found the screen goes back to the Inbox list it
+//                     is stacked on, which is a better place to land than "not found" for a message the
+//                     owner was just told about.
+//
+// Reads and the composer are chat-web (`getMessages`, `sendChatMessage`), lifted from the
+// wix-owner-clone app's `wix-owner-inbox-thread`. Keeping the thread live while it is open
+// is the shared `_shared/chat-live.ts`: a `wix-realtime://` stream when the screen is given
+// a channel (`chatRealtime` appear param), else a 4 s foreground re-read. Either way a
+// change is answered by re-reading the thread, never by trusting an event's payload.
+//
+// Honest states: a missing id is the not-found state with no composer; a failed read is the
+// load-error state — never an empty conversation whose Send can only fail. A failed send
+// keeps the draft and says why.
+
+import { defineService, navigate, type NavDirective, type PollDirective, type StreamDirective } from "@himalaya/state";
+import { getMessages, sendChatMessage, listChatrooms, markChatroomRead, getChatToken, type ChatMessage } from "@himalaya/wix-chat-web";
+import { formatMonthDayTime } from "../_shared/engine-intl.js";
+import { presence, presenceAfterError, detailInputId, type PresenceFlags } from "../_shared/detail-presence.js";
+import { ownerLoadError, ownerWriteError, writeMayHaveLanded } from "../_shared/owner-load-error.js";
+import { stashCopy, copyParam } from "../_shared/himi-copy.js";
+import { chatRealtimeConfig, createReloadGate, createSendIntents, createVisitToken, liveDirectives, postWithVisitToken, liveFallback, type ChatLiveMode, type ChatRealtimeConfig } from "../_shared/chat-live.js";
+
+const SERVICE = "ownerLiteInboxThread";
+const PAGE_SIZE = 50;
+/** How far back a contact → conversation lookup reads. */
+const LOOKUP_SIZE = 100;
+
+export interface Bubble {
+  id: string;
+  text: string;
+  when: string;
+  /** " " for the owner's own messages (a gated flexible spacer pushes the bubble right),
+   *  "" for the customer's (the spacer collapses, the bubble stays left). */
+  leadFill: string;
+  mine: boolean;
+  theirs: boolean;
+  spokenLabel: string;
+}
+
+export interface ThreadState extends PresenceFlags {
+  status: "loading" | "ready" | "error";
+  phase: "loading" | "ready";
+  chatroomId: string;
+  headerName: string;
+  messages: Bubble[];
+  hideEmpty: boolean;
+  error: string;
+  draft: string;
+  sendHint: string;
+  sending: boolean;
+  live: ChatLiveMode;
+  _stream?: StreamDirective;
+  _poll?: PollDirective;
+  _nav?: NavDirective;
+}
+
+function input(): { id: string; kind: string } {
+  const i = (globalThis as { himalaya?: { input?: { kind?: unknown } } }).himalaya?.input;
+  return { id: detailInputId(), kind: typeof i?.kind === "string" ? i.kind : "" };
+}
+
+/** chat-web senders: business / businessUser / user are the owner's side. */
+export function isBusiness(m: ChatMessage): boolean {
+  const t = m.sender?.type || "";
+  return t === "business" || t === "businessUser" || t === "user";
+}
+
+function textOf(m: ChatMessage): string {
+  const part = (m.data ?? []).find((p) => (p.mimeType || "").startsWith("text"));
+  return (part?.data?.text || m.summary || "").trim();
+}
+
+export function bubbles(msgs: ChatMessage[]): Bubble[] {
+  // chat-web answers newest-first by default; a thread reads oldest at the top.
+  const ordered = [...msgs].sort((a, b) => (a.createdAt ?? 0) - (b.createdAt ?? 0));
+  const you = copyParam("ownerInbox.you", "You");
+  return ordered
+    .map((m, i) => {
+      const mine = isBusiness(m);
+      const text = textOf(m);
+      const when = m.createdAt ? formatMonthDayTime(new Date(m.createdAt)) : "";
+      const who = mine ? you : (m.senderDisplayData?.name || "").trim();
+      return { id: m.id || `m${i}`, text, when, leadFill: mine ? " " : "", mine, theirs: !mine, spokenLabel: [who, text, when].filter(Boolean).join(", ") };
+    })
+    .filter((b) => b.text);
+}
+
+/** The newest message's sequence — what "read up to here" names. */
+function newestSequence(msgs: ChatMessage[]): number | undefined {
+  let max: number | undefined;
+  for (const m of msgs) if (typeof m.sequence === "number" && Number.isSafeInteger(m.sequence) && (max === undefined || m.sequence > max)) max = m.sequence;
+  return max;
+}
+
+function headerOf(msgs: ChatMessage[], fallback: string): string {
+  const name = msgs.find((m) => !isBusiness(m))?.senderDisplayData?.name?.trim();
+  return name || fallback || copyParam("ownerInbox.untitled", "Conversation");
+}
+
+/** The conversation a contact is in, or "" when the owner's recent conversations have none. */
+async function chatroomForContact(contactId: string): Promise<{ id: string; name: string }> {
+  const rooms = await listChatrooms(LOOKUP_SIZE);
+  const room = rooms.find((r) => r?.id && r.participantId === contactId);
+  return room ? { id: room.id, name: (room.displayData?.name || "").trim() } : { id: "", name: "" };
+}
+
+// The conversation the gate re-reads. Module state, not worker state: a re-read must use
+// the conversation this screen opened even if an older state object is in flight.
+let current = "";
+let realtime: ChatRealtimeConfig | null = null;
+
+// ONE chatToken per visit (`_shared/chat-live.ts`): a 4 s re-read would otherwise mint a
+// token every 4 s on top of its GET. Reset on every open.
+const visitToken = createVisitToken(() => getChatToken().then((t) => t.chatToken));
+async function readThread(): Promise<ChatMessage[]> {
+  const token = visitToken.get();
+  try {
+    return await getMessages(current, PAGE_SIZE, { chatToken: await token });
+  } catch (e) {
+    visitToken.drop(token);
+    throw e;
+  }
+}
+
+/** Send ids that belong to the intent (conversation + text), not the tap. */
+const intents = createSendIntents();
+
+/** Post once per intent: a retried tap of the same text reuses its message id. */
+async function postOnce(chatroomId: string, text: string): Promise<void> {
+  const messageId = intents.idFor(chatroomId, text);
+  await postWithVisitToken(visitToken, (chatToken) => sendChatMessage(chatroomId, text, { chatToken, messageId }));
+  intents.settle(chatroomId, text);
+}
+
+const gate = createReloadGate(readThread);
+
+/** The newest sequence already marked read, per conversation. A re-read every 4 s must
+ *  not become a write every 4 s: only a message newer than this is marked. Reset on every
+ *  open — the owner may have marked the conversation unread from the list in between. */
+const markedUpTo = new Map<string, number>();
+
+/** Tell chat-web the owner has read the thread, so the Inbox badge clears on return.
+ *  Best effort: a failure here costs a stale badge, never the thread — and forgets the
+ *  mark, so the next read tries again. */
+function markRead(chatroomId: string, msgs: ChatMessage[]): void {
+  const seq = newestSequence(msgs);
+  if (seq === undefined || seq <= (markedUpTo.get(chatroomId) ?? -1)) return;
+  markedUpTo.set(chatroomId, seq);
+  void visitToken.get()
+    .then((t) => markChatroomRead(chatroomId, seq, { chatToken: t }))
+    .catch(() => {
+      if (markedUpTo.get(chatroomId) === seq) markedUpTo.delete(chatroomId);
+    });
+}
+
+function withMessages(s: ThreadState, msgs: ChatMessage[]): ThreadState {
+  const messages = bubbles(msgs);
+  return { ...s, messages, hideEmpty: messages.length > 0, headerName: headerOf(msgs, s.headerName), error: "" };
+}
+
+/**
+ * The state to put a finished read onto. NOT the state the action started with: the
+ * runtime replaces the whole service state with what an action returns, so a read that
+ * resolves after the owner typed or sent would otherwise put back the old draft and the
+ * old messages. Reading the live state after the `await` keeps everything that changed
+ * meanwhile and replaces only what the read is the answer for.
+ */
+function live(): ThreadState {
+  return svc.getState();
+}
+
+/** A tick or an event: re-read, keep the screen as it is when the read fails (the next
+ *  tick tries again), and do nothing before the conversation is open. */
+async function reread(s: ThreadState): Promise<ThreadState> {
+  if (!s.chatroomId || !s.found || s.chatroomId !== current) return s;
+  try {
+    const msgs = await gate.request();
+    const now = live();
+    if (now.chatroomId !== s.chatroomId) return now;
+    markRead(s.chatroomId, msgs);
+    return withMessages(now, msgs);
+  } catch {
+    return live();
+  }
+}
+
+/** A send in flight. Set synchronously, before the first `await`, so a second tap cannot
+ *  start a second send: an async action publishes no state until it returns, so a state
+ *  flag could not guard this. */
+let sendingNow = false;
+
+const INITIAL: ThreadState = {
+  ...presence("loading"),
+  status: "loading",
+  phase: "loading",
+  chatroomId: "",
+  headerName: "",
+  messages: [],
+  hideEmpty: true,
+  error: "",
+  draft: "",
+  sendHint: "",
+  sending: false,
+  live: "off",
+};
+
+const svc = defineService<ThreadState, {
+  load: (s: ThreadState, arg?: unknown) => Promise<ThreadState>;
+  refresh: (s: ThreadState) => Promise<ThreadState>;
+  onStreamEvent: (s: ThreadState) => Promise<ThreadState>;
+  onStreamError: (s: ThreadState) => ThreadState;
+  setDraft: (s: ThreadState, arg?: unknown) => ThreadState;
+  send: (s: ThreadState) => Promise<ThreadState>;
+  back: (s: ThreadState) => ThreadState;
+}>(SERVICE, {
+  state: INITIAL,
+  actions: {
+    load: async (s, arg) => {
+      stashCopy(arg);
+      const param = (arg as { chatRealtime?: unknown } | null | undefined)?.chatRealtime;
+      if (param !== undefined) realtime = chatRealtimeConfig(param);
+      const { id, kind } = input();
+      if (!id) return { ...s, ...presence("missing"), status: "ready", phase: "ready", messages: [], hideEmpty: true, live: "off" };
+      visitToken.reset();
+
+      let chatroomId = id;
+      let headerName = s.headerName;
+      if (kind === "contact") {
+        try {
+          const room = await chatroomForContact(id);
+          // No conversation for that contact among the recent ones: go BACK to the Inbox the
+          // thread is stacked on (a push synthesizes Inbox → thread). A `replace` would leave
+          // Inbox → Inbox, with a Back to an identical list.
+          if (!room.id) return navigate({ ...live(), status: "ready", phase: "ready" }, { presentation: "back" });
+          chatroomId = room.id;
+          headerName = room.name || headerName;
+        } catch (e) {
+          return { ...live(), ...presence("failed"), status: "error", phase: "ready", error: ownerLoadError(e), live: "off" };
+        }
+      }
+
+      current = chatroomId;
+      markedUpTo.delete(chatroomId);
+      try {
+        const msgs = await readThread();
+        markRead(chatroomId, msgs);
+        const next = withMessages({ ...live(), ...presence("found"), status: "ready", phase: "ready", chatroomId, headerName }, msgs);
+        return { ...next, ...liveDirectives(realtime, chatroomId, SERVICE) };
+      } catch (e) {
+        return { ...live(), ...presenceAfterError(e), status: "error", phase: "ready", chatroomId, headerName, messages: [], hideEmpty: true, error: ownerLoadError(e), live: "off" };
+      }
+    },
+    // The fallback poll's tick.
+    refresh: async (s) => reread(s),
+    // "The thread changed" — the payload is deliberately not read.
+    onStreamEvent: async (s) => reread(s),
+    // The channel is gone (or this host refuses it, as the web host does): poll instead.
+    onStreamError: (s) => (s.chatroomId ? { ...s, ...liveFallback(SERVICE) } : s),
+    setDraft: (s, arg) => {
+      const v = typeof arg === "string" ? arg : (arg as { value?: unknown } | null | undefined)?.value;
+      return { ...s, draft: typeof v === "string" ? v : "", sendHint: "" };
+    },
+    // "Back to Inbox" from the not-found state: pop to the Inbox the thread is stacked on.
+    // `himi.open` would push a second Inbox, and Back would then return to the dead thread.
+    back: (s) => navigate(s, { presentation: "back" }),
+    send: async (s) => {
+      const text = s.draft.trim();
+      if (!text) return { ...s, sendHint: copyParam("ownerInbox.typeFirst", "Type a message first.") };
+      if (!s.chatroomId || !s.found || sendingNow) return s;
+      sendingNow = true;
+      try {
+        try {
+          await postOnce(s.chatroomId, text);
+        } catch (e) {
+          // The draft stays: the owner should not have to type it again. A send that may
+          // have landed says so, so a retry does not post it twice unknowingly.
+          return { ...live(), sendHint: writeMayHaveLanded(e) ? ownerWriteError(e) : `${copyParam("ownerInbox.sendFailed", "Couldn’t send")} — ${ownerWriteError(e)}` };
+        }
+        // Clear the composer only if it still holds what was sent — the owner may already be
+        // typing the next message — judged on the state AFTER the re-read's await.
+        const cleared = (now: ThreadState): string => (now.draft.trim() === text ? "" : now.draft);
+        try {
+          const msgs = await gate.request();
+          const now = live();
+          return withMessages({ ...now, draft: cleared(now), sendHint: "" }, msgs);
+        } catch {
+          // Sent, but the re-read failed: show it locally until the next tick replaces it.
+          const you = copyParam("ownerInbox.you", "You");
+          const now = live();
+          const mine: Bubble = { id: `local-${now.messages.length}`, text, when: "", leadFill: " ", mine: true, theirs: false, spokenLabel: `${you}, ${text}` };
+          return { ...now, draft: cleared(now), sendHint: "", messages: [...now.messages, mine], hideEmpty: true };
+        }
+      } finally {
+        sendingNow = false;
+      }
+    },
+  },
+});
+
+svc.load();
+export { svc };

package/templates/retail-store-owner/config.ts

@@ -78,6 +78,23 @@ export default defineApp({
         "parentScreenId": "",
         "tabId": "manage"
       },
+      {
+        "screenId": "himi_owner_lite_inbox",
+        "isPublic": false,
+        "paramKeys": [],
+        "parentScreenId": "",
+        "tabId": "inbox"
+      },
+      {
+        "screenId": "himi_owner_lite_inbox_thread",
+        "isPublic": false,
+        "paramKeys": [
+          "id",
+          "kind"
+        ],
+        "parentScreenId": "himi_owner_lite_inbox",
+        "tabId": "inbox"
+      },
       {
         "screenId": "himi_owner_lite_search",
         "isPublic": false,
@@ -508,6 +525,12 @@ export default defineApp({
           "icon": "home",
           "selectedIcon": "home_fill"
         },
+        {
+          "id": "inbox",
+          "screenId": "himi_owner_lite_inbox",
+          "label": "Inbox",
+          "icon": "chat"
+        },
         {
           "id": "aria",
           "screenId": "himi_owner_lite_aria",
@@ -532,6 +555,12 @@ export default defineApp({
           "icon": "home",
           "selectedIcon": "home_fill"
         },
+        {
+          "id": "inbox",
+          "screenId": "himi_owner_lite_inbox",
+          "label": "Inbox",
+          "icon": "chat"
+        },
         {
           "id": "aria",
           "screenId": "himi_owner_lite_aria",