@wix/himalaya-cli 0.1037.0 → 0.1039.0

package/templates/owner-lite/tier5-src/_shared/aria-mentions.ts

@@ -0,0 +1,202 @@
+// Mentions for the Aria chat: let the owner point at a product, a contact, a
+// coupon… and have the reference travel WITH the turn, beside the text.
+//
+// The shape follows the native Aria app (iOS + Android), which talks to the same
+// Wix services:
+//
+//  - The picker is two levels: the item PROVIDERS the site has installed (the
+//    categories), then one provider's ITEMS, searchable.
+//  - Only an ALLOWLISTED provider is offered, under a fixed label. The service
+//    lists every provider an installed app registers, and most of them are not
+//    things an owner talks to an assistant about.
+//  - A pick becomes a chip above the composer; the message text carries NO
+//    token. On send, each chip becomes a `global` reference whose `data` names
+//    the item and its category — see `mentionReference` in the chat client.
+//
+// This file is pure: the catalogue, the model the chat core keeps, and the flat
+// view the descriptor binds. The network calls and the state plumbing live in
+// aria-chat.ts beside everything else that talks to the chat-service.
+//
+// Copied verbatim into every generated starter app, so it explains itself
+// without pointing at anything only this repo has.
+
+/** One allowlisted category: the label shown AND sent (the model reads the
+ *  English label, so it is not localized), and whether its items have
+ *  pictures worth showing. */
+export interface MentionCategory { label: string; showsImage: boolean }
+
+/** The providers a picker offers, keyed by the provider's `providerName`
+ *  lowercased. Transcribed from the native Aria app's `MentionProviderCatalog`
+ *  — the same fifteen entries, labels and picture flags — so both clients
+ *  offer the same categories and send the same `type`. */
+export const MENTION_CATALOG: Readonly<Record<string, MentionCategory>> = {
+  "contacts": { label: "Contacts", showsImage: true },
+  "product": { label: "Products", showsImage: true },
+  "bookings services": { label: "Bookings Services", showsImage: true },
+  "categories": { label: "Product Categories", showsImage: false },
+  "cms": { label: "CMS", showsImage: false },
+  "wix forms": { label: "Forms", showsImage: false },
+  "pay links": { label: "Pay Links", showsImage: false },
+  "coupons": { label: "Coupons", showsImage: false },
+  "menu item": { label: "Menu Items", showsImage: true },
+  "wix blog": { label: "Blog Posts", showsImage: true },
+  "campaign selection": { label: "Email Marketing Campaigns", showsImage: true },
+  "pricing plans": { label: "Pricing Plans", showsImage: true },
+  "wix table reservation experience": { label: "Experiences", showsImage: true },
+  "onlineprogramsprovider": { label: "Online Programs", showsImage: true },
+  "wix events": { label: "Events", showsImage: true },
+};
+
+/** An installed, allowlisted provider. */
+export interface MentionProvider {
+  key: string;
+  label: string;
+  showsImage: boolean;
+  paging: "CURSOR" | "OFFSET" | "NONE";
+}
+
+/** The allowlisted subset of what the site has installed, one entry per
+ *  category label (two installed apps can register the same category — the
+ *  first wins, as natively), sorted by label so the order does not depend on
+ *  the order the service happened to list them in. */
+export function allowlisted(
+  installed: Array<{ key: string; name: string; paging: "CURSOR" | "OFFSET" | "NONE" }>,
+): MentionProvider[] {
+  const seen = new Set<string>();
+  const out: MentionProvider[] = [];
+  for (const p of installed) {
+    const cat = MENTION_CATALOG[p.name.toLowerCase()];
+    if (!cat || seen.has(cat.label)) continue;
+    seen.add(cat.label);
+    out.push({ key: p.key, label: cat.label, showsImage: cat.showsImage, paging: p.paging });
+  }
+  return out.sort((a, b) => (a.label < b.label ? -1 : a.label > b.label ? 1 : 0));
+}
+
+/** One item row in the picker. */
+export interface MentionItemRow {
+  /** Row id — positional, because an item id is the service's and is not
+   *  guaranteed to be safe inside a component id. */
+  id: string;
+  /** The item id the reference names, and what a tap on the row carries: a
+   *  newer search can re-order the rows between paint and tap, so a
+   *  positional id would pick the wrong item. */
+  itemId: string;
+  title: string;
+  subtitle: string;
+  subtitleHidden: boolean;
+  pictureUrl: string;
+  pictureHidden: boolean;
+}
+
+/** A pick, waiting above the composer to be sent with the next turn. */
+export interface MentionPick {
+  /** Chip id, minted by the core. */
+  id: string;
+  /** Provider + item identify a pick; an item id is only unique within its
+   *  provider, so picking the same item twice keeps one chip. */
+  providerKey: string;
+  itemId: string;
+  /** The item's name. */
+  label: string;
+  /** The category's English label — what the reference's `data.type` carries. */
+  category: string;
+}
+
+/** Everything the picker knows. Kept by the chat core OUTSIDE the reducer
+ *  state — see `mentionModel` there for why. */
+export interface MentionModel {
+  open: boolean;
+  /** The business the providers and picks belong to. A switch drops both: a
+   *  product of the previous business is not something to send to this one. */
+  site: string;
+  /** Null until listed for `site`. */
+  providers: MentionProvider[] | null;
+  providersLoading: boolean;
+  providersFailed: string;
+  /** The provider being browsed, or null at the category level. */
+  provider: MentionProvider | null;
+  query: string;
+  items: MentionItemRow[];
+  itemsLoading: boolean;
+  itemsFailed: string;
+  picks: MentionPick[];
+}
+
+export function emptyMentionModel(): MentionModel {
+  return {
+    open: false, site: "", providers: null, providersLoading: false, providersFailed: "",
+    provider: null, query: "", items: [], itemsLoading: false, itemsFailed: "", picks: [],
+  };
+}
+
+/** Worker-emitted mention copy. */
+export interface MentionLabels {
+  /** Panel title at the category level. */
+  title: string;
+  /** No allowlisted provider is installed. */
+  noProviders: string;
+  /** A provider answered with nothing (or nothing matching). */
+  noItems: string;
+  /** The provider list could not be fetched. */
+  providersFailed: string;
+  /** This host cannot reach the provider service at all (the web preview). */
+  unavailable: string;
+}
+
+/** The flat shape the descriptor binds, in the polarity the renderers want
+ *  (`hiddenPath` HIDES when true). Derived from the model and nothing else. */
+export interface MentionView {
+  /** The whole panel. */
+  hidden: boolean;
+  /** The "@ Mention" entry control. Hidden while the panel is open — one way
+   *  in, one way out. */
+  openHidden: boolean;
+  title: string;
+  backHidden: boolean;
+  providers: Array<{ id: string; key: string; label: string }>;
+  providersHidden: boolean;
+  /** The search field + item list (the second level). */
+  itemsHidden: boolean;
+  items: MentionItemRow[];
+  loadingHidden: boolean;
+  error: string;
+  errorHidden: boolean;
+  empty: string;
+  emptyHidden: boolean;
+  /** The picks, as chips above the composer. */
+  chips: Array<{ id: string; label: string }>;
+  chipsHidden: boolean;
+}
+
+export function mentionView(m: MentionModel, labels: MentionLabels): MentionView {
+  const atItems = !!m.provider;
+  const loading = atItems ? m.itemsLoading : m.providersLoading;
+  const error = atItems ? m.itemsFailed : m.providersFailed;
+  const providers = m.providers ?? [];
+  // "Nothing here" is only said once an answer has actually come back — a
+  // list still loading, or one that failed, is not an empty one.
+  const empty = !m.open || loading || error ? ""
+    : atItems ? (m.items.length ? "" : labels.noItems)
+    : (m.providers !== null && providers.length === 0 ? labels.noProviders : "");
+  return {
+    hidden: !m.open,
+    openHidden: m.open,
+    title: atItems ? m.provider!.label : labels.title,
+    backHidden: !atItems,
+    providers: providers.map((p) => ({ id: p.key, key: p.key, label: p.label })),
+    providersHidden: !m.open || atItems || providers.length === 0,
+    itemsHidden: !m.open || !atItems,
+    items: atItems ? m.items : [],
+    loadingHidden: !m.open || !loading,
+    error: m.open ? error : "",
+    errorHidden: !m.open || !error,
+    empty,
+    emptyHidden: !empty,
+    chips: m.picks.map((p) => ({ id: p.id, label: p.label })),
+    chipsHidden: m.picks.length === 0,
+  };
+}
+
+/** How many item rows one query asks for — the native page size. */
+export const MENTION_PAGE_SIZE = 30;

package/templates/owner-lite/tier5-src/himi-owner-lite-aria/index.ts

@@ -201,6 +201,18 @@ const core = createAriaChat({
     // English. Says no "sign in": the owner already is, and the missing piece is
     // the app's binding, so there is no action for them to take.
     unavailable: () => copyParam("ownerAria.unavailable", "Aria can't reach your Wix account from here."),
+    // The mention picker. Through copyParam for the same reason as the rest.
+    // The CATEGORY labels are not here, deliberately: they are what the
+    // reference's `data.type` carries to the model, so they stay English.
+    mentionTitle: () => copyParam("ownerAria.mention.title", "Mention"),
+    mentionNoProviders: () => copyParam("ownerAria.mention.noProviders", "There's nothing on this site to mention yet."),
+    mentionNoItems: () => copyParam("ownerAria.mention.noItems", "Nothing found."),
+    mentionFailed: () => copyParam("ownerAria.mention.failed", "Couldn't load what you can mention."),
+    mentionUnavailable: () => copyParam("ownerAria.mention.unavailable", "Mentions aren't available here."),
+    // Takes the CATEGORY label, which stays English (see above) — only the
+    // sentence around it is localized.
+    mentionItemsFailed: (category: string) =>
+      copyTemplate("ownerAria.mention.itemsFailed", "Couldn't load {category}.", { category }),
     attachUploading: () => copyParam("ownerAria.attach.uploading", "Uploading…"),
     attachFailed: () => copyParam("ownerAria.attach.failed", "Couldn't upload"),
     attachTooMany: (max) => copyTemplate("ownerAria.attach.tooMany", "You can attach up to {max} photos.", { max }),
@@ -281,6 +293,13 @@ const svc = defineService<AriaChatState, {
   widgetPick: (s: AriaChatState, arg?: AriaActionArg) => AriaChatState;
   widgetQuery: (s: AriaChatState, arg?: AriaActionArg) => AriaChatState;
   widgetAnswer: (s: AriaChatState, arg?: AriaActionArg) => AriaChatState;
+  mentionOpen: (s: AriaChatState) => Promise<AriaChatState | undefined>;
+  mentionClose: (s: AriaChatState) => AriaChatState;
+  mentionBack: (s: AriaChatState) => AriaChatState;
+  mentionProvider: (s: AriaChatState, arg?: AriaActionArg) => Promise<AriaChatState | undefined>;
+  mentionQuery: (s: AriaChatState, arg?: AriaActionArg) => Promise<AriaChatState | undefined>;
+  mentionPick: (s: AriaChatState, arg?: AriaActionArg) => AriaChatState;
+  mentionRemove: (s: AriaChatState, arg?: AriaActionArg) => AriaChatState;
   attach: (s: AriaChatState, arg?: AriaActionArg) => Promise<AriaChatState>;
   attachmentSettled: (s: AriaChatState, arg?: AriaActionArg) => AriaChatState;
   removeAttachment: (s: AriaChatState, arg?: AriaActionArg) => AriaChatState;
@@ -321,6 +340,16 @@ const svc = defineService<AriaChatState, {
     widgetPick: core.widgetPick,
     widgetQuery: core.widgetQuery,
     widgetAnswer: core.widgetAnswer,
+    // Mentions: the "@ Mention" control, the two-level picker and the
+    // chips above the composer. Every one is named by the descriptor, so every
+    // one has to be exported here — see the note on the picker family above.
+    mentionOpen: core.mentionOpen,
+    mentionClose: core.mentionClose,
+    mentionBack: core.mentionBack,
+    mentionProvider: core.mentionProvider,
+    mentionQuery: core.mentionQuery,
+    mentionPick: core.mentionPick,
+    mentionRemove: core.mentionRemove,
     // The composer's photos. `attachmentSettled` is dispatched by the upload
     // itself (see `attachments.settled` above), never by the descriptor.
     attach: core.attach,

package/templates/owner-lite/tier5-src/himi-owner-lite-ask/index.ts

@@ -53,6 +53,11 @@ interface AskState {
   results: Record<string, QueryResult>;
   /** The validated-on-arrival encoded component tree. */
   treeJson: string;
+  /** always "ready" once this worker exists. The slot's fallback keys a
+   *  FragmentSlot on it: an unresolved path (worker not hydrated yet) takes the
+   *  default loading case, so only a tree that really failed validation shows
+   *  "Can't show that answer". */
+  phase: "ready";
   /** Authored-UI visibility flags. */
   isWorking: boolean;
   notWorking: boolean;
@@ -130,6 +135,7 @@ const initialState: AskState = {
   repairs: "",
   results: {},
   treeJson: enc(STARTER),
+  phase: "ready",
   isWorking: false,
   notWorking: true,
   recents: [],

package/templates/owner-lite/tier5-src/himi-owner-lite-manage/index.ts

@@ -19,6 +19,11 @@ import { stashCopy, copyParam, copyTemplate } from '../_shared/himi-copy.js';
 import { DASHBOARD_PATHS, deriveManage, parseAreas, recentAreas, rememberArea, withMetrics, type ManageArea, type Metric } from './logic.js';
 
 interface State {
+  /** `loading` until the descriptor has delivered the areas, then
+   *  `ready`. The descriptor keys a FragmentSlot on it whose DEFAULT case is the
+   *  skeleton, so an unresolved path (worker not booted yet) is loading too —
+   *  never the filtered-empty "No matching business areas" state. */
+  status: 'loading' | 'ready';
   areas: ManageArea[];
   results: ManageArea[];
   sections: Array<{ id: string; label: string; count: string; areas: ManageArea[] }>;
@@ -37,6 +42,17 @@ interface State {
 }
 
 const PAGE = 50;
+
+/** The "All" chip label — ONE function for the initial state and every derive
+ *  after load, so the chip never changes text when the areas arrive. The copy
+ *  pack only reaches the worker with onAppear's `load`, after boot, so the
+ *  descriptor also bakes the pack's label into the screen input (present at
+ *  boot); the stashed pack wins once it exists, and both pass the same trim. */
+function allLabel(): string {
+  const input = (globalThis as { himalaya?: { input?: Record<string, unknown> } }).himalaya?.input?.allLabel;
+  const bootLabel = typeof input === 'string' && input.trim() ? input : 'All';
+  return copyParam('ownerManage.all', bootLabel).trim() || 'All';
+}
 const read = (arg: unknown) => arg && typeof arg === 'object' ? arg as Record<string, unknown> : {};
 const str = (arg: unknown, field: string) => String(read(arg)[field] ?? '');
 const value = (record: unknown, path: string): unknown => path.split('.').reduce<unknown>((current, key) =>
@@ -168,13 +184,38 @@ function derive(state: State, areas = state.areas): State {
     state.query,
     state.group,
     copyParam('ownerManage.areas', 'business areas'),
-    copyParam('ownerManage.all', 'All'),
+    allLabel(),
   );
   const recents = recentAreas(recentIds, areas);
-  return { ...state, ...next, recents, hasRecents: recents.length > 0, noRecents: recents.length === 0 };
+  // "No matching" is a statement about a filter over KNOWN areas. Before the
+  // areas arrive — or when this app provisions none at all — there is nothing a
+  // filter could have excluded, so "Clear filters" would be a lie.
+  const noEmpty = next.noEmpty || state.status !== 'ready' || areas.length === 0;
+  return { ...state, ...next, noEmpty, recents, hasRecents: recents.length > 0, noRecents: recents.length === 0 };
 }
 
+// Loads are not serialized: on a warm reappearance the host's bare refresh and
+// the descriptor's onAppear can both be in flight, and whichever settles last
+// replaces the whole state. Each load takes a generation, and a superseded one
+// never applies its own stale snapshot: it returns the newest load's result if
+// that has settled, and otherwise the newest load's still-loading start state.
+let loadGeneration = 0;
+let newestStarted: State | undefined;
+let newestSettled: { generation: number; state: State } | undefined;
+
 async function loadMetrics(state: State): Promise<State> {
+  const generation = ++loadGeneration;
+  newestStarted = state;
+  const settled = await readMetrics(state);
+  if (generation === loadGeneration) {
+    newestSettled = { generation, state: settled };
+    return settled;
+  }
+  if (newestSettled && newestSettled.generation === loadGeneration) return newestSettled.state;
+  return newestStarted ?? settled;
+}
+
+async function readMetrics(state: State): Promise<State> {
   const keys = [...new Set(state.areas.map(area => area.metricKey))];
   const settled = await Promise.allSettled(keys.map(metricFor));
   const metrics: Record<string, Metric | undefined> = {};
@@ -220,17 +261,33 @@ const svc = defineService<State, {
   handoff: (s: State, arg?: unknown) => Promise<State>;
 }>('himiOwnerLiteManage', {
   state: {
-    areas: [], results: [], sections: [], recents: [], query: '', group: 'all', groups: [], summary: '', noEmpty: false,
+    status: 'loading',
+    areas: [], results: [], sections: [], recents: [], query: '', group: 'all',
+    // 'All' is always a valid filter, so the chip row paints from the first frame
+    // instead of appearing (and shifting the layout) when the areas arrive.
+    groups: [{ id: 'all', label: allLabel() }], summary: '', noEmpty: true,
     hasRecents: false, noRecents: true, isLoading: true, notLoading: false, summaryNote: '', handoffError: '',
   },
   actions: {
     load: async (state, arg) => {
       stashCopy(arg);
+      // A `load` with no areas comes from the host, not the descriptor: the
+      // warm-worker refresh lifecycle calls it bare. Before the areas are known
+      // it must not settle (that derived "0 business areas" and painted the
+      // filtered-empty state); once they are, it re-reads their summaries.
+      if (!('areas' in read(arg))) {
+        return state.status === 'ready'
+          ? loadMetrics(derive({ ...state, isLoading: true, notLoading: false, summaryNote: '', handoffError: '' }))
+          : state;
+      }
       const parsed = (() => { try { return JSON.parse(str(arg, 'areas') || '[]'); } catch { return []; } })();
       const areas = parseAreas(parsed);
-      return loadMetrics(derive({ ...state, areas, isLoading: true, notLoading: false, summaryNote: '', handoffError: '' }, areas));
+      return loadMetrics(derive({ ...state, status: 'ready', areas, isLoading: true, notLoading: false, summaryNote: '', handoffError: '' }, areas));
     },
-    refresh: async state => loadMetrics(derive({ ...state, isLoading: true, notLoading: false, summaryNote: '', handoffError: '' })),
+    // Refresh re-reads summaries for KNOWN areas. Before the descriptor has
+    // delivered them there is nothing to refresh, and settling here would open
+    // the skeleton gate over an empty hub.
+    refresh: async state => state.status !== 'ready' ? state : loadMetrics(derive({ ...state, isLoading: true, notLoading: false, summaryNote: '', handoffError: '' })),
     search: (state, arg) => derive({ ...state, query: str(arg, 'value').slice(0, 256) }),
     filter: (state, arg) => {
       const ids = read(arg).selectedIds;
@@ -262,5 +319,6 @@ const svc = defineService<State, {
   },
 });
 
-svc.load();
+// No boot `svc.load()`: the areas ride the descriptor's onAppear, and a boot load
+// without them painted "0 business areas" / "No matching" before they arrived.
 export { svc };