@ezychat/web 0.1.56 → 0.1.57

package/dist-lib/types/api/ai.d.ts

@@ -92,7 +92,7 @@ export declare function useAiTry(): import("@tanstack/react-query").UseMutationR
     action: "answer" | "ask_resolution" | "resolve" | "handoff" | "no_reply" | null;
     model: string | null;
     error: string | null;
-    handoffReason?: "asked_for_human" | "missing_facts" | "sensitive" | "needs_action" | "business_rule" | "unsupported_message" | "ai_unavailable" | "lookup_failed" | "confidential_leak" | null | undefined;
+    handoffReason?: "asked_for_human" | "missing_facts" | "sensitive" | "needs_action" | "business_rule" | "unsupported_message" | "ai_unavailable" | "lookup_failed" | "confidential_leak" | "window_closed" | null | undefined;
     lookups?: {
         title: string;
         sourceLabel: string;

package/dist-lib/types/api/inbox-mutations.d.ts

@@ -17,6 +17,15 @@ export declare function useCreateInbox(): import("@tanstack/react-query").UseMut
     };
     removed: boolean;
     aiAgentId: number | null;
+    type: string;
+    capabilities: {
+        qrLink: boolean;
+        history: boolean;
+        groups: boolean;
+        replyWindowHours: number | null;
+        templates: boolean;
+        needsPublicUrl: boolean;
+    };
     memberIds?: number[] | undefined;
 }, Error, {
     name: string;
@@ -40,6 +49,15 @@ export declare function useUpdateInbox(): import("@tanstack/react-query").UseMut
     };
     removed: boolean;
     aiAgentId: number | null;
+    type: string;
+    capabilities: {
+        qrLink: boolean;
+        history: boolean;
+        groups: boolean;
+        replyWindowHours: number | null;
+        templates: boolean;
+        needsPublicUrl: boolean;
+    };
     memberIds?: number[] | undefined;
 }, Error, {
     id: number;

package/dist-lib/types/api/queries.d.ts

@@ -140,6 +140,7 @@ export declare function useChats(filters: ChatFilters): import("@tanstack/react-
         assignedTo: number | null;
         updatedAt: number;
         phone: string | null;
+        lastInboundAt: number | null;
         tags?: string[] | undefined;
         whatsappName?: string | null | undefined;
     }[];
@@ -160,6 +161,7 @@ export declare function useChat(jid: string | null | undefined): import("@tansta
         assignedTo: number | null;
         updatedAt: number;
         phone: string | null;
+        lastInboundAt: number | null;
         tags?: string[] | undefined;
         whatsappName?: string | null | undefined;
     };
@@ -207,6 +209,10 @@ export declare function useMessages(jid: string | null | undefined): import("@ta
             senderName?: string | null | undefined;
         }[];
         voiceNote?: boolean | undefined;
+        template?: {
+            name: string;
+            language: string;
+        } | null | undefined;
         viaAssistant?: boolean | undefined;
         transcript?: string | null | undefined;
         transcriptLang?: string | null | undefined;
@@ -254,6 +260,10 @@ export declare function useSendText(jid: string): import("@tanstack/react-query"
         senderName?: string | null | undefined;
     }[];
     voiceNote?: boolean | undefined;
+    template?: {
+        name: string;
+        language: string;
+    } | null | undefined;
     viaAssistant?: boolean | undefined;
     transcript?: string | null | undefined;
     transcriptLang?: string | null | undefined;
@@ -301,6 +311,10 @@ export declare function useSendMedia(jid: string): import("@tanstack/react-query
         senderName?: string | null | undefined;
     }[];
     voiceNote?: boolean | undefined;
+    template?: {
+        name: string;
+        language: string;
+    } | null | undefined;
     viaAssistant?: boolean | undefined;
     transcript?: string | null | undefined;
     transcriptLang?: string | null | undefined;
@@ -337,6 +351,10 @@ export declare function useRetryMessage(): import("@tanstack/react-query").UseMu
         senderName?: string | null | undefined;
     }[];
     voiceNote?: boolean | undefined;
+    template?: {
+        name: string;
+        language: string;
+    } | null | undefined;
     viaAssistant?: boolean | undefined;
     transcript?: string | null | undefined;
     transcriptLang?: string | null | undefined;
@@ -379,6 +397,7 @@ export declare function usePatchChat(jid: string): import("@tanstack/react-query
     assignedTo: number | null;
     updatedAt: number;
     phone: string | null;
+    lastInboundAt: number | null;
     tags?: string[] | undefined;
     whatsappName?: string | null | undefined;
 }, Error, {
@@ -621,6 +640,15 @@ export declare function useInboxes(opts?: {
         };
         removed: boolean;
         aiAgentId: number | null;
+        type: string;
+        capabilities: {
+            qrLink: boolean;
+            history: boolean;
+            groups: boolean;
+            replyWindowHours: number | null;
+            templates: boolean;
+            needsPublicUrl: boolean;
+        };
         memberIds?: number[] | undefined;
     }[];
     maxInboxes: number;

package/dist-lib/types/api/templates.d.ts

@@ -0,0 +1,75 @@
+export declare const templatesKey: (inboxId: number) => readonly ["templates", number];
+/** Approved message templates of a Business API inbox (`GET /api/inboxes/:id/templates`). */
+export declare function useTemplates(inboxId: number, enabled: boolean): import("@tanstack/react-query").UseQueryResult<{
+    templates: {
+        name: string;
+        language: string;
+        category: "utility" | "marketing" | "authentication";
+        body: string;
+        variables: number;
+        examples: string[];
+        header: "text" | "image" | "video" | "document" | null;
+        buttons: boolean;
+        sendable: boolean;
+    }[];
+}, Error>;
+/** Sync: reads the templates again from WhatsApp (`?refresh=1`) and replaces the cached list. */
+export declare function useSyncTemplates(inboxId: number): import("@tanstack/react-query").UseMutationResult<{
+    templates: {
+        name: string;
+        language: string;
+        category: "utility" | "marketing" | "authentication";
+        body: string;
+        variables: number;
+        examples: string[];
+        header: "text" | "image" | "video" | "document" | null;
+        buttons: boolean;
+        sendable: boolean;
+    }[];
+}, Error, void, unknown>;
+/** Sends an approved template into a chat (also after its reply window closed). */
+export declare function useSendTemplate(jid: string): import("@tanstack/react-query").UseMutationResult<{
+    id: string;
+    chatJid: string;
+    senderJid: string | null;
+    senderName: string | null;
+    fromMe: boolean;
+    sentByUserId: number | null;
+    type: "text" | "image" | "video" | "audio" | "document" | "sticker" | "system";
+    body: string | null;
+    mediaUrl: string | null;
+    mediaMime: string | null;
+    mediaName: string | null;
+    mediaStatus: "none" | "pending" | "failed" | "ok";
+    quotedId: string | null;
+    status: "pending" | "failed" | "sent" | "delivered" | "read";
+    error: string | null;
+    timestamp: number;
+    clientId: string | null;
+    reactions: {
+        emoji: string;
+        senderJid: string | null;
+        fromMe: boolean;
+        at: number;
+        sentByUserId: number | null;
+        senderName?: string | null | undefined;
+    }[];
+    voiceNote?: boolean | undefined;
+    template?: {
+        name: string;
+        language: string;
+    } | null | undefined;
+    viaAssistant?: boolean | undefined;
+    transcript?: string | null | undefined;
+    transcriptLang?: string | null | undefined;
+    transcriptStatus?: "pending" | "failed" | "ok" | "too_long" | "unsupported" | "skipped" | null | undefined;
+    senderProfile?: {
+        chatJid: string;
+        name: string;
+    } | null | undefined;
+}, Error, {
+    name: string;
+    language: string;
+    clientId: string;
+    params?: string[] | undefined;
+}, unknown>;

package/dist-lib/types/extensions/inbox-types.d.ts

@@ -0,0 +1,5 @@
+import type { WebExtension, WebExtensionInboxType } from './types';
+/** Every extension inbox type in extension order; the first extension wins a duplicate type id. */
+export declare function inboxTypesOf(extensions: readonly WebExtension[]): WebExtensionInboxType[];
+/** Inbox connection types the extensions add (none in Lite). */
+export declare function useInboxTypes(): readonly WebExtensionInboxType[];

package/dist-lib/types/extensions/index.d.ts

@@ -2,4 +2,5 @@ export * from './types';
 export { WebExtensionsProvider, useWebExtensions } from './context';
 export { registerExtensionCatalogs, useExtensionTranslation, type ExtensionTranslate, } from './i18n';
 export { ExtensionBoundary, extensionRoutes } from './routes';
+export { inboxTypesOf, useInboxTypes } from './inbox-types';
 export { AgentSectionProvider, useAgentSection, type AgentSectionInfo } from './agent-section';

package/dist-lib/types/extensions/types.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentType, ReactNode } from 'react';
-import { type Locale } from '@ezychat/shared';
+import { type Inbox, type Locale } from '@ezychat/shared';
 /**
  * Web extension API: lets another product build (e.g. Enterprise) add UI without forking Lite.
  *
@@ -88,6 +88,57 @@ export interface WebExtensionLockScreenProps {
     recheck: () => void;
 }
 export type WebExtensionCatalogs = Partial<Record<Locale, Record<string, string>>>;
+/** The draft of the Add inbox dialog that a type's CreateForm receives. */
+export interface WebExtensionInboxDraft {
+    name: string;
+    memberIds: number[];
+    aiAgentId: number | null;
+}
+/**
+ * The screens of an inbox connection type an extension adds on the server (`ServerExtension.inboxTypes`),
+ * e.g. the WhatsApp Business API. The core shows a type choice in Add inbox (linked phone first) and in
+ * the setup wizard's WhatsApp step, and places these components; the type's own routes do the work.
+ */
+export interface WebExtensionInboxType {
+    /** The server inbox type id (`Inbox.type`). */
+    type: string;
+    /** Catalog keys (`ext.<name>.…`) of the choice card. */
+    labelKey: string;
+    descriptionKey: string;
+    icon?: ComponentType<{
+        className?: string;
+        'aria-hidden'?: boolean;
+    }>;
+    /**
+     * Add inbox, after the core's name/members/AI agent fields: collects the type's details, creates the
+     * inbox through the extension's route, then calls `onCreated`. `validate()` checks the core fields
+     * first (shows their errors) and says whether they are valid.
+     */
+    CreateForm: ComponentType<{
+        draft: WebExtensionInboxDraft;
+        validate: () => boolean;
+        onCreated: (inbox: Inbox) => void;
+    }>;
+    /** Rows under an inbox of this type on its Admin → Inboxes card. */
+    CardDetails?: ComponentType<{
+        inbox: Inbox;
+    }>;
+    /** Edit dialog section for an inbox of this type (details, replace credentials, switch back). */
+    EditSection?: ComponentType<{
+        inbox: Inbox;
+        onChanged: () => void;
+    }>;
+    /** Edit dialog of a linked-phone inbox: the flow that moves it to this type. */
+    SwitchFromPhone?: ComponentType<{
+        inbox: Inbox;
+        onChanged: () => void;
+        onCancel: () => void;
+    }>;
+    /** Setup wizard WhatsApp step: connects inbox 1 with this type instead of the QR scan. */
+    SetupForm?: ComponentType<{
+        onConnected: () => void;
+    }>;
+}
 export interface WebExtension {
     /** Lowercase id, 2–32 characters: `/^[a-z][a-z0-9-]{1,31}$/`; not `lite` or `core`. */
     name: string;
@@ -99,6 +150,8 @@ export interface WebExtension {
     banners?: ComponentType[];
     /** Full-page screen while access is closed; the first extension that has one wins. */
     lockScreen?: ComponentType<WebExtensionLockScreenProps>;
+    /** Inbox connection types (Admin → Inboxes, setup wizard); the first extension wins a duplicate. */
+    inboxTypes?: WebExtensionInboxType[];
     catalogs?: WebExtensionCatalogs;
 }
 export declare const EXTENSION_NAME_PATTERN: RegExp;

package/dist-lib/types/i18n/resources.d.ts

@@ -274,6 +274,9 @@ export declare const enResources: {
                 step3: string;
                 disclaimer: string;
                 skip: string;
+                choice: string;
+                choicePhone: string;
+                choicePhoneHint: string;
             };
             ai: {
                 title: string;
@@ -558,6 +561,7 @@ export declare const enResources: {
                 lookup_failed: string;
                 business_rule: string;
                 confidential_leak: string;
+                window_closed: string;
             };
             resolved: string;
             reopenedByMessage: string;
@@ -622,6 +626,7 @@ export declare const enResources: {
                 remove: string;
                 fromTeammateUnknown: string;
             };
+            template: string;
         };
         media: {
             types: {
@@ -851,6 +856,44 @@ export declare const enResources: {
             add: string;
             hide: string;
         };
+        window: {
+            leftHours: string;
+            leftMinutes: string;
+            explain: string;
+            closedTitle: string;
+            closedBody: string;
+            closedShort: string;
+            sendTemplate: string;
+            sent: string;
+            dialogTitle: string;
+            dialogDescription: string;
+            loading: string;
+            loadFailed: string;
+            choose: string;
+            values: string;
+            variable: string;
+            required: string;
+            preview: string;
+            send: string;
+            marketingNote: string;
+            category: {
+                utility: string;
+                marketing: string;
+                authentication: string;
+            };
+            unsupported: {
+                image: string;
+                document: string;
+                video: string;
+                buttons: string;
+                other: string;
+            };
+            emptyTitle: string;
+            emptyBody: string;
+            manage: string;
+            sync: string;
+            synced: string;
+        };
     };
     admin: {
         title: string;
@@ -2151,6 +2194,7 @@ export declare const enResources: {
             emptyTitle: string;
             emptyBody: string;
             description: string;
+            descriptionTypes: string;
             edit: string;
             remove: string;
             status: string;
@@ -2205,6 +2249,15 @@ export declare const enResources: {
             aiAgentMove: string;
             aiAgentReplace: string;
             aiAgentRemove: string;
+            typeField: string;
+            typePhoneHint: string;
+            typeOther: string;
+            dialogDescriptionOther: string;
+            connectionType: string;
+            switchTo: string;
+            removeBodyOther: string;
+            aiWindowNote: string;
+            createdOther: string;
         };
     };
     errors: {

package/dist-lib/types/inbox/ChatListItem.d.ts

@@ -8,8 +8,10 @@ export interface ChatListItemProps {
     assignedToMe?: boolean;
     /** The chat's inbox, only while the user sees two or more inboxes. */
     inbox?: Pick<Inbox, 'name' | 'tone'>;
+    /** The chat's reply window has closed (WhatsApp Business API): only a template may be sent. */
+    windowClosed?: boolean;
 }
 export declare function GroupIcon({ className }: {
     className?: string;
 }): import("react").JSX.Element;
-export declare function ChatListItem({ chat, active, assigneeName, assignedToMe, inbox, }: ChatListItemProps): import("react").JSX.Element;
+export declare function ChatListItem({ chat, active, assigneeName, assignedToMe, inbox, windowClosed, }: ChatListItemProps): import("react").JSX.Element;

package/dist-lib/types/inbox/ReplyWindow.d.ts

@@ -0,0 +1,25 @@
+/** Meta's page where a WhatsApp Business Account creates and manages its message templates. */
+export declare const TEMPLATES_MANAGER_URL = "https://business.facebook.com/wa/manage/message-templates/";
+/** The 24-hour customer-service window of a Business API chat: a quiet line above the composer. */
+export declare function ReplyWindowNote({ lastInboundAt, windowHours, }: Readonly<{
+    lastInboundAt: number | null;
+    windowHours: number;
+}>): import("react").JSX.Element | null;
+/** Replaces the composer once the reply window has closed: only an approved template may go. */
+export declare function WindowClosedPanel({ jid, inboxId, customerName, disabled, }: Readonly<{
+    jid: string;
+    inboxId: number;
+    customerName: string;
+    /** WhatsApp is offline: nothing can be sent. */
+    disabled?: boolean;
+}>): import("react").JSX.Element;
+/** The body with each {{n}} replaced by its value; an empty value keeps its placeholder. */
+export declare function fillTemplate(body: string, values: readonly string[]): string;
+/** Pick an approved template, fill its variables and see the message before sending it. */
+export declare function TemplateDialog({ open, jid, inboxId, customerName, onClose, }: Readonly<{
+    open: boolean;
+    jid: string;
+    inboxId: number;
+    customerName: string;
+    onClose(): void;
+}>): import("react").JSX.Element;

package/dist-lib/types/inbox/reply-window.d.ts

@@ -0,0 +1,24 @@
+import { type Inbox, type InboxCapabilities } from '@ezychat/shared';
+/**
+ * What an inbox's connection can do. An older server sends no capabilities: such an inbox is a
+ * linked phone (QR scan, no reply window).
+ */
+export declare function inboxCapabilities(inbox: Partial<Pick<Inbox, 'capabilities'>>): InboxCapabilities;
+/** The inbox's connection type; an older server sends none (linked phone). */
+export declare function inboxTypeOf(inbox: Partial<Pick<Inbox, 'type'>>): string;
+/**
+ * Milliseconds left in a chat's reply window: `null` when its inbox has no window (linked phone),
+ * `0` once it has closed or before the customer ever wrote (only a template may be sent then).
+ */
+export declare function replyWindowLeft(lastInboundAt: number | null | undefined, windowHours: number | null | undefined, now: number): number | null;
+/** True in the last hour of an open window (the note turns to the warning tone). */
+export declare function replyWindowEnding(left: number): boolean;
+/** The current time, updated every `intervalMs` (the window labels tick each minute). */
+export declare function useNow(intervalMs?: number): number;
+/** The reply window hours of a chat's inbox (removed inboxes included), or null without one. */
+export declare function useReplyWindowHours(): (inboxId: number) => number | null;
+/**
+ * Whether a chat's reply window is closed (`null`: its inbox has no window). Re-renders only when
+ * the window closes, not every minute, so a whole conversation is not redrawn while it ticks.
+ */
+export declare function useWindowClosed(lastInboundAt: number | null | undefined, windowHours: number | null | undefined): boolean | null;

package/dist-lib/types/index.d.ts

@@ -3,7 +3,7 @@
  * without forking Lite or deep-importing its modules.
  */
 export { createInboxApp, type CreateInboxAppOptions } from './create-app';
-export { EXTENSION_NAME_PATTERN, WEB_EXTENSION_ADMIN_SECTIONS, WebExtensionError, extensionKeyPrefix, extensionPath, useAgentSection, useExtensionTranslation, validateWebExtensions, type AgentSectionInfo, type ExtensionTranslate, type WebExtension, type WebExtensionAdminSection, type WebExtensionAgent, type WebExtensionAgentSection, type WebExtensionCatalogs, type WebExtensionLockScreenProps, type WebExtensionNavBadge, type WebExtensionNavItem, type WebExtensionRoute, type WebExtensionSettingsSection, } from './extensions';
+export { EXTENSION_NAME_PATTERN, WEB_EXTENSION_ADMIN_SECTIONS, WebExtensionError, extensionKeyPrefix, extensionPath, useAgentSection, useExtensionTranslation, validateWebExtensions, type AgentSectionInfo, type ExtensionTranslate, type WebExtension, type WebExtensionAdminSection, type WebExtensionAgent, type WebExtensionAgentSection, type WebExtensionCatalogs, type WebExtensionInboxDraft, type WebExtensionInboxType, type WebExtensionLockScreenProps, type WebExtensionNavBadge, type WebExtensionNavItem, type WebExtensionRoute, type WebExtensionSettingsSection, } from './extensions';
 export { useAppLinks } from './lib/app-links';
 export { LITE_APP_LINKS, type AppLinks } from './lib/links';
 export { PausedScreen } from './access/AccessGate';

package/dist-lib/types/setup/WhatsAppStepChoice.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+/**
+ * The setup wizard's WhatsApp step. With an extension inbox type that can connect inbox 1 (e.g. the
+ * WhatsApp Business API), it starts with the choice between the QR scan (default) and that type;
+ * without one (Lite) it is the QR step unchanged.
+ */
+export declare function WhatsAppStepChoice({ phoneStep, onContinue, onSkip, }: Readonly<{
+    /** The QR step (`WaLinkStep`). */
+    phoneStep: React.ReactNode;
+    onContinue(): void;
+    onSkip(): void;
+}>): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ezychat/web",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "type": "module",
   "description": "EzyChat core: the team inbox web app (React) as a library, with createInboxApp and its extension API.",
   "license": "MIT",
@@ -40,7 +40,7 @@
     "build:lib": "node ../../scripts/build-web-lib.mjs"
   },
   "dependencies": {
-    "@ezychat/shared": "0.1.56",
+    "@ezychat/shared": "0.1.57",
     "@fontsource-variable/inter": "^5.3.0",
     "@tanstack/react-query": "^5.104.5",
     "@types/react": "^19.3.0",