@ezychat/web 0.1.49 → 0.1.51

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

@@ -198,6 +198,14 @@ export declare function useMessages(jid: string | null | undefined): import("@ta
         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;
         viaAssistant?: boolean | undefined;
         transcript?: string | null | undefined;
@@ -237,6 +245,14 @@ export declare function useSendText(jid: string): import("@tanstack/react-query"
     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;
     viaAssistant?: boolean | undefined;
     transcript?: string | null | undefined;
@@ -276,6 +292,14 @@ export declare function useSendMedia(jid: string): import("@tanstack/react-query
     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;
     viaAssistant?: boolean | undefined;
     transcript?: string | null | undefined;
@@ -304,6 +328,14 @@ export declare function useRetryMessage(): import("@tanstack/react-query").UseMu
     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;
     viaAssistant?: boolean | undefined;
     transcript?: string | null | undefined;
@@ -314,6 +346,25 @@ export declare function useRetryMessage(): import("@tanstack/react-query").UseMu
         name: string;
     } | null | undefined;
 }, Error, string, unknown>;
+/**
+ * The linked number reacts to a message (`emoji` '' removes the reaction). The answer carries the
+ * message's reactions; the `message:reactions` event brings the same list to every teammate.
+ */
+export declare function useSendReaction(): import("@tanstack/react-query").UseMutationResult<{
+    messageId: string;
+    reactions: {
+        emoji: string;
+        senderJid: string | null;
+        fromMe: boolean;
+        at: number;
+        sentByUserId: number | null;
+        senderName?: string | null | undefined;
+    }[];
+}, Error, {
+    chatJid: string;
+    messageId: string;
+    emoji: string;
+}, unknown>;
 export declare function usePatchChat(jid: string): import("@tanstack/react-query").UseMutationResult<{
     jid: string;
     inboxId: number;

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

@@ -580,6 +580,24 @@ export declare const enResources: {
             };
             reply: string;
             viaAssistant: string;
+            reactions: {
+                label: string;
+                title: string;
+                fromPhone: string;
+                add: string;
+                reactWith: string;
+                more: string;
+                back: string;
+                removeHint: string;
+                removeYours: string;
+                replacesTeammate: string;
+                notConnected: string;
+                notSent: string;
+                fromYou: string;
+                fromTeammate: string;
+                remove: string;
+                fromTeammateUnknown: string;
+            };
         };
         media: {
             types: {
@@ -712,6 +730,7 @@ export declare const enResources: {
             cancel: string;
             saveFailed: string;
             noName: string;
+            nameFromWhatsapp: string;
             whatsappName: string;
             updatedBy: string;
             updated: string;
@@ -1826,6 +1845,11 @@ export declare const enResources: {
                 noFreeInbox: string;
                 addInbox: string;
                 createNext: string;
+                typeTitle: string;
+                typeHint: string;
+                typeChange: string;
+                typeEditRole: string;
+                typeOwnTexts: string;
             };
             presets: {
                 sales: string;

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

@@ -13,6 +13,10 @@ export interface MessageBubbleProps {
     retrying?: boolean;
     /** Start a reply that quotes this message (hover button, swipe right or long-press on touch). */
     onReply?(m: Message): void;
+    /** React as the linked number ('' removes): 🙂 button, or press and hold on touch. */
+    onReact?(m: Message, emoji: string): void;
+    /** Why reacting is not possible now (WhatsApp not connected): the bar shows it, disabled. */
+    reactDisabledReason?: string | null;
     onMediaLoad?(): void;
     /** Team directory, for "Updated by" in a group sender's profile popover. */
     directory?: Directory;
@@ -28,4 +32,4 @@ export declare function quotedPreview(q: Message, t: TFunction<'inbox'>): string
 export declare function StatusTicks({ status }: {
     status: Message['status'];
 }): React.JSX.Element;
-export declare function MessageBubble({ message: m, showSender, outboundLabel, quoted, onRetry, retrying, onMediaLoad, directory, onReply, contactName, }: MessageBubbleProps): React.JSX.Element;
+export declare function MessageBubble({ message: m, showSender, outboundLabel, quoted, onRetry, retrying, onMediaLoad, directory, onReply, onReact, reactDisabledReason, contactName, }: MessageBubbleProps): React.JSX.Element;

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

@@ -14,8 +14,12 @@ export interface MessageListProps {
     onRetry(m: Message): void;
     retryingId: string | null;
     onReply?(m: Message): void;
+    /** React as the linked number ('' removes); offered wherever a reply is. */
+    onReact?(m: Message, emoji: string): void;
+    /** Why reacting is not possible now (WhatsApp not connected); null when it is. */
+    reactDisabledReason?: string | null;
     /** Direct chats: the customer's display name, for quotes. */
     contactName?: string;
     footer?: React.ReactNode;
 }
-export declare function MessageList({ items, messagesById, isGroup, directory, loading, hasOlder, loadingOlder, onLoadOlder, onRetry, retryingId, onReply, contactName, footer, }: MessageListProps): React.JSX.Element;
+export declare function MessageList({ items, messagesById, isGroup, directory, loading, hasOlder, loadingOlder, onLoadOlder, onRetry, retryingId, onReply, onReact, reactDisabledReason, contactName, footer, }: MessageListProps): React.JSX.Element;

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

@@ -0,0 +1,31 @@
+import type { TFunction } from 'i18next';
+import type { MessageReaction } from '@ezychat/shared';
+/** Distinct emojis shown in the badge; the popover lists every reaction. */
+export declare const BADGE_EMOJIS = 3;
+export interface ReactionGroup {
+    emoji: string;
+    reactions: MessageReaction[];
+}
+/** One group per emoji: the most used first, then the one used first. */
+export declare function groupReactions(reactions: MessageReaction[]): ReactionGroup[];
+/**
+ * Who reacted, named like the rest of the conversation: the server's name (customer profile,
+ * contact, WhatsApp name), else the direct chat's name, else the phone number. Never inferred.
+ */
+export declare function reactorName(r: MessageReaction, t: TFunction<'inbox'>, contactName?: string, teamName?: string | null): string;
+export interface ReactionBadgesProps {
+    reactions: MessageReaction[];
+    /** Outbound bubble: the badge sits under its right corner, else under the left one. */
+    out: boolean;
+    /** Direct chats: the customer's name as the header shows it. */
+    contactName?: string;
+    /** Who sent the linked number's reaction (see `reactorName`). */
+    teamName?: string | null;
+    /** Removes the linked number's reaction from the list. */
+    onRemoveMine?(): void;
+}
+/**
+ * Emoji reactions under a bubble's corner, as WhatsApp shows them: the emojis (most used first)
+ * and the total when more than one person reacted. Tap or click lists who reacted with what.
+ */
+export declare function ReactionBadges({ reactions, out, contactName, teamName, onRemoveMine, }: ReactionBadgesProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,26 @@
+/** The bar's emojis, as on WhatsApp. */
+export declare const QUICK_REACTIONS: readonly ["👍", "❤️", "😂", "😮", "😢", "🙏"];
+/** "+" opens these: common reactions in a business chat, no emoji library. */
+export declare const MORE_REACTIONS: readonly ["👍", "❤️", "😂", "😮", "😢", "🙏", "👏", "🙌", "🔥", "🎉", "💯", "✅", "👌", "🤝", "💪", "😊", "😍", "🥰", "😁", "🤣", "😅", "😉", "🤔", "😎", "😴", "😭", "😡", "😱", "🥲", "🙈", "👀", "💐", "🎂", "☕", "🍜", "🚚", "📦", "💰", "⭐", "❌"];
+export interface ReactionPickerProps {
+    /** Outbound bubble: the bar opens towards the left. */
+    out: boolean;
+    /** The linked number's current reaction to this message, '' when there is none. */
+    current: string;
+    /** The teammate who sent that reaction, when it was not the signed-in user or the phone. */
+    currentBy?: string | null;
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    /** '' removes the linked number's reaction. */
+    onReact(emoji: string): void;
+    /** Why the team cannot react now (WhatsApp is not connected), else null. */
+    disabledReason: string | null;
+    /** Touch screens open the bar by press-and-hold, so it offers Reply as well. */
+    onReply?(): void;
+}
+/**
+ * The 🙂 button next to a message and its emoji bar. WhatsApp keeps one
+ * reaction per number, so the whole team shares the linked number's reaction: a new emoji replaces
+ * it, the same emoji again removes it.
+ */
+export declare function ReactionPicker({ out, current, currentBy, open, onOpenChange, onReact, disabledReason, onReply, }: ReactionPickerProps): import("react").JSX.Element;

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

@@ -4,8 +4,10 @@ export declare const SWIPE_TRIGGER_PX = 56;
 /**
  * Touch gestures that start a reply, like WhatsApp: swipe the message right, or press and hold.
  * Mouse and pen are ignored (desktop uses the Reply button). Vertical movement keeps scrolling.
+ * With `onLongPress`, press-and-hold calls it instead (the reaction bar,
+ * which offers Reply too).
  */
-export declare function useSwipeReply(onReply: (() => void) | undefined): {
+export declare function useSwipeReply(onReply: (() => void) | undefined, onLongPress?: () => void): {
     offset: number;
     handlers: React.HTMLAttributes<HTMLElement>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ezychat/web",
-  "version": "0.1.49",
+  "version": "0.1.51",
   "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.49",
+    "@ezychat/shared": "0.1.51",
     "@fontsource-variable/inter": "^5.3.0",
     "@tanstack/react-query": "^5.104.4",
     "@types/react": "^19.3.0",